One-Year of Learning Frontend Web Development

My top learning resources and why I like them

---

Introduction

I have spent most of the past two years learning to code. For the past year, I’ve primarily been focused on frontend web development.

In this post, I will share my top 5 resources (in no particular order) for learning web development and why I like them. I will also share a basic roadmap of what topics to learn as well as some thoughts on how to escape Tutorial Hell. Lastly, I’ve included some bonus resources — YouTube channels and websites — that have also helped me out along the way.

A quick note before we begin:

These are resources that worked for me. They may or may not work for you. So don’t take my word as “gospel” and think you have to follow only these resources. It’s a journey and we all take different paths to the same destination.

I hope that by sharing what’s worked for me, you can find something that works for you. Even if it means none of the resources on this list. By knowing what does not work for you you have a better idea of what does work for you.

This post is inspired by Swyx’s LearnInPublic and Open Source Knowledge approach to learning. You can find a condensed version of this list in my LearnInPublic repo.

What to learn first

When you’re learning something new it’s helpful to know where you need to go. In a traditional education setting, this is where curriculum and syllabi come in handy. However, as a self-taught learner, these are not always easily accessible.

Thankfully, in the age of the Internet and Open Source Knowledge, it’s quite easy to find a roadmap (i.e., syllabus) for what topics to study as a self-taught developer. Most of the time you can find these roadmaps with a quick Internet search (e.g., search for "roadmap for becoming a frontend developer").

You can also look at courses and use their outlines as a guide. Or you can also use job postings to see what the market wants, but this approach can be time-consuming and subject to change with time.

For myself, I eventually decided to invest in Scrimba’s Pro membership and gain access to the Frontend Career Path for two reasons:

1. They had the roadmap already figured out and it aligned with what I wanted to study

2. By putting my “money where my mouth is” I was more motivated to study and complete projects (whereas before I was kind of bouncing from one free resource to the next not learning or internalizing much)

Thus, the paid resource became my primary learning resource while the free ones I discovered became supplementary learning resources. This worked out well when I needed extra or deeper practice with a topic.

A basic roadmap

Learning frontend web development (or any programming language or framework) contains a lot of concepts. I won’t go into all of the details here because each person’s path will be unique to their situation. Some have the resources to go to a 5-day-a-week, 8 hours-a-day bootcamp while others need a slower, self-paced online learning environment.

Regardless of which option you choose, here’s a basic roadmap of the big ideas that your path should contain:

• Understand the basics of HTML and CSS

• BUILD SOMETHING

  • A simple landing page will do

• Learn JavaScript fundamentals

  • OOP, data structures and algorithms, functions, etc.

• BUILD SOMETHING

  • A to-do list is the usual go to

• Learn a framework (e.g., React, Vue, Angular, etc.)

• BUILD SOMETHING

  • At this point, you should be comfortable building a single-page app or maybe a multi-page website with an app

Again, this is a very rough, basic roadmap. I’ve intentionally left a lot of the finer details off the list. But you can think of this as “broad brush strokes” for what you need to study.

Escape tutorial hell by building something

In the above roadmap, I hope you noticed that I put “BUILD SOMETHING” in between each step. If you didn’t, I’m calling it out now because I think it’s important.

A lot of people talk about Tutorial Hell — being stuck going from tutorial to tutorial, course to course, without actually learning how to code. A lot of people talk about the best way to break out of Tutorial Hell is to build something. And I wholeheartedly agree. Let’s consider an analogy.

Learning to code by only watching videos is like learning to ride a bicycle by only watching videos. You won’t learn to ride until you put your feet on the pedals and you won’t learn to code until you put your fingers on the keyboard.

Let’s go a little deeper with this analogy. Let’s say you’re trying to learn to ride a bicycle. You buy a book that talks about the components of the bicycle and how they work. You watch a bunch of YouTube videos of people riding bicycles, watching what they do with their feet on the pedals.

Heck! Some of the videos even provide step-by-step instructions for riding the bicycle. You outline the steps in notes and rehearse them in your mind, but you haven’t set foot on a bicycle yet so you don’t know how to ride one yet. But you know humans can ride bicycles because you’ve seen them outside, in the real world.

