I made some pages in HTML and CSS, now what?

How to build an indie website that grows with you

Published on January 16, 2024

Warning: Almost There but Not Quite

The post you're about to read is marked as pre-beta! While the content should be overall accurate and understandable, it was not reviewed for flow, imprecisions, typos, or accidentally-abandoned sentences.

Venturing through? Let me know your thoughts!

Table of Contents

Outgrowing HTML and CSS

After building a few HTML pages, you may start to feel that your website dreams are slowed down by repeated tasks, or that you’re looking for more fanciful interactivity than you know how to build. Your struggles might include (or look similar to) these:

First of all, congratulations! Your ambition is a sign of your growth as a website weaver. At this point, for how intimidating that sounds, you might be ready for the next step in web development: a foray into JavaScript-based tools, and (if you wish) programming.

So Many Pathways, So Little Time

First, bad news: there’s countless potential paths in front of you, which might feel confusing and overwhelming. But–good news!–every developer’s journey is unique (and rarely linear), and you’re going to be fine no matter the steps you choose to take.

In this article, we’ll discuss my favorite options:

  1. The Static Site Generation Path (my reccommendation for fannish folks)
  2. The Play Around in the Browser Path
  3. The Server Path

You can choose one of them and follow it to the end, or you can jump around as you wish. Some will find that the one that seemed most appealing doesn’t end up being their favorite. Others might find the one that didn’t turns out to be a lot of fun.

Remember: if you don’t like the choice you made, you can go back and try a different one. Not only figuring out what you don’t like is as valuable as figuring out what you do, but all these choices build upon each other. No learning is ever wasted.

NOTE: If you’re very ambitious, you might choose to start directly here, and learn HTML and CSS as you go. While some might caution you against it, as a fellow “throwing myself off the deep end” learner, I say: don’t let your dreams be dreams! For you, the Static Site Generation Path might be the right choice.

The Static Site Generation Path

Let’s say you like to produce content, a lot of content. This might look like a website with many different pages, galleries with a lot of art, or even frequent updates and improvements to your layout that need to be copy pasted on each page. Maybe you even wish to start a blog. Static Site Generators are the perfect tool to tackle these challenges.

A Static Site Generator (SSG) is a program that, rather than have you write each page of your website by hand, stitches your files together and generates those pages for you. For example, an SSG will allow you to:

In the end, an SSG will create the same HTML and CSS files you’d have written manually, without you having to repeat the same code over and over again. These days, the web (and me)‘s most darling Static Site Generator is Astro. If their homepage seems too full of jargon and overwhelming for you, don’t worry: you don’t need to understand any of those words to be able to use it.

Note: if you want to follow along my live explanation of this path, you can watch me go through it on YouTube.

Installing Astro

Here’s how to get started:

Click here to reveal the installation steps
  1. Learn how to open you Terminal (command line) and navigate to a folder: many beginners (and some experts) are nervous about using the command line to run programs. In reality, you can start using the command line without learning any command. Windows’ Terminal is called PowerShell, and you can open it in any folder by following this guide. There are similar guides for Mac or Linux.

    NOTE: if you’d really, really like to avoid using a Terminal, I suggest you go through the “Play Around in the Browser” path instead. Just know I believe in you and your ability to master the command line!

  2. Install NodeJS with Node Version Manager (NVM): NodeJS allows you to run JavaScript code on your computer (rather than in your browser). Astro, like many other program, is written in JavaScript and needs NodeJS to run. Rather than installing NodeJS directly I suggest you use NVM (Windows, others). NVM will install NodeJS for you, and allow you to switch between different versions whenever you need. It’s a handy tool that will help you later. After installing NodeJS, you can now run npm commands in your Terminal.

  3. Install (and play around with) Astro: Astro has an excellent documentation website and a friendly Discord server for when you get stuck. Currently (January 2024), the command to create your Astro website is npm create astro@latest. Open your Terminal in the folder you want to create your website in, run this command, answer some questions, and you’re done! Reopen your Terminal in the new folder (or cd into it) then run npm run dev to see your Astro website come to life.

Part 1: The Basics

From here, here’s how I suggest you approach learning how to use SSGs:

Part 2: The slightly-less Basics

At this point, if you start feeling overwhelmed by the JavaScript required, it might be worth temporarily switching to the “Play Around in the Browser” path to beef up your skills. Once you’re comfortable with these (or if you like “trials by fire”), here’s how you might proceed:

Uploading your Website

Statically Generated websites can be easily published to websites hosts like Neocities. After all, once you run npm run build, the content within your dist/ folder will be the same HTML and CSS pages you’d have written by hand! If you want to step up your game even further, you can learn how to use Git + GitHub to automatically upload your website to the web whenever you create a new version.

The Play Around in the Browser Path

Maybe you want to try JavaScript, but aren’t yet ready to commit to all that comes with a more complex setup, like the one for static site generation. Maybe you wish to build experiences that fit within a single page, but require more interactivity or bell and whistles that HTML and CSS give you.

Luckily, JavaScript is one of the simplest programming languages to get started with! All you need is the same browser you’ve been reading this page with–at least if you’re on a desktop device!

While I don’t have time to flesh out this section, here’s some very quick pointers for what to learn:

Given the lack of time, I’ll leave you with another of my posts in place of task examples: how to come up with good projects to improve your programming skills.

The Saving Data on the Server Path

Do you want to interact with other websites and applications (like Discord), or store and retrieve “user-generated data” (like comments)? Then learning about server-side programming might be the thing for you!

One again, there’s many routes to learn about this topic. While I don’t have time to flesh out this section, here’s some very quick pointers for what to learn:

Important: You cannot host websites that need a server on Neocities. Astro’s website has a few handy suggestions for you. You will need to choose one that supports SSR. This is a good time to learn about using Version Control.

The “Always Worth it, Regadless of Path”

Next Up on Your Journey: Trial and Error, Mix and Match

These paths just give you an idea of what’s possible, but remember: you don’t need to follow them linearly. Jump in and out and see which one you vibe with! If you start feeling discouraged, try attacking JavaScript from a different side. The best way to learn is to build a project that’s just a bit outside of your comfort zone.

While the road to mastering these abilities won’t be simple, I know that if you stick with it you’ll find yourself making progress quicker than you think, earlier than you think. If you ever feel like there’s no way you’ll ever “get it”, don’t despair: that’s just how programming feels like sometimes!

You can always reach out to me on my socials or during streams with any question.

Making the GlompJump to TypeScript

As you go through this journey, you will sometimes hear about TypeScript. For the most part, you don’t need to worry about it: JavaScript code is also valid TypeScript code. Wherever you can write TypeScript, you can write JavaScript (but not vice versa), with maybe just a few red squiggles in your editor to keep you on your toes.

What TypeScript adds on top of JavaScript is the ability to know for sure what type of value your variables contain, and what values your functions accept and give back. While TypeScript can be scary, it’s yet another step forward that can help you become a better and more efficient programmer. Thanks to TypeScript, you can write more and more complex programs without spending as much time debugging them or looking up references.

TypeScript suffering as JavaScript revels in its lack of type safety.

Unfortunately, there isn’t a lot of great beginners friendly material to recommend. As mentioned, I went through TypeScript basics in this video. Hopefully, I’ll get to publish more content about it soon!

Have a fun journey!