Indie Web Guide
Indie Web Guide - Basic Web Introduction
This is the starting point of the guides! We talk about what we'll cover and links to those topics.
I am not an expert. I have been paid to do web development professionally, but that does not mean I know everything and I will often make mistakes or give incorrect information. I will do my best to fix inaccuracies as I can.
This guide was made without the use of AI/LLMs and does not show how to use them in any capacity. Programmers must be able to code, as well as problem-solve. AI cuts out both, making "developers" far less useful in practical problem-solving situations.
Topics:
- Basic Web Introduction (This post)
- Basic HTML
- Basic CSS
- Basic JavaScript
- Practice Project (Coming Soon)
Basic Web Introduction
This guide is for both newcomers, and developers that have a bit of prior experience. It is going to cover the basics of web development to more advanced things, like: front-end web frameworks, databases, and fetching posts from an API.
We'll be covering the basics of HTML, CSS, & Javascript. Things like:
- Project setup
- Semantic HTML
- Page Structure
- Accessibility Considerations
- CSS Selectors
- Default Style Resets
- Referencing HTML elements in JavaScript
- Modifying HTML & CSS via JavaScript
Let me also state at this point that, while I work as a web developer professionally, I am by no means an expert and will make mistakes here or there. I do my best to check my technical explanations, but I may overlook a crucial detail every so often. This guide is mainly written based on my personal working knowledge of the web and its various technologies.
Getting Started
With that out of the way, to really get started, we'll need a code editor. Many folks reach for Notepad++, and there's nothing wrong with the software, but it was not exactly built with modern web development in mind.
I highly recommend using an IDE (Integrated Development Environment), which is just a fancier text editor. The benefits of this are: built-in terminal, multi-line editing, simple auto-complete, snippets, code shorthand, intellisense (language-specific support/tools), and much more. There are plenty of options out there, so pick your poison.
Unfortunately, many also ship with AI-related tools, but at least in Zed and VSCodium, you can fully disable those features with a single toggle, not that they provide assistance by default anyway. The widely used VSCode is also an option, but beware of the Copilot bloat. There are many more options available, these are just a few that I have used prior.
We will need to install a few more things in later guides, but that's really all you need for now. If you must use Notepad++, it might suffice for the basic guides, but you will quickly outgrow its feature set as we go onto more advanced topics.
Project Setup
For now, all you need is an IDE / code editor, a web browser of your choice, and a project directory on your device.
A project directory is no different than any other folder on your computer, it just helps keep all your files in one location, so they don't get mixed-in with a bunch of other stuff, so try not to put them directly in "Documents" or on a messy desktop.
I keep my files in a code folder, where I can create new project directories, like code/my-first-website/. I would highly recommend creating a new directory (folder) for each new project.
How you choose to structure things beyond that is up to you, and I'll mention if/when I create new files or directories as we go along.
Further Reading
MDN has a lot (pretty much all) of the things you need to reference for HTML, CSS and JavaScript. Please, do not be afraid to look up references as often as you need to. Profressionals still do it all the time.