Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js PHP HTML5 Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 CompTIA Security+
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Data Analysis
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin Mobile App Development SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Sound Therapy Meditation Coaching
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Leadership
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Email Marketing Copywriting YouTube Marketing Startup

DesignWeb DesignCSS Flexbox

Complete Flexbox Course: Master CSS3 Flexbox for Good

This tutorial teaches you how to use the new CSS3 Flexbox box model to create responsive web layouts more effectively!
Bestseller
Rating: 4.6 out of 54.6 (1,674 ratings)
10,615 students
Created by Peter Sommerhoff
Last updated 9/2021
English
English

What you'll learn

  • Use CSS Flexbox confidently to create modern layouts
  • Create web site designs more effectively
  • Write high-quality and reusable CSS code
  • Vertically align any element
  • Take up the remaining space in a container
  • Beautiful responsive galleries with Flexbox
  • Implement the so-called Holy Grail Layout

Requirements

  • Basic HTML & CSS
  • Using a code editor

Description

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!

 

More goodies inside this course:

  • I'll answer all questions you may have along the way to make sure you reach your learning goals

  • I've added manual, high-quality captions (CC) to this course

  • To see Flexbox in practice, 3 mini-projects will manifest your skills and enable you to use Flexbox productively in future web design projects.


What Students Say About Me (taken from various courses of mine)

Such a great course. second one for me with Peter Sommerhoff.
a great Instructor, uses very easy way to explain the materials.

- Ahmed


I absolutely LOVE this course, it teaches everything you need in details
and more! They really do listen to their students and answer as fast as
the road runner. Thanks so much for posting your course and I am
looking forward other courses!

- Ana


Great course, Peter explained it thoroughly, and he answers any questions within a day.

- Dunja


The course covered the required information quickly and concisely
without fluff or wasted motion. It provides sufficient pointers to
additional information and documentation. I thought it was a good
value.

- Robert


I'm glad to have received such great reviews from my students -- and I'll do my best to provide you with the best learning I can as well.


Check out the free preview videos below.

I look forward to seeing you inside :)



***


In this tutorial, you'll learn to use each and every Flexbox property:

Styling flex containers:

  1. flex-direction

  2. justify-content

  3. align-items

  4. flex-wrap

  5. align-content

Then individual flex items:

  1. order

  2. align-self

  3. flex-grow

  4. flex-shrink

  5. flex-basis

  6. flex

At the end, we'll look at real-world Flexbox examples to see what kinds of layouts can be achieved:

  1. Simple grids with Flexbox where all columns in a row have the same size

  2. More advanced Flexbox grids where columns can have arbitrary sizes

  3. Vertical centering to vertically align any element

  4. Media objects, the popular OOCSS pattern

  5. The Holy Grail Layout, a complete site layout with sidebars and sticky footer


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
  • Designers who want to increase their productivity
  • Anyone who wants to keep up with newest developments in web standards

Featured review

Peter Kitonga
Peter K.
27 courses
9 reviews
Rating: 5.0 out of 5a year ago
Peter is great at explaining the various concepts/properties of flexbox and has great examples to back it up. I really loved the showcase provided by him which help solidify visualizing what the different properties can do. I loved going through the course content with him and learned a great deal about flexbox. I will definitely apply it in my designs to come.

Instructor

Peter Sommerhoff
Developer & Software Engineer - With 45,000+ Happy Students
Peter Sommerhoff
  • 4.5 Instructor Rating
  • 16,909 Reviews
  • 85,012 Students
  • 6 Courses

Hi, it's Peter, glad you made it here! If you're anything like me, you want to always keep learning, master new skills, and ultimately achieve your life goals -- whether that's a well-paying career, traveling the world, working from the comfort of your home, or sharing your expertise with and helping other people.

Does that sound like you? Then make sure to enroll in one my courses and learn about awesome programming languages, software design, productivity, or anything else you're interested in.

I feel honored for every student I have and will make sure you have a great learning experience. You can always ask me personally if you get stuck or have anything at all I can help you with.

So please check out my courses below and I'll see you there!

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.