However, you are not going to learn to ride a bicycle by only reading books and watching videos about it. Until you get on the bicycle, put your feet on the pedals and start pedaling, you’re not going to develop the muscle memory you need to balance and ride the bicycle.

The same is true for learning to code. You can read all the books and watch all the YouTube videos and take all the courses, but until you start to put your fingers on the keyboard and force your brain to figure out what goes where you won’t learn how to code.

This is why, I think, in addition to taking courses that have a “hands-on” approach you also need to build some things of your own. Now, you can build whatever you want. You create a clone of something or build from scratch. The choice is yours.

I do suggest starting small and building up from there. Build a single webpage first. Then build a multi-page website. (This is great practice for HTML and CSS).

Build a single-page web app with JavaScript (or with your preferred framework). Maybe it just counts the number of clicks each time the user clicks a button. Doesn’t need to be fancy or complicated, but in the process of building it you will learn, fortify your knowledge, and build your “muscle memory”.

Then move on to more complex projects. If you start something and realize you have some missing knowledge, great! You’re learning! Now, go out and find a resource (e.g., docs, tutorial, video, course) that will help you fill in the missing knowledge.

This is a slow and steady race. I know bootcamps and coding courses make promises about learning to code in a matter of months (or weeks!) — and maybe that’s true for a select few — but most humans need time to process to learn and do things well. That’s just how our brains work. It does not happen overnight.

Okay, I’ll get off the “soap box” and get to the list.

My top resources

These are the top resources that have made the most impact on my coding journey. I have included what they offer and why I like them. I have not listed them in any particular order of importance, but I will admit that Scrimba is probably my favorite from this list.

freeCodeCamp

Link: https://freecodecamp.org

What they offer:

• Free verified certifications in frontend, backend, data analysis, machine learning, and more.

• Full-length YouTube courses with industry experts and high-quality teachers

• Self-paced hands-on exercises and projects

Why I like them:

• To earn each certification you must complete and submit a series of projects

• This hands-on approach forces you to get your hands on the keyboard and put your abilities to the test

• Building projects is the best way to grow your skills and escape “tutorial hell”

• Of all the free resources I’ve encountered, this is by far the best in terms of quality and quantity

• They have a supportive learning community on Discord and in their website’s forums

Sololearn

Link: https://sololearn.com

What they offer:

• More than 20 courses in Python, JavaScript, Web Development, Data, and more.

• The lessons are “bite-sized” and can be completed in 5-10 mins.

• Each lesson includes practice exercises and mini-project to test your skills

• You get a certificate to validate your results

• They have a free plan which offers bite-sized lessons and help from the community, but for as little as $6/month you can access unlimited practice, bonus exercises, and advanced goals and stats

Why I like them:

• I took their JavaScript course and it was a great way for me to review and reinforce concepts like data structures and algorithms, OOP, etc.

• Their free plan does limit how many times you can practice (it resets daily) which was fine for me because I was using them to review.

  • However, if I were using this as my primary learning resource I probably would consider subscribing so I could unlock the unlimited practice.
  • That said, I kind of liked the limited practice because it forced me to focus more since I only had a limited number of tries before I had to wait a day for it to reset.
  • Also, when I did reach the max number of tries it forced me to walk away from the challenge and think about something else. When I came back to it, I usually had the solution sitting at the top of my mind. Funny how the mind works. Again, this is a slow and steady race — a marathon, not a sprint.

Scrimba

Link: https://scrimba.com

What they offer:

• Hands-on project-based learning in their browser-based code editor

• Free courses, but they also offer Pro and Bootcamp memberships

  • Pro is self-paced and includes access to the online Discord Community

    • Priced at $18/month and billed every semester (6 months)
    • This level is significantly cheaper than most bootcamps

  • Bootcamp includes everything in Pro PLUS weekly virtual bootcamp sessions with a cohort of fellow learners and a coach

    • Priced at $700 for 3 months
    • Gain access to study groups, mentors, code reviews, group projects
    • I haven’t used it, but I think it’s a great price for what they offer especially when compared to other “bootcamps” offering the same

Why I like them:

• A*mazing in-browser editor that lets you directly edit whatever code the instructor is discussing. It’s amazing!*

  • Much better than switching windows/tabs between a YouTube tutorial and a code editor
  • It feels like you and the instructor are using the same computer. In a way, you’re pair programming together

