Master Frontend Development for Free.

Thread: ๐Ÿงต

Note: Choose one or two resources and concentrate on building projects.

Building projects are the one & only way to excel in web development.
1๏ธโƒฃ Internet:

1. How does Internet work?
๐Ÿ”— https://t.co/xzyO8cMfRw

2. What is HTTP?
๐Ÿ”— https://t.co/dftCCarGvk
3. How do Browsers Work?
๐Ÿ”— https://t.co/3mwSrLhXvY

4. What is Domain?
๐Ÿ”— https://t.co/2ekY8qdGsN
5. What is Hosting?
๐Ÿ”— https://t.co/wdTzfhh00C

6. DNS and How it Works?
๐Ÿ”— https://t.co/hLfxOsLEdd
2๏ธโƒฃ HTML:

๐Ÿ’ข YouTube.
1. Introduction to Web Development:
๐Ÿ”— https://t.co/xmV0JHPIQd

2. HTML Tutorials for Beginners [2021]
๐Ÿ”— https://t.co/NN6qmbKdsY

3. HTML Crash Course for Absolute Beginners.
๐Ÿ”— https://t.co/TCXbF0KPAt
๐Ÿ’ข Websites.
4. ๐Ÿ”— https://t.co/lBHImm9nuw

5. ๐Ÿ”— https://t.co/Svvh9VDy4o

๐Ÿ’ข HTML Roadmap By @_georgemoller
https://t.co/sMK3bIOaFp
@_georgemoller 3๏ธโƒฃ CSS:

๐Ÿ’ข YouTube.
1. CSS Tutorial - Zero to Hero.
๐Ÿ”— https://t.co/V7Z4AxS8he

2. CSS Crash Course for Absolute Beginners.
๐Ÿ”— https://t.co/dUCUgXv3vu

3. Learn CSS in 20 Minutes.
๐Ÿ”— https://t.co/810g4KOlCQ
@_georgemoller ๐Ÿ’ข Websites.
4. ๐Ÿ”— https://t.co/leznvNyARB

5. ๐Ÿ”— https://t.co/E107e05Fcc

6. ๐Ÿ”— https://t.co/CVAQ5NHEIG

๐Ÿ’ข CSS Roadmap By @_georgemoller
https://t.co/GO4QT6pM9C
@_georgemoller ๐Ÿ’ข Paid Courses to Learn HTML and CSS.

1. ๐Ÿ”— https://t.co/OGbRLZw2r4

2. ๐Ÿ”— https://t.co/khYAqp6MKb

3. ๐Ÿ”— https://t.co/a5YYYrsxhj
@_georgemoller ๐Ÿ’ข Improve CSS Skills By Playing GAMES.
1. ๐Ÿ”— https://t.co/ovGtjAFeua

2. ๐Ÿ”— https://t.co/OY7lyZO4Fn

3. ๐Ÿ”— https://t.co/cVMofgjYMs

4. ๐Ÿ”— https://t.co/w4jKZ7hoaP

5. ๐Ÿ”— https://t.co/XQ9So0qxFV
@_georgemoller 4๏ธโƒฃ Build Projects Using HTML and CSS for PRACTICE.

๐Ÿ’ข YouTube.
1. Build a website with Responsive Layout
๐Ÿ”— https://t.co/iEpiG4v7kr

2. Microsoft Homepage Clone.
๐Ÿ”— https://t.co/f4BwaYSRDi

3. Build a Pricing Block Using HTML and CSS
๐Ÿ”— https://t.co/h2bGBb9hFY
@_georgemoller 4. Create a Website with Video Background.
๐Ÿ”— https://t.co/eO14T4Qczg

5. https://t.co/lNDjTC2ooq

6. https://t.co/efMC0zaemg
@_georgemoller ๐Ÿ’ข Websites to Practice front end Skills.

1. ๐Ÿ”— https://t.co/OJdKepVkUx
2. ๐Ÿ”— https://t.co/nBjYusozad
3. ๐Ÿ”— https://t.co/T25dT1rj35
4. ๐Ÿ”— https://t.co/e8deJdqvKf
@_georgemoller 5๏ธโƒฃ JavaScript

๐Ÿ’ข YouTube

1. JavaScript Tutorials for Beginners.
๐Ÿ”— https://t.co/47ftH0XilL

2. Playlist of Awesome JavaScript
๐Ÿ”— https://t.co/TSUEZSEvKA

