<p>Innspired by <a target="_blank" href="roadmap.sh/frontend">roadmap.sh/frontend</a>, here is my take:</p>
<h1 id="1-start">1. Start</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099542894/YyzcNfacK.png" alt="Frame 1.png" /></p>
<h1 id="2-computer-science-fundamentals">2. Computer Science Fundamentals</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099575212/I2rzg6vfc.png" alt="Frame 2.png" /></p>
<h1 id="3-internet">3. Internet</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099600871/ipqXD8KZU.png" alt="Frame 3.png" /></p>
<h1 id="4-html-and-css">4. HTML &amp; CSS</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099611416/pPu2eNwNG.png" alt="Frame 4.png" /></p>
<h1 id="5-javascript">5. JavaScript</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099619297/NqvbB7F6m.png" alt="Frame 5.png" /></p>
<h1 id="6-ecosystem">6. Ecosystem</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099636731/hXY_iYzAY.png" alt="Frame 7.png" /></p>
<h1 id="7-git">7. Git</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099643712/vUwmbpSOo.png" alt="Frame 6.png" /></p>
<h1 id="8-nodejs">8. NodeJS</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099653257/VwCAgGPt3t.png" alt="Frame 10.png" /></p>
<h1 id="9-reactjs">9. ReactJS</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099667047/_gw6Hgo6y.png" alt="Frame 8.png" /></p>
<h1 id="10-modern-css">10. Modern CSS</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099675241/w0PqlbkRp.png" alt="Frame 9.png" /></p>
<h1 id="11-graphql">11. GraphQL</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099683698/SX6-3wa-Q.png" alt="Frame 11.png" /></p>
<h1 id="12-typescript">12. TypeScript</h1>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617099689646/vMGUl6cxq.png" alt="Frame 12.png" /></p>
<hr />
<p>Happy coding, <a target="_blank" href="https://twitter.com/nickbulljs">Nick</a></p>
<p>If you want to learn the 6th step, JavaScript, then I'm working on a JavaScript course that fixes One thing that 97% of other courses lack: a combination of modern and practical JavaScript theory with real-world practice.</p>
<p>Try to get it here:  <a target="_blank" href="https://javascriptcoursethatworks.com/">javascriptcoursethatworks.com</a></p>
<p>If you like this article you need to know that every Monday, I send a letter to 4,000+ Web Developers with 3 hand-picked articles from the tech world, 2 web development guides, and 1 best Tweet of the week</p>
<p><em>“Your newsletter is f**king awesome, really Nick. It gives me a great start to the week with a lot of great knowledge.”</em></p>
<p>Join smart developers who get short and full of knowledge letters for free <a target="_blank" href="https://nickbulljs.com/newsletter/">here</a>.</p>



Innspired by [roadmap.sh/frontend](roadmap.sh/frontend), here is my take:

# 1. Start

![Frame 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099542894/YyzcNfacK.png)

# 2. Computer Science Fundamentals

![Frame 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099575212/I2rzg6vfc.png)

# 3. Internet


![Frame 3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099600871/ipqXD8KZU.png)

# 4. HTML & CSS

![Frame 4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099611416/pPu2eNwNG.png)

# 5. JavaScript

![Frame 5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099619297/NqvbB7F6m.png)

# 6. Ecosystem

![Frame 7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099636731/hXY_iYzAY.png)

# 7. Git

![Frame 6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099643712/vUwmbpSOo.png)

# 8. NodeJS

![Frame 10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099653257/VwCAgGPt3t.png)

# 9. ReactJS

![Frame 8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099667047/_gw6Hgo6y.png)

# 10. Modern CSS

![Frame 9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099675241/w0PqlbkRp.png)

# 11. GraphQL

![Frame 11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099683698/SX6-3wa-Q.png)

# 12. TypeScript

![Frame 12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617099689646/vMGUl6cxq.png)

---

Happy coding, [Nick](https://twitter.com/nickbulljs)

If you want to learn the 6th step, JavaScript, then I'm working on a JavaScript course that fixes One thing that 97% of other courses lack: a combination of modern and practical JavaScript theory with real-world practice.

Try to get it here:  [javascriptcoursethatworks.com](https://javascriptcoursethatworks.com/)

If you like this article you need to know that every Monday, I send a letter to 4,000+ Web Developers with 3 hand-picked articles from the tech world, 2 web development guides, and 1 best Tweet of the week

*“Your newsletter is f**king awesome, really Nick. It gives me a great start to the week with a lot of great knowledge.”*

Join smart developers who get short and full of knowledge letters for free [here](https://nickbulljs.com/newsletter/).

My take

Step By Step Guide To Become Modern Frontend Developer In 2021

Hey, I'm Nick. Writing on web development, tech annd life.

Nick Bull Blog

Nick Bull Blog

Step By Step Guide To Become Modern Frontend Developer In 2021

My take

1. Start

2. Computer Science Fundamentals

3. Internet

4. HTML & CSS

5. JavaScript

6. Ecosystem

7. Git

8. NodeJS

9. ReactJS

10. Modern CSS

11. GraphQL

12. TypeScript