Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications 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 Certification Network & Security Hardware Operating Systems 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 Design Thinking 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 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 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 Yoga Mental Health Dieting 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 Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-04 11:30:04
30-Day Money-Back Guarantee

This course includes:

  • 6 hours on-demand video
  • 1 article
  • 57 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Flexbox

CSS Flexbox in Depth 2021

Don't just learn CSS Flexbox. Gain experience in it. Take your HTML and CSS to a new level.
Rating: 4.8 out of 54.8 (211 ratings)
20,527 students
Created by Daryl Duckmanton
Last updated 3/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • All the CSS properties that are used for Flexbox
  • How to build some common layouts using Flexbox
  • How to build some advanced layouts using Flexbox
  • Gain experience in designing a chat application using Flexbox

Course content

7 sections • 50 lectures • 6h 1m total length

  • Preview06:17
  • Preview04:42
  • Flexbox 101
    05:27

  • Preview02:46
  • Changing the Main Axis Direction
    03:49
  • Controlling the wrapping of Items
    05:47
  • Setting Flex Flow
    03:24
  • Justifying content along the Main Axis
    07:47
  • Aligning content along the Cross Axis
    06:06
  • Controlling Alignment of Wrapped Items
    09:59

  • Ordering Flex Items
    Preview10:06
  • Controlling Flex Item Growth Basics
    07:49
  • Flex Item Growth Ratios
    11:26
  • Controlling Flex Item Shrinking
    10:32
  • A review on Box-Sizing
    06:38
  • Explicitly Sizing Flex Items
    11:06
  • Flex Basis Gotchas
    08:38
  • The Flex Property
    14:20
  • Aligning Individual Flex Items
    03:00

  • Building a 3 column layout
    07:08
  • Building a Basic Sidebar
    08:06
  • Vertically aligning text
    03:47
  • Centering a Modal Dialog
    05:56
  • Creating a Simple Sticky Footer
    08:22
  • Simplifying Form Field Alignment
    13:39
  • Simple Form Input Designs
    09:40

  • The Holygrail layout
    07:13
  • The Media Objects layout
    09:22
  • A Bootstrap Grid System
    09:46
  • Enhancing the Bootstrap Grid System
    06:03
  • Building Cards
    13:58
  • Building a Netflix movie gallery
    11:38

  • The app we are building
    02:31
  • Building the basic shell
    11:36
  • Building the side bar
    07:25
  • Building the search section
    04:18
  • Building the add conversation section
    05:58
  • Building the chat window
    05:05
  • Building the chat title section
    08:01
  • Building the chat form
    06:00
  • Building an individual conversation item
    15:50
  • Fixing conversation item sizing issues
    07:34
  • Adding more conversation items
    02:07
  • Building chat messages
    07:49
  • Sizing chat messages
    08:42
  • Aligning chat messages
    03:11
  • Adding chat profile pictures
    06:28
  • The finishing touches
    01:29

  • Congratulations!!!
    02:26
  • Preview00:22

Requirements

  • Reasonable knowledge in CSS
  • Reasonable knowledge in HTML

Description

In this course you will go deep into understanding how Flexbox can help you design website layouts. We cover what Flexbox is and why we use it. We then step through Flex Containers and Flex Items and what CSS properties are available for both, and how we can configure them correctly. You will also be tested with a helpful quiz after each section.

Once gaining the academic knowledge, we ensure you gain some experience, by taking you through some real life examples. We start off with some simple layout problems that were once difficult to solve, but are now easier. Then after we look at some advanced layout problems.

We then wrap up your experience by working through building a complete chat application from start to end.

Who this course is for:

  • Web designers or developers who are looking to advance their knowledge in building complex layouts using CSS
  • Developers looking to improve their knowledge in CSS
  • Any developer interested in getting a deep understanding of Flexbox

Instructor

Daryl Duckmanton
Full Stack Software Developer
Daryl Duckmanton
  • 4.7 Instructor Rating
  • 420 Reviews
  • 44,725 Students
  • 3 Courses

I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years.

I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.