Resources for Getting Started in Web Development
Tags: beginners, codenewbie
Published: 2021-02-02 23:41:01

---
title: Resources for Getting Started in Web Development
published: true
date: 2021-02-02 03:17:01 UTC
tags: beginners,codenewbie
canonical_url: https://ryanfeigenbaum.com/resources-for-getting-started-in-web-development/
---

 ![Resources for Getting Started in Web Development](https://ryanfeigenbaum.com/content/images/2021/02/Optimized-coding--1-.jpg)

A website consists of three components:

1. content
2. style
3. 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](https://code.visualstudio.com/Download)

### 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.org](https://www.freecodecamp.org/)

**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](https://www.w3schools.com/)

**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](https://duckduckgo.com/?q=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](https://www.wiley.com/en-us/HTML+and+CSS:+Design+and+Build+Websites-p-9781118871645)

## 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](https://codepen.io) 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.

{% codepen https://codepen.io/royalfig/pen/rEZEKG default-tab=js,result %}

## 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](https://syntax.fm/)

[HTML All The Things - Web Development, Web Design, Small Business](https://podcast.htmlallthethings.com/)

[ShopTalk Show](https://shoptalkshow.com/)

## 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:

[Coding Garden](https://www.youtube.com/channel/UCLNgu_OupwoeESgtab33CCw)

[Web Dev Simplified](https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw)

[Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)

[Academind](https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w)

Iʼve also had great results with [Udemy](https://udemy.com), 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](https://www.udemy.com/user/academind/?ranMID=39197&ranEAID=msYS1Nvjv4c&ranSiteID=msYS1Nvjv4c-RDLRHa3iGVVVx.dEQ7xRcQ&utm_source=aff-campaign&LSNPUBID=msYS1Nvjv4c&utm_medium=udemyads), 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](https://github.com/home)

## 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.