How to Learn Web Development

Take your web dev skills to the next level with these external resources

Let’s be real: building web pages is generally pretty damn confusing and frustrating, especially when you are getting the hang of it. Hot Page is a great way to get started because it takes care of a lot of the annoying details for you.

However, part Hot Page’s guiding philosophy is that we don’t oversimplify things. We give you the power to build any page imaginable, but that also means you have to take more responsibility for making your pages.

After you’ve read some sections in this documentation about the basics of HTML and CSS you will still be very far from mastering these technologies. The web platform has a long history and has grown insanely complex. It is certainly way too much for us to cover in this documentation site. So, where can you learn more?

The Mozilla Developer’s Network (MDN) has the best and most up-to-date documentation on web technologies like HTML, CSS, JavaScript and even little-used things like WebGL or WebAssembly. The information is published by the non-profit Mozilla Foundation (the makers of the Firefox browser). Anyone can suggest changes to these pages, making them generally the most complete source of information on any given topic.

Often, if you use Google to search for information, the first result above MDN will be W3Schools. It’s another great source of information and may be more accesible for beginners. However, it is rarely as complete as MDN.

Two publications have been doing a great job explaining the web for years: CSS Tricks and Smashing Magazine. They are both full of tutorials and articles written by some really impressive web developers.

As a beginner, you may want to employ a framework to get started quickly. These are code libraries that can help you get rolling with a variety of pre-built modules like a responsive grid system or pretty buttons. There are trade-offs, however, as we explain in our documentation on frameworks.

One of the coolest features of the web is that you can always read the code that was used to build them. Every browser is a little different, but all of them let you view the raw HTML that was sent to bootstrap your page. Unfortunately, these days web sites are so complicated that this typically looks like gobbledygook that is of little use to us humans.

To get a better handle on what’s actually happening, you can open the developer tools to peak behind the curtain and see the elements that make up the page you’re looking at. You can even start messing with the structure and see what changes: move elements around, add or remove a class, or change CSS properties directly. It’s an absolutely essential tool that you can use to reverse-engineer anything you see on the web.

Lastly, there’s a special tool for learning from pages that were built on Hot Page: you can view any public page on the platform in the Hot Page editor to see exactly how it was constructed. We even made the Hot Bookmarklet to make it easier for you to dive right in.