An Anthology of Flexbox Tools and Tutorials (Frontend Development)

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!

HackerNoon Mobile

An Anthology of Flexbox Tools and Tutorials (Frontend Development)

Too Long; Didn't Read

Companies Mentioned

@arthur.tkachenko

RELATED STORIES