Websites that Helped My Frontend Journey
Tags: webdev, frontend, tips, community
Published: 2022-12-24 04:21:12

Let’s be honest, every programming journey can be a little bit confusing sometimes. Be it frontend dev, backend dev, or fullstack. Maybe it’s because you don’t know where to start or when you do know, you feel overwhelmed because there are so many languages and frameworks to learn. So here are the websites that helped me throughout my journey to be a better frontend dev.

## 1. [roadmap.sh](https://roadmap.sh)

![roadmap.sh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfekrmcxfwr0d0y2wudd.png)

[roadmap.sh](https://roadmap.sh) is a website for roadmaps, guides, and video tutorials for learning based on the role you want to be.

What I like about this web is the roadmap. Because not only it has all the language and requirements that you need to learn, but also has a simple explanation and references that can help you understand more about that language. And it’s FREE of course. The reference is a link that redirects us to an article or tutorial, video, and even free courses.

![Preview of the roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2rqnk2c44qllpql8s5a.png)

## 2. [freeCodeCamp](https://www.freecodecamp.org/learn)

![FreeCodeCamp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cc4j6eeixu863p9ip27.png)

[freeCodeCamp](https://www.freecodecamp.org/learn) is a free online course certification. 

What I like about [freeCodeCamp](https://www.freecodecamp.org/learn) other than it’s free, it also takes you to step by step on how to learn your chosen course. For example, let’s just say you chose the [New Responsive Web Design course](https://www.freecodecamp.org/learn/2022/responsive-web-design/), inside the course, you’ll encounter the first section which is the basic HTML and CSS.


![Inside the New Responsive Web Design course](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ls2d3n2bb0g205861w2.png)

And after you learned the basic HTML and CSS, you can scroll down to the next section and start the more advanced CSS such as Flexbox and typography.


![Inside the New Responsive Web Design course](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qtjylqgyhc6imdi0sgu.png)

Now, inside each section, there’s a certification project for your certification. After you complete all the certification projects, you will receive a certificate of completion. You can check your certificate in your profile menu.

[freeCodeCamp](https://www.freecodecamp.org/learn) certification is also available for Backend, Data Visualization, Quality Assurance, and many more.

## 3. [Frontend Mentor](https://www.frontendmentor.io/)

![Frontend Mentor Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10aaagtq2zrgpgikbdfk.png)

[Frontend Mentor](https://www.frontendmentor.io/) is a freemium website to improve you frontend skills with real projects. 

What I like about this web other than its real projects is that you don’t have to design the project. For free users, after you start the challenge, you will be given a zip file containing the designs in .jpg, image assets, and the style guide. But thanks to this, you can also learn your pixel-perfect skill, and detailing on the side. If you’re a pro user, you can get access to Sketch and Figma design files. 

Frontend mentor also has a [Slack community](https://www.frontendmentor.io/slack)

## 4. [w3schools](https://www.w3schools.com/)

![w3schools' hero section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrz9csdf98ua18uxdbgx.png)

[W3Schools](https://www.w3schools.com/) is a website for tutorials.

What I like about this website is that it offers a lot of programming language tutorials, and a lot of how-tos, every explanation is simplified to avoid confusion, and every tutorial has a code editor for you to try and/or edit the code. All in all, it’s perfect for everyone at any level. The editor is also available in light and dark theme.

![Light theme editor in w3school](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pufzsujwd7m27g93jnvd.png)

![Dark theme editor in w3school](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhjxb89vn8q0ixtbdiz0.png)

W3schools also has [quizzes](https://www.w3schools.com/quiztest/default.asp), [exercise](https://www.w3schools.com/exercises/index.php), [certification](https://campus.w3schools.com/collections/course-catalog), [web templates](https://www.w3schools.com/w3css/w3css_templates.asp), [W3Schools spaces](https://www.w3schools.com/spaces/index.html) to build your own website and [discord server](https://discord.com/invite/6Z7UaRbUQM)

And there you have it, the websites that helped me throughout my frontend journey. Let me know which website helped your journey in the comments 😁.

Thanks for coming by and Peace ✌

---

## Author
- Github: [@NabillaTrisnani](https://github.com/NabillaTrisnani)
- LinkendIn: [Nabilla Trisnani](https://www.linkedin.com/in/nabilla-trisnani/)
- Twitter: [@NabillaTrisnani](https://twitter.com/NabillaTrisnani)