Login

Resources for Getting Started in Web Development

How do you build a website? This article provides basic steps to get up and running as well as some handy resources for learning more about web development

by Ryan Feigenbaum

Resources for Getting Started in Web Development
Photo by Steve Johnson on Unsplash

Share this post

Resources for Getting Started in Web Development

Resources for Getting Started in Web Development

A web page 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
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

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
Learn to code. Build projects. Earn certifications.Since 2015, 40,000 graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.

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
A full-color introduction to the basics of HTML and CSS from the publishers of Wrox! Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work (update a content manage…

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.

See the Pen Typography Playground by Ryan Feigenbaum (@royalfig) on CodePen.

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
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
HTML All The Things - Web Development, Web Design, Small Business
The adventures of Matt Lawrence and Mike Karan through the world of web development, web design, and small business management....
ShopTalk Show
A podcast about building websites.

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
Hosted by CJ, Coding Garden is an open, interactive and engaging community where any coder, from beginner to veteran, can learn and grow together. Whether it’s a tutorial, Q&A session, algorithmic problem solving or full application design and build, there’s always something new to learn! Watch liv…
Web Dev Simplified
Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to fu…
Dev Ed
Learn web development, web design, 3d modelling, tools like figma and more without getting bored! The goes of this channel is to get you to become as creative you can be! So if you like to create video games in Unity or develop an application in node.js, stick around and have fun!
Academind
There’s always something to learn!Whether you want to have look at Angular Tutorials or Guides, Vue.js, other Frontend Development Content or Data Science Topics or anything else - you’re probably right! • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get e…

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
GitHub is where over 56 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

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.