We have a lot of great tutorials and courses, related to flexboxes. I don’t want to create an article, that will explain the flexbox basics. My goals are to put into one place links, that I find interesting and tell you what you can do, in order to master this tool. If you’ll find some mistakes, or we forget to put something here — buzz me at comments. Of course, the main source of information is . Flexbox Specification If you want to have a practice assessment, you can create a calendar layout using flexboxes, or recreate some of the website blocks from Design Blocks Full Tutorials Mozilla Flexboxes specification CHRIS COYIER`s Flexbox tutorial Books to read https://unravelingflexbox.com/ (O'Riles books always best) https://www.oreilly.com/library/view/flexbox-in-css/9781491981474/ https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/ Advanced examples https://www.flexboxpatterns.com/ http://flexboxgrid.com/ https://www.quackit.com/html/templates/css_flexbox_templates.cfm https://designmodo.com/flexbox-snippets/ Youtube tutorials CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox) Flexbox Tutorial (CSS): Real Layout Examples How to build complex layouts using CSS Flexbox and Grid Code generators I’m not sure if it a good idea to generate code for flexbox layouts. Because you’re not learning at this moment, but at least code will be cross-browser and working well. http://the-echoplex.net/flexyboxes/ https://loading.io/flexbox/ (generator with a good preview) http://flexbox.buildwithreact.com/ (looks like interesting UI, but not finished by my opinion:) http://maxsteenbergen.com/fibonacci/ https://flexbox.webflow.com/ Additional Examples https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35 https://thenewstack.io/tutorial-css-flexbox-vs-grid-layout-ultimate-showdown/ https://philipwalton.github.io/solved-by-flexbox/ (Samples) https://react.rocks/tag/Flexbox (good game that can help you practice) https://flexboxfroggy.com/ If you want to read about React and Flexboxes, check this list below to read: https://dev.to/llorentegerman/simple-layouts-with-flexbox-in-react-55kf https://blog.buildo.io/flexview-the-easiest-way-to-use-flex-with-react-c698db55926a http://www.redbitdev.com/getting-started-with-react-flexbox-grid/ https://medium.com/flexbox-and-grids/if-you-love-reactjs-youll-love-the-css-grid-52933e0d61ac (Collection or articles) https://medium.com/flexbox-and-grids https://medium.com/flexbox-and-grids/free-courses-49ce873bfa75 https://reactjsexample.com/react-flexbox-grid-made-simple/ React packages or https://roylee0704.github.io/react-flexbox-grid/ https://www.npmjs.com/package/react-flexbox-grid https://github.com/jxnblk/reflexbox https://github.com/paulmelnikow/react-flexbox-svg https://github.com/ekros/nice-react-layout https://github.com/buildo/react-flexview (it have layouts, that using flexboxes) https://ant.design/ React Native https://facebook.github.io/react-native/docs/flexbox https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6 (Yoga for Facebook is a good layout for application development) https://github.com/facebook/yoga TOOLKIT For practice I use . CodePen — if you ok to share your code with other — My current pick Github — if you want to have a free storage Bitbucket & — if you just want to save your code at cloud Google drive Dropbox You can also use of some other stuff. codesandbox Code editors I use it around 6 years. Small size and has everything important. Sublime because it’s baked by GitHub team and it’s also have a GitHub sync. Atom Stay Tuned!

CodePen

Dropbox

Facebook

Google

Mozilla

YouTube

How Cool Can Startup Presentations Be?

Looking for a Tech Internship? Try This List of Online Resources

try my Email Marketing Course

2021 - Top Slogging Maestro

Nominated for 2022 - HackerNoon Contributor of the Year - Robotics

Nominated for 2022 - HackerNoon Contributor of the Year - Life Lessons

Nominated for 2022 - HackerNoon Contributor of the Year - Npm

Nominated for 2022 - HackerNoon Contributor of the Year - Email

Nominated for 2022 - HackerNoon Contributor of the Year - Slogging

Nominated for 2022 - HackerNoon Contributor of the Year - Culture

Too Long; Didn't Read

Make resilience your competitive advantage

An Anthology of Flexbox Tools and Tutorials (Frontend Development)

An Anthology of Flexbox Tools and Tutorials (Frontend Development)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

39 Videos About Tech, Mom’s Spaghetti, Mushrooms and More to Eat Your Time

Clojure Immutable and Persistent Data Structures

The Risks of Platforms For Investing in Commodities and Art

I Made ezpkg.io: Simplify Your Go Projects with Reusable Packages

Six Costly Pitfalls in Log Collection: From Local Management Missteps to Looming System Failures

39 Videos About Tech, Mom’s Spaghetti, Mushrooms and More to Eat Your Time

Clojure Immutable and Persistent Data Structures

The Risks of Platforms For Investing in Commodities and Art

I Made ezpkg.io: Simplify Your Go Projects with Reusable Packages

Six Costly Pitfalls in Log Collection: From Local Management Missteps to Looming System Failures

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps