so you've decided to make a website

Great! I'm so excited for you! Making a website from scratch is super fun, but it can also be a lot of work. So in an effort to save you some time, here's some advice for starting your first site, and a few webmastery tips and tricks that I wish I'd started using earlier.

(If you already have a site, feel free to skip ahead to the actual coding tips!)

getting started

First off, this post is NOT a full guide to actually learning HTML, CSS, or JavaScript. There are already lots and lots of resources for that out there, for free, on the internet! If you're a complete and absolute beginner to coding, it might be worth it to look for some that can explain the fundamentals more in-depth, or at least read through some of the guides on w3schools.

The idea of having to learn three different coding languages at once can seem really overwhelming-- the good news is you don't actually have to. HTML is a markup language (hence the name: Hyper Text Markup Language). If you've ever used something like LaTeX to format a homework assignment or research paper, or if you've ever put bold text in a Discord message **like this**, then you have used a markup language before!

All HTML is really doing is labeling different parts of your web page, so the computer knows which things are headings, which are paragraphs, which are images, and so on. Technically, HTML is the only language necessary for creating a website (although it might look a bit plain), so it should be your focus when getting started on learning!

CSS, on the other hand, is a style sheet language. Unlike HTML, which just labels which parts of the page are which, CSS specifies how those parts should be displayed. Want all of your headings to be bright red? CSS. Want your font size to be larger or smaller? CSS. Want this one specific image to take up exactly 20% of the available space, have a dashed blue border, be aligned to the left, and display at 80% opacity? That's still all CSS.

The basics of HTML and CSS are pretty simple to pick up, and you can still make the cute, aesthetic website of your dreams with only pure HTML/CSS. So if learning JavaScript on top of that feels too overwhelming, it's totally fine to leave the JS for later (or not at all; you do you).

JavaScript is very different from HTML/CSS, since it is a programming language. While it's not as necessary to a static website as HTML/CSS, it can be super useful for adding interactivity or user input to site elements. When you're ready to branch out to programming, make sure you specifically look for JavaScript resources, not just "Java", which is a completely different language!

actually getting started

There's no real "wrong" way to learn, or to start your website, so if you want to write all of your pages from scratch yourself, more power to you! If that doesn't sound appealing, though, one of the quickest and easiest ways to get started as a new webmaster is to use a pre-made layout and edit it to suit your taste.

There are tons of free-to-use layouts on neocities and the wider web; I have a few linked on my webmaster resources page. My own site (and many others) uses the sadgrl layout builder, and petrapixels layout generator is another popular option. Ultimately it doesn't matter too much what you choose, because it's just a base for you to build your own unique site on. Personally speaking, I've probably deleted the majority of the original CSS for my layout by now, but it was still super useful to have as a starting point!

Starting with a premade layout and searching up "how to do X with css" whenever you're not sure how to change something can get you pretty far. You'll learn as you go! In general, don't be afraid to do a quick internet search whenever you get stuck during coding. I find I can answer most questions just by checking w3schools, or the MDN docs. W3schools in particular phrases things in a very easy-to-understand way.

Now that you have your new site up and running, here are my tips for coding!

1. use the developer console

The developer console is available in all major web browsers, and an incredibly useful tool for making websites. It allows you to view and edit a page's code from within your browser (edits are temporary and can be undone just by refreshing the page). You can learn more about the console's features here.

Here are some ways you can use the console:

• Quickly testing out different styling by changing the CSS rules. If you're not sure what you're going for, or struggling to get your layout just right, experimenting in the console is a lot faster than repeatedly editing your file and refreshing the page.
• Debugging JavaScript by using console.log(); this lets you print messages to the console while your script is running.
• Look at the code on other websites to see how it works. I don't advise copying large sections of other sites without permission, but examining the HTML/CSS of sites you admire is definitely helpful for learning!
• Troubleshooting with other people. It's usually much easier for me to help with others' questions when I can access all of their page's HTML/CSS.

2. comment your code

One of the best things you can do for yourself as a webmaster, especially as a beginner, is to leave comments on your code. When you're actively working on something, it's easy to feel like commenting is unnecessary. But will you remember how it works in a month? Or a year? Longer? Eventually, you'll probably thank yourself for leaving a few comments.

