Introduction — The what and why
So you may have heard of Flexbox before, and want to know more. Or maybe you have no idea how it works at all. Regardless the best way to learn anything is to build an application from start to finish, learning along the way.
Understanding the “what”
In the next few articles, the objective is to get you to understand Flexbox, by building a chat application UI. Referring to the image at the top of this article, this is the final product of what we will be building. But where we will be starting is no where near that. In fact we are going to start with literally an empty canvas. Like the image below.
Understanding the “why”
So why am I writing about Flexbox and not CSS Grid or something else?
Well I will be honest CSS Grid is the almost the now, but not quite. We still today have concerns about browser support for Internet Explorer. Until this can be eradicated, Flexbox will still be the choice for a lot of developers, for just a little bit longer. However I will be writing articles on how to build this application using CSS Grid in the near future. So also stay tuned for that.
As for all other options such as using floats, positioning and other CSS techniques, they are considered hacks, and always have been, so I’m not going to waste your time and mine demonstrating an anti pattern.
Now I chose a chat application UI because by nature it’s somewhat complex, but not ridiculously complex. It serves as a good enough example to learn Flexbox at a reasonable level. However if do you want a deeper understanding of Flexbox, you can always check out my course here on Udemy for the cost of a few cups of coffee. Also I think building a chat application UI is practical and also fun.
Where is the code?
The code for these articles will all be based on the following Github repository https://github.com/lyraddigital/flexbox-chat-app.
So now we know the what, the why, and where the code is, it’s time to get started. We’ll do that in the next article.
Next Article — Building the chat application shell