• Fantastic instructors that break down ideas and concepts into easily manageable pieces

  • Most videos are around 5 minutes long but never longer than 8-10

• They have an active and supportive community

  • Weekly live sessions covering a variety of topics from practical coding skills to soft skills and everything in between
  • Forums and channels to ask others for help

• Strong “hands on the keyboard” approach to teaching

  • Throughout each module, and indeed in most videos, the instructor gives you challenges to practice what you’re learning.

    • Sometimes this is extending something you’ve already learned. Other times it’s deleting all the coding and starting from scratch.
    • This is a great way to build “muscle memory” and learn to code

  • Each module ends with a solo project where you get to put your skills to the test.

    • Projects are outlined with a set of requirements and a Figma file
    • Plus, when you finish you can share with the community and get feedback
    • You can also add them to your portfolio

• A great weekly podcast where they alternate between interviewing newly hired devs and seasoned pros

  • I love hearing about transitioning into tech from both sides: beginners and experts.

Frontend Mentor

Link: https://frontendmentor.io

What they offer:

• Free and paid challenges to build your portfolio and test your skills

  • I think there are over 100 free challenges

• Challenges range from beginner (e.g., a preview card) to guru (e.g., full-scale website):

  • Newbie
  • Junior
  • Intermediate
  • Advanced
  • Guru

• Their Pro membership gives you access to:

  • Professional designs for multi-page websites
  • Sketch and Figma design files (these aren’t included in the free challenges so you have to do your best to “eyeball” the design)
  • Mobile, tablet, and desktop layout designs
  • Professional design system

• Each challenge you complete earns you points, once you’ve earned enough points you can gain access to their hiring platform

  • The more difficult the challenge the more points you can earn
  • You can also earn points by giving feedback to others in the community

• Feedback on challenge solutions

  • An automated process gives you basic feedback on your challenge submission
  • The community can see your solution and provide targeted feedback
  • You can also see other solutions, give feedback, and learn from their approach

Why I like them:

• Great opportunity to practice building things.

  • I’ve only used their free challenges, but I love them nonetheless.

• Great for when you just want to get your hands on the keyboard but don’t know what to build

  • The design decision is already made for you so you just have to build. No need to worry about the following because it’s already decided:

    • What color scheme should be used?
    • Where should the button be placed?
    • What font family should be used?

• Supportive and helpful community — both on the website and on Discord.

Tip:

If you’re not used to receiving feedback, I suggest first finding a way to separate yourself (i.e., your ego) from your work. I did not do this in the beginning and it stunted my growth a little bit (plus it didn’t make me want to use the platform).

It took me some time but I figured out that my work is not who I am. They are separate entities. So a critique of my work is not a critique of myself as an individual.

Moreover, programming is about iteration and getting better which means making revisions when you receive valuable and constructive feedback. The keywords there are “valuable” and “constructive”. If someone is being an @$$h0le, then ignore them.

That said, I’m still human and still struggle with putting the ego aside so, like all things, it’s a work-in-progress.

In addition to receiving feedback, you also have the opportunity to give feedback. This is a great way to articulate what you know and understand about programming and the web development process. And, of course, it gives you a chance to connect and help others.

Kevin Powell’s "Conquering Responsive Web Design" course

Link: https://courses.kevinpowell.co/conquering-responsive-layouts

What they offer:

• Free 21-day course

• Responsive layouts with a mobile-first approach to web design

• Working with responsive units

• Understanding flexbox

• Mastering Media Queries

Why I like them:

• The course is slowly delivered over 21 days

  • Some days are intentional rest days so you have time to process the information and work on the projects

• Practical examples and hands-on projects

• Kevin is a great instructor

  • He breaks things down into easy-to-understand pieces
  • His passion for CSS shines through and it’s infectious

• His mobile-first approach to responsive web design changed how I create webpages and websites

  • He argues that since HTML is already responsive by default that it only takes a few “tweaks” to the CSS and media queries to make a site responsive to different screen sizes
  • I’ve previously blogged about his approach on how HTML is responsive by default and how you can use 3 lines of CSS to create responsive websites
  • And I expanded on his ideas from the course in this post about three methods for centering elements with CSS

TLDR;

If you want the speedy version of this list, here’s the condensed version of my favorite web dev resources:

