Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
CSS Flexbox | Basic to Advanced with Responsive Project
Rating: 4.4 out of 5(109 ratings)
5,685 students

CSS Flexbox | Basic to Advanced with Responsive Project

Learn how to build Web and Mobile Application Interfaces for the modern world!
Created byAbdullah Nahian
Last updated 4/2024
English
English [Auto],

What you'll learn

  • Understand everything about FlexBox Basic to Advanced
  • Write high-quality and reusable CSS code
  • Create web site designs more effectively
  • Build a complete website with advanced responsive layouts like ( the holy grail layout - the equal columns layout - the horizontal masonry layout ) and more...

Course content

2 sections • 17 lectures • 1h 32m total length

  • Introduction2:55

    www.anahian.com

  • Display : flex2:05
  • Flex Direction4:16
  • Flex Wrap4:10

    Learn how flex-wrap controls item wrapping in CSS flexbox, with nowrap, wrap, and wrap-reverse values. See practical demos using width, margins, and flex-wrap: wrap to create responsive layouts.

  • Flex Flow2:04

    Learn flex-flow as a shorthand for flex-direction and flex-wrap to define a flex container’s main and cross axes.

  • Justify Content7:06

    Explore how justify-content distributes free space along the main axis in a flex container, using start, end, center, space-between, space-around, and space-evenly to align flex items.

  • Align Content7:28

    Learn how CSS flexbox aligns content inside a container using align-content and justify-content to distribute lines and items along main and cross axes, with center, start, end, and space-between.

  • Align Items4:48
  • Order3:32
  • Flex Grow3:14

    Explore flex-grow, a flexbox property that lets items grow by a unitless proportion to fill space. Learn how equal values distribute space and how higher values make items grow more.

  • Flex Basis3:34

    Learn how flex-basis defines each item's default size in flexbox, before space distribution. Use lengths like 20%, 5rem, or auto to size items according to width or height.

  • Align Self2:23

    Learn how align-self overrides align-items to position an individual flex item in a flexbox, using values such as auto, flex-start, flex-end, center, baseline, and stretch.

Requirements

  • Basic HTML & CSS
  • Any Code Editor of your Choice

Description

Flexbox Is the way to layout websites and web applications in the modern world.

In this class, you will learn about all the features and properties of Flexbox and how to use them! We will take a hands-on approach to discovering all the awesome ways to use Flexbox and by the end of the course, you will have a professional understanding of Flexbox and how to use it to layout Websites and Web Applications like modern CSS guru!

Each video includes a link to the lesson's code so you can easily follow and code along without needing anything but a web browser.

To be successful in this class all you need is a basic understanding of CSS and HTML!

The old way of laying out content on the web is in its last days. Learn how to utilize Flexbox to streamline, simplify, and future-proof your Websites and Mobile Applications!


After this course, you'll be able to use Flexbox to...

  • vertically align any element

  • create modern grids

  • take up remaining space

  • add spacing between elements

  • implement complete site layouts

  • and much more!

As a bonus, this course includes a complete Flexbox Cheat Sheet that you can use to recap all you've learned and to refer back to while using Flexbox.

Additionally, I included the code for a Flexbox demo showcase -- which is like an interactive cheat sheet for you to see in the browser that contains every property and every layout example from this tutorial.

Who this course is for:

  • Web designers and developers who want to improve their frontend skills
  • Experienced web developers who want to create websites layouts in a much more easy way

Report abuse