Front-end developer roadmap for 2021 🧵👇🏼
I started my web development journey exactly one year ago i,e. January 2020 and it's been a year since I'm in learning phase

In this thread I'll be covering

- All you need to learn about front-end development
- Tools and technologies
- Skills you need to learn
- Resources
First things first, you need an editor to write code. There are plethora of editors out there like atom, VS code, sublime etc

I recommend you to start with VS code. Why?👇🏼

🔹Many built-in features
🔹It's fast
🔹Large community
🔹IntelliSense code completion and debugging
Don't want to download an editor due to memory issue or something else?

Don't worry we have lots of online editors also👇🏼

🔹 http://codepen.io 
🔹 http://codesandbox.io 
CodeSandbox: Online Code Editor and IDE for Rapid Web Development

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster

http://codepen.io
Now you're all set to write code and create beautiful websites

A typical website can be divide into three phases

- HTML 🧱
- CSS 🎨
- JavaScript ⚙️
1. HTML

- It is used to build the skeleton for your website
- It's a markup language that totally operates on tags
- You can master it with 10 days

🔹 https://www.w3schools.com/html/ 
2. CSS

- It is used to give the styling for your website
- Cascading Style Sheets, that totally operates on different properties
- You can learn it within 20-25 days but it will take time to master it
There are 520 distinct properties in CSS. But according to my personal experience, you will hardly use all of them.

Generally CSS revolves around👇🏼

- Box model
- Position
- Background
- Animation
- Media query
- Flex box
- CSS grid
Learning resources for CSS

Documentation
🔹 https://www.w3schools.com/css/ 

Check out this amazing article in order to learn CSS by playing games
🔹 https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f
8 Games to learn CSS the fun way

I must admit, I have trouble remembering things. Especially when it comes to CSS. The Flexbox Layout...

https://www.w3schools.com/css/
CSS Frameworks

- In simple words CSS frameworks are the CSS code written by some other developers. All you need to do is just import in your HTML file and now you can add styling in your website with even writing CSS code by yourself

- Isn't it cool😍
Learning a particular CSS framework is pretty easy. You can learn them by reading official documentation
- Pick any CSS Frameworks by your choice👇🏼

🔹Tailwind CSS
🔹Bootstrap
🔹Bulma
🔹Materialize CSS
🔹Foundation

... and many more
JavaScript

- JS is used to add functionality and behavior in your website

- JavaScript is a popular programming and widely used language for Web Development

- You can't master JS in few days or months, It will take time

But you will be able to create websites in few days.
Start with the basic topics👇🏼

- Data types
- Loops
- Conditional statements
- Objects
- Arrays
- Functions
Learning resources

Documentation
🔹 https://developer.mozilla.org/en-US/docs/Web/JavaScript

Other learning resources
🔹Start with freecodecamp @freeCodeCamp

🔹Recently @frontenddude launched a website for free JS resources 👉🏼 "java5cript .com"
Document Object Model (DOM)

- With the HTML DOM, you can access, modify and changes the HTML elements

- When a web page is loaded, the browser creates a Document Object Model of the page
With the help of DOM, JavaScript can change the

- elements in the page
- attributes
- CSS styling

I mean now you have a super power to make changes in you webpage using JS
Resources for DOM

🔹 https://www.w3schools.com/js/js_htmldom.asp
🔹 https://www.javascripttutorial.net/javascript-dom/ 
JavaScript DOM Tutorial

This section covers the JavaScript Document Object Model (DOM) and shows you how to manipulate DOM elements effectively.

https://www.w3schools.com/js/js_htmldom.asp
I think now it's the right time to learn Git and GitHub (version control)

- Git is a Version Control system used for tracking changes
- GitHub is a code hosting platform of Git

An amazing crash course by @freeCodeCamp on YouTube
JavaScript front-end frameworks and libraries

There are many like React, Angular, vue, Ember, Backbone etc. All are equally good.

I love React so I'm providing the learning resources for React👇🏼
You can check my complete thread of React resources https://twitter.com/Prathkum/status/1297814772113539072?s=20
Advance Learning

- PWA
- JAMstack
- PWA are the web applications that are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices

- JAMstack stands for JavaScript, APIs, and Markup. Designed to make the web faster, more secure, and easier to scalable.
🔹 https://web.dev/progressive-web-apps/

🔹 https://jamstack.org/ 
For fast and secure sites | Jamstack

What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it's the best approach for building faster, more secure websites.

https://web.dev/progressive-web-apps/
That's pretty much it for this thread. I hope you like it❤️
You can follow @Prathkum.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
Those who think consciousness raising & movement building are disconnected, or even a distraction from electoral politics have not paid attention to the history of social change.In this thread, we
Read more
The 2020s will be known as the Remote Work decadeA few predictions of what is likely to emerge[ a thread ] Third Space: Office and Working from Home will
Read more
1/29: Have you ever had a concept explained to you that helps frame complex issues you’ve been wrestling with and opens your eyes to new possibilities? A concept that I
Read more
By continuing to use the site, you are consenting to the use of cookies as explained in our Cookie Policy to improve your experience.