• freeCodeCamp.org - I completed their Responsive Web Design course. It was very hands-on and focused on building projects. This was a great way for me to get my “feet wet” but I found I wanted to go deeper.

• Sololearn.com - I used this one to reinforce my knowledge of JavaScript, Object Oriented Programming, and Functional Programming

• Scrimba.com - This was a game-changer for me. Their tutorials are entirely hands-on and with their in-browser code editor you can pause the video and work directly with the same code the instructor was working with. It’s very hands-on and has lots of great projects. They have lots of free courses to choose from but I signed up for their pro-membership ($18/month billed every semester) to access their Frontend Developer Career Path which takes you from HTML basics up to Advanced React and Getting Hired. They’ve also got a great online community for support.

• Frontendmentor.io - Once you know a little bit, I recommend checking out the challenges here. It’s a great way to build projects, test your skills, and get feedback. They have a paid plan, but there are plenty of free challenges to choose from as well.

Other Resources

YouTube Channels

In addition to the above courses, I have also found the following YouTube channels helpful during my journey.

• freeCodeCamp

  • What they offer: Huge selection of free, full-length courses on a variety of programming topics
  • Why I like them: A great companion to the challenges they offer on their website. I would consider the YouTube videos to be the “lecture” part of the course and the challenges on their website to be the “lab” part of the course where you put the ideas into action.

• Kevin Powell

  • What they offer: In addition to his free and paid courses, Kevin has some great YouTube videos and tutorials primarily focused on CSS.
  • Why I like them: As noted above, I enjoy Kevin’s enthusiasm for CSS and responsive web design and he does a great job of breaking ideas down into smaller components.

• WebDevSimplified

  • What they offer: Kyle offers courses and tutorials on web development.
  • Why I like them: Kyle’s teaching style is simple, approachable, and he does a great job of breaking concepts down into easy-to-digest chunks. I often watch his videos when I needed extra help with JavaScript or React.

• Code with Ania Kubów

  • What they offer: Ania offers courses and tutorials on a variety of coding subjects from frontend to backend.
  • Why I like them: She emphasizes learning to code by building. A lot of her tutorials and projects are centered around game development so if you like games, she’s worth checking out. Because of this approach, it’s a great way to see how JavaScript concepts like for loops, map() method, forEach(), and others work in a real-world setting instead of an abstracted coding challenge you might see on a website like Codewars or LeetCode.

Websites

• Internet Search Engines — DuckDuckGo, Ecosia, Google, etc.

  • There’s lots of great, helpful content on the Internet — docs, blogs, tutorials — but you need a way to find it. That’s where search engines come in.

  • If you’re not skilled at using one, you’ll want to learn all the ins and outs of performing searches. Here are some resources for learning how to refine your search engine technique. Note, these resources use Google as their example, but most of the techniques mentioned should work for other search engines as well. If not, you can always look it up! 🙂

    • Internet Basics - Using search engines (Tutorial by GCF Global featuring videos and images with examples)
    • Advanced Searching with Google Search Engine (9min YouTube tutorial by Loi Liang Yang)
    • Google Like a Pro – All Advanced Search Operators Tutorial [2023 Tips] (54min course by freeCodeCamp)

• MDN Docs

  • If a dictionary is where writers go to look up definitions, this is where programmers go to look up the meaning of code.
  • It took a while for me to get used to reading the docs (and sometimes it’s still doesn’t make sense), but this is usually the first place I go when I’m trying to use a method or operator.

• ChatGPT (or your preferred AI/ML chatbot)

  • I use it like a “coding buddy” by asking it questions when I’m stuck, usually, I do this after doing an Internet search and it has yielded a helpful result
  • Most of the time it’s spot on with its advice, but I almost always have to modify the code it provides to make it fit my situation which I think helps me understand it more deeply.

Conclusion

Those are the top resources I’ve used throughout my coding journey. Each person will have their unique challenges when learning to code so don’t take my word as “gospel”. What worked for me may or may not work for you. However, I hope by sharing these resources will lead your closer to finding something that works for you.

Thanks for reading

Thanks for reading this post. What is your favorite learning resource? Tell me what it is and why you like it in the comments below. Hearing your thoughts makes this more of a conversation and helps us both learn. Happy coding!