How To Improve Your Frontend Skills
Tags: javascript, webdev, beginners, tutorial
Published: 2021-02-08 11:18:31

# Introduction
In this post, I'll describe the plan I used while learning Frontend in the past (ex Lead Frontend Developer / Full-time Frontend Mentor now).

**Plan**:
10% = ~max. 1 hour per day

- 10% - code challenges
- 10% - read articles
- 30% - courses, videos, books
- 50% - build projects

^ It's flexible, can be less or much more dedicated time per day 😅. IMO, it's important to mix often so your brain won't get bored or you won't feel the burnout.

It's always best to learn by hands-on coding and building projects. Additionally, the [forestapp](https://www.forestapp.cc/) is amazing for productivity.

---

# Practice Coding Challenges
It’s good to practice algorithms, solve problems as a Developer. Logical thinking is a crucial ability to succeed and grow in the IT field. Focusing on only one project can lead to quicker burnout, hence switching context can help to keep the right balance.

**Don’t overload yourself with coding challenges, try to do at least one per day.**

Please, find the recommended websites to practice coding below.
- [Codewars](https://www.codewars.com/)
- [CodinGame](https://www.codingame.com/)
- [Project Euler](https://projecteuler.net/)
- [Codeacademy](https://www.codecademy.com/)
- [HackerRank](https://www.hackerrank.com/) - recruiters might use it as preliminary tasks
- [LeetCode](https://leetcode.com/)

**Note**: I would totally aim for Codewars first as it’s free and you start from fairly basic coding challenges. Don’t spend more than 1 hour per day on this, otherwise, your brain might 🤯.

---

# Stay Up-To-Date By Reading
Frontend evolves at a lightning-fast pace. You have to keep that tempo. One article per day, per week, just make sure to be systematic.

There is this amazing browser extension to help you read only what’s loved by other developers.

[daily.dev](https://daily.dev/) - It will fulfill your browser landing page with articles.

If you still have time to read a bit more, I recommend the following websites.
- [Smashing Magazine](https://www.smashingmagazine.com/)
- [Codeburst](https://codeburst.io/)
- [Medium](https://medium.com/topic/javascript)
- [Reddit](https://www.reddit.com/r/Frontend/)
- [Hacker News](https://news.ycombinator.com/)
- [CSS-TRICKS](https://css-tricks.com/)
- [DEV](https://dev.to/)
- [JAVASCRIPT.INFO](https://javascript.info/)
- [Knowledge Pills](https://bigsondev.com/pills/) - on my website 😅

**Note**: I highly recommend implementing what you’ve learned, as just reading won’t keep the knowledge with you. Decrease the number of articles you read, don’t aim for super complex things such as Machine Learning, AI for starting. Read about React, Flexbox, Grid System, topics you're already working on, and want to expand your skills even further there.

---

#Projects To Build
It’s best to build what drives you the most, or even better if you can build for a friend, family. That will boost your motivation even further 🚀. Try to think about something you really want to have, a portfolio, a website related to your hobbies, an application you always thought of. If it’s a complex idea, try to simplify, make sure there is at least a piece of it you will be capable of building, and seeing your dream project live running on a deployed website.
If there is nothing from the above you can think of, that's ok. I’ll share some links for references below.
Below you can find the list of websites with project ideas.
- [freeCodeCamp](https://www.freecodecamp.org/)
- [Frontend Mentor](https://www.frontendmentor.io/)
- [The Odin Project](https://www.theodinproject.com/)
- [Code Unicorn](https://codeunicorn.io/)
- [Projects](https://bigsondev.com/projects/) - a new section on my website 🙈

**Note**: Just remember to focus on one project at a time. If it grows and you feel that you won’t make it - decrease the scope, break on smaller pieces, don't be too ambitious, don't overdo.

---

# Courses, Videos, Books
I’m a fan of practicing by building but courses, videos, books are a nice addition to your knowledge pack. Take a break from the project you're working on and watch a related course, video, or read a book.

Having a collection of courses, videos, books related to Frontend Development is great just avoid "from cover to cover" and have it as a reference. Search for the problem you're trying to solve, and follow the instructions, move one step closer, rinse and repeat.

The below list includes some of the platforms I’ve been learning on.
- [Frontend Masters](https://frontendmasters.com/)
- [Egghead](https://egghead.io/)
- [Pluralsight](https://www.pluralsight.com/)
- [Udemy](https://www.udemy.com/)
- [Safari Books Online](https://www.oreilly.com/) - a lot of books after a paid subscription

Additionally, these free books are great to improve JavaScript and to have a good grasp of Frontend Development:
- [Eloquent JavaScript](https://eloquentjavascript.net/)
- [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS)
- [FrontendMasters Handbook](https://frontendmasters.com/books/front-end-handbook/2019/)

---

# Sum Up
1 hour of Frontend challenge per day, if it's too hard, just try a simpler one, or move it to the next day. Read, but not all the time, try to stick to the topics you're learning and implement freshly absorbed knowledge. It will click faster. Practice by building projects.

Read, watch, search for a particular problem you're trying to solve. **Hands-on the code as fast as you can**. Mix often, your brain won't be bored.

Try different approaches, connect them together, and shape up your unique learning process to skyrocket in Frontend Development. 🚀

---

# Closing Notes
Remember, learning to code is hard. You'll fail non-stop, want to quit, and throw it away. Survive and one day everything will "click" together and out of nowhere, you'll start enjoying it to the max. It's worth it.

---
I'm thinking about creating YT video series - building [projects](https://bigsondev.com/projects/) from my website, step-by-step, modern technologies, best coding practices with a thorough explanation.

If you enjoy the content and like the idea, [Buy me a pizza](https://www.buymeacoffee.com/bigsondev).
Let's reach that goal together. 😊

Thanks for all the support!

Get in touch: [Mentorship](https://bigsondev.com/mentorship/) | [Twitter](https://twitter.com/BigsonDev) | [LinkedIn](https://www.linkedin.com/in/adrian-bigaj-282277130/)