3. Namaste JavaScript Course
๐Ÿ”— https://t.co/am4r93ltnB

4. Some Useful threads๐Ÿ‘‡
A. https://t.co/q8bVYaaZLj
@_georgemoller B. https://t.co/IPzIRfIJ6W

C. https://t.co/pYMkLPmQKV

D. https://t.co/Z3HFFuNFgl

E. https://t.co/krf94LkFl4

D. https://t.co/iiApZVx2Wz
@_georgemoller ๐Ÿ’ข Paid Courses to Master JavaScript

1. https://t.co/R2M23o2qxA

2. https://t.co/0QcNyTxWpG

3. https://t.co/0QcNyTxWpG
@_georgemoller ๐Ÿ’ข Build Projects Using JavaScript.

1. Build 15 JavaScript Projects By @freeCodeCamp
๐Ÿ”— https://t.co/VGjU2urFW6

2. 10 JavaScript Projects in 10 hours by @florinpop1705
๐Ÿ”— https://t.co/GS346ZdGqx
@_georgemoller @freeCodeCamp @florinpop1705 3. Learn JavaScript By building 7 Games by @ania_kubow
๐Ÿ”— https://t.co/302gbHaHdb

4. Build a Calculator. By @DevSimplified
๐Ÿ”— https://t.co/wcN0pIe6zT

5. Build an Analog Clock.
๐Ÿ’ข https://t.co/jMDtgVXzgZ

6. JavaScript Form Validation.
๐Ÿ”— https://t.co/eyrduSlcmq
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 7. Shopping Cart Using JavaScript.
๐Ÿ”— https://t.co/1Ewqf5ucWr

8. https://t.co/lNDjTC2ooq
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 6๏ธโƒฃ Git

๐Ÿ’ข Youtube
1.Git tutorials for Beginners.
๐Ÿ”— https://t.co/MiNqmJOPvb

2. Git and GitHub for Beginners.
๐Ÿ”— https://t.co/8QFY8gaemT

3. Git and GitHub full Course in 5 hours.
๐Ÿ”— https://t.co/U60ikWYt5O
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 4. Free Git and GitHub course on Udemy
๐Ÿ”— https://t.co/LV6bNiVqDy

๐Ÿ’ข Websites

1. https://t.co/AvaZN0o9J0

2. https://t.co/C3miJlS8vl

3. https://t.co/UjJvO5jS2T
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified ๐Ÿ’ข CheatSheets.
1. https://t.co/UHJL8oBw3W

2. https://t.co/tnG3QvCXU4

3. https://t.co/vg7qe5kk15

4. https://t.co/RR4sppuTNx
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 7๏ธโƒฃ CSS Framework.
Pro tip:
Before getting into any Frameworks,

Make Sure that your CSS basics are Strong.

โญ• Tailwind CSS.

Official Website: https://t.co/biRzjiSlBg

๐Ÿ’ข Youtube

1. https://t.co/0EJa85wx14

2. https://t.co/wayaYjRHJw
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 3. Tailwind CSS Crash Course.
๐Ÿ”— https://t.co/2uEj6eb1Xq

๐Ÿ’ข Websites.
1. https://t.co/EdontsY4GS

2. https://t.co/XLK5DkGOj3
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified ๐Ÿ’ข Projects to Practice Tailwind CSS.

1. Your first Tailwind Website.
๐Ÿ”— https://t.co/NtFiaw8FUx

2. Build a Gym Website.
๐Ÿ”— https://t.co/zwmx410tXd

3. Build a Modern Landing Page.
๐Ÿ”— https://t.co/OGxR8Su1Kr
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 8๏ธโƒฃ JavaScript Framework.

โญ• REACTJs
Official Website: https://t.co/ImSGpOkTcq

๐Ÿ’ข YouTube.

1. React tutorials for Beginners.
๐Ÿ”— https://t.co/vToH5MDBeN

2. ReactJs Crash Course.
๐Ÿ”— https://t.co/CMgL3nolEa

3 . React full Course in 12 Hours.
๐Ÿ”— https://t.co/IhrRXeMOmT
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified 4. React Full course in 10 hours. By @freeCodeCamp
๐Ÿ”— https://t.co/hRyTIMFPmI

5. React from Scratch by @academind_real
๐Ÿ”— https://t.co/EtqO3prYGQ

๐Ÿ’ข Paid courses to learn React Js

