HomeCoursesBuild Amazing Layouts with HTML5, CSS3, and Bootstrap 4

5.0

Beginner

26h

Updated 2 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.

Join 2.7 million developers at

Overview

Content

Reviews

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

TAKEAWAY SKILLS

HTML Elements

CSS

Bootstrap

Front-end Development

Content

88 Lessons14 Quizzes

Introduction

1 Lessons

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

Who Is This Course For

Whitespace, HTML Elements, and CSS Selectors

5 Lessons

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.

Controlling Document Flow

Block and Inline Elements

Overriding Span Elements

Summary

Quiz

DIY: Basic Structure

Solution: Basic Structure

The Box Model

4 Lessons

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

Previewing the Box Model in the Browser

Controlling the Box Model

Summary

Quiz

CSS Positioning

8 Lessons

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

Introduction to CSS Positioning

Relative Positioning

Relative vs. Absolute Positioning

Positioning with the CSS ID Attribute

Summary

Quiz

DIY: Position the BOX

Solution: Position the BOX

Images and Floats in CSS

6 Lessons

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

Images in CSS

Issues with Floats and Layouts

Clearing Floats

Practical Examples of Clearing Floats

Summary

Quiz

CSS Selectors and CSS Targeting Revisited

8 Lessons

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

CSS Specificity

Commonly Used CSS Selectors

Practicing Slightly More Complex Selectors

Pseudo-Classes in CSS

Summary

Quiz

DIY: Change the floats

Solution: Change the floats

Building the First Layout

5 Lessons

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

Mockup

The calc() Function in CSS

Responsive Web Layouts

Summary

Quiz

Converting Our First Layout Into a Responsive One

7 Lessons

Solve challenges with Flexbox and media queries to create responsive web layouts.

Introduction to Flexbox

Simple Flexbox-Based Non-Responsive Website Layout

Making Layout Responsive with Media Queries

Summary

Quiz

DIY: The Responsive Layout

Solution: The Responsive Layout

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.

The History of Column-Based CSS Layouts

Building Our Own Column Grid System

Making CSS Column Grid Responsive

12.

An Overview of Popular CSS Frameworks

5 Lessons

Dig deeper into popular CSS frameworks, their benefits, and their unique development features.

Backgroud of HTML and CSS

Bootstrap, Bulma, and MDL

Introduction to SCSS

Summary

Quiz

13.

Micro CSS Framework

5 Lessons

See how it works to build efficient layouts with custom CSS frameworks and Bootstrap.

Build Your Own CSS Microframework

Building a Layout with Our Micro CSS Framework

Building a Layout with Bootstrap 4

Summary

Quiz

14.

CSS Transitions, Animations, and Transforms

7 Lessons

Master creating interactive layouts with CSS transitions, animations, and easily updateable CSS variables.

Introduction to Transitions

Introduction to CSS Animations

Introduction to CSS Variables

Summary

Quiz

Challenge: Animations

Solution: Animations

15.

Introducing the CSS Grid

7 Lessons

Learn how to use CSS Grid for streamlined, two-dimensional responsive web layouts.

Layouts with Flexbox

Introduction to CSS Grid

Building a Simple Layout Using CSS Grid

Summary

Quiz

Challenge: CSS Grid Challenge

Solution: CSS Grid Challenge

16.

CSS Tips and Tricks for Beginners

1 Lessons

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

Tips and Tricks

17.

Wrapping Up

1 Lessons

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.

Course Author:

Ajdin Imsirovic

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc 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.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

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