A website consists of three components:
- content
- style
- function
In every web browser, no matter if it’s Safari, Firefox, Chrome, etc., the situation is exactly the same. You create content (text, images, etc.) with HTML (Hypertext Markup Language), style with CSS (Cascading Style Sheet), and functionality with JS (JavaScript). In other words, HTML is the stuff, CSS makes that stuff look good, and JS lets you and your user do something with that stuff. (That isn’t to say there aren’t innumerable ways to make this formula more complex and the modern web is pretty good at doing just that.)
To reiterate, every website you visit must contain some HTML or else there won’t be any stuff—it’ll be a blank page. Modern web pages almost all include a mix of HTML, CSS, and JS cause you’ll likely want stuff to look good (like aligned text) and be able to do something with it (like submit a form).
Therefore, if you want to learn how to build a web page, the place to start is HTML, followed closely by CSS, and, finally, JS. One of the great things about learning to build websites is that most of the tools are free and often open source. Unlike many hobbies, the cost of entry is minimal: you don’t need fancy tools, a large space, or expensive materials. A computer (maybe just a phone!) and a little know how is all it takes. Below, I share how you can get some of this know how so you can start building websites and make your dreams come true 🌈.
VS Code
Just like you use a word processor to help you create a document, you use a specialized program to help you write code for a website. Your code editor (sometimes called an IDE or internal development environment) does some of the work for you. It can automatically format your code, generate a preview of the website you’re building, provide syntax for commands, check for errors, and much more.
Microsoft offers an excellent, free code editor called VS Code. Other benefits include a wide array of extensions, themes, and integration with GitHub (a place to save your code and track changes).
Download Visual Studio Code - Mac, Linux, Windows
Get Up and Working with VS Code
After installing VS Code, create a new folder somewhere on your computer. Open the folder with VS Code (File > Open Folder). Create a new file (File > New File) and call it index.html. In the file, type ! and hit Enter. The basic framework of an HTML page should autofill in the file, compliments of an amazing built-in tool called Emmet. Using the Tab key, you can navigate through the document, customizing the content as you see fit. For example, where it says “Document” between the <title>Document</title> tags, write in whatever you want. The <title> tag controls what it says in your browser tab. Next, navigate to between the <body> tags and write the following HTML:
<h1>This is my website 😄</h1>
Now, navigate to extensions. In the left sidebar, you’ll see an icon that shows four squares. This is your access to extensions (it’s also accessible under the View menu). Search for “Live Server” and install it. Once it’s installed, return to your index.html file. In the bottom status bar, you should see an option to “Go Live.” Clicking this button will launch your web browser and serve your file.
Welcome to your very first web site! The coolest thing about Live Server is that any changes you make to your file will be instantly reflected in the browser (hence the name Live Server).
Just playing around in VS Code will provide a great way to get hands on with code, but you’ll likely want additional resources to help you learn. Keep reading.
Learning Resources
How you learn HTML, CSS, and JS will depend on your learning style. Do you like to follow along a structured lesson? Do you like to watch an expert do it and then try it yourself? Or do you just want to get your hands dirty and learn along the way? No matter your learning preference, resources exist for you. Below, I share the resources I used to teach myself web dev.
freeCodeCamp
freeCodeCamp offers free, project-based courses to learn nearly any area of coding. Of interest here is their “Responsive Web Design Certification,” which is a 300 hour course dedicated to the basics of building web sites. What’s great about freeCodeCamp is that not only do you learn by building things, but you build those things right inside the lesson. They even provide tools to check your code.
w3schools Tutorials
W3Schools Online Web Tutorials
w3schools also provides free tutorials in web development. In addition to their lessons, they are also a valuable resource for when you need to look something up. For instance, if you forgot the syntax for the box-shadow property in CSS, one of the top search results for “box shadow css” will invariably be from w3schools.
Book
If you learn best by reading, Jon Duckettʼs HTML and CSS: Design and Build Website is a good place to start. Although, it’s a bit older at this point, the fundamentals haven’t changed and the book’s design is lovely. I was able to check it out from the library, so I’d start there.
HTML and CSS: Design and Build Websites
Letʼs Play in the Sandbox
Sometimes you’ll want to test out an idea, but you won’t want to go through the hoops of starting a new project, opening your code editor, etc. CodePen offers an alternative. Itʼs a sandbox for writing HTML, CSS, and JS (and more) right in the browser. You can also look at other people's projects and see how they wrote the code. Checkout my Typography Playground pen below.
Podcasts
Learning code by podcast may seem strange, but somehow it works. My personal faves are below. I even like to listen to them on my runs. Gets that hype going 😂.
The Deno Show — Syntax Podcast 322
HTML All The Things - Web Development, Web Design, Small Business
Videos
Hours and hours of fantastic, free video tutorials exist. YouTube is a good place to start. Just search “web development." Some of my favorite channels are as follows:
Iʼve also had great results with Udemy, which offers paid courses on web dev. The courses continually go on sale, so never buy them full price. I particularly recommend courses by Maximilian Schwarzmüller, who is one of the creators behind the Academind channel above.
Letʼs Git to It
Another piece of the puzzle to learn early on is Git. If you every saved files like this—"big project - version 1," "big project - version 2", "big project -version 3,"—then you already understand one of the problems Git is trying to solve. It tracks, in detail, how your files change over time. GitHub (owned by Microsoft) provides a free, online interface for Git. They also just launched a beautiful new front page.
GitHub: Where the world builds software
Why Web Dev Is Great
I am not trained as a web developer—I am an academic philosopher who manages a nonprofit devoted to the philosophy of science. Nevertheless, many of my spare moments are devoted to learning web dev and building web sites. Itʼs my most fun and fulfilling hobby.
But why?
Practical
First, itʼs practical. While plenty of people nicely asked me what I would do with a philosophy PhD, few will ask what you will do with web dev knowledge: you build websites. Knowing just HTML and CSS will greatly benefit you in your personal and work life, no matter what you do, guaranteed.
Free to Play
As I said above, you donʼt need land or gear, because unlike most hobbies, building web sites is (nearly) free. You donʼt need expensive hardware or software; in fact, most web dev tools, hosting, and services are free (at least to try out). Many are also open source. This means that the barriers to entry are low to nonexistent. Whatever device you're reading this on can almost certainly also let you write code.
Understand the World
Learning HTML, CSS, and JS is like learning a foreign language, except that instead of having to travel to another country to use it, you encounter it each time you open your browser. That also means the better you understand these languages, the better you understand the web, and as our world moves more and more online, the better youʼll understand the world.
Top comments (0)