Study Learn Grow
Learn CSS Flexboxes Practically

Learn CSS Flexboxes Practically


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.

Overview

About this Course
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.

TOOLKIT

Github(https://github.com/) - if you ok to share your code with other - My current pick Bitbucket(https://bitbucket.org/) - if you want to have a free storage

Google drive(https://www.google.com/drive/) or Dropbox(https://www.dropbox.com/?landing=dbv2) - if you just want to save your code at cloud

You can also use Codesandbox(https://codesandbox.io) or other online editors.

For practice lessons, I'll use CodePen(http://codepen.io).

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

Code editors Sublime(https://www.sublimetext.com/3) - I use it around 6 years. small size and everything important Atom(https://atom.io/) 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(https://trello.com)

If you want to have some flexbox practice, you can check this game: https://flexboxfroggy.com/

Additional materials

Flexbox prefixing https://autoprefixer.github.io/ (i recommend this option)

https://github.com/nattarnoff/flexbox-prefixes(Sass sample)

https://github.com/pandao/prefixes.scss/blob/master/src/flexbox.scss (Sass sample)

Basic knowledge
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

Course 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

You'll learn how actually use flexboxes and how experienced developers using it right now.

You class project - that you should do after completing this course will be:

Your project is to create a page with recipe cards. Nothing complex, but you need to use flexboxes. Don't use CSS grids or Bootstrap.

It should have a Header, Footer, Navigation(linked to recipe cards at content).With three or more blocks-cards with details about your favorite dishes.

You can use a plain CSS or SASS.

As a code style and "best practice" example you can use SMACSS https://smacss.com/

BUT you restricted to use BEM approach(it's good if you don't know what I'm talking about).

Be cool with your code, use comments, if you want to create easy to understand code structure.

Data

Find any web version of recipe website and pick any layout that you want to replicate.

If you need actual data for your blocks, you can check it at the plugin, that we've built: https://github.com/GroceriStar/static-data-plain/blob/master/data/dirty/Recipe/Recipe4/recipe-short-version.json

the main structure of the recipe is(but not limited too)

recipe

- header

-- title

-- image

- description


-- data

- ingredients list

-- data

- directions list

-- data
You can start to work on your project before finishing the whole course.

I propose you to create a plan, split things into small chunks and move forward by closing this small tasks.

I'll be happy if you do not just complete this project, but go forward and make it better.

So take time, generate ideas and experiment.

If you want to learn how to code == you should code as much as possible. You can polish this project, while you'll like the code quality.

Please don't worry, if something wouldn't be easy to understand at the first time. Share your process with other students in our Project Directory.

It's much easy to solve problems together!

Additional Assesment(For A+) 0)

You can make this page looks better or have additional features, like responsiveness

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.https://matthewlein.com/tools/ceaserhttps://css-tricks.com/ease-out-in-ease-in-out/
https://easings.net/

https://developer.mozilla.org/en- US/docs/Web/CSS/CSSTransitions/UsingCSS_transitions

https://loading.io/easing/

you can create a calendar, using flexboxes. it'll help you master flexboxes completely.
Additional things to read:

About CSS code organization

https://smacss.com/https://davidwalsh.name/format-css-files

https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e

Mozilla Dev Network is a great source for reading details about Flexboxes

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

Ebooks

https://unravelingflexbox.com/

https://www.oreilly.com/library/view/flexbox-in-css/9781491981474/(O'Reilly books always best)

https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/

Beginner Frontend developer

• Lifetime Access to Each Course
• Certificate on Completion of Course
• No Extra Charges Or Admin Fees
• Easy Access to Courses
• High Priority Support After Sales.
• Big Discounts on Individual Courses

Course Specifications

IT and Computing courses are available to study on our learning platform. 

See All Courses

Adult education is the non-credential activity of gaining skills and improved education. 

See All Courses

Online education is electronically supported learning that relies on the Internet for teacher/student interaction. 

See All Courses

A short course is a learning programme that gives you combined content or specific skills training in a short period of time. Short courses often lean towards the more practical side of things and have less theory than a university course – this gives you a more hands-on experience within your field of interest.

See All Courses

Course duration is 24 hours.

See All Courses

Study Learn Grow

Related Jobs