HTML comments are written <!-- like this --> and CSS comments /* like this */

3. edit your files locally

The built-in neocities editor can be super convenient, and takes off some of the pressure of getting started on a site for the first time. But it's actually just as easy to edit your site on your own computer! This allows you to work on your site without having to make every single experimental change public; you can wait to publish pages until they're actually finished, and won't run the risk of breaking parts of your site every time you edit. It's also just good practice to have a backup of your files outside of neocities!

All you need to write HTML files on your computer is a text editor. An IDE (integrated development environment; essentially just software designed specifically for writing code) like VS Code can be helpful if you want more features, but a regular text editor like Notepad++ also works. Make sure you're saving your work as a .html file, and then preview it by opening the file in a web browser.

If you've already started working on your site and want to switch to editing locally, neocities has a handy "download entire site" button at the bottom of the "edit site" dashboard. Clicking this downloads all of your site's files as a .zip folder, so you can open and edit them on your own computer! When you want to actually publish your changes, just upload the new file* to neocities. If it has the same name as an existing file, it will automatically overwrite the old one.

*You can upload multiple files together, but neocities reportedly has issues with uploading entire folders at once, so you may need to manually recreate any new folders.

4. use efficient css

You might be surprised at how many things can be accomplished with just pure CSS! You definitely aren't required to use all of these, but here's a few CSS tricks I wish I'd learned earlier:

• Try to keep as much of your styling as possible in your stylesheet. Using lots of inline styling will slow down your page's load time, plus it usually adds up to a lot of redundant code.
  • Make a class for anything you're going to use more than once, and remember that elements can have multiple classes!
• You can link multiple stylesheets to the same page. Maybe you have a "main" stylesheet for a group of pages, and then a secondary stylesheet that's more specific to one page. If both sheets have rules for styling the same element, the one linked second will override the first.
• You can define variables in CSS. I find this really useful for things like page color schemes: if I have an accent color that's going to be used for multiple elements, I make a variable for it. This makes keeping colors consistent a lot simpler!
• CSS combinators let you style only elements that have a specific relation to another element. For example, "aside > img {}" will style only images that are direct children of <aside>.
  • I find myself using ">" the most, but you can find a full list of combinators here.
  • See also: attribute selectors, which let you style elements with a specific attribute.
• CSS pseudo-elements let you style a specific part of an element. One of the most basic uses for this is using ::marker to style list item markers.
  • I also find ::before and ::after very useful, since they let you insert content at the beginning or end of an element. Helpful if you have a lot of <div>s with repetitive content (like the "windows" on my homepage)!
  • An explanation of the different pseudo-elements can be found here.

5. keep accessibility in mind

It's okay if your personal website doesn't meet all the Web Content Accessibility Guidelines (WCAG), especially when you're just starting out. That said, here are some simple ways to start making your site more accessible:

• Add the alt attribute to all your images. Even if an image is purely decorative, adding an empty alt="" attribute lets screenreaders know they can skip over it!
• Make your site responsive for different screen sizes. Try to avoid using absolute lengths (like px) in favor of relative ones (%, em, rem) when possible.
• Familiarize yourself with semantic HTML. Using semantic tags instead of solely divs makes your code cleaner and more accessible.
• Avoid low-contrast text and small font sizes. Consider using a site like accessibilitychecker to scan your page for accessibility concerns.

6. make a rss feed

The neocities following feed is a nice feature, but what if someone who doesn't have a neocities account still wants to know when your site updates? That's where RSS feeds come in handy; they allow anyone to follow a site through the feed reader of their choice.

Technically, neocities already auto-generates a RSS feed for every site (which can be found at https://neocities.org/site/[your username here].rss), but it's extremely bare bones: it updates the feed with a “site has been updated” message every time you edit your site, which isn't super useful for subscribers (especially if you're making a lot of small updates). Luckily, maintaining your own basic RSS feed isn't very difficult, and lets you send out more descriptive messages when you actually want to alert people that your site has been updated.

An extremely quick and easy guide to creating a feed for your site can be found at rssguide.neocities.org!

good luck & have fun

I hope some of these tips are helpful to you. Now go make a website!!!!!