1. Introduction FREE CHAPTER

• Course Introduction and Curriculum Walkthrough

2. Resources and Setup

• Resources
• How Web Works?
• Environment Setup

3. HTML Fundamentals

• HTML Introduction
• Head Section
• HTML tags
• Media Tags
• Linking page
• Forms I
• Form II
• Comments
• List
• Tables
• Inline and Block
• ID and Classes

4. HTML Semantics

• Semantics I
• Semantics II
• HTML Entity

5. CSS Fundamentals 1.0

• Introduction to CSS
• CSS types and Order
• Selectors
• Selector Game I
• Selector Game II
• Specificity
• Common Properties

6. CSS Fundamentals 2.0

• Box Model
• Box Sizing
• Box Model Values
• Unit Values

7. CSS Fundamentals 3.0 (Display and Positions)

• Display
• Display Versus Visibility
• Position
• Z Index
• Pseudo Elements and Pseudo Classes

8. CSS Fundamentals 4.0 (Responsive Web Design)

• Responsiveness: Media Query
• Viewport Units: Height and Width

9. Project 1 – Profile Card

• Transform
• Position
• Google Font
• Button Design
• Margin Auto Versus Text Align Center
• Box Shadow
• Icons
• Color Suggestion
• CSS Sequence: Advise

10. Project 2 – Login Page

• Background Gradient
• Input fields
• Forgot Password
• Login Button
• Min Max Width

11. Layout 1 – Flexbox

• Flexbox Introduction
• Parent Properties
• Child Properties
• Flexbox Tool
• Flexbox Game

12. Project 3 – Spotify Clone Using Flexbox

• Flexbox Project
• Header I
• Header II - Logo
• Main I
• Main II
• Background Image
• Footer I
• Footer II
• Footer III
• Footer IV
• Responsive Design: Main
• Responsive Design: Header
• Responsive Design: Footer
• Variables I
• Variables II

13. CSS Advanced 1.0

• Backgrounds
• Background Clip
• Background Shorthand
• Transform
• CSS Art: Border and Border Radius
• CSS Art: Border Radius
• CSS Art: Designing Shapes

14. CSS Advanced 2.0 (SVG – Scalable Vector Graphics)

• SVG: Fundamentals
• SVG: Design and Tools

15. CSS Advanced 3.0 (Transition and Animation)

• Transition
• Animations I
• Animations II

16. Layout 2 – CSS Grid

• CSS Grid Introduction
• Rows and Columns
• Common Properties
• Shorthand Property
• Grid Template Area
• Nested Grid
• Align Properties
• CSS Grid Game
• Autofit Versus Autofill

17. Browser Compatibility

• Browser Compatibility - Vendor Prefix Code

18. Project 4 – Testimonial Page Using CSS Grid

• CSS Grid Project
• Feedback Card
• Utility CSS
• Feedback Card – Part 2
• Mobile Responsive

19. SASS – CSS Preprocessor

• SCSS/SASS Introduction
• Concepts - Variables and Nesting
• Concepts - Partials and Modules
• Concepts - Extend/Inheritance
• Concepts - Mixins and Operators

20. Project Setup

• Bootstrap Introduction - Project Demo
• Utilities
• Layouts - Container, Grid
• Layouts - Container, Grid part 2
• Components
• Portfolio Project: Main Section
• Portfolio Project: About/Blog Section
• Portfolio Project: Contact Section
• Portfolio Project: Footer
• Portfolio Project: Project Section
• Project Completion

21. Project 6 – EdTech Startup Landing Page

• EdTech Landing Page
• Initial Project Setup
• Navigation
• Banner Section I
• Banner Section II
• Transition, Transform, Animation
• Building Theme
• Stats Section I
• Stats Section II (Flexbox)
• Information Section
• Working Section (CSS Grid)
• Footer (SVG)
• Animate CSS (CSS Library)
• Scroll Bars
• Responsiveness I - Media Queries
• Responsiveness II - Media Queries
• Hamburger Menu I
• Hamburger Menu II

22. Deployment – Your Website on the Web

• Project Deployment Using Netlify

23. Course Conclusion

• Wrap Up