Resources for Learning Frontend Web Development
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. These are my top 5 resources for learning web development and why I like them. This is the condense version of a blog post I wrote about the same topic.
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.
Contents
My Top Resources
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 supportive learning community on Discord and on their forum website
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:
- Amazing 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 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
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! 🙂
- 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 that’s when I look for another resource)
- 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.
License
This code is made available via the GNU GPLv3 license.
You are free to use, copy, modify, and distribute this software under the terms of the GNU GPLv3 license. This means:
- You can freely use and modify the code for any purpose.
- If you distribute the code, you must also provide the source code and license.
- Any changes you make to the code must be released under the same GPL-3.0 license.
For more details, please refer to the full text of the GNU GPLv3 license for this project.
Author
Thank you for reading about this project. If you’d like to connect with me for mentoring, collaboration, or employment opportunities, you can do so via the following links: