Learn how to build responsive webpages from scratch using Flexbox, CSS Grid, Animation, SVG, and Bootstrap.
About This Video
In Detail
Responsive web design is about creating web pages that look good on …
Learn how to build responsive webpages from scratch using Flexbox, CSS Grid, Animation, SVG, and Bootstrap.
About This Video
In Detail
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:
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.
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.
Chapter 1 : Introduction
Course Introduction and Curriculum Walkthrough
Chapter 2 : Resources and Setup
Resources
How Web Works?
Environment Setup
Chapter 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
Chapter 4 : HTML Semantics
Semantics I
Semantics II
HTML Entity
Chapter 5 : CSS Fundamentals 1.0
Introduction to CSS
CSS types and Order
Selectors
Selector Game I
Selector Game II
Specificity
Common Properties
Chapter 6 : CSS Fundamentals 2.0
Box Model
Box Sizing
Box Model Values
Unit Values
Chapter 7 : CSS Fundamentals 3.0 (Display and Positions)
Display
Display Versus Visibility
Position
Z Index
Pseudo Elements and Pseudo Classes
Chapter 8 : CSS Fundamentals 4.0 (Responsive Web Design)
Responsiveness: Media Query
Viewport Units: Height and Width
Chapter 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
Chapter 10 : Project 2 – Login Page
Background Gradient
Input fields
Forgot Password
Login Button
Min Max Width
Chapter 11 : Layout 1 – Flexbox
Flexbox Introduction
Parent Properties
Child Properties
Flexbox Tool
Flexbox Game
Chapter 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
Chapter 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
Chapter 14 : CSS Advanced 2.0 (SVG – Scalable Vector Graphics)
SVG: Fundamentals
SVG: Design and Tools
Chapter 15 : CSS Advanced 3.0 (Transition and Animation)
Transition
Animations I
Animations II
Chapter 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
Chapter 17 : Browser Compatibility
Browser Compatibility - Vendor Prefix Code
Chapter 18 : Project 4 – Testimonial Page Using CSS Grid
CSS Grid Project
Feedback Card
Utility CSS
Feedback Card – Part 2
Mobile Responsive
Chapter 19 : SASS – CSS Preprocessor
SCSS/SASS Introduction
Concepts - Variables and Nesting
Concepts - Partials and Modules
Concepts - Extend/Inheritance
Concepts - Mixins and Operators
Chapter 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
Chapter 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
Chapter 22 : Deployment – Your Website on the Web
Project Deployment Using Netlify
Chapter 23 : Course Conclusion
Wrap Up