awesome-flexbox-tutorials

Top tutorials to learn Flexboxes for Frontend Development

Originally posted on Medium: https://medium.com/quick-code/top-tutorials-to-learn-flexboxes-for-frontend-development-d6dfb2113b48

Great course you can see here: https://github.com/jlr7245/flexbox-course-resource-materials

---

Flexbox Specification

---

Full Tutorials

• Mozilla Flexboxes specification
• CHRIS COYIER's Flexbox tutorial

Books to read

• Unraveling Flexbox
• Flexbox in CSS
• The Flexbox Reading List: Techniques And Tools

---

Advanced examples

• Flexbox Patterns
• Flexbox Grid
• Flexbox Templates
• 20 Small, Yet Viable Solutions Based on Flexbox

---

Youtube tutorials

• CSS FlexBox Practical Examples - Rebuilding Dribbble.com using FlexBox
• Fexbox Tutorial (CSS): Real Layout Examples
• How to build complex layouts using CSS Flexbox and Grid

---

Code generators

• Flexyboxes
• Loading.io - Flexbox generator
• Build with React - Flexbox generator (generator with a good preview)
• Fibonacci Flexbox Composer
• Visual flexbox builder

---

Additional Examples

• an-animated-guide-to-flexbox
• tutorial-css-flexbox-vs-grid-layout-ultimate-showdown
• solved-by-flexbox
• React Rocks Flexbox tag
• flexboxfroggy Game (good game that can help you practice)

---

If you want to read about React and Flexboxes, check this list below

• simple-layouts-with-flexbox-in-react
• flexview-the-easiest-way-to-use-flex-with-react
• getting-started-with-react-flexbox-grid
• if-you-love-reactjs-youll-love-the-css-grid
• Collection or articles (Collection or articles)
• free-courses
• react-flexbox-grid-made-simple

React packages

• react-flexbox-grid or https://www.npmjs.com/package/react-flexbox-grid
• reflexbox
• react-flexbox-svg
• nice-react-layout
• react-flexview
• ant.design (it has layouts, that uses flexboxes)

---

React Native

• facebook.github.io/react-native/docs/flexbox
• a-mini-course-on-react-native-flexbox
• Yoga Layout Yoga for Facebook is a good layout for application development)

---

TOOLKIT

• For practice I use CodePen
• Github - if you ok to share your code with other -  My current pick
• Bitbucket  - if you want to have a free storage
• Google drive & Dropbox - if you just want to save your code at cloud
• You can also use CodeSandbox of some other stuff.

---

Code editors

• Sublime Text I use it around 6 years. Small size and has everything important.
• Atom because it's baked by GitHub team and it's also have a GitHub sync.

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