This post includes a TON of great web development resources that I’ve personally used to help me learn, practice, and monetize web development. It also includes bonus sections at the end with resources for making your life easier with regard to web development AND business.
Table of Contents
Miscellaneous Resources For Bootstrappers
This post will cover, in order, HTML, CSS, front-end JavaScript, and then finally, server-side, or back-end, JavaScript. Each section will begin with a brief description about each technology, and then it’ll get right into some of my favorite development and non-development resources. As I mentioned at the beginning of this post, I’ve also included some resources at the bottom that are miscellaneous and not necessarily for web development only, but general business as well.
HTML
HTML is the first language you’re going to want to learn. HTML stands for hyper-text markup language. At this point in your journey, it’s not so important for you to have this memorized. It will really only become important later on in the unlikely event that someone asks you what HTML stands for, and you don’t want to look silly in front of them. HTML is used for the structure of your web pages. I think the best analogy I’ve heard, although imperfect, is that HTML is like a skeleton. It supplies your page’s content and holds it together.
Learning Resources
The best place to start learning anything web development related. You can read through the documentation before starting a new subject. No matter the topic, MDN has a page for that. It also supplies a handy learning path through its docs. Start with the introduction, then move on from there. I’m still on here literally every day.
Stack Overflow is a wondrous place. It’s a forum designed for web developers, programmers, coders, hackers, whatever you want to call them. In other words, it’s a place for you and me. Stack O. is where tens of thousands of brilliant developers congregate to answer code related questions. You’ll be utterly astonished at the sheer number of posts, some of them dating back to a decade ago or farther. Chances are, if you have a question, it’s already been answered on this site. Will often be one of the top links if you search for a question through a search engine.
I find that it even helps if I get the same, or very similar, information presented with a different perspective or from a different voice. Sometimes it just takes a unique perspective on a topic to give you that “aha” moment. If you’re familiar with the MDN HTML docs, then you’re not likely to see any new information here, or on this site for that matter, but it’s another great guide through the markup language and definitely worth a read.
Interactive
> CodeCademy’s HTML Learning Path
A good interactive coding website. You can learn the basics of a number of languages for free on CodeCademy. This site has grown up a bit since I first started playing with it. You now have to register and sign in, and they’ve also added premium features if you’d like to pay to play. However, you can bypass all of the payment nonsense if you’d like to learn the basics for free.
> SoloLearn’s HTML Learning Path
Tied for my all-time favorite free coding website for learning web development. Less interactive than CodeCademy, but what it lacks in interactivity, it makes up for with multiple choice questions. Instead of writing line after line of code in coding challenges, it takes you through multiple choice questions, fill in the blanks, and matching questions as well. A good supplement to the next resource on the list. I still use SoloLearn when I need an introduction to a new language. So far, the site offers courses on 13 different languages! Remember to nail down HTML, CSS, and client-side JavaScript before moving on though.
> FreeCodeCamp’s HTML Learning Path
My other favorite free coding website for learning web development. FreeCodeCamp is somewhat of a hybrid between CodeCademy and SoloLearn. It offers an interactive code editor as well as lots of challenges and questions. It’s a website I still use on a near daily basis. I can’t ever get enough.
Video
Note: This section includes some resources that require you to pay for them. I will make a point of mentioning it if they do cost something. If you’re unsure as to whether web development is right for you, I would skip these for now and just use the free resources until you know for sure that web development is something you’d like to pursue.
> YouTube
That’s right. Just as you might tap in to find a video on how to clean a mass airflow intake sensor on your Chevy Malibu (here’s looking at me), you can also tap in to learn how to make websites. There are a number of YouTube “personalities” (some have personalities, some don’t) that operate web dev channels. Below are a few that I’m subscribed to. For More on my YouTube subscriptions, check this out: My Youtube Subscriptions.
Good Web Development YouTube Channels
Brad has almost 1,000,000 subscribers, and for good reason. He’s a down-to-earth kind of teacher who won’t make you feel dumb about your skill level. He has hundreds of tutorials and code-alongs, and some great crash courses for beginner. He also has quite a few more advanced videos as well. I visit his page when I’m brand new to a subject or if I’m towards the end of a long study session and just want to play around with something new. Hands down my favorite YouTube channel (and the one I’ve been subscribed to the longest) so far.
> FreeCodeCamp’s YouTube Channel
You might expect their YouTube channel to have lots of videos that are supplemental to the curriculum on their site, and you would be correct. However, they take a much deeper dive into things than you could imagine. Aside from their basic web development crash courses, you can expect to find all kinds of videos on Python, data structures, mobile app development, machine learning, etc., etc., etc. and on, and on, and on…Just taking a brief peek at their most recent videos, I found at least a couple that I will be devouring in the near future.
Okay, one more for good measure. I could devote a whole blog post to YouTube, which I actually have done here, but for brevity’s sake, I won’t list them all. This is another good channel for lengthy, in-depth, beginner’s level crash courses as well as tutorials on other various web development play things.
Note: The following three resources are paid courses on Udemy. If you catch them on sale, and they have sales constantly, you can expect to pay somewhere between $9.99 and $14.99. Often times, they’ll have a college semester’s worth of videos, so, I consider them to be pretty much free.
Other Video
Udemy is a great way to get your feet wet when you’re first learning a subject. You won’t just learn the basics though. There are many courses that scratch much deeper than just the surface. Because they’re paid courses and because anyone can sell courses on their website, you always want to be careful for what you pay for. To take the guesswork out of it, here are some courses and instructors that I find to be really good at explaining the material in-depth and simplifying the tough concepts.
> Colt Steele’s The Web Developer Bootcamp
The very best course I’ve seen from Colt. It’s sure to be mentioned any time Udemy and Web Development are discussed. This will definitely be a repeat for the CSS and JavaScript resource sections. Colt takes you through the basics on up through server-side programming with Node.js.
> Brad Traversy’s Modern HTML and CSS From The Beginning (including SASS)
One of my first introductions to Brad Traversy and his teaching style was with this course, and it was glorious. This is a great course for any beginner as well as anyone with intermediate HTML and CSS skills as well. I still find myself referencing its wisdom to this very day.
> Jonas Schmedtmann’s Build Responsive Websites With HTML5 and CSS3
If the terms HTML5 and CSS3 are throwing you for a loop, just know that these are the names for the most recent major overhauls of the two languages. The languages are updated on a regular basis, but these names represent major upgrades and game changing functionality, and as such, are now interchangeable with terms such as ‘modern HTML’ and ‘modern CSS’. Jonas always does a really great job of going in-depth on subjects. He never simply skims the surface, so any course with his name on it is sure to be well worth your time and money.
Speaking of Schmedtmann, he’s got a GREAT web dev resources page (much prettier than mine) as well as a great website overall. Check it out and be sure to bookmark it so you can reference it with ease.
CSS
CSS stands for Cascading Style Sheets. Again, this isn’t something you need to memorize if you’re just starting out. Just know that if HTML is the skeleton then CSS would be the skin. And maybe the ligaments and tendons. Your CSS will determine the look and style of your web pages. Kind of like human skin, right? I also added ligaments and tendons because, as you’ll find out, CSS now offers tools to help structure websites as well as provide some functionality as well. CSS3 is a beast.
It ain’t just for tricks. CSS-Tricks comes with TONS of CSS tutorials. I find that it does a really great job of simplifying more complicated CSS concepts for me. They’ve been pumping out articles for over 12 years now, so you can be sure that any CSS questions (or HTML or JavaScript) you might have are answered here within its pages. You can find me surfing these brilliant pages nearly each and every day.
See HTML section for more details.
That’s right. As the name suggests, HTML Dog includes informational pages on CSS too. And JavaScript, as mentioned in a future paragraph.
Interactive
> CodeCademy’s CSS Learning Path
Yup, you can learn some CSS on CodeCademy too. See HTML section for more details.
> SoloLearn’s CSS Learning Path
SoloLearn’s offerings are numerous. CSS is another one of those offerings. What else? See HTML section for more details.
> FreeCodeCamp’s CSS Learning Path
FreeCodeCamp can’t simply contain itself to just an HTML section. It spills over into a CSS learning path as well (and JavaScript and Python). See HTML section for more details.
Video
Note: The YouTube channels and Udemy courses in the HTML section are great resources for CSS as well, so I won’t bother mentioning them again. Again, you can get the Udemy courses for as little as $9.99. We will be skipping ahead to the JavaScript section, which will look eerily similar to the HTML and CSS sections.
JavaScript
See HTML section for details.
See HTML section for details.
Interactive
All of the interactive websites listed in the HTML section also cover CSS, so we needn’t list them here.
Video
> Jonas Schmedtmann’s The Complete JavaScript Course 2019: Build Real Projects!
Another Jonas Schmedtmann course. If it’s got his name on it, it’s got my seal of approval. Again, he does an excellent job of refusing to gloss. He dives into the deep end here with some of the topics, but breaks them down until they’re easily digestible. Mmm…JavaScript.
> Brad Traversy’s Modern JavaScript From The Beginning
Traversy does it again, making the whole learning JavaScript thing look easy. Another down-to-earth coding adventure where he covers a lot of ground. You’ll learn a lot of the most up-to-date concepts as well as all of the basics too.
> Colt Steele’s The Web Developer Bootcamp
See HTML section for details.
Node.js
Node.js, also known simply as Node, is JavaScript’s answer to back-end programming. Node.js isn’t a language, but a runtime, which allows for JavaScript to be used as a server-side programming language. It might sound like I’m describing a novelty, and many people once saw JavaScript as exactly that, but there’s no denying Node’s huge market cap. It’s consistently listed at the top of Favorite Programming Languages lists, often times voted on by developers themselves. It also has unmatched (so far) community contributions and involvement, meaning there’s virtually no end to the number of applications it serves. If you can do it with another language, you can bet your rear that you can do it with JavaScript too, including machine learning, virtual reality, and Internet of Things!
This is a more difficult section to populate because of the fact that it’s not a programming language. You can learn how to import an NPM (Node Package Manager) package and you can learn how to use some of the more popular packages offered within the manager, but it’s not a language to be learned. So, the following resources will help you on your path to using Node and using it in a productive way, but they don’t necessarily have a lot of information on Node itself.
> NodeJS
I can think of no place better to start your journey than Node’s official documentation. You can glean a few things from its pages, but don’t get too bogged down with any of it. Chances are, you won’t use much of it any time soon. Use it as an introduction only and to get to know the underlying technology.
> Dev.to
Dev.to is a great resource for all things development and coding. It’s similar to Medium.com in that a lot of the posts are written by guest authors, but I often find that the posts are well written and that the authors have a much deeper understanding of certain topics than I do. Despite what others might tell you, sites like Dev.to and Medium are still very much worthy of your viewership. I didn’t mention Medium because you have to pay for unlimited access, but you can still find a lot of great free posts. Read until they won’t let you any more. And then the next month, do it again.
Does its damndest to teach Node and, in my opinion, it does a really good job of doing it. This is one of the best Node tutorials I’ve come across.
Interactive
> CodeCademy’s Node Learning Path
You have to pay for this one. Also, as you might expect from an interactive learning platform trying to teach Node, it’s pretty short.
Video
> Colt Steele’s The Web Developer Bootcamp
Probably the most easy to understand course material I’ve found on Node. Colt really does simplify everything. See HTML section for more details.
> Andrew Mead and Rob Percival’s The Complete Node.js Developer Course
Two more heavyweights within the Udemy content sphere collaborate to create the most in-depth Node learning experience that I’ve seen anywhere. It’s almost 35 hours long! Don’t let the run time fool you though. It’s absolutely packed with information. Andrew and Rob, both, are well known for their comprehensive courses.
> Ian Schoonover’s Code With Node: Learn By Doing
I have to give some love to fellow Texan, Ian Schoonover. Ian has collaborated with Colt Steele in the past, but in this course, he gives us a little lot of one-on-one time. It’s worth noting that this is definitely not a beginner friendly course. Ian has some serious Node chops, and they’re on full display here. This is by far the most extensive and complex project I’ve ever seen in a course. Yes, it’s “only” one single project, but it clocks in at almost 20 hours worth of video. You can also get it completely free! This might be one you have to watch more than once. It makes for great reference material as well.
Other Helpful Web Development Resources
If you Google anything web development related, especially as a beginner, you’re likely to find a link to a W3Schools page. I would still check MDN first, but this is another option if you can’t immediately find what you’re looking for on there or Stack Overflow. It also features interactivity with a live text editor on just about every page.
RELATED: Choosing A Text Editor
Though not exactly an Adobe evangelist, I will admit that they make a wicked cool color tool. This is a fun place to play and get some ideas on colors for a new website or project.
You can find color pickers everywhere, but that’s not a knock on W3Schools. It’s the first one I used, and I continue to use it to this day. Use it to select colors and find rgb and hsl equivalents for hexadecimal values and vice versa.
Beta Page is pure inspirational bliss. Check out what other people are working on and get inspiration for a new project. It’s impossible not to.
It’s “news and podcasts for developers”. What’s there to explain?
Miscellaneous Resources For Bootstrapping Entrepreneurs
Computer Science
Not only does Khan Academy offer a basic computer science course, but it also features an advanced computer science course as well as a programming course where you’ll learn all about JavaScript. It’s not just geared towards those interested in computer science though. They also have courses on different mathematics, sciences, arts and humanities, economics and finance, and so much more!
> Harvard and Yale’s Intro to CS
Want to learn computer science from some of the best minds in the field? Then this is the course for you. Harvard and Yale have released this course to the general public for free! All you have to do is sign up and come prepared to learn. Definitely worth your time. If you’re serious about a career in programming, but don’t want to spend the money on formal education, I would highly recommend you take this course and work through the courses on Khan Academy as well.
> Trello
Great for teams and individuals alike. Trello helps you get your projects organized and then keep them that way. You can create boards for each project within your team or for your personal use. Once you create a board, you can create lists for these boards and add cards and notes, and then build hierarchies out of these parts to keep you and your team on track. When you or your team completes an item, they can be marked as completed. I’ve used them for my web development projects. It really helps me nail down design and development architecture and ensure I don’t stray from the pattern. It’s useful for any kind of project though. You could even make one for cleaning the house. It’s free for up to ten boards right now!
> Slack
Another great tool for team projects, Slack is a popular conversational web application. It hails itself “the smart alternative to email”. It helps you organize conversations within your team or firm. It’s like group messaging for email. You could, of course, use email to do this, but slack is much more elegant. I think email gets way too cluttered with group emails if everyone’s emailing back and forth. It gets a little frustrating for me. In Slack, my eyes can follow each part of the conversations a whole lot easier. It has a lot more going for it than just that, like integrating with other apps, but you’ll have to try it to find out. It’s very reasonably priced. As of right now, it’s free for small teams!
Blogs
Hubspot’s blog offers a wealth of information on topics ranging from SEO, to marketing, to blogging, to e-commerce. If you’re looking to get more into the design aspect of creating websites for your freelancing work, or if you’d like to try your hand at becoming a web or graphic designer, check out this post to help you get started: The Ultimate Guide to UX Design. Or if you’re struggling with creating a good logo for your company or a client’s, check this one out: How To Design A Logo [Step-by-Step-Guide]. They also have an Ultimate Guide to Email Design and an Ultimate Guide to SEO, both of which are permanently saved to my bookmarks.
These guys/girls know SEO and they’ve written a few articles about it too. Looking to get started with SEO for your website or a client’s? Check out their Ultimate Guide To SEO Meta Tags.
Graphic and Web Design
> GIMP
If you’re looking to get into graphic or web design, but you don’t want to have to pay for ridiculously priced Adobe software, try GIMP. It’s a FREE replacement for PhotoShop. So, instead of shelling out $251.88 per YEAR on PhotoShop, why not do the same thing for $0.00? How is this possible? It’s open source magic. Literally hundreds of developers over the years have collaborated to make GIMP what it is. If you do decide to try it out, I’d love to see what you create. Send it to contact@rabblry.com, and I’ll put it up on the website for everyone to see. I’ll even create one too.
> Canva
Canva is such an awesome, free design service. They have over 50,000 design templates that you can choose from to design logos, TONS of different types of print media, social media graphics, web banners, videos, and SO much more. Yes, I said 50,000, and yes, I said free. The value Canva offers, at no charge, is absolutely staggering. Its customization options are also plenty and easy to use.
As if that wasnt’t enough, Canva also gives free access to its “design school” where they have a number of design courses you can take, a great blog, and a page where you can create your own brand kit to help your business’s branding stay consistent.
Canva has a pro version that unlocks even more templates and media for $9.95/user/month if you purchase a year up front or $12.95/user/month if you choose to go month-to-month. Their enterprise option for large teams unlocks workflows, the ability to collaborate, unlimited storage, and more will only set your company back $30/user/month.
> Free CSS (Free Website Templates)
Looking for a starter template for your website? Free CSS has thousands of absolutely free website templates available for use. Download without having to input any payment information or sign up. Just find one you like and click the download button. The site also allows you to preview what the site will look like on desktop. Most of the templates use Bootstrap as a framework, so they should be pretty responsive. Once you download the template of your choice, just open the folder up in a text editor and modify it to fit your needs.
This is another website template provider. The templates here are of higher quality than the ones on Free CSS, but you will have to pay $25 for use on a single website. A drop in the bucket compared to hiring a designer and/or developer though.
Royalty Free Images
Below are a few of my favorite sources for royalty free images that you can use guilt-free for commercial purposes. These are awesome for any web site, regardless of whether you’re packin’ fat stacks or ballin’ on a budget (cringe). Just some really beautiful images. It is encouraged that you attribute the images to the photographer/artist. It will, undoubtedly, result in good karma.
> Pexels
> Pixabay
> Unsplash
Handy Chrome Extensions
Have you ever seen a color on a website that you thought would look perfect on yours, but you had no idea how to find the value? ColorZilla is an extension that takes all of the guess work out of it. Just click the icon, point the crosshairs at the color you envy, and then click again. Not only will ColorZilla give you the hexadecimal value, but it will instantly save it to your clipboard, so you can easily paste it into your code. How sweet is that?
> WhatFont
Similar to ColorZilla, but for fonts! Created by the owner of ChengyinLiu.com. Someone please give this developer a job.
If you’ve ever stumbled upon a website and wondered what technologies they used to build it, then this extension is for you. Simply Wappalyze your favorite website and discover the languages, libraries, and frameworks used to build it.
Website Metrics
> GTMetrix
Use GTMetrix to get real-time data about your site as well as suggestions on how to improve its performance.
Checks website SEO and Alexa ranks.
Productivity, Efficiency, and Collaboration
Need Windows office productivity, but don’t have the money for Microsoft Office? Try Trio Office. It includes a word processor (comparable to Microsoft Word), a spreadsheet app (comparable to Microsoft Excel), and a slide presentation app (comparable to Microsoft PowerPoint). It’s also compatible with Microsoft Office and Google office products as well. Best of all, it’s free. And yes, I do see the irony in linking to the Microsoft Store.
Team Viewer is a free (and paid) collaboration tool that allows people to share a common screen. When I need to collaborate with a team member or client, but for logistical reasons we can’t be in the same room at the same time, I use Team Viewer to share my screen with them (or vice versa). It essentially logs them onto my computer. They can even use their own mouse to control my cursor. If you’ve ever had computer troubles at work and the I.T. department has had to take over your PC, then you’ve experienced something very similar.
The free version allows for one computer to connect to another if both PCs have Team Viewer installed. There are three paid versions as well, which increase the number of devices, the number of users per session, and/or the number of sessions.
I hear you laughing, and that’s perfectly okay with me. I remember when Wikipedia first came out, and all of my teachers warning me against using the online encyclopedia as a resource within my projects. Well, times have changed, and as for me, I’m no longer in grade school. I like to think that I’ve matured, and Wikipedia certainly has. Today, it is an incredibly well managed and accurate resource. I find many of the answers I’m looking for by simply searching its pages for the enigmatic technology. Love it or hate it, I’ll still be using it.
Let the hilarity resume. I know what you’re thinking, and I really don’t care. I’ve learned quite a bit from the ad stuffed website. Yes, be prepared to look at a lot of advertisements, but be prepared to learn, as well. I’ve mainly used the site to understand in greater detail the mechanisms behind how things work. I can tell you first hand that there are a number of great articles on how computers, servers, and the web work and interact together.
I discovered this website not too long ago. I’ll go ahead and say that, at this time, it could be a good resource for beginner web developers but probably not for the advanced. The articles cover the very basics, but if you struggle with those, check it out and see what you think. They also have sections for science, math, the humanities, and language arts.
RELATED: Education For All: How The Internet Changes The Game
Note: This is an ongoing project, so be sure to check back for updates. I’ll try to remember to list any updates when they do happen at the beginning of the article, so that you can skip ahead to the new stuff.