1 Month HTML & CSS Course
Beginner to Intermediate Level
Week 1: HTML Fundamentals
Day 1-2: Introduction
- How websites work
- HTML document structure
- Basic tags: h1-h6, p, div
Day 3-4: HTML Elements
- Lists (ul, ol, li)
- Links and images
- Tables and forms
Day 5-7: Project
- Personal portfolio page
- Contact form
- Basic blog layout
Week 2: CSS Basics
Day 8-9: CSS Introduction
- Inline vs internal vs external CSS
- Basic selectors
- Colors and backgrounds
Day 10-11: Box Model
- Margin, padding, border
- Width and height
- Display property
Day 12-14: Project
- Styling portfolio page
- Responsive navigation
- CSS animations basics
Week 3: Layouts & Responsive Design
Day 15-16: Flexbox
- Flex container properties
- Flex item properties
- Building layouts with flexbox
Day 17-18: CSS Grid
- Grid template areas
- Responsive grid layouts
- Combining flexbox and grid
Day 19-21: Project
- Responsive photo gallery
- Pricing table
- Dashboard layout
Week 4: Advanced Topics & Final Project
Day 22-23: Forms & Tables
- Advanced form styling
- Table design techniques
- Form validation
Day 24-25: CSS Effects
- Transitions and transforms
- Animations with keyframes
- Hover effects
Day 26-28: Final Project
- Complete responsive website
- Portfolio with multiple pages
- Deployment to GitHub Pages
Learning Resources
Free Platforms
- freeCodeCamp
- MDN Web Docs
- W3Schools
Tools
- VS Code
- Chrome DevTools
- GitHub
Practice
- Frontend Mentor
- Codepen
- CSS Battles