1. Top 6 Course to Learn React.
๐Ÿ”— https://t.co/SxU65Sn7h2
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified @academind_real ๐Ÿ’ข Website:

1. https://t.co/chZMjz5QVz

2. https://t.co/7OOEwbqM4s

3. https://t.co/UzPcHDnMv2

๐Ÿ’ข Build Projects to Practice ReactJs.

1. Five Top Notch Projects by @MadhavBahlMD to learn React.

๐Ÿ”— https://t.co/PGD3dncMZt

2. 15 React Projects.
๐Ÿ”— https://t.co/5vzsMLyUJz
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified @academind_real @MadhavBahlMD 3. Chat Application using React Js.
๐Ÿ”— https://t.co/16T8IIn5Lk

4. Master ReactJs By Building Real Projects. By @jsmasterypro
๐Ÿ”— https://t.co/VBVoNIFDez

5. React Projects Playlist by @traversymedia
๐Ÿ”— https://t.co/uFAjPqll3S
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified @academind_real @MadhavBahlMD @jsmasterypro @traversymedia If you enjoyed reading this thread,

1. Do Retweet the FIRST TWEET.

2. Follow me and turn on notifications:
@mdjunaidap (won't cost you a penny)
@_georgemoller @freeCodeCamp @florinpop1705 @ania_kubow @DevSimplified @academind_real @MadhavBahlMD @jsmasterypro @traversymedia ๐Ÿšจ 700+ Tools & Resources ๐Ÿคฉ
Goldmine๐ŸŒŸ for Developers, Designers, and Creators.

Learn.
Build.
Sell.

I've Curated incredible tools and learning resources for developers, designers & content creators.
https://t.co/2XaQR6ASYw

More from Mohammed Junaid ๐ŸŽฏ

You May Also Like

๐ŸŒฟ๐‘ป๐’‰๐’† ๐’”๐’•๐’๐’“๐’š ๐’๐’‡ ๐’‚ ๐‘บ๐’•๐’‚๐’“ : ๐‘ซ๐’‰๐’“๐’–๐’—๐’‚ & ๐‘ฝ๐’Š๐’”๐’‰๐’๐’–

Once upon a time there was a Raja named Uttฤnapฤda born of Svayambhuva Manu,1st man on earth.He had 2 beautiful wives - Suniti & Suruchi & two sons were born of them Dhruva & Uttama respectively.
#talesofkrishna https://t.co/E85MTPkF9W


Now Suniti was the daughter of a tribal chief while Suruchi was the daughter of a rich king. Hence Suruchi was always favored the most by Raja while Suniti was ignored. But while Suniti was gentle & kind hearted by nature Suruchi was venomous inside.
#KrishnaLeela


The story is of a time when ideally the eldest son of the king becomes the heir to the throne. Hence the sinhasan of the Raja belonged to Dhruva.This is why Suruchi who was the 2nd wife nourished poison in her heart for Dhruva as she knew her son will never get the throne.


One day when Dhruva was just 5 years old he went on to sit on his father's lap. Suruchi, the jealous queen, got enraged and shoved him away from Raja as she never wanted Raja to shower Dhruva with his fatherly affection.


Dhruva protested questioning his step mother "why can't i sit on my own father's lap?" A furious Suruchi berated him saying "only God can allow him that privilege. Go ask him"
A brief analysis and comparison of the CSS for Twitter's PWA vs Twitter's legacy desktop website. The difference is dramatic and I'll touch on some reasons why.

Legacy site *downloads* ~630 KB CSS per theme and writing direction.

6,769 rules
9,252 selectors
16.7k declarations
3,370 unique declarations
44 media queries
36 unique colors
50 unique background colors
46 unique font sizes
39 unique z-indices

https://t.co/qyl4Bt1i5x


PWA *incrementally generates* ~30 KB CSS that handles all themes and writing directions.

735 rules
740 selectors
757 declarations
730 unique declarations
0 media queries
11 unique colors
32 unique background colors
15 unique font sizes
7 unique z-indices

https://t.co/w7oNG5KUkJ


The legacy site's CSS is what happens when hundreds of people directly write CSS over many years. Specificity wars, redundancy, a house of cards that can't be fixed. The result is extremely inefficient and error-prone styling that punishes users and developers.

The PWA's CSS is generated on-demand by a JS framework that manages styles and outputs "atomic CSS". The framework can enforce strict constraints and perform optimisations, which is why the CSS is so much smaller and safer. Style conflicts and unbounded CSS growth are avoided.