Build Responsive Websites with HTML5, CSS3, Bootstrap, and SASS

Build Responsive Websites with HTML5, CSS3, Bootstrap, and SASS

by Shubham Sarda
Released January 2022
Publisher(s): Packt Publishing
ISBN: 9781803239477

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Responsive web design is about creating web pages that look good on all devices. A responsive web design helps automatically adjust for different screens to make it user friendly.

This course touches on each important topic through concept explanation, documentation, and implementation. The entire course is designed for beginners with one goal in mind—to build responsive websites using HTML5, CSS3, Bootstrap, and SASS.

Throughout the course, we will explore 6 projects namely Profile Card, Login Page, Spotify Clone using Flexbox, Testimonial Page using CSS Grid, Portfolio Website using Bootstrap, and EdTech Startup Landing Page. With the help of these projects, we will understand the following topics:

-How does the web work

-HTML fundamentals

-HTML semantics

-CSS fundamentals

-Responsive design

-Layouts

-SVG

-CSS libraries

-Bootstrap (CSS framework)

-SASS (CSS preprocessor)

-Website deployment

The complete course is focused on the concept learning approach; you learn every concept through a logical and visual learning approach. Learn all the important concepts in the simplest viable way with examples and real-life projects.

By the end of the course, you will be ready to work as an intern, fresher, or freelancer, and you will also be able to implement everything yourself. Most importantly, you will be ready to dive deep with future practice and hard-level questions about website building.

What You Will Learn

  • Learn website structuring with semantic and accessible HTML5
  • Use common components, utilities, and layout patterns for professional website development
  • Learn how to use each skill in the real world with project implementations
  • Learn to find free design assets such as images, fonts, and icons
  • Learn to support any device size with responsive design (mobile, tablets, and desktop)
  • Website deployment on the web using Netlify

Audience

This course is helpful for absolute beginners who want to learn how to build a beautiful and responsive website; designers who want to expand their skill set into HTML5, CSS3, Bootstrap, and SASS.

No previous programming or coding experience is required; we will cover everything step-by-step from the basics.

About The Author

Shubham Sarda: Shubham is a software developer and digital marketer with a passion for teaching. He has worked with many funded start-ups, self-projects, and as a top-rated freelancer on multiple marketplaces. Currently, he stands among the top 700 freelancers with over 2,500+ projects on Fiverr, PeoplePerHour, Freelancer, and more.

As an instructor, he has taught programming and digital marketing to over 20,000 students, both with online courses and offline bootcamps. He has mastered explaining complex topics in the simplest form that is easy to understand and follow. His video courses are also used by companies to train their employees and by colleges to prepare and upgrade their students according to the latest industry requirements.

