Starting a career as web developer can be a daunting experience. I’ve just given a Q&A to students at a Korean university, and I figured that some of my answers might make for a neat cheatsheet on where to start if you’re new to the world wide web. None of this is new, and more has been written, but here’s a quick overview to get you oriented.

Note: The following blocks are loosely in order, but there’s no right way to learn web development. Eventually you’ll stumble into all of these topics. The most important thing is to stay motivated, so if you get stuck somewhere don’t fret, and dive into something else. The web is a messy but wonderful place, and so is the process to learn how to build for it.

1. Start with the basics:

To start with, I recommend to familiarize yourself with the basics of HTML and CSS, the backbone of every web page, and then in parallel the tools required to create, edit and preview your pages.

HTML and CSS

  • HTML. Learn how to do responsive images with the tag, how to handle accessibility well, and how to do SEO friendly markup.
  • CSS. CSS powers the look of your site. Learn the basics of the box model and how to style text and elements, then get familiar with more advanced layout tools such as media queries, flex box and CSS grid.

Editor, DevTools and servers

  • Chrome DevTools. Spend a lot of time with Chrome DevTools. Inspect some sites you like, and get familiar with the Element panel. Try out Lighthouse. Measure the performance of a site using the timeline tab and see what’s going on behind the scenes.
  • Visual Studio Code. Get a good editor (VS Code is just the one I use) and configure it to your liking. Learn how to use its shortcuts. Get familiar with Emmet, configure Eslint and add a bunch more plugins.
  • Local server. Learn how to start a local server to preview your HTML pages in a web browser.
  • Remote server. There are dozens of ways to host your web pages so that others can access it, but static file hosters like Firebase that have a free tier and are easy to set up are your best bet to get started.

2. Start building your first pages and sites with an HTML framework

You’ve already learned a lot, so why not try out building some actual web pages? It’s true, you don’t have to learn JavaScript to call yourself a web developer. You should be proud of what you’ve learned so far, and deserve to try out your skills in the real world. An HTML framework adds dynamic capabilities to a page without requiring you to write a single line of JS. Here are two to pick from:

  • Mavo allows you to build web apps with an extended HTML syntax. It’s currently still in beta, but is easy to learn and try and definitely a lot of fun.
  • AMP. (Full disclosure: I work on AMP and am of course biased) AMP extends HTML with many powerful interactive components, a rich layout system and expressive data binding. AMP is not only a great way to get started with web development, it is also ideal to use on pages that get a lot of search or social traffic due to the ability to safely pre-render these pages, making them feel almost instant to users.

3. Build tools, frameworks and web apps

An HTML framework like AMP gets you started in no time, but it comes at the expense of flexibility. If you’d like to move from static and dynamic content sites to a more advanced, custom web app, it’s time to learn JavaScript. Since your app is becoming more complex, this is also a great time to enter the world of build tools, which will dramatically improve your productivity (compared to manually dropping a bunch of HTML, CSS and image files into a folder).

Learn JavaScript and get familiar with build tools

  • JavaScript. Get familiar with the language itself, but also with the browser’s built in APIs, like how do deal with the DOM, the event system and the viewport.
  • Gulp, Yarn, Rollup. Get familiar with Gulp and build systems in general, try out Yarn as package manager to include plugins or libraries, and bundle source files with something like Rollup.
  • Node. Gulp runs on Node, so the more familiar you become with the server powered by JS and its APIs, the more you’re comfortable with Gulp’s task system.

Learn functional programming and app architecture through libraries and frameworks

  • jQuery. Biased again as former contributor, but jQuery is still powering a large part of the web. And even though interacting with the DOM is easier than it used to be, jQuery is still a non-intimidating starting point to many who learn JavaScript for the first time.
  • Vue/React/Angular. Pick a popular, modern and well maintained web component framework, the three here are just some common choices. Dig through a bunch of sample code bases on sites like HNPWA to learn how to architect a modern web app.

4. Stay up to date, inspired and informed

The web is evolving and changing so quickly that staying up to date with the latest developments is really important. There are dozens of great sites to learn from, but here are some to get you started:

  1. CoDrops Collective series. Weekly blog series covering the latest web news, cool new projects and inspiring sites.
  2. CSS Tricks. Lots to learn here about CSS, beginner friendly and approachable.
  3. MDN. the central resource most browser vendors contribute to, teaching you all about the web’s API’s and features.
  4. Google Dev Web Updates. My team blogs here about not just new Chrome releases but also interesting upcoming browser features and APIs.

Good luck and enjoy the ride!