Three Website Layout Tools

As I've been redesigning the website for Aww, Feathers! I've run into what can be one of the most intimidating and finicky parts of coding a website: layout. It seems like it should be simple, but it rarely is. Somehow, some graphic or text container always seems to be out of place or misaligned.

Fortunately, this go around I had a few extra tools in my webdev toolbelt. I'm sharing them with you in case you or someone you know ever has need of them.

W3.CSS is a CSS library created by the online web dev education site, W3 Schools. It's free to use and specifically purposed for quickly putting together websites that are responsive and consistent across different devices. As the name implies the library is pure CSS and the different effects are achieved simply by applying one or more of the provided CSS classes to a web element. You can learn more about it at w3schools.com/w3css.

If you want a little more control over how multiple elements are aligned and positioned in relation to one another, you may try using the layout scheme called Flexbox. It allows you to position elements without having to resort to floating elements or absolute positioning. One downside is that there are a lot of settings and options to know and memorize, some of which are very similar and easy to confuse one with another. Fortunately, one excellent resource for learning all the in's and out's of Flexbox is available for free online. Even better, it's formatted like a game that makes it fun to learn and easy to conceptualize. It's called Flexbox Zombies, and you can take the course at FlexboxZombies.com.

An alternative to Flexbox is CSS Grid. While Flexbox treats web elements like  a line of items, CSS Grid treats them like items in a grid. The two can accomplish very similar results: both are able to control the direction, spacing, and alignment of a collection of elements. However, once mastered, CSS Grid seems to be the best way to control the overall layout of a site, especially one with a lot of content to arrange just right. It's also simpler and more intuitive. There is also a learning game for mastering CSS Grid made by the same developer who did Flexbox Zombies. This one isn't free, but if you enjoy the former, I consider this one to be well worth it! You can find it at GridCritters.com.