Table of contents

  1. Chapter 1 : Introduction
    1. Course Introduction and Curriculum Walkthrough
  2. Chapter 2 : Resources and Setup
    1. Resources
    2. How Web Works?
    3. Environment Setup
  3. Chapter 3 : HTML Fundamentals
    1. HTML Introduction
    2. Head Section
    3. HTML tags
    4. Media Tags
    5. Linking page
    6. Forms I
    7. Form II
    8. Comments
    9. List
    10. Tables
    11. Inline and Block
    12. ID and Classes
  4. Chapter 4 : HTML Semantics
    1. Semantics I
    2. Semantics II
    3. HTML Entity
  5. Chapter 5 : CSS Fundamentals 1.0
    1. Introduction to CSS
    2. CSS types and Order
    3. Selectors
    4. Selector Game I
    5. Selector Game II
    6. Specificity
    7. Common Properties
  6. Chapter 6 : CSS Fundamentals 2.0
    1. Box Model
    2. Box Sizing
    3. Box Model Values
    4. Unit Values
  7. Chapter 7 : CSS Fundamentals 3.0 (Display and Positions)
    1. Display
    2. Display Versus Visibility
    3. Position
    4. Z Index
    5. Pseudo Elements and Pseudo Classes
  8. Chapter 8 : CSS Fundamentals 4.0 (Responsive Web Design)
    1. Responsiveness: Media Query
    2. Viewport Units: Height and Width
  9. Chapter 9 : Project 1 – Profile Card
    1. Transform
    2. Position
    3. Google Font
    4. Button Design
    5. Margin Auto Versus Text Align Center
    6. Box Shadow
    7. Icons
    8. Color Suggestion
    9. CSS Sequence: Advise
  10. Chapter 10 : Project 2 – Login Page
    1. Background Gradient
    2. Input fields
    3. Forgot Password
    4. Login Button
    5. Min Max Width
  11. Chapter 11 : Layout 1 – Flexbox
    1. Flexbox Introduction
    2. Parent Properties
    3. Child Properties
    4. Flexbox Tool
    5. Flexbox Game
  12. Chapter 12 : Project 3 – Spotify Clone Using Flexbox
    1. Flexbox Project
    2. Header I
    3. Header II - Logo
    4. Main I
    5. Main II
    6. Background Image
    7. Footer I
    8. Footer II
    9. Footer III
    10. Footer IV
    11. Responsive Design: Main
    12. Responsive Design: Header
    13. Responsive Design: Footer
    14. Variables I
    15. Variables II
  13. Chapter 13 : CSS Advanced 1.0
    1. Backgrounds
    2. Background Clip
    3. Background Shorthand
    4. Transform
    5. CSS Art: Border and Border Radius
    6. CSS Art: Border Radius
    7. CSS Art: Designing Shapes
  14. Chapter 14 : CSS Advanced 2.0 (SVG – Scalable Vector Graphics)
    1. SVG: Fundamentals
    2. SVG: Design and Tools
  15. Chapter 15 : CSS Advanced 3.0 (Transition and Animation)
    1. Transition
    2. Animations I
    3. Animations II
  16. Chapter 16 : Layout 2 – CSS Grid
    1. CSS Grid Introduction
    2. Rows and Columns
    3. Common Properties
    4. Shorthand Property
    5. Grid Template Area
    6. Nested Grid
    7. Align Properties
    8. CSS Grid Game
    9. Autofit Versus Autofill
  17. Chapter 17 : Browser Compatibility
    1. Browser Compatibility - Vendor Prefix Code
  18. Chapter 18 : Project 4 – Testimonial Page Using CSS Grid
    1. CSS Grid Project
    2. Feedback Card
    3. Utility CSS
    4. Feedback Card – Part 2
    5. Mobile Responsive
  19. Chapter 19 : SASS – CSS Preprocessor
    1. SCSS/SASS Introduction
    2. Concepts - Variables and Nesting
    3. Concepts - Partials and Modules
    4. Concepts - Extend/Inheritance
    5. Concepts - Mixins and Operators
  20. Chapter 20 : Project Setup
    1. Bootstrap Introduction - Project Demo
    2. Utilities
    3. Layouts - Container, Grid
    4. Layouts - Container, Grid part 2
    5. Components
    6. Portfolio Project: Main Section
    7. Portfolio Project: About/Blog Section
    8. Portfolio Project: Contact Section
    9. Portfolio Project: Footer
    10. Portfolio Project: Project Section
    11. Project Completion
  21. Chapter 21 : Project 6 – EdTech Startup Landing Page
    1. EdTech Landing Page
    2. Initial Project Setup
    3. Navigation
    4. Banner Section I
    5. Banner Section II
    6. Transition, Transform, Animation
    7. Building Theme
    8. Stats Section I
    9. Stats Section II (Flexbox)
    10. Information Section
    11. Working Section (CSS Grid)
    12. Footer (SVG)
    13. Animate CSS (CSS Library)
    14. Scroll Bars
    15. Responsiveness I - Media Queries
    16. Responsiveness II - Media Queries
    17. Hamburger Menu I
    18. Hamburger Menu II
  22. Chapter 22 : Deployment – Your Website on the Web
    1. Project Deployment Using Netlify
  23. Chapter 23 : Course Conclusion
    1. Wrap Up

Product information

  • Title: Build Responsive Websites with HTML5, CSS3, Bootstrap, and SASS
  • Author(s): Shubham Sarda
  • Release date: January 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781803239477