It seems that your browser is not supported by our application.

Controlling Document Flow

CSS Display Property

7 Lessons

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

Block and Inline Elements

Overriding Span Elements

Solution: Basic Structure

DIY: 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

Introduction to CSS Positioning

CSS Positioning

8 Lessons

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

Relative Positioning

Relative vs. Absolute Positioning

Positioning with the CSS ID Attribute

Solution: Position the BOX

DIY: 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

Commonly Used CSS Selectors

CSS Selectors and CSS Targeting Revisited

8 Lessons

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

CSS Specificity

Practicing Slightly More Complex Selectors

Pseudo-Classes in CSS

Solution: Change the floats

DIY: 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

Simple Flexbox-Based Non-Responsive Website Layout

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

Making Layout Responsive with Media Queries

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

Build Your Own CSS Microframework

13.

Micro CSS Framework

5 Lessons

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

Building a Layout with Our Micro CSS Framework

Building a Layout with Bootstrap 4

Introduction to Transitions

14.

CSS Transitions, Animations, and Transforms

7 Lessons

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

Introduction to CSS Animations

Introduction to CSS Variables

Building a Simple Layout Using CSS Grid

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

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

Course Author

Ajdin Imsirovic

Trusted by 2.5 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

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!

Recommended before starting this course

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.

beginner

5 hours

Web Development: A Primer

beginner

5 hour

Related Courses and Skill Paths

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.

beginner

28 hours

Course

The Complete Beginner’s Guide to CSS

Gain insights into CSS to tailor web styles, layout, text, and images. Discover core CSS fundamentals, adding colors, controlling layouts, and exploring essential CSS animation functions to create professional web pages.

beginner

4 hours 55 mins

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.

beginner

20 hours

Bootstrap 4 Layouts in Depth

beginner

28 hour

The Complete Beginner’s Guide to CSS

beginner

4 hour 55 min