Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Tkachenko-School/awesome-flexbox-tutorials
Top tutorials to learn Flexboxes for Frontend Development
https://github.com/Tkachenko-School/awesome-flexbox-tutorials
List: awesome-flexbox-tutorials
awesome awesome-list flexbox flexbox-tutorials list
Last synced: 16 days ago
JSON representation
Top tutorials to learn Flexboxes for Frontend Development
- Host: GitHub
- URL: https://github.com/Tkachenko-School/awesome-flexbox-tutorials
- Owner: Tkachenko-School
- License: mit
- Created: 2018-12-31T00:26:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-21T10:38:02.000Z (over 5 years ago)
- Last Synced: 2024-05-20T00:07:13.692Z (7 months ago)
- Topics: awesome, awesome-list, flexbox, flexbox-tutorials, list
- Size: 11.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- ultimate-awesome - awesome-flexbox-tutorials - Top tutorials to learn Flexboxes for Frontend Development. (Other Lists / PowerShell Lists)
README
# awesome-flexbox-tutorials
[](https://github.com/ChickenKyiv/awesome-flexbox-tutorials) [](https://github.com/ChickenKyiv/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](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)
---
#### Full Tutorials
- [Mozilla Flexboxes specification](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
- [CHRIS COYIER's Flexbox tutorial](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
#### Books to read
- [Unraveling Flexbox](https://unravelingflexbox.com/)
- [Flexbox in CSS](https://www.oreilly.com/library/view/flexbox-in-css/9781491981474/)
- [The Flexbox Reading List: Techniques And Tools](https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/)
---
#### Advanced examples
- [Flexbox Patterns](https://www.flexboxpatterns.com/)
- [Flexbox Grid](http://flexboxgrid.com/)
- [Flexbox Templates](https://www.quackit.com/html/templates/css_flexbox_templates.cfm)
- [20 Small, Yet Viable Solutions Based on Flexbox](https://designmodo.com/flexbox-snippets/)
---
#### Youtube tutorials
- [CSS FlexBox Practical Examples - Rebuilding Dribbble.com using FlexBox](https://www.youtube.com/watch?v=H1lREysgdgc)
- [Fexbox Tutorial (CSS): Real Layout Examples](https://www.youtube.com/watch?v=k32voqQhODc)
- [How to build complex layouts using CSS Flexbox and Grid](https://www.youtube.com/watch?v=Y7pT1zZLJb0)
---
#### Code generators
- [Flexyboxes](http://the-echoplex.net/flexyboxes/)
- [Loading.io - Flexbox generator](https://loading.io/flexbox/)
- [Build with React - Flexbox generator](http://flexbox.buildwithreact.com/) (generator with a good preview)
- [Fibonacci Flexbox Composer](http://maxsteenbergen.com/fibonacci/)
- [Visual flexbox builder](https://flexbox.webflow.com/)
---
#### Additional Examples
- [an-animated-guide-to-flexbox](https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35)
- [tutorial-css-flexbox-vs-grid-layout-ultimate-showdown](https://thenewstack.io/tutorial-css-flexbox-vs-grid-layout-ultimate-showdown/)
- [solved-by-flexbox](https://philipwalton.github.io/solved-by-flexbox/)
- [React Rocks Flexbox tag](https://react.rocks/tag/Flexbox)
- [flexboxfroggy Game (good game that can help you practice)](https://flexboxfroggy.com/)
---
#### If you want to read about React and Flexboxes, check this list below
- [simple-layouts-with-flexbox-in-react](https://dev.to/llorentegerman/simple-layouts-with-flexbox-in-react-55kf)
- [flexview-the-easiest-way-to-use-flex-with-react](https://blog.buildo.io/flexview-the-easiest-way-to-use-flex-with-react-c698db55926a)
- [getting-started-with-react-flexbox-grid](http://www.redbitdev.com/getting-started-with-react-flexbox-grid/)
- [if-you-love-reactjs-youll-love-the-css-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) (Collection or articles)
- [free-courses](https://medium.com/flexbox-and-grids/free-courses-49ce873bfa75)
- [react-flexbox-grid-made-simple](https://reactjsexample.com/react-flexbox-grid-made-simple/)
React packages
- [react-flexbox-grid](https://roylee0704.github.io/react-flexbox-grid/) or https://www.npmjs.com/package/react-flexbox-grid
- [reflexbox](https://github.com/jxnblk/reflexbox)
- [react-flexbox-svg](https://github.com/paulmelnikow/react-flexbox-svg)
- [nice-react-layout](https://github.com/ekros/nice-react-layout)
- [react-flexview](https://github.com/buildo/react-flexview)
- [ant.design](https://ant.design/) (it has layouts, that uses flexboxes)
---
React Native
- [facebook.github.io/react-native/docs/flexbox](https://facebook.github.io/react-native/docs/flexbox)
- [a-mini-course-on-react-native-flexbox](https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6)
- [Yoga Layout](https://github.com/facebook/yoga) Yoga for Facebook is a good layout for application development)
---
TOOLKIT
- For practice I use [CodePen](https://codepen.io/)
- [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/) & [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/dashboard) of some other stuff.
---
Code editors
- [Sublime Text](https://www.sublimetext.com/3) I use it around 6 years. Small size and has everything important.
- [Atom](https://atom.io/) 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](https://www.froala.com/design-blocks#playground)