Web development cheatsheet Part-1 🌐📝
HTML Basics
- Structure:
- Headings:
- Links:
- Images:
- Lists:
- Forms:
CSS Basics
- Inline:
- Internal:
- External:
- Selectors:
- Flexbox/Grid for layout
JavaScript Basics
- Add to HTML:
- Variables:
- Functions:
- DOM:
Best Practices
- Use semantic tags:
- Keep CSS and JS in separate files
- Make sites responsive with media queries
React ❤️ for Part-2
HTML Basics
- Structure:
<html> <head> <title>Title</title> </head> <body> ... </body> </html>- Headings:
<h1> to <h6>- Links:
<a href="url">Text</a>- Images:
<img src="path.jpg" alt="desc">- Lists:
<ul><li>Item</li></ul> (unordered) <ol><li>Item</li></ol> (ordered)- Forms:
<form> <input type="text"> </form>CSS Basics
- Inline:
<p style="color:red;">Text</p>- Internal:
<style> p { color: blue; } </style>- External:
<link rel="stylesheet" href="style.css">- Selectors:
.class, #id, element- Flexbox/Grid for layout
JavaScript Basics
- Add to HTML:
<script src="script.js"></script>- Variables:
let, const, var- Functions:
function myFunc() { ... }- DOM:
document.getElementById("id")Best Practices
- Use semantic tags:
<nav>, <main>, <footer>- Keep CSS and JS in separate files
- Make sites responsive with media queries
React ❤️ for Part-2
❤24
Web development cheatsheet Part-2 🚀
Responsive Design
1. Use media queries:
2. Flexbox:
3. Grid:
Animations & Effects
1. CSS transitions:
2. Keyframes:
3. Animate on scroll: Use libraries like AOS or simple JS for scroll events.
Performance & SEO
1. Optimize images (WebP, compression)
2. Use semantic HTML:
3. Meta tags for SEO:
4. Test with Lighthouse for performance and accessibility.
Deployment
1. Use Netlify, Vercel, or GitHub Pages for easy hosting.
2. Always minify CSS/JS before deploying.
React ❤️ for more
Responsive Design
1. Use media queries:
@media (max-width: 600px) { body { font-size: 14px; } }2. Flexbox:
display: flex; justify-content: center; align-items: center;3. Grid:
display: grid; grid-template-columns: 1fr 2fr;Animations & Effects
1. CSS transitions:
transition: all 0.3s ease;2. Keyframes:
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }3. Animate on scroll: Use libraries like AOS or simple JS for scroll events.
Performance & SEO
1. Optimize images (WebP, compression)
2. Use semantic HTML:
<header>, <main>, <footer>3. Meta tags for SEO:
<meta name="description" content="Your page description">4. Test with Lighthouse for performance and accessibility.
Deployment
1. Use Netlify, Vercel, or GitHub Pages for easy hosting.
2. Always minify CSS/JS before deploying.
React ❤️ for more
❤15👍2🔥1
🌐 Beginner in Web Development? 🧵
Must Learn These Topics:
- HTML Basics (headings, paragraphs, links)
- HTML Forms & Inputs
- CSS Selectors & Properties
- CSS Box Model
- Flexbox & Grid
- Responsive Design (Media Queries)
- JavaScript Basics
- DOM Manipulation
- Git & GitHub
- Basic SEO
- Dev Tools (Inspect Element, Console)
- VS Code Shortcuts
- Web Hosting Basics
- Mobile-First Design
- Accessibility (a11y)
React ❤️ for more!
Must Learn These Topics:
- HTML Basics (headings, paragraphs, links)
- HTML Forms & Inputs
- CSS Selectors & Properties
- CSS Box Model
- Flexbox & Grid
- Responsive Design (Media Queries)
- JavaScript Basics
- DOM Manipulation
- Git & GitHub
- Basic SEO
- Dev Tools (Inspect Element, Console)
- VS Code Shortcuts
- Web Hosting Basics
- Mobile-First Design
- Accessibility (a11y)
React ❤️ for more!
❤14👍1👌1
🎯 lmportant information for placements:
✅ Top 10 Sites for your career:
1. Linkedin
2. Indeed
3. Naukri
4. Cocubes
5. JobBait
6. Careercloud
7. Dice
8. CareerBuilder
9. Jibberjobber
10. Glassdoor
✅ Top 10 Tech Skills in demand:
1. Machine Learning
2. Mobile Development
3. SEO/SEM Marketing
4. Data Visualization
5. Data Engineering
6. UI/UX Design
7. Cyber-security
8. Cloud Computing/AWS
9. Blockchain
10. IOT
✅ Top 10 Sites for Free Online Education:
1. Coursera
2. edX
3. Udemy
4. MIT OpenCourseWare
5. Stanford Online
6. iTunesU Free Courses
7. Codecademy
8. ict iitr
9. ict iitk
10. NPTEL
✅ Top 10 Sites to learn Excel for free:
1. Microsoft Excel Help Center
2. Excel Exposure
3. Chandoo
4. Excel Central
5. Contextures
6. Excel Hero b.
7. Mr. Excel
8. Improve Your Excel
9. Excel Easy
10. Excel Jet
✅ Top 10 Sites to review your resume for free:
1. Zety Resume Builder
2. Resumonk
3. Resume dot com
4. VisualCV
5. Cvmaker
6. ResumUP
7. Resume Genius
8. Resume builder
9. Resume Baking
10. Enhance
✅ Top 10 Sites for Interview Preparation:
1.HackerRank
2.Hacker Earth
3. Kaggle
4.Leetcode
5.Geeksforgeeks
6.Ambitionbox
7. AceThelnterview
8. Gainlo
9. Careercup
10. Codercareer
✅ Top 10 Sites for your career:
1. Linkedin
2. Indeed
3. Naukri
4. Cocubes
5. JobBait
6. Careercloud
7. Dice
8. CareerBuilder
9. Jibberjobber
10. Glassdoor
✅ Top 10 Tech Skills in demand:
1. Machine Learning
2. Mobile Development
3. SEO/SEM Marketing
4. Data Visualization
5. Data Engineering
6. UI/UX Design
7. Cyber-security
8. Cloud Computing/AWS
9. Blockchain
10. IOT
✅ Top 10 Sites for Free Online Education:
1. Coursera
2. edX
3. Udemy
4. MIT OpenCourseWare
5. Stanford Online
6. iTunesU Free Courses
7. Codecademy
8. ict iitr
9. ict iitk
10. NPTEL
✅ Top 10 Sites to learn Excel for free:
1. Microsoft Excel Help Center
2. Excel Exposure
3. Chandoo
4. Excel Central
5. Contextures
6. Excel Hero b.
7. Mr. Excel
8. Improve Your Excel
9. Excel Easy
10. Excel Jet
✅ Top 10 Sites to review your resume for free:
1. Zety Resume Builder
2. Resumonk
3. Resume dot com
4. VisualCV
5. Cvmaker
6. ResumUP
7. Resume Genius
8. Resume builder
9. Resume Baking
10. Enhance
✅ Top 10 Sites for Interview Preparation:
1.HackerRank
2.Hacker Earth
3. Kaggle
4.Leetcode
5.Geeksforgeeks
6.Ambitionbox
7. AceThelnterview
8. Gainlo
9. Careercup
10. Codercareer
❤14👍2
⌨️ A simple hack to add gradient fill to text in CSS
Most UI design tools have a straight forward option to add a gradient as fill for text. But this isn't the case for us, frontend developers.
However, this simple set of three properties allows to add any image or gradient as a fill for text.
✨ The text is still fully accessible and selectable.
Most UI design tools have a straight forward option to add a gradient as fill for text. But this isn't the case for us, frontend developers.
However, this simple set of three properties allows to add any image or gradient as a fill for text.
✨ The text is still fully accessible and selectable.
❤10👌3
YouTube channels for web development languages:
𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲𝘀 & 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀
HTML/CSS 🎨 – Kevin Powell
JavaScript 🌐 – The Net Ninja
TypeScript 📘 – Academind
React ⚛️ – Traversy Media
Angular 🔺 – Academind
Vue. js 🟩 – Vue Mastery
𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲𝘀 & 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀
Node. js 🚀 – Traversy Media
PHP 🐘 – PHP Academy
Ruby on Rails 💎 – Drifting Ruby
Django (Python) 🐍 – Corey Schafer
Flask (Python) 🔥 – Pretty Printed
ASP. NET (C#) 🎯 – IAmTimCorey
𝗗𝗮𝘁𝗮𝗯𝗮𝘀𝗲𝘀 & 𝗗𝗲𝘃𝗢𝗽𝘀
SQL 🗄️ – DataSimplifier
MongoDB 🍃 – MongoDB Official
Docker 🐳 – TechWorld with Nana
React ❤️ for more
𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲𝘀 & 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀
HTML/CSS 🎨 – Kevin Powell
JavaScript 🌐 – The Net Ninja
TypeScript 📘 – Academind
React ⚛️ – Traversy Media
Angular 🔺 – Academind
Vue. js 🟩 – Vue Mastery
𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲𝘀 & 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀
Node. js 🚀 – Traversy Media
PHP 🐘 – PHP Academy
Ruby on Rails 💎 – Drifting Ruby
Django (Python) 🐍 – Corey Schafer
Flask (Python) 🔥 – Pretty Printed
ASP. NET (C#) 🎯 – IAmTimCorey
𝗗𝗮𝘁𝗮𝗯𝗮𝘀𝗲𝘀 & 𝗗𝗲𝘃𝗢𝗽𝘀
SQL 🗄️ – DataSimplifier
MongoDB 🍃 – MongoDB Official
Docker 🐳 – TechWorld with Nana
React ❤️ for more
❤11👍2🔥1