A simple collection of beginner guides for those who want to learn web development.
Note: I will continue to expand on this guide with links, tools, tutorials, and insights that I find helpful for aspiring programmers (and myself!).
Table of Contents
Getting Started
For starters, I’d recommend taking a look at the broad overview of web development. I’ve found this resource, Front End Handbook, to be the most comprehensive breakdown of front-end web development. While it doesn’t provide direct links to resources on a lot of things, it lays out exactly what you need to know and even recommends the order in which to begin learning.
Don’t get overwhelmed looking at the list, it’s easier than it looks and you’ll pick up a lot of it along the way. That being said, here’s my recommendation on where to begin:
- HTML
- CSS
- Browser Developer Tools.
- The DOM (How websites are structured by the browser)
- JavaScript Basics
Learning HTML, CSS and your browser’s development tools is fairly easy, and fundamental in your journey towards building websites.
Heck, by just fiddling around with Chrome’s Dev Tools I was able to have a fairly solid understanding of HTML and CSS before I even took classes on them.
Note: A lot of the content here is going to overlap – that’s a good thing. You’ll likely find yourself repeating the very basics of web development (particularly JS) over and over until you finally have those key lightbulb moment. That same “Aha!” moment will happen again and again until you finally have a firm grasp on the subjects at hand.
What You’ll Need
There’s a large variety of tools available that make writing code and keeping your projects organized. You’ll commonly hear these referred to as IDEs (Independent Development Environments) or code editors. An IDE can have a big impact on how comfortable you are while coding, so make sure to try out a few different options to find what works best for you.
Personally, I recommend Visual Studio Code, as this is the industry standard with over 63% of programmers using in for both their professional and personal projects. If you want something a bit less complex and heavy-duty, here are a few other options to check out.
- Atom
- Sublime Text
- Xcode
- Eclipse
If you just need a simple browser-based code editor, try one of these tools.
- Codepen (online code editor)
- JSfiddle (online code editor)
HTML
Starting with the easiest of the “core three” skills, we have HTML. I always recommend Codecademy to total beginners as they do a good job holding your hand through the very basics of HTML within a contained environment (you write all the code within their site). Of course, if you already have a bit of HTML know-how, I’d suggest skipping this and going straight to Interneting is Hard.
While Codecademy isn’t the best place to learn how all of these different puzzle pieces link together, it does do a great job laying out the basic foundation for you.
CSS
Here’s where things start to get fun. CSS is what makes websites look more exciting than just boring pages of black serif text on white backgrounds. CSS lets you change the font styles, colors, layout, animation of your site, just to name a few. CSS is definitely the most fun part of web development, so let’s get started!
Again, I recommend Codecademy’s tutorials if you’re a total beginner, as they do a good job guiding you step-by-step without overloading you with too much information.
After you’ve finished with Codecademy’s tutorials, head on over to this short series of tutorials. You’ll learn more in-depth about how HTML and CSS files hook together to build a good looking website. Aside from teaching great fundamental skills, they also touch on some web development best-practices that will save you from many of the most common mistakes beginner devs make.
CSS – Learn Flexbox
Flexbox is the foundation for modern web development and allows for easy manipulation of block elements. Here’s a great tutorial on how exactly flexbox works.
If you ever need a refresher on how certain flexbox elements work together, this Codepen should have you covered:
JavaScript
JavaScript is where things start to get interesting, as this is where you’ll finally start learning the actual programming language of web development. As such, this is likely where you’ll spend the longest time learning material, building projects, and writing code.
Programming is tough! But don’t let that discourage you. Start with small steps and really do your best to understand the concepts presented to you before moving on.
Now, it’s quite likely that programming is fundamentally different than anything you’ve learned before, so take your time! If you get stuck, don’t skip by. Learning how to develop solutions and persevere over difficult challenges is what sets apart great programmers from the bad ones. As such, honing your puzzle-solving skills is critical to your life as a dev.
With that said, I’d start here.
Yet again, Codecademy is a decent resource for absolute beginners that won’t scare you away with advanced programming concepts. For now, just learn the syntax and don’t worry about how your code will be implemented in the real world.
Next, do this series of videos, they are by far the best series of tutorials I’ve found that teaches you real-world application of the JS syntax and code you’ll be writing.
After you’ve finished the series, I recommend reading the Eloquent JS ebook. He does a good job explaining the computer science behind JS without overloading you with too much random jargon.
After that, I’d read this series of ebooks, it’s fantastic about grilling in some of the more complicated bits of JS.
Node
Node is the compiler that allows JavaScript to actually run in an application. You don’t really need to learn about this until much later, but it doesn’t hurt to know what its role is in the context of JavaScript.
This is a good, simple breakdown of what node is.
As for using Node, that’s outside the scope of this tutorial and I recommend putting it off until you have a better grasp on the basics of JS.
Here’s a quick guide to installing Node.js on your computer if you want to tinker with it, though you likely won’t mess with Node for quite a while.
You can download the full Node compiler here.
Git
Git is used by nearly every programmer for a collaborative work environment and source control. It allows dev teams to work together harmoniously by providing a cloud shared repository for your projects, as well as a slew of other benefits. Learn to love git, you’ll be using it every day!
Note: Git and GitHub are not the same things! Git was developed and maintained by Linus Torvalds (creator of Linux) as a version control system (VCS) to help better maintain software in larger teams.
On the other hand, Github (and other similar hosting platforms) work in conjunction with Git to host the changes made on the Git VCS. Think of GitHub as a better UI than simply using the terminal, while Git is the pipeline that handles all of the information (requests, branches, commits, etc).
This is a fantastic tutorial to get yourself quickly up to speed on what Git is and how to use it. For most beginners, all you really need to know is 5 simple commands.
Projects
So, you’ve got the basic fundamentals under your belt… now what?
Now it’s time to build, build and build some more! You can contemplate on the complexities of functional programming all day long, but you’ll never truly learn until you start coding. A lot.
Here’s a list of some easy, and not-so-easy, programs that you can work on. There’s a varying degree of complicated subjects and different fields of programming that you might encounter. Pick one that sounds interesting and start coding!
JavaScript Projects
Node.js Projects
Build a Gif bot for GitHub – Working with Node.js and GitHub are both very important tools in your web development journey, so why not build something that involves both? This tutorial will teach you how to integrate a gif bot into GitHub, using some JS and Node.
Build a Chat Bot AI – Learn how to set up a Node.js server structure and work with APIs in this Chat Bot tutorial.
