HomeCoursesBuild Amazing Layouts with HTML5, CSS3, and Bootstrap 4

AI-powered learning

Save

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 3 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

88 Lessons14 Quizzes

Introduction

Get familiar with HTML, CSS, and Bootstrap to create interactive web layouts.

Who Is This Course For

Whitespace, HTML Elements, and CSS Selectors

Walk through whitespace handling, HTML elements, and CSS selectors for effective web layout.

Browser Whitespace

Getting Started Using CSS

Elements and Class Selectors

Summary

Quiz

CSS Display Property

7 Lessons

Break apart the CSS display property to control document flow and element behavior.

The Box Model

4 Lessons

Grasp the fundamentals of the CSS box model to control element layout effectively.

CSS Positioning

8 Lessons

Map out the steps for effective CSS positioning with static, relative, absolute, and fixed values.

Images and Floats in CSS

6 Lessons

Follow the process of managing image layout and spacing using float and clear properties in CSS.

CSS Selectors and CSS Targeting Revisited

8 Lessons

Master CSS specificity, selectors, pseudo-classes, and practical layout techniques.

Building the First Layout

5 Lessons

Step through creating responsive web layouts, from mockups to dynamic CSS adjustments.

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.

16.

CSS Tips and Tricks for Beginners

Get started with essential CSS tips for effective and aesthetic web design.

Tips and Tricks

17.

Wrapping Up

Examine key web layout principles, responsive design, and future growth in web development.

Conclusion

Creating an Online CV with HTML and CSS

Project

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

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.

Learn more about Ajdin

Trusted by 3 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

Course

Bootstrap 4 Layouts in Depth

Gain insights into Bootstrap 4 layout design, explore grid systems, responsive columns, and components. Learn about CSS preprocessors and modular layouts with Angular to create professional designs.

28 h

beginner

Course

The Complete Beginner’s Guide to CSS

Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

4 h 55 m

beginner

Course

Web Development: Unraveling HTML, CSS, and JavaScript

Explore HTML, CSS, and JavaScript fundamentals. Gain insights into forms, controls, OOP in JavaScript, and key CSS patterns. Create responsive, stylized, and performant web applications.

20 h

beginner

Course

Web Development: A Primer

Delve into web development fundamentals, exploring HTML, CSS, JavaScript, and version control. Gain insights into essential web technologies to confidently pursue further learning and projects.

5 h

beginner

Course

Bootstrap 4 Layouts in Depth

beginner

28 hour

Course

The Complete Beginner’s Guide to CSS

beginner

4 hour 55 min

Course

Web Development: Unraveling HTML, CSS, and JavaScript