SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial

The home for developers

Track your course progress, manage projects, and find your dream job - all in one place.

Start Your Free Trial

7 Day Free Trial. Cancel Anytime.

SitePoint Premium

  • Access to 700+ courses
  • Publish articles on SitePoint
  • Daily curated jobs
  • Learning Paths
  • Discounts to dev tools
  • Library/
  • Video courses/
  • Web Development Foundation: Learn HTML5, CSS3 & Bootstrap
Web Development Foundation: Learn HTML5, CSS3 & Bootstrap

Web Development Foundation: Learn HTML5, CSS3 & Bootstrap

Build Responsive Websites With HTML5 & CSS3 (Flexbox, Grid, Transitions, Animation, SVG) / Along with Bootstrap & SASS


Course details

5.0∙1 Rating1 review

Published
January 2024
Videos
140
Duration
23h 28m
Happy students
189

Take this course

About the course

Welcome to Web Development Foundation, the best course to start your web development journey as a beginner, step-by-step. This course explains each and every important topic including concept, documentation, and implementation. The entire course is designed for beginners with one goal in mind: to build responsive websites using HTML5, CSS3, Bootstrap & Sass.

Throughout the course, we will explore the most important topics step-by-step, along with building six complete projects:

  1. How Does The Web Works?
    • Client and Server
    • HTTP Requests (GET, POST, PUT, DELETE)
    • HTTP Response (Status Code, Content-Type)
  2. HTML Fundamentals
    • Syntax
    • Document Structure
    • Meta Data
    • Links
    • Images and Media
    • Form Elements
    • Forms
  3. HTML Semantics
    • Sections (body, article, section, nav, aside, h1...h6, header, footer)
    • Grouping Elements (main, div, p, hr, ul, ol, li, figure, pre)
    • Text Level (a, em, strong, span, br)
  4. CSS Fundamentals
    • Adding CSS (Inline, Internal and External)
    • Syntax: selectors, declaration block, properties, declared value
    • CSS Selectors (universal, type, class, id, attribute)
    • Cascade and Specificity
    • Box Model
    • Sizing (padding, margin, width, height and border)
    • Units
    • Position (absolute, relative, fixed, static and sticky)
    • Display Property
    • Fonts and other formatting properties
    • Advanced Selectors
  5. Responsive Design
    • Text Effects
    • Images and video resizing
    • Different viewports
    • Media queries
  6. Layouts
    • Flexbox
    • CSS Grids
  7. Advanced
    • Variables
    • Transition & Animations
    • Transforms
    • Shadows and Gradients
    • Design Patterns
    • Website Planning
  8. SVG
  9. CSS Libraries
  10. Bootstrap (CSS Framework)
    • Layouts
    • Content
    • Forms
    • Components
    • Utilities
  11. SASS (CSS Preprocessor)
    • Variables
    • Nesting
    • Partials & Modules
    • Mixins
    • Extend/Inheritance
    • Operators
  12. Website Deployment

Why this course?

  • The entire course is focused on a project-building approach
  • Learn all the important concepts in the simplest possible way, with many examples.
  • No previous programming or coding experience is required, we will cover everything step-by-step from the basics.
  • All course materials are here

Course Instructor

Shubham Sarda

Shubham Sarda

Shubham is a software developer with a passion for teaching. He has worked with many funded startups, self-projects and as a top-rated freelancer on marketplaces.

Shubham has taught programming and digital marketing to over 50,000 students online and offline as an Instructor.

Shubham has mastered explaining very complex topics in the simplest manner that is easy to understand and follow. His video courses are also used by companies to train their employees and by colleges to prepare their students and upgrade skills according to industry requirements.

Course Outline

Lesson 1: Course Introduction
  • Free
    Introduction & Curriculum Walktrough
    5:26
Lesson 2: Resources & Setup
Lesson 3: HTML Fundamentals
Lesson 4: HTML Semantics
Lesson 5: CSS Fundamentals 1.0
Lesson 6: CSS Fundamentals 2.0
Lesson 7: CSS Fundamentals 3.0 (Display & Position)
Lesson 8: CSS Fundamentals 4.0 (Responsive Web Design)
Lesson 9: Project 1 - Profile Card
Lesson 10: Project 2 - Login Page
Lesson 11: Layout 1 - Flexbox
Lesson 12: Project 3 - Spotify Clone using Flexbox
Lesson 13: CSS Advanced 1.0
Lesson 14: CSS Advanced 2.0 (SVG - Scalable Vector Graphics)
Lesson 15: CSS Advanced 3.0 (Transition & Animation)
Lesson 16: Layout 2 - CSS Gird
Lesson 17: Browser Compatibility
Lesson 18: Project 4 - Testimonial Page Using CSS Grid
Lesson 19: SASS - CSS Preprocessor
Lesson 20: Project 5 - Portfolio Website Using Bootstrap
Lesson 21: Project 6 - EdTech Startup Landing Page
Lesson 22: Deployment - Your Website on Web
Lesson 23: Bonus - What's Next?

Reviews
5.0

1 total

1
0
0
0
0

Course details

5.0∙1 Rating1 review

Published
January 2024
Videos
140
Duration
23h 28m
Happy students
189

Take this course
SitePoint

Stuff we do

  • Premium
  • Newsletters
  • Learning paths
  • Library
  • Forums

Contact

  • Contact us
  • FAQ
  • Publish your book
  • Write an article
  • Advertise

About

  • Our Story
  • Corporate Memberships
  • Start free trial
  • Login

Connect

  • RSS
  • Facebook
  • Twitter (X)
  • Instagram

Subscribe to our newsletter

Get the freshest news and resources for developers, designers and digital creators in your inbox each week

© 2000 – 2025 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Terms of usePrivacy policy