Beginner
26h
Updated 4 months ago
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.
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.
This course provides an in-depth look into building web layouts from scratch. It includes detailed guidance on HTML5, CSS3, and ...Show More
WHAT YOU'LL LEARN
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
Hands-on experience with creating web layouts using HTML and CSS
Show more
TAKEAWAY SKILLS
Content
2.
Whitespace, HTML Elements, and CSS Selectors
5 Lessons
Walk through whitespace handling, HTML elements, and CSS selectors for effective web layout.
3.
CSS Display Property
7 Lessons
Break apart the CSS display property to control document flow and element behavior.
4.
The Box Model
4 Lessons
Grasp the fundamentals of the CSS box model to control element layout effectively.
5.
CSS Positioning
8 Lessons
Map out the steps for effective CSS positioning with static, relative, absolute, and fixed values.
6.
Images and Floats in CSS
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
8 Lessons
Master CSS specificity, selectors, pseudo-classes, and practical layout techniques.
8.
Building the First Layout
5 Lessons
Step through creating responsive web layouts, from mockups to dynamic CSS adjustments.
9.
Converting Our First Layout Into a Responsive One
7 Lessons
Solve challenges with Flexbox and media queries to create responsive web layouts.
10.
CSS Resets and Emmets
4 Lessons
Examine CSS resets for consistency and Emmet for efficient HTML/CSS coding.
11.
Column-Based CSS Layouts
7 Lessons
Break down complex ideas of column-based CSS layouts, including grid systems and responsiveness.
12.
An Overview of Popular CSS Frameworks
5 Lessons
Dig deeper into popular CSS frameworks, their benefits, and their unique development features.
13.
Micro CSS Framework
5 Lessons
See how it works to build efficient layouts with custom CSS frameworks and Bootstrap.
14.
CSS Transitions, Animations, and Transforms
7 Lessons
Master creating interactive layouts with CSS transitions, animations, and easily updateable CSS variables.
15.
Introducing the CSS Grid
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.
Course Author:
Developed by MAANG Engineers
Trusted by 2.8 million developers working at companies
"These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"
Anthony Walker
@_webarchitect_
"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"
Evan Dunbar
ML Engineer
"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."
Software Developer
Carlos Matias La Borde
"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"
Souvik Kundu
Front-end Developer
"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."
Vinay Krishnaiah
Software Developer
Hands-on Learning Powered by AI
See how Educative uses AI to make your learning more immersive than ever before.
AI Prompt
Code Feedback
Explain with AI
AI Code Mentor
Free Resources
