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.
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
- 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
- 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
- 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:
- CoDrops Collective series. Weekly blog series covering the latest web news, cool new projects and inspiring sites.
- CSS Tricks. Lots to learn here about CSS, beginner friendly and approachable.
- MDN. the central resource most browser vendors contribute to, teaching you all about the web’s API’s and features.
- 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!