A brief interactive tutorial to html and CSS layouts using Flexbox - Let's make your first project less scary

Hello fellow campers!

I have read some post about people feeling overwhelmed in the transition from guided exercise to an empty, white canvas that is your first(s) project(s).

So I went ahead and coded in my spare time a brief interactive tutorial that aims in 13 small lessons to teach you how to create, or better, how to plan the layout for your project using only HTML and CSS.

The small lessons will focus on 3 topics:

  • make a responsive navbar.
  • make a responsive grid system
  • make a mobile-first page layout

All this without using any external library: only CSS’s Flexbox and media queries. :slight_smile:

The goal is to show you the ideas behind each concept so that, weather you decide to use a library (Bootstrap, Bulma, PureCss …) or make it yourself, you’ll feel a little more confident since you have a “I know how to start” approach.

You can play the tutorial here:

https://marmiz.github.io/code-tutorial/


Bonus : I created two extra branches for the repo:

  • template
  • redux-test template

template
Is a bare Html and Css online editor with live render inside an iframe.
Use this as a base camp to develop your own project as you wish.

redux-test template
Is a slightly opinionated template using Redux and Chai for in browser testing.
Use this as a starting point to develop your own challenge if you like how I’ve designed the lessons and test.


Hope you’ll have fun and find it useful.
lessThanThree

6 Likes

Thank you for the effort ! <3