- The Box Model: The CSS-ecret formula
- Comparing Education Tools: Codecademy vs Udacity
My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven’t already guessed it, this next post in my Dear Developer series of learning HTML and CSS is of course about the Box Model. Not, in fact, figurative boxes.
After a long holiday in the Caribbean and some time away from coding, it was refreshing to come back to an aspect of HTML and CSS that was quite eye opening. Since I've been back I've been introducing myself to the CSS Box Model, and honestly for such a simple aspect of the language, it's totally simplified the way I look at websites now. Illuminating the impact different devices an have on the harmony of your elements and how to prepare for it in your code.
For this lesson I dabbled between the education tools Udacity and Codecademy, read a few articles here and there and spoke to some of my colleagues. If you’re on this journey with me - I hope this clears up the basics of what you might need to know.
Just in case you want to jump between topics, here's the breakdown:
The Box Model
For me, this model is less so a bundle of new code to learn but more a concept which develops your understanding of how elements are placed and make up a web page. So whilst you’ll notice some new lines of code, in this article you'll find there aren't as many HTML elements or CSS values which seem alien to you.
As a beginner building your first website, you kind of just imagine that the elements you add simply fill the space that you can see that it fills. But when is anything that simple?
Each element is actually sitting inside a box. If you think back to what happens when changing the background colour of heading, for example, it helps to make this more clear. You probably thought, why is a huge rectangular square shaped being surrounding my text? That's the Box Model coming into play.
"All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element." - W3Schools
To give things a test drive, the CSS value below will make all the boxes appear on your web page and you'll see that no matter the shape, size or form - everything is sitting within a box.
With this knowledge, you start to see a website in all it’s simplicity with all the elements, in boxes, piled on top of each other. Which is much less intimidating, right?
The CSS Box Model, consists of five core parts which we’ll cover:
- Border
- Padding
- Margin
- Width
- Height
Border
The concept of borders is nothing new, right? Finally a term we’re familiar with inside and outside the tech world. To outline the boxes which surround your elements you can adjust line thickness, it's pattern and colour.
To adjust the pattern style of the border here are the key styles you can attribute to the border-style property:
solid- A solid linedashed- A series of lines or dashesdotted- Square dotsdouble- Two solid black linesgroove- The border is a grooveinset- Appears to cut into the screenoutset- Appears to pop out of the screenridge- Appears as a picture frame
When adjusting the border thickness you'll find it's most commonly done by using pixel measurement, this is because of the flexibility one can have over its design. However, in case you’d like to keep it simple - you can also adjust the sizing with named thicknesses: thin, medium, thick.
It’s also super simple to adjust border thickness for each singular side of the element's box by applying pixel measurements for each side in clockwise order. Starting with top, right, bottom, left.
Like so:
Padding & Margins
To explain padding and margin, I'm going to quote the awesome article written by Kevin Kononenko, Founder of Manual, which describes the Box Model wonderfully as being no different to your classic surburban neighborhood.
Kononenko describes padding to be similar to ‘the territory around the element that is limited by the border. This is kind of like the yard and fence on your property. This is the padding and border.’
As for the margin? It’s ‘the empty space that separates this element from the surrounding elements. This is similar to the trees that are still technically part of your property, but give you some privacy from the neighbors and are just meant to give you a buffer.’
The properties for adjusting each of these can be done simply by adjusting the pixel size using the padding and margin properties.
Resizing boxes for the better
One thing to remember whenever you're dealing with sizing, is the number of devices which are available to us now. Good design always comes down to thinking about the user and their needs. Adam Silver provides a sweet run through of this in his article 'Stop Using Device Breakpoints', if you want to do some further reading.
"Good design always comes down to thinking about the user and their needs."
width and height are the two key dimensions in every element’s box. Each one is automatically given its default size but it’s very simple to make changes to these. With their CSS properties you can adjust easily using measurements you might be familiar with when we discussed font sizing.
px - pixels, your basic unit of programmable colour
ems - Set the dimensions of the box relative to the size of the text within it
% - Set dimensions in relation to the size of the actual element in the box
Generally, you'll find that developers commonly use ems or percentages when setting box dimensions as these two units allow boxes to be scaled depending on the size of the user’s display.
To avoid the problem of content undergoing a heavy, unwanted makeover when it comes to different screen sizes/devices, two properties can be manipulated to keep the elements looking something like themselves. By adding min-width and max-width, min-height and max-height properties to your CSS values, you can keep your design consistent.
These properties are particularly important when you’re dealing with text; any text element that is expanded or reduced will severely affect the legibility. If the max-height is set too low, you’ll find it might result in text spilling out of the box. This is called an overflow, which leaves your website looking super messy - but here's the fix for it.
You can tell the unruly text what to do with the overflow property, and give it one of these two values:
hidden- This will simply just hide any of your content that is spilling out of the boxscroll- This adds a scrollbar to your element’s box so you’re not losing any info
Comparing education tools
I’ve been using Codecademy since the beginning here and I really do recommend it, for all learning types. As I’ve said before, the format really gets you thinking and doing at the same time. When we’re trying to pick up a new skill we don’t just want to be playing sponge and simply absorbing.
This time I tried out Udacity as well on the same topic of Box Models and was really surprised at the difference in style and how I responded to it. Udacity’s lessons in HTML and CSS are video based and each feature a tutor who runs over each segment of a topic in short two to three minute sets.
For this reason, Udacity presents a short and speedy way to get your head around the concept of the Box Model. So if you quickly just want an overview, or a reminder, of a topic, this might be the spot for you. Despite it holding tasks and quizzes for viewers, it does make it very easy to get around not doing these. Which means for those of you who are prone to procrastination and quick fixes - you might be hearing a lot about code, but not really doing much of it.
Also, be warned these videos might also be for the younger age group and hold a considerable amount of the cheese factor.
For my next trick
I'll be showing you the website I'm building in my next post and give you a run through of where I'm at. At the same time, I'll give you some notes on what went well, what didn't and also tie in an overview of how to keep code organised using IDs and Classes.
Design and prototyping for everyone
Thousands of individuals and teams use Marvel to design and prototype ideas.
Good Stuff
Related Posts
Welcome to Dear Developer’s entry seven. It’s the dawn of summer in London, providing bundles of vitamin D and some once in a blue moon smiling faces. Including my own. And what better to whack a smile on your face on top of the sunny weather than a little HTML hack? That’s what I thought. If you’ve been following this… Read More ￫
I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I’d test a new one out every two weeks. Computers stole this… Read More ￫
Here we are, entry three of the ‘Dear Developers’ series and so far I’ve explained why I’m learning to code, asked my stupid questions and have done the first basic few lines of code which are building the first page of my website. I’ve been excited this week – not just because my website is currently looking as bland as… Read More ￫
