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 Meditation Personal Transformation Life Purpose Emotional Intelligence 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 Modeling Data Analysis 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
30-Day Money-Back Guarantee
IT & Software Other IT & Software Flexbox

Learn CSS Flexbox Practically

Create a Page with Recipe Cards
Rating: 3.9 out of 53.9 (78 ratings)
15,219 students
Created by Arthur Tkachenko
Last updated 1/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • What is flexbox module
  • How to manage items at container level
  • How to manage items at items level
  • How to create basic layouts, using flexboxes

Requirements

  • Students need to know basics of HTML and CSS

Description

This class is about learning how flexboxes work.
Did you hear about them before?

It's a module, that has roots at Mozilla. It's a big timesaver for Frontend developers.
You'll never want to create an HTML page without flexboxes after this course.

We'll learn only basic things. Specification mostly.

All CSS properties related to flexboxes. 
And we'll have a set of easy practical lessons.
For each practice lesson, I advise you to recreate an example from scratch(no copy-paste) by your hands.


Be aware, that this course touching only flexbox basics, so you need to know HTML and CSS. 


TOOLKIT


Github- if you ok to share your code with other - My current pick
Bitbucket - if you want to have a free storage

Google drive or Dropbox - if you just want to save your code at cloud

You can also use Codesandbox or other online editors.
For practice lessons, I'll use CodePen.

But I'm sure - for your project, you'll decide to use a code editor.

Code editors
Sublime - I use it around 6 years. small size and everything important
Atom because it's backed by the GitHub team and it also has a Github sync.

If you want to save your project tasks, you can use Trello

If you want to have some flexbox practice, you can check this game: flexboxfroggy


For flexbox prefixing please google "flexbox prefixes SASS"

Who this course is for:

  • Beginner Frontend developer

Course content

3 sections • 21 lectures • 1h 7m total length

  • Preview04:43
  • Preview06:11
  • Practice lesson. display:flex
    01:51
  • Practice lesson. flex-direction
    02:05
  • Practice lesson. flex-wrap
    02:49
  • Parent properties. justify-content
    06:07
  • Practice lesson. justify-content
    03:18
  • Practice lesson. justify-content
    02:46
  • Practice lesson. justify-content
    01:35
  • Practice lesson. justify-content
    03:28
  • Parent properties. align-content
    03:19

  • Properties for children. order, flex-grow
    03:36
  • Practice lesson. order
    03:39
  • Practice lesson. order
    02:25
  • Practice lesson. flex-grow
    02:45
  • Properties for children. flex-shrink, flex-basis
    03:13
  • Practice lesson. flex-shrink
    01:51
  • Properties for children. flex, align-self
    02:50
  • Practice lesson. Holy Grail layout
    03:18
  • Browsers support
    02:37
  • Flexbox prefixing
    03:28

  • Create a page with recipe cards
    4 questions

Instructor

Arthur Tkachenko
Founder Groceristar company
Arthur Tkachenko
  • 3.3 Instructor Rating
  • 337 Reviews
  • 61,054 Students
  • 6 Courses


My name is Arthur
I'm building tools for Food Tech projects
Teaching to code my team of interns.
Writing articles on Medium - explaining how I'm building a company.

I managed team members with a different skillset.

Usually, I'm managing developers.

Before I managed 10+ members team, created a documentation for complex projects.

 

Right now I'm coding at React/Nodejs

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