Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

Beginner

88 Lessons

26h

Certificate of Completion

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

92 Playgrounds

14 Quizzes

This course includes

92 Playgrounds

14 Quizzes

Course Overview

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 f...Show More

TAKEAWAY SKILLS

Html Elements

Css

Bootstrap

Front End Development

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

What You'll Learn

Hands-on experience with creating web layouts using HTML and CSS

Course Content

Introduction

Who Is This Course For

Whitespace, HTML Elements, and CSS Selectors

Browser Whitespace

Getting Started Using CSS Elements and Class Selectors Summary Quiz

CSS Display Property

Controlling Document Flow Block and Inline Elements Overriding Span Elements Summary Quiz DIY: Basic Structure Solution: Basic Structure

The Box Model

Previewing the Box Model in the Browser Controlling the Box Model Summary Quiz

CSS Positioning

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

CSS Selectors and CSS Targeting Revisited

8 Lessons

Building the First Layout

5 Lessons

Converting Our First Layout Into a Responsive One

7 Lessons

10.

CSS Resets and Emmets

4 Lessons

11.

Column-Based CSS Layouts

7 Lessons

12.

An Overview of Popular CSS Frameworks

5 Lessons

13.

Micro CSS Framework

5 Lessons

14.

CSS Transitions, Animations, and Transforms

7 Lessons

15.

Introducing the CSS Grid

7 Lessons

16.

CSS Tips and Tricks for Beginners

1 Lesson

17.

Wrapping Up

1 Lesson

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant 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.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!