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

✨ Speed up your learning process by creating projects✨

Check out these amazing project's tutorial on YouTube👇

1️⃣ ECommerce Web Shop🛒

🔗 https://t.co/XoGriuRAFz

2️⃣ 10 JavaScript Projects in 10 Hours

🔗 https://t.co/dA2dGhuzw9

3️⃣ Simple photo Editor📸🖼️

🔗 https://t.co/c3G9O3Gy7Y

4️⃣ Music App🎵

🔗 https://t.co/q5Kv3mSDqK

5️⃣ Expense Tracker💸

🔗 https://t.co/mdCKadYyhL

6️⃣ Chat Application

🔗 https://t.co/GJUQEfsm3W

7️⃣ Full-Stack AMAZON Clone

🔗 https://t.co/SCXzRnihdC

8️⃣ Portfolio website

🔗 https://t.co/0guAze0oDw

9️⃣ Portfolio using Tailwind CSS

🔗 https://t.co/yOBVh23iKL

🔟 Flappy Bird

🔗 https://t.co/HDc4fCMCa7


#html #css#Javascript #JS #projects #Games

Follow @learn_JavaScript_js for more JavaScript content.

✨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

✨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

✨If you divide web development into subparts, it becomes easy to learn✨

Lesson 1: HTML and CSS 🧱🎨
Lesson 2: CSS frameworks 🧮
Lesson 3: JS and DOM ⚙️📃
Lesson 4: Git and GitHub 🗂️
Lesson 5: React / Angular / Vue ⚛️
Lesson 6: Node.js 🔙🔚
Lesson 7: API and Database 🗄️📄


#Webdevelopment

Follow @learn_webdevelopment for more Web Dev content

✨Check out these amazing template sites✨

📌 https://t.co/bUcMPbPi56
📌 https://t.co/b3lRmgTMMw
📌 https://t.co/KFHSRGsJCF
📌 https://t.co/Nr1PSKXLFl
📌 https://t.co/wlIjPhHJAK
📌 https://t.co/WI0uFLN4Xu
📌 https://t.co/90ipM5tjoi
📌 https://t.co/QMHWXYxvyf

Git learning is important in the field of development. I suggest you learn it after HTML, CSS and JS

Learn Git interactively👇

📌 https://t.co/i6aRYkkwaW
📌 https://t.co/9gl7aF0HuZ
📌 https://t.co/E5pj90UCDz

#Github #Git

Follow @learn_webdevelopment for more Web Dev content

If you guys want to try
Check the code below👇

HTML:
<div class="container">
<div class="content">
<h1>LEARN JAVASCRIPT</h1>
<h3>All info and tutorial of JAVA SCRIPT (JS)</h3>
</div>
<div class="flap"></div>
</div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;900&display=swap');

body {
background: #f2f2f2;
}

.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 600px;
background: #f2f2f2;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 0 20px 8px #d0d0d0;
}

.content {
position: absolute;
top: 50%;
transform: translatey(-50%);
text-align: justify;
color: black;
padding: 40px;
font-family: 'Merriweather', serif;
}

h1 {
font-weight: 900;
text-align: center;
}

h3 {
font-weight: 300;
}

.flap {
width: 100%;
height: 100%;
}

.flap::before {
position: absolute;
content: "";
height: 100%;
width: 50%;
background: url("https://pbs.twimg.com/profile_images/1347537601989730307/QDQ0IZXv_400x400.jpg") white;
background-position: 100px;
background-repeat: no-repeat;
transition: 1s;
}

.flap::after {
position: absolute;
content: "";
height: 100%;
width: 50%;
right: 0;
background: url("https://pbs.twimg.com/profile_images/1347537601989730307/QDQ0IZXv_400x400.jpg") white;
background-position: -200px;
background-repeat: no-repeat;
transition: 1s;
}

.container:hover .flap::after {
transform: translatex(300px);
}

.container:hover .flap::before{
transform: translatex(-300px);
}