This might just be me, but I found one of the most daunting things about writing a website from scratch in text files to be getting the layout that I want. Simple HTML, and the built-in browser styles that accompany it, are one-dimensional, running from the top of the page to the bottom, taking up space as needed. But what if you want to arrange your page horizontally with a nav bar on one side and some side content on the other? Or what if you want a footer that always sits at the bottom of the page, floating down to the bottom of the screen if there’s an excess of space?
Don’t get me wrong; there are plenty of tutorials out there on how to achieve
these effects. The reason I’m even bothering to write this is because, in my
experience at least, virtually all of them are overcomplicated, hackish, and
make the site more difficult to maintain and expand cleanly. They often involve
weird container divs, fixed position elements, and special margins
that keep elements from running into one another.
There is a much simpler way to do all this: flexboxes. Want a side-nav? Set
your main element to be a flex row. Done. No position-setting, no
having to pick a fixed width, and no special margins; all these issues resolve
themselves. Want a footer at the bottom of the page? Same thing—make your
body element a flex column and set your main to have
flex-grow: 1. All done.
I don’t know why this isn’t a more common solution to these problems. Maybe it is, and it just hasn’t trickled into online answer forums yet.
There’s a broader point to be made here. Web technology is capable of a lot of cool things, but there are a gazillion different ways to do all of them, and most of them, often even the ones you see recommended most, are not very good. So my advice is this: don’t take the stuff you find on StackOverflow as gospel; if the solution to a simple problem seems way too complicated, it probably is. Check over all of the CSS tools you’ve got to work with, and experiment. You’ll probably solve the problem quicker than you’d think.