Back to Basics: Front-end

“You don’t know what you don’t know, until you know it.” — Richard Pratt

There’s been quite a few instances where I’ve heard this phrase spoken like a rite of passage throughout the tech community. Maybe your coding pal nodded in agreement about it over coffee. Or perhaps you once mentioned it to a coding mentor and they transported back to a time filled with hours of painstaking self-learning. I’ve even heard it murmured at the occasional arts event. Yes, it seems like this rings true for many people no matter what industry you’re in. It definitely applies to me, having dabbled in the arts, media and — now as a fledgling — in the coding industry.

When you enter a new field, especially a creative one, it can feel like a widening black hole of knowledge. You see it swishing and swirling in the vast universe, but it’s always expanding. That thought can be both exhilarating, and yet, terrifying. A blinking cursor on your blank text editor canvas can fill even the most stalwart with dread.

With that said, this blog will be about what I don’t know and also about what I’ll come to know. It’s a means to track me vaulting over learning hurdles and finding inspiration in “aha!” moments over my nine weeks at HackerYou.

So here’s to you, dear reader, for having the courage to tackle all the coding obstacles that come your way.

Let’s begin.

The Wonders of Clearfix

As a beginner, I always find it hilarious to discover the quirks and gotchas about HTML and CSS. I’ve stumbled across some of these vagabonds before, these rebel elements with no care for the destruction that lays in their wake. Just picture it; you think you know what they’ll do, but you don’t.

This week, we learned one of these rascals was the f-word. Yup, you guessed it. F-L-O-A-T-S!

I should be clear before we move on, floats are awesome! You can drink them at old school diners or wave to people riding them at parades. You can even use them as a CSS positioning property to fix your navigation bar!

Wait, what? Let’s go back a little bit.

In the olden days when the internet was but a wee one, people weren’t concerned about making the web pretty. They needed their statistical info, and they needed it stat, dammit! But then we started including pictures in web documents, and along came some awesome people who looked back to print design to figure it all out.

As Chris Coyier of CSS Tricks said, “in a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called ‘text wrap’.”

Text wrapping is not only pretty cool, but it’s also a must. If we couldn’t wrap text around our images, it’d either a) barrel into its surrounding content within the flow of our website or b) have tons of extraneous white space surrounding the image, leaving it by its lonesome self. So, how do we avoid that happening in our website?

Let’s say we have four common elements found on a website. The Header, Section, Aside and Footer element. We’ll also bundle them up with a surrounding Div element that has a class of wrapper. This will keep our elements together and centered.

Our HTML elements happen to be block-level by default, which in layman’s terms means they stretch 100% of the width of your browser window. Since they’re already there, we won’t apply any widths or floats to our header or footer. Yet, we do need to float our Section and Aside to have them next to each other. Also, they both should have widths that total 100%.

To be continued…