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
We are verifying your question adjusts to our publishing rules. According to your answers, we noticed you might not be elegible to enroll into this course, possibly because of: qualification requirements, location or others. It is important you consult this with the Centre.
Thank you!
We are reviewing your question. We will publish it shortly.
Or do you prefer the center to contact you?
Reviews
Have you taken this course? Share your opinion
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 lectures01:08:04Intro to flexboxes. Flexbox AxisParent Properties. display, flex-direction, flex-wrap, flex-flowPractice lesson. display:flexPractice lesson. flex-directionPractice lesson. flex-wrapParent properties. justify-contentPractice lesson. justify-content Part1Practice lesson. justify-content Part2Practice lesson. justify-content Part3Practice lesson. justify-content Part4Parent properties. align-contentProperties for children. order, flex-growPractice lesson. order Part1Practice lesson. order Part 2Practice lesson. flex-growProperties for children. flex-shring, flex-basisPractice lesson. flex-shrinkProperties for children. flex, align-selfPractice lesson. Holy Grail layoutBrowsers supportFlexbox prefixing
Introduction. Parent Properties. Children Properties
21 lectures01:08:04Intro to flexboxes. Flexbox AxisParent Properties. display, flex-direction, flex-wrap, flex-flowPractice lesson. display:flexPractice lesson. flex-directionPractice lesson. flex-wrapParent properties. justify-contentPractice lesson. justify-content Part1Practice lesson. justify-content Part2Practice lesson. justify-content Part3Practice lesson. justify-content Part4Parent properties. align-contentProperties for children. order, flex-growPractice lesson. order Part1Practice lesson. order Part 2Practice lesson. flex-growProperties for children. flex-shring, flex-basisPractice lesson. flex-shrinkProperties for children. flex, align-selfPractice lesson. Holy Grail layoutBrowsers supportFlexbox prefixingIntro to flexboxes. Flexbox AxisIntro to flexboxes. Flexbox AxisIntro to flexboxes. Flexbox AxisIntro to flexboxes. Flexbox AxisParent Properties. display, flex-direction, flex-wrap, flex-flowParent Properties. display, flex-direction, flex-wrap, flex-flowParent Properties. display, flex-direction, flex-wrap, flex-flowParent Properties. display, flex-direction, flex-wrap, flex-flowPractice lesson. display:flexPractice lesson. display:flexPractice lesson. display:flexPractice lesson. display:flexPractice lesson. flex-directionPractice lesson. flex-directionPractice lesson. flex-directionPractice lesson. flex-directionPractice lesson. flex-wrapPractice lesson. flex-wrapPractice lesson. flex-wrapPractice lesson. flex-wrapParent properties. justify-contentParent properties. justify-contentParent properties. justify-contentParent properties. justify-contentPractice lesson. justify-content Part1Practice lesson. justify-content Part1Practice lesson. justify-content Part1Practice lesson. justify-content Part1Practice lesson. justify-content Part2Practice lesson. justify-content Part2Practice lesson. justify-content Part2Practice lesson. justify-content Part2Practice lesson. justify-content Part3Practice lesson. justify-content Part3Practice lesson. justify-content Part3Practice lesson. justify-content Part3Practice lesson. justify-content Part4Practice lesson. justify-content Part4Practice lesson. justify-content Part4Practice lesson. justify-content Part4Parent properties. align-contentParent properties. align-contentParent properties. align-contentParent properties. align-contentProperties for children. order, flex-growProperties for children. order, flex-growProperties for children. order, flex-growProperties for children. order, flex-growPractice lesson. order Part1Practice lesson. order Part1Practice lesson. order Part1Practice lesson. order Part1Practice lesson. order Part 2Practice lesson. order Part 2Practice lesson. order Part 2Practice lesson. order Part 2Practice lesson. flex-growPractice lesson. flex-growPractice lesson. flex-growPractice lesson. flex-growProperties for children. flex-shring, flex-basisProperties for children. flex-shring, flex-basisProperties for children. flex-shring, flex-basisProperties for children. flex-shring, flex-basisPractice lesson. flex-shrinkPractice lesson. flex-shrinkPractice lesson. flex-shrinkPractice lesson. flex-shrinkProperties for children. flex, align-selfProperties for children. flex, align-selfProperties for children. flex, align-selfProperties for children. flex, align-selfPractice lesson. Holy Grail layoutPractice lesson. Holy Grail layoutPractice lesson. Holy Grail layoutPractice lesson. Holy Grail layoutBrowsers supportBrowsers supportBrowsers supportBrowsers supportFlexbox prefixingFlexbox prefixingFlexbox prefixingFlexbox 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