Learn CSS Flexboxes Practically

Course

Online

£ 10 VAT inc.

Description

  • Type

    Course

  • Methodology

    Online

  • Start date

    Different dates available

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. Check other courses for learning HTML/CSS basics.TOOLKITGithub( - if you ok to share your code with other - My current pick Bitbucket( - if you want to have a free storageGoogle drive( or Dropbox( - if you just want to save your code at cloudYou 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: Additional materialsFlexbox prefixing  recommend this option)  sample)

Facilities

Location

Start date

Online

Start date

Different dates availableEnrolment now open

About this course

Each recipe in our example has one image. You can create an image gallery.
You can add easing animations, so scrolling(after clicking on top menu) will have cool animation.

Questions & Answers

Add your question

Our advisors and other users will be able to reply to you

Who would you like to address this question to?

Fill in your details to get a reply

We will only publish your name and question

Emagister S.L. (data controller) will process your data to carry out promotional activities (via email and/or phone), publish reviews, or manage incidents. You can learn about your rights and manage your preferences in the privacy policy.

Reviews

This centre's achievements

2021

All courses are up to date

The average rating is higher than 3.7

More than 50 reviews in the last 12 months

This centre has featured on Emagister for 6 years

Subjects

  • HTML
  • Layout
  • Project
  • Editors

Course programme

Introduction. Parent Properties. Children Properties 21 lectures 01:08:04 Intro to flexboxes. Flexbox Axis Parent Properties. display, flex-direction, flex-wrap, flex-flow Practice lesson. display:flex Practice lesson. flex-direction Practice lesson. flex-wrap Parent properties. justify-content Practice lesson. justify-content Part1 Practice lesson. justify-content Part2 Practice lesson. justify-content Part3 Practice lesson. justify-content Part4 Parent properties. align-content Properties for children. order, flex-grow Practice lesson. order Part1 Practice lesson. order Part 2 Practice lesson. flex-grow Properties for children. flex-shring, flex-basis Practice lesson. flex-shrink Properties for children. flex, align-self Practice lesson. Holy Grail layout Browsers support Flexbox prefixing Introduction. Parent Properties. Children Properties 21 lectures 01:08:04 Intro to flexboxes. Flexbox Axis Parent Properties. display, flex-direction, flex-wrap, flex-flow Practice lesson. display:flex Practice lesson. flex-direction Practice lesson. flex-wrap Parent properties. justify-content Practice lesson. justify-content Part1 Practice lesson. justify-content Part2 Practice lesson. justify-content Part3 Practice lesson. justify-content Part4 Parent properties. align-content Properties for children. order, flex-grow Practice lesson. order Part1 Practice lesson. order Part 2 Practice lesson. flex-grow Properties for children. flex-shring, flex-basis Practice lesson. flex-shrink Properties for children. flex, align-self Practice lesson. Holy Grail layout Browsers support Flexbox prefixing Intro to flexboxes. Flexbox Axis Intro to flexboxes. Flexbox Axis Intro to flexboxes. Flexbox Axis Intro to flexboxes. Flexbox Axis Parent Properties. display, flex-direction, flex-wrap, flex-flow Parent Properties. display, flex-direction, flex-wrap, flex-flow Parent Properties. display, flex-direction, flex-wrap, flex-flow Parent Properties. display, flex-direction, flex-wrap, flex-flow Practice lesson. display:flex Practice lesson. display:flex Practice lesson. display:flex Practice lesson. display:flex Practice lesson. flex-direction Practice lesson. flex-direction Practice lesson. flex-direction Practice lesson. flex-direction Practice lesson. flex-wrap Practice lesson. flex-wrap Practice lesson. flex-wrap Practice lesson. flex-wrap Parent properties. justify-content Parent properties. justify-content Parent properties. justify-content Parent properties. justify-content Practice lesson. justify-content Part1 Practice lesson. justify-content Part1 Practice lesson. justify-content Part1 Practice lesson. justify-content Part1 Practice lesson. justify-content Part2 Practice lesson. justify-content Part2 Practice lesson. justify-content Part2 Practice lesson. justify-content Part2 Practice lesson. justify-content Part3 Practice lesson. justify-content Part3 Practice lesson. justify-content Part3 Practice lesson. justify-content Part3 Practice lesson. justify-content Part4 Practice lesson. justify-content Part4 Practice lesson. justify-content Part4 Practice lesson. justify-content Part4 Parent properties. align-content Parent properties. align-content Parent properties. align-content Parent properties. align-content Properties for children. order, flex-grow Properties for children. order, flex-grow Properties for children. order, flex-grow Properties for children. order, flex-grow Practice lesson. order Part1 Practice lesson. order Part1 Practice lesson. order Part1 Practice lesson. order Part1 Practice lesson. order Part 2 Practice lesson. order Part 2 Practice lesson. order Part 2 Practice lesson. order Part 2 Practice lesson. flex-grow Practice lesson. flex-grow Practice lesson. flex-grow Practice lesson. flex-grow Properties for children. flex-shring, flex-basis Properties for children. flex-shring, flex-basis Properties for children. flex-shring, flex-basis Properties for children. flex-shring, flex-basis Practice lesson. flex-shrink Practice lesson. flex-shrink Practice lesson. flex-shrink Practice lesson. flex-shrink Properties for children. flex, align-self Properties for children. flex, align-self Properties for children. flex, align-self Properties for children. flex, align-self Practice lesson. Holy Grail layout Practice lesson. Holy Grail layout Practice lesson. Holy Grail layout Practice lesson. Holy Grail layout Browsers support Browsers support Browsers support Browsers support Flexbox prefixing Flexbox prefixing Flexbox prefixing Flexbox prefixing

Additional information

You should have basic knowledge in HTML/CSS In my practical lessons i'm using HTML5 and SCSS but it's easy to understand how it actually works

Learn CSS Flexboxes Practically

£ 10 VAT inc.