AI-powered learning
Save this course
Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4
Gain insights into creating stunning web layouts with HTML5, CSS3, and Bootstrap 4. Learn about responsive design, CSS frameworks, and advanced techniques like transitions, animations, and transforms.
88 Lessons
26h
Join 2.9 million developers at
Join 2.9 million developers at
LEARNING OBJECTIVES
- Hands-on experience with creating web layouts using HTML and CSS
- A working knowledge of the tools, technologies, and concepts required for creating modern layouts
- Familiarity with popular CSS frameworks, including Bootstrap 4, Bulma, and MDL
- An understanding of advanced CSS concepts, including CSS variables and the CSS grid
Learning Roadmap
2.
Whitespace, HTML Elements, and CSS Selectors
Whitespace, HTML Elements, and CSS Selectors
Walk through whitespace handling, HTML elements, and CSS selectors for effective web layout.
3.
CSS Display Property
CSS Display Property
7 Lessons
7 Lessons
Break apart the CSS display property to control document flow and element behavior.
4.
The Box Model
The Box Model
4 Lessons
4 Lessons
Grasp the fundamentals of the CSS box model to control element layout effectively.
5.
CSS Positioning
CSS Positioning
8 Lessons
8 Lessons
Map out the steps for effective CSS positioning with static, relative, absolute, and fixed values.
6.
Images and Floats in CSS
Images and Floats in CSS
6 Lessons
6 Lessons
Follow the process of managing image layout and spacing using float and clear properties in CSS.
7.
CSS Selectors and CSS Targeting Revisited
CSS Selectors and CSS Targeting Revisited
8 Lessons
8 Lessons
Master CSS specificity, selectors, pseudo-classes, and practical layout techniques.
8.
Building the First Layout
Building the First Layout
5 Lessons
5 Lessons
Step through creating responsive web layouts, from mockups to dynamic CSS adjustments.
9.
Converting Our First Layout Into a Responsive One
Converting Our First Layout Into a Responsive One
7 Lessons
7 Lessons
Solve challenges with Flexbox and media queries to create responsive web layouts.
10.
CSS Resets and Emmets
CSS Resets and Emmets
4 Lessons
4 Lessons
Examine CSS resets for consistency and Emmet for efficient HTML/CSS coding.
11.
Column-Based CSS Layouts
Column-Based CSS Layouts
7 Lessons
7 Lessons
Break down complex ideas of column-based CSS layouts, including grid systems and responsiveness.
12.
An Overview of Popular CSS Frameworks
An Overview of Popular CSS Frameworks
5 Lessons
5 Lessons
Dig deeper into popular CSS frameworks, their benefits, and their unique development features.
13.
Micro CSS Framework
Micro CSS Framework
5 Lessons
5 Lessons
See how it works to build efficient layouts with custom CSS frameworks and Bootstrap.
14.
CSS Transitions, Animations, and Transforms
CSS Transitions, Animations, and Transforms
7 Lessons
7 Lessons
Master creating interactive layouts with CSS transitions, animations, and easily updateable CSS variables.
15.
Introducing the CSS Grid
Introducing the CSS Grid
7 Lessons
7 Lessons
Learn how to use CSS Grid for streamlined, two-dimensional responsive web layouts.
Certificate of Completion
Showcase your accomplishment by sharing your certificate of completion.
Complete more lessons to unlock your certificate
Developed by MAANG Engineers
ABOUT THIS COURSE
This course provides an in-depth look into building web layouts from scratch. It includes detailed guidance on HTML5, CSS3, and Bootstrap 4.
You will begin with an overview of the basics of HTML and CSS. Using the knowledge you gain in the first few lessons, you will build an HTML5 and CSS3 layout. Next, you will make the layout responsive using media queries. Then, you will learn about popular CSS frameworks and create your own micro framework. After this, you will build a layout using the Bootstrap 4 framework. Finally, you will learn about CSS grid, transitions, animations and transforms.
By the end of this course, you will become an expert in creating web layouts and know about the tools and technologies required for this task.
ABOUT THE AUTHOR
Ajdin Imsirovic
I'm a senior web developer focusing on JavaScript and its ecosystem, including Node.js, Angular, Vue, and React. I'm also a published author of 4 books on web development, and I've also self-published another 14 books on various web-development topics.
Trusted by 2.9 million developers working at companies
A
Anthony Walker
@_webarchitect_
E
Evan Dunbar
ML Engineer
S
Software Developer
Carlos Matias La Borde
S
Souvik Kundu
Front-end Developer
V
Vinay Krishnaiah
Software Developer
Built for 10x Developers
No Passive Learning
Learn by building with project-based lessons and in-browser code editor
Personalized Roadmaps
The platform adapts to your strengths & skills gaps as you go
Future-proof Your Career
Get hands-on with in-demand skills
AI Code Mentor
Write better code with AI feedback, smart debugging, and "Ask AI"
MAANG+ Interview Prep
AI Mock Interviews simulate every technical loop at top companies
Free Resources
