Thread by @mdjunaidap

Learn HTML & CSS in 50 Days:

Days 1-5: HTML Basics

➔ Introduction to HTML
• What is HTML?
• HTML Syntax
• Elements and Tags

➔ Basic HTML Structure
• Head, Body, Title
• Paragraphs, Headings

➔ Project:
• Simple Personal Bio Page

Days 6-10: HTML Intermediate

➔ Links and Images
• Internal, External, Anchor Links
• Adding Images, Alt Text

➔ Lists and Tables
• Ordered, Unordered, Nested Lists
• Basic Table Structure

➔ Project:
• Simple Blog Page

Days 11-15: HTML Forms and Inputs

➔ Forms
• Form Tags, Text Inputs, Buttons

➔ Input Types
• Radio, Checkbox, Dropdowns

➔ Project:
• Basic Contact Form

Days 16-20: CSS Basics

➔ Introduction to CSS
• What is CSS?
• Inline, Internal, External CSS

➔ Selectors, Properties, and Values

➔Project:
• Style Personal Bio Page

Days 21-25: CSS Text and Color

➔ Text Styling
• Font, Size, Color, Spacing

➔ Color Theory
• RGB, HEX, HSL

➔ Project:
• Style Blog Page

Days 26-30: CSS Layout Basics

➔ Box Model
• Margin, Padding, Border

➔ Positioning
• Static, Relative, Absolute, Fixed

➔ Project:
• Create a Layout for a Landing Page

Days 31-34: Responsive Portfolio Page

➔ Description:
• Personal portfolio page
• Showcases skills, projects, resume
• Responsive layout

➔ Skills Covered:
• HTML structure
• CSS styling
• Media Queries

Days 35-38: Flexbox-based Card Layout

➔ Description:
• Layout of cards
• Each card has image, title, description
• Responsive and aligned using Flexbox

➔ Skills Covered:
• HTML lists
• CSS Flexbox
• Hover effects

Days 39-42: Simple E-commerce Product Page

➔ Description:
• Single-page product showcase
• Includes images, descriptions, prices
• "Buy Now" button

➔ Skills Covered:
• HTML for e-commerce
• CSS styling
• Responsiveness

Days 43-46: One-page Restaurant Website

➔ Description:
• One-page restaurant site
• Navigation bar, about section, menu, contact
• Optional photo carousel

➔ Skills Covered:
• HTML sections
• CSS aesthetics
• Basic JavaScript (optional)

Days 47-50: Personal Blog with a Contact Form

➔ Description:
• Simple blog layout
• List of blog posts
• Contact form

➔ Skills Covered:
• HTML text elements
• CSS text styling
• HTML forms

That's a wrap.

Follow @mdjunaidap for more.