Front-end developer roadmap for 2021👇🏻

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👇🏼

🔹CODEPEN :-
🔗https://t.co/aq2wrH6cD3
🔹CODE SANDBOX :-
🔗https://t.co/drzfitzmsG


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

🔹 W3schools- HTML :- https://t.co/TlrsSM0dh9

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
🔹 W3SCHOOLS-CSS :-
🔗 https://t.co/bBk1rSijxo

Check out this amazing article in order to learn CSS by playing games

🔹https://t.co/2klS6NLZ79

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

3.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://t.co/XkMlZQOF0h

Other learning resources
🔹Start with freecodecamp
🔗 freeCodeCamp.org

🔹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://t.co/M9bS7wYawD
🔗https://t.co/xEsT3lbT1P

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

🔗 https://t.co/ysa17PpoGO

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👇🏼


1. React official documents itself.

🔗 https://t.co/SSHFCafQsW

2.If you like reading more than watching tutorials like me, here are the well written notes for React.
You can find almost very topic, related to React here.

🔗 https://t.co/SKeUltTC5m

3. React notes on geeks site

🔗https://t.co/oCvzRLdLHT

4. You can test you React knowledge on this website. You have to write short code snippets here.
Really helpful be sure to check it out.

🔗 https://t.co/oXvqRPwzhe

5. If you like watching tutorials rather than reading, No issues.
You can check the traversymedia React crash course

🔗 https://t.co/eOiYUM0V25

6.You’ll develop a strong understanding of React’s most essential concepts.

🔗 https://t.co/ULjmU2eZ9n

7. Learn in an interactive environment. Understand how React works not just how to build with React.

🔗 https://t.co/rlHF6YC1gc

8. A well written material on javapoint.
Give it a look

🔗 https://t.co/MwAjMBBVT3

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://t.co/n7mPgDLlN8

🔹https://t.co/4bMt5hRQKX

That's pretty much it for this thread. I hope you like it❤️

#Webdevelopment #JS #JavaScript #Html #Css #web

Follow @learn_webdevelopment for Web development tutorials

✨Want to learn/master git and GitHub?✨

Here are some Best Free Resources for you👇🏻

⚡️ Git introduction for "advanced beginners," who are still struggling.

🔗 https://t.co/yRMuWX9pO7

⚡️ Git Immersion

A guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it.

🔗 https://t.co/E1WEzZopeE

⚡️ Official Guide/Tutorials by GitHub

🔗 https://t.co/My8G82xmsj

⚡️ How to get out of common git mistakes described in plain English.

(Highly recommended for beginner)

🔗 https://t.co/DWtvFynck5

⚡️ Git Cheat Sheet by GitHub

🔗 https://t.co/WF8pLuLpE4

⚡️ Best Practices

🔗 https://t.co/fcrZ7NuIWt

⚡️ Become a git guru, complete guide by Atlassian.

🔗https://t.co/5GStdyNvZS

⚡️Pro tip

Learn the basics and keep working on projects. You will learn about git side by side through your mistakes

Follow @Programmingworld_dev for more programming stuff

✨Check out these amazing CSS makers🌈✨

👇👇👇

1⃣ CSS Button Creator

The easiest way to create imageless CSS buttons. You can customize background, color, shadow, padding, margin and almost everything

🔗 https://t.co/RpFWrupvxW

2⃣ Blob Maker

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time

🔗 https://t.co/VirvMeNQMh

3⃣ Make some waves

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize

🔗 https://t.co/go14BIUf9q

4⃣ CSS Generator

The ultimate CSS generator. Learn CSS3 with our generators and preview your results! And you don't even need CSS experience to start

🔗 https://t.co/mu0HaOBfvJ

5⃣ Gradient Generator

As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile

🔗 https://t.co/fNbmi2CKCW

6⃣ Animista

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

🔗 https://t.co/4tDSAL5WiZ

7⃣ CSS Animate

Online tool for creating native CSS3 Keyframes Animation. You can easy and fast generate consistent CSS3 animation using simple UI without any coding

🔗 https://t.co/ZPiZtj5XrA

8⃣ Keyframes

Create basic or complex CSS keyframe animations with a visual timeline editor similar to video-editing software

🔗 https://t.co/UkaCVmYxsK


9⃣ Enjoy CSS

Enjoy CSS lets you create almost everything in CSS. It'ss handy and simple UI allows you to adjust rich graphical styles quickly and without coding

🔗 https://t.co/LzJpPPjkIx

🔟Neumorphism Maker

Neumorphic UI generator

