If you're learning or planning to learn Web Development in 2021 then this thread is for you

🧵👇🏻

WHERE TO START? Front-end or Backend?

- Well this may be a debatable question but I would suggest you to start with front-end development

- It depends entirely on the individual but in my opinion, starting with front-end development has its advantages.

{ 2 / 16 }

WHY TO START WITH FRONT-END DEVELOPMENT?

- More visual content gives you an aesthetic vibe

- You can share your creations

- Easier to get feedback as you can show your webpages to any non technical person as well

{ 3 / 16 }

FUNDAMENTALS ARE IMPORTANT

- Don't rush! Spend some time on HTML, CSS and JavaScript. You can do pretty amazing things using these three languages

{ 4 / 16 }

- Make sure to learn and build some web pages using HTML and CSS before jumping onto JavaScript

- JavaScript is the backbone of web development, Don't rush to start with React/Angular/vue or any other front-end framework or library

{ 5 / 16 }

A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵

Grid is used for making complex web design layouts more easily as it's not so hard to master

Using Flex you can make only 1D layout but Grid gives you full power of creating 2D layout

Let's start

{ 2 / 21 }

First things first, start with giving the display property "grid" to the container element or parent element

{ 3 / 21 }

Nothing will change after adding display: flex; in the parent container becuase we need to define the width of columns. In order to set that columns width we have gird-template-columns property

{ 4 / 21 }

Let's start with defining the width of our columns.

For example, let's say I need two columns of width 60% and 40% respectively

grid-template-columns: 60% 40%;

{ 5 / 21 }

Web development resources for free

Mega Thread 🧵 👇🏻

1️⃣ Online learning platforms 📘

- Udemy
- FreeCodeCamp
- Treehouse
- Frontend masters
- Coursera
- Traversy media
- SoloLearn
- Codecademy
- Udacity
- Alison
- Code college
- LinkedIn Learning
- Skillshare
- EdX

2️⃣ Editors and share code snippets ✍🏻

- PlayCode
- JSFiddle
- CodePen
- StackBlitz
- JSBin
- Codesandbox
- Codeinterview .io
- godbolt .org
- wandbox .org
- carbon .now.sh
- pastebin .com
- ideone .com
- ide .judge0.com

3️⃣ Documentations and notes 📄

- w3 schools
- mdn
- Devdocs
- geeksforgeeks
- tutorialspoint
- javapoint

4️⃣ Competitive programming 👩‍💻

- CodeChef
- HackerEarth
- HackerRank
- AlgoExpert
- LeetCode
- TopCoder
- Codewars
- Codeforces
- Coderbyte
- Exercism