🔥 Looks like the case study on ToDesktop blew up (>200 likes and 50 retweets).

Here are 6 more tips to improve page performance, reduce load time and boost SEO:

1/ Use the loading="lazy" attribute on images and videos where possible. https://t.co/tN2au2EK4b

(5 more in thread)

2/ Use a HTTP/2 CDN. Most CDNs support HTTP/2 by default now. Netlify is great (be aware that they are blocked in Russia right now though).

3/ WebP [1] has 80% support [2] now and is usually ~30% lighter than PNG/JPEG. Use it and fallback to PNG/JPEG on unsupported browsers. [1] https://t.co/IDDq3vUtm7 [2]

4/ Use srcset to always deliver the correct image size. Don't just deliver the high-resolution version.

5/ You can use Lighthouse as a bot that audits pull requests automatically for you.

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?
🔗

3. How do Browsers Work?
🔗 https://t.co/3mwSrLhXvY

4. What is Domain?
🔗

5. What is Hosting?
🔗 https://t.co/wdTzfhh00C

6. DNS and How it Works?
🔗

🛣 Beginner's Roadmap for Front-End

HTML & CSS → 👩‍💻 → JavaScript → 👩‍💻
↓
👩‍💻 ← React* ← 👩‍💻 ← Tailwind*
↓
TypeScript → 👩‍💻 → Next.js* → 👩‍💻 → 🏁

⇩

What would we cover?

➊ HTML & CSS
➋ JavaScript
➌ CSS Frameworks
➍ UI Frameworks
➎ TypeScript
➏ Server-side Frameworks
➐ Practice, Practice and, Practice
➑ Other Skills
➒ Frequently Asked Questions

➊ HTML & CSS

⬘ Your Front-End journey shall always start from HTML & CSS and, ends with these as well.

⬗ Don't over burden yourself to learn everything at once. It's a continuous subject.

⬙ Do not separate HTML from CSS. That's

➋ JavaScript

JavaScript is essential. You should start with basics and move to complex subjects.

❍ JavaScript Syntaxes
(preferably ES6 onwards)
❍ HTML DOM API
❍ Event Handling
❍ Fetch

➌ CSS Frameworks

CSS Framework is necessary if you are planning to be a professional developer.

There are so many options available.

❍ Tailwind CSS
❍ Bootstrap
❍ Chakra
❍ Bulma
❍ Foundation
❍ Skeleton
❍ Pure CSS

Start with anything. You can switch any time.