🔗 https://t.co/dlIOGg8Jm3


#Webdevelopment #Html #Css

Follow @learn_CSS_web for more CSS Content

✨React Free Resources for Beginners ✨


⚡️ Official Website tutorials

🔗 https://t.co/twXB5ZEkna

⚡️ Official Docs

🔗 https://t.co/krKxcOhuwp

⚡️The Beginner's Guide to React

🔗 https://t.co/fsFIQK5oBf

⚡️Learn React for free, A course by Scrimba

🔗 https://t.co/RWx4u8hwJ4

⚡️React Tutorial for Beginners

🔗 https://t.co/Obw6R1gzwt

⚡️React JS Crash Course (2019) by traversymedia

🔗 https://t.co/LJfH2F12K5

⚡️ FreeCodeCamp React Challenges

🔗https://t.co/bhVUfjTCJH

⚡️React.js cheatsheet

🔗https://t.co/iiojWZcCGQ

⚡️React Patterns

🔗 https://t.co/FQZSMxgptr

⚡️Most Important GitHub Repo filled with React Resources

🔗 https://t.co/jybb7y0Hp4


#Javascript #JS #VSCode #es6 #VScodeExtensions

Follow @JavaScript_js_learn for more JavaScript content.

✨React animation libraries✨

📌 react-spring
📌 Framer Motion
📌 React Transition Group
📌 React Move
📌 React-Motion
📌 React Awesome Reveal
📌 React Tweenful

✨50 resources for learning JavaScript ✨

📌 DOCUMENTATION

1. MDN
https://t.co/XkMlZQOF0h

2. W3 Schools
https://t.co/eUYCudNHc8

3. DevDocs
https://t.co/sVwCCrYKwA

4. JavaScript Info
https://t.co/GLcMZmyfC9

5. JavaScript Garden
https://t.co/0YRzjuNZKx

📌 COURSES

6. Code Academy
https://t.co/cvQ6YhUTi1

7. Udemy
https://t.co/5HhRs4nCcJ

8. Coursera
https://t.co/JBpYAC02pT

9. Plural Sight
https://t.co/oBJ2K7kYni

10. Scrimba
https://t.co/lFRBDcQIJk


📌 WEBSITES

11. Geeks For Geeks
https://t.co/KSZIFLQInp

12. Java Point
https://t.co/M9IzGpeRs0

13. Tutorials Point
https://t.co/WE10KtxVd7

14. The Odin Project
https://t.co/aikkB3sJ0H

15. Learn JS
https://t.co/m7LkJejVqR

16. JavaScript Wikipedia
https://t.co/dd2mJ2ByLv

17. JavaScript 30
https://t.co/X2e6T9qFW5

18. JavaScript for Cats
https://t.co/wxd0BhSLya

19. Java5cript
https://t.co/2gdB6LdfQ8

20. Scotch io
https://t.co/iBKDaHSkIu


📌 YOUTUBE VIDEOS

21. JavaScript Mastery
https://t.co/1zcSeu4zKE

22. Clever Programmer
https://t.co/GcIIDzek7r

23. Edureka
https://t.co/YCCITWKlaL

24. Coursera
https://t.co/YCCITWKlaL

25. Freecodecamp
https://t.co/WbI9QnTOj2

26. Web Dev Simplified
https://t.co/WY7MNKOull

27. Traversy Media
https://t.co/h1iStFlpLY

28. Edureka
https://t.co/W1gZFjmQ8k

29. Hitesh Choudhary
https://t.co/Y5rOtj9Khj

30. Simon Høiberg
https://t.co/SJ6DhbNdvw

📌 BOOKS

31. Eloquent JS
https://t.co/IvMFOzDhjB

32. JS Design pattern
https://t.co/gmV3oi6nDQ

33. The JavaScript Beginner's Handbook
https://t.co/v0Ed5EJPJD

34. Learn JavaScript with Ease
https://t.co/a5PE7fNg2D

35. Human JavaScript
https://t.co/USz02nuHFw

📌 GITHUB REPOS

36. Modern JavaScript tutorials
https://t.co/vDgTJKbz74

37. Awesome JS Learning
https://t.co/CUCBjfJEcY

38. JS by example
https://t.co/VLT6dRwLSp

39. 33 JS concepts
https://t.co/F5KDOSaACD

40. 30 seconds of code
https://t.co/zWcmMtg2xa

📌 PROJECTS

46. 10 JS projects in 10 hours
https://t.co/dA2dGhuzw9

47. 15 JS projects
https://t.co/YWdH2cuBCi

48. Build 7 games using JS
https://t.co/iTM0Bkrckr

49. 50 projects in 50 days
https://t.co/LOPeEkHcoY

50. JavaScript Projects for Beginners
https://t.co/DQpOL90qLu

#Javascript #JS #resourses #tutorials

Follow @JavaScript_js_learn for more JavaScript content.

✨63 RESOURCES OF CSS🌈✨

📌 COLORS

1. Color Hunt
🔗 https://t.co/xR0FVT299d

2. Coolors
🔗 https://t.co/fDBRU6JzNz

3. HTML color codes
🔗 https://t.co/umYSuvtA9z

4. UI Gradients
🔗 https://t.co/wl8I6pPzO3

5. Gradient generator
🔗 https://t.co/Yr6pueoWgx

6. Encycolorpedia
🔗 https://t.co/TATnFDElEu

7. WebFx
🔗 https://t.co/vOqEXNMlG0

8. Radial Gradient
🔗 https://t.co/dlCExilHAT

9. COLORS
🔗 https://t.co/vaNoGFLxNY

10. Flat UI colors 2
🔗 https://t.co/FDFKbhCcx3

📌 CODE SNIPPETS

11. Web tools
🔗 https://t.co/K9QzJeX1gd

12. Little snippets
🔗 https://t.co/qxAyA2wA6U

13. Enjoy CSS
🔗 https://t.co/Jt0rw3MT0n

14. CSS Tricks
🔗 https://t.co/DLt7cjx7UN

15. CSS Deck
🔗 https://t.co/mbBflUSDl5

16. W3 How to
🔗 https://t.co/VHF5yDxSQe

17. Snipplr
🔗 https://t.co/Nwys4AtCur

18. Stack overflow
🔗 https://t.co/8rEohtDYIS

19. Codepen
🔗 https://t.co/n0NfUDHipj

20. Code my UI
🔗 https://t.co/N8NQLf8ehn

📌 DOCUMENTATION AND NOTES

21. W3 Schools
🔗 https://t.co/bBk1rSijxo

22. MDN
🔗 https://t.co/rp3CTZtHqY

23. DevDocs
🔗 https://t.co/R6lI9CWzOU

24. Geeks for geeks
🔗 https://t.co/FOBY8SxTGw

25. Tutorials point
🔗 https://t.co/iyzeX0qjZ7

📌 CSS GENERATORS

26. CSS button creator
🔗 https://t.co/akgUkz6JBU

27. Blob Maker
🔗 https://t.co/7dk2UceFrg

28. Waves maker
🔗 https://t.co/eYqUUcUFth

29. Enjoy CSS
🔗 https://t.co/Jt0rw3MT0n

30. Neumorphic UI
🔗 https://t.co/2c7frT1q06

31. Glassmorphism Generator
🔗 https://t.co/OXQTU724rO

32. Keyframes
🔗 https://t.co/IFmIEgDiVY

33. Animista
🔗 https://t.co/N1UuMCedJS

34. Fancy border
🔗 https://t.co/ND4asCR7cy

35. CSS Generators tool
🔗 https://t.co/e4idW76y8j

36. CSS 3 maker
🔗 https://t.co/DNY3DvHopw

37. CSS clip path maker
🔗 https://t.co/Vz3ncWSbFc

38. CSS shapes generator
🔗 https://t.co/Xq5ay45cL7

39. Pattern generator
🔗 https://t.co/NQuV7pxLIz

40. Background image generator
🔗 https://t.co/46MtBPayKq

📌 DESIGN INSPIRATION

41. CSS design awards
🔗 https://t.co/E91CzajKvu

42. Awwwards
🔗 https://t.co/Qa1TSqejM8

43. CSS nectar
🔗 https://t.co/1MZEmdDcVq

44. Design modo
🔗 https://t.co/updhmaFZyi

45. CSS winner
🔗 https://t.co/nRrbYj06Y7


📌 YOUTUBE TUTORIALS

46. Free code camp
🔗 https://t.co/6XnTabhGQX

47. Traversy media
🔗 https://t.co/fYaxT3DCy2

48. Coding artist
🔗 https://t.co/JZ29Y8Fis2

49. Edureka
🔗 https://t.co/bCiEvdRG4z

50. Red Stapler
🔗 https://t.co/dq5YJA96Gl

📌 GITHUB REPO

51. Awesome CSS
🔗 https://t.co/Jdm7zVzg4Z

52. 30 seconds of CSS
🔗 https://t.co/S1o9QfwJPM

53. CSS Protips
🔗 https://t.co/5haB2xTWuz

54. Awesome flexbox
🔗 https://t.co/plkIV609lg

55. Understanding flexbox
🔗 https://t.co/mUtiez6eWV

📌 CHROME EXTENSIONS

59. CSS Peeper
🔗 https://t.co/3OCrTJBfV8

60. Pesticide
🔗 https://t.co/320fLzeMll

61. Stylebot
🔗 https://t.co/7hWBvvIYMQ

62. Perfect Pixel
🔗 https://t.co/wdLauKshN3

63. Colorpick eyedropper
🔗 https://t.co/x6Xaoc0ePW

#Webdevelopment #Html #Css #cssresources #css3

Follow @learn_CSS_web for more CSS Content

✨50 Resources for learning React in 2021⚛️✨

📌 DOCUMENTATION

1. React official docs
https://t.co/SSHFC9YfBo

2. MDN docs
https://t.co/N7lc9FArAi

3. W3 Schools
https://t.co/wqf3htdP9n

4. DevDocs
https://t.co/VIX7uOW75K

5. Tutorials Point
https://t.co/SKeUlubdtW

6. Geeks for geeks
https://t.co/oCvzRLvn6t

7. Freecodecamp
https://t.co/TveXXpmpTl

8. Java Point
https://t.co/MwAjMBkl1v

📌 YouTube Tutorials

9. Traversy media
https://t.co/ZUV3NGplXm

10. Clever programmer
https://t.co/rZ5H4Z4Sdo

11. Free code camp
https://t.co/kJGL0o7nAz

12. Programming with Mosh
https://t.co/DlJWANLPxQ

13. Edureka
https://t.co/H9RK9wYtBG

14. Bitfumes
https://t.co/JYB9qo1pKO

15. Simplilearn
https://t.co/sCUPKGVpwn

📌 Free courses

16. Egg Head
https://t.co/3z22aeVQFc

17. Codeacademy
https://t.co/ULjmU2wAxX

18. Plural Sight
https://t.co/CsLuL2S1ty

19. Coursera
https://t.co/3cAXjmF4HI

20. Udemy
https://t.co/Zpvo77Eb30

21. Scrimba
https://t.co/UhiZ5Vzq6G

📌 GitHub repo

22. Awesome React
https://t.co/ovEsMyiIPJ

23. React developer roadmap
https://t.co/u16ObCAKhG

24. 30 seconds of React
https://t.co/PeEBGhLhK7

25. Learning React
https://t.co/R1tRbJW5cK

26. Awesome React components
https://t.co/rrPjpwLJcx

27. Amazing React projects
https://t.co/h0H2GXndyo

📌 Interactive learning

28. React tutorial
https://t.co/tDGMp74YwD

29. React online test
https://t.co/oXvqRPOaFO

30. Build with React
https://t.co/hxTBIcVhUR

31. Kirupa
https://t.co/GG8r2BydRE

32. Free mock test
https://t.co/eNwENYckOG

33. React games
https://t.co/qPd0CsOoeC

📌 Books and Websites

34. The React Beginner's Handbook
https://t.co/4rHgWU7zTr

35. React Enlightenment
https://t.co/amClrnaWMs

36. Reintroducing React
https://t.co/U558LaZ6ma

37. Web dev
https://t.co/4bJnOAPYLE

38. Level Up Your React Skills
https://t.co/gTFFf0eY59

39. Kirupa
https://t.co/GG8r2BydRE

40. React for beginners
https://t.co/UmMpmqPwjW

📌 Projects

41. 15 React projects
https://t.co/lRtS5IBpBv

42. React projects playlist
https://t.co/T3u3BpQTEj

43. Amazon Clone
https://t.co/SCXzRnihdC

44. Projects ideas
https://t.co/Rkek2qvAT8

45. Exciting React Project
https://t.co/ngWf2kxvCq

46. https://t.co/jaQYn2ayt9

47. Voice controlled eCommerce
https://t.co/XoGriuRAFz

48. Real time chat app
https://t.co/GJUQEfsm3W

49. GitHub jobs
https://t.co/3AdBZ6t1I4

50. Movie app
https://t.co/Hs7TNEoUYQ

#Javascript #JS #resourses #tutorials #JSprojects

Follow @JavaScript_js_learn for more JavaScript content.

_

Follow my other channels

For HTML: @html_web_learn
For CSS: @CSS_web_learn
For JS: @JavaScript_js_learn
For PHP: @learn_php_web
For Programming courses @Programmingworld_dev
For CEH,Cybersec: @technical_stark