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

How to build an indie website that grows with you

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:

• Keeping your layout consistent across pages without repeating code. For example, you might want to automatically update your navigation on every page without changing the HTML on each of them.
• Automatically creating pages for each individual work in your galleries, or filtering them according to their tags.
• Allowing users to add their own content to your pages, be it in the form of a guestbook, a comment section, or even likes on your posts.

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:

• Define your own <Navigation /> tag to add wherever you want your navigation bar to appear. The SSG will swap this tag with the HTML and CSS of your navigation.
• Automatically add a new entry to your gallery for each image in a folder, making sure you never accidentally forget to add a new img tag to your HTML.

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:

Part 1: The Basics

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

• Make some new pages: First, you can create some HTML pages in your src/pages/ folder to see that all you know still works as you expect! Next, you can try creating some .astro pages, and (if you’re a fan of markdown) even some .md ones. Run npm run dev in your terminal to see a preview of these pages.
• Learn how to build your website: When you have made one or more pages, you can run npm run build to generate your final HTML and CSS pages. Explore the files in the newly-created dist/ directory (in the same folder as your website) to see the code Astro built for you!
• Create a Component (without Props): A Component is a reusable tag you can add to any .astro page in place of rewriting the same HTML. You can write any component you wish, but if you cannot choose the Astro documentation has a tutorial that guides you through creating a Navigation Bar. Regardless of which component you choose to build, this is a good time to dive into them!
• Create your Layout: A step up from simple components, creating a layout will allow you to easily wrap the unique content of every page in the same HTML. The new concept you’re looking to explore here is the <slot /> tag. A slot is a “hole” in the HTML of your component that allows you to insert more HTML and CSS content within it. Think of wrapping the content unique to each page in a <Layout> tag!
• Create a Component (with props): props allow you to add custom attributes to Component tags you create! For example, you might create a Card that allows you to display information about your OCs, and use attributes for the data that changes between them, like their names, images, and descriptions.

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:

• Dynamic Routes: Dynamic routes allow you to automatically generate individual pages based on a list of data. For example, continuing the OC example, you might create an individual page for each character and make your OC card link to it. For a different take on this, the “build a blog” Astro tutorial guides you through automatically generating a blog from a series of markdown files in a folder. My guide to getStaticPaths might also help.
• Content Collections: This is my favorite Astro feature, and one of the main reasons I so highly reccommend it. While this will require some TypeScript, you don’t need to fully know TypeScript to get benefits out of it. Long story short, content collections allow you to store all your content in a src/content/ folder, and make sure that all content in a collection has the same structure. For example, a content collection can help ensure that all your blogpost have a title, or all your OCs have a favorite food. You can follow Astro’s Blog with Content Collections tutorial to learn more about them.
• Remark & Rehype Plugins: once again, one of my favorite features (not just of Astro). If you’re writing your content in markdown or MDX, you can install Remark and Rehype plugins to extend the capabilities of your markdown. For example, I use them to automatically generate the table of content in these pages, or to add emojis to my content using the typical :emoji: shorthand !

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:

• Basic of code (variables, arrays, functions, objects): You can use your browser console to play around with JavaScript in an easily-interactive fashion! This is a great way to quickly experiment with some programming basics. If you wish, I have a YouTube tutorial on these basics. Just be mindful that this tutorial uses TypeScript, which doesn’t work directly in the browser console. However, all that is discussed works exactly the same for JavaScript (minus type annotations).
• Logging values to console: This is invaluable for debugging, especially as a beginner. I suggest learning about both console.log and console.dir (with the { depth: null } option). Use them freely and with abandon!
• DOM manipulation: What good is JavaScript if you don’t know how to use it to change the look of your website? Learn about querySelector and adding children to elements, and get manipulating!
• JavaScript event handlers: Reacting to browser events is what JavaScript is all about! Learning all you can about addEventListener will quickly set you on the path to mastery!

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:

• Install Astro: While Astro is mainly a Static Site Generator, it’s also an incredibly quick and easy way to get a server up and running!
• Enable “server mode”: As I said, you can easily get access to a server with Astro!
• Watch my video on using forms and webhooks: Forms are your portal between the client (what you see on your browser) and the server (where data gets processed). You can also learn about API endpoints in Astro.
• Learn SQLite: While I don’t have content specifically about this yet, I can reccommend Turso as a way to get access to a free SQLite DB to experiment with.

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”

• Learn Git & GitHub: Once again, Git + GitHub have been voted “most useful skill that I would not have learned on my own” by our beginner friends in Fandom Coders! They’re also the topic of my very first livestream. If you want hot fictional characters to help you learn this skill, follow our progress on FujoGuide Volume 0!
• Switch to a professional code editor: The default choice these days is the excellent VSCode!

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.

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!