<--- BACK HOME

JUMP TO:

  1. Guide
  2. Continued

Guide

How to Use

  • DISCLAIMER: I'm writing this using Safari Browser on a MacBook. I'm also writing this with Neocities in mind, as it's the only host I have experience with. Apologies if there's any issues </3
  • I'm also writing this with the assumption that the reader knows hardly anything about Neocities / HTML / CSS.
  • STEP 1 | COPY & PASTE
    1. Open up "index.html" in your editor of choice. I just use the Neocities editor. If the file doesn't exist, create a new file just titled "index.html".
    2. Copy/Paste the code below into index.html, and save.
    3. Create a new page, for example let's call it "page.html".
    4. Copy/Paste this code into your new page, and save.
    5. Make sure to replace ALL existing code within the files with the new code
    6. Create a new file titled "style.css" if it doesn't already exist.
    7. Copy/Paste this code into style.css, and of course, save.
  • STEP 2 | EDITING THE INDEX
    1. Open up "index.html" again.
    2. It's a good idea to read through the comments to understand where to start editing if you're new!
    3. Apply style.css to the page. In between the <head> tags, include the link to your style.css file.
    4. Make sure links are working the intended way. For example, if you wanted the first link on the right-side menu to go to your "page.html" subpage, the code would look a little like this:
    5. Add your own content! Replace the code between the specified <td> with your own text, images, whatever! Tutorials can be found in the "For Reference" section under "Coding Help".
  • STEP 3 | EDITING THE SUB-PAGE
    1. Open up "page.html" (or whatever your new sub-page is titled).
    2. The process is pretty much the same as Step 2 (including adding CSS!)
    3. Make sure the link going back to the index is working as intended.
    4. To replace content, make sure you delete the code only within the "REPLACE START" and "REPLACE END" comments
  • STEP 4 | UNDERSTANDING CSS
    1. In the CSS code given above in Step 1.7, there's (of course) commentary going over various aspects of how I write CSS files. To understand how this specific layout works, I reccomend reading the CSS comments in tandem with the HTML files.
    2. Proper learning resources are given in the "For Reference" section.

Continued

Adding Music

  • To add a song to the layout, copy & paste this code right under the <body> tag in index.html. To customize it or to add songs, head over to www.scmplayer.net

Code Help

  • www.w3schools.com
      Super intuitive and easy-to-learn HTML, CSS, JS, and more
  • Neocities Subreddit / Discord
      The Neocities sub-reddit has great resources, and the associated Discord server is full of people willing to help with whatever questions can't be answered on google search

Color Palette

  • #f8f8f8
  • #f0e8c8
  • #e0c898
  • #f88000
  • #d8e0d0
  • #703000
  • #a07068
Original layout from hazure03