Can You Box This, Please?

Hello again!

We have started boxing in class. Not with each other though.

Introducing the CSS Box Model. Ta ta!

For those who don’t know or didn’t until now, here’s a summary of what I mean.

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. It consists of: margins, borders, padding, and the actual content. Read more here!

This is what it looks like in a nutshell. I will be adding images from the boxing class later.



  1. Create a CSS class named box with a certain set of rules
  2. Open in HTML
  3. “Mess with the values” and see how it effects the output
  4. I also inserted a paragraph and made one box round (changing the border-radius), is it still called box then? Yup!

Learning Outcome:

  • Elements that make the Box Model
  • Understand the display properties
  • Demonstrating how to achieve different layouts

Result: Yes, I can box this!

A collection of my boxes… 🙂

My Box Models
My Box Models

The purple box would change the colour to purple and its shape from the turquoise circle above, when hovering over with the mouse. #notaveryprettypicture

Boxes with different colours

Check the back-end, my box HTML code below.

HTML code


Hello again!

So you may ask yourself, what are wireframes? Or maybe not… I did! Learn with me if you wish!

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you’ve yet to use wireframing, it’s time to get your feet wet.”

I guess it’s time to get my feet wet so. What for though? Use wireframing to articulate ideas or even explore ideas before taking the expense of actually building the final product…Makes sense to me!

So the task last week was to come up with mock-ups for an app. While trying to figure out who to target first, we got scissors and paper. Not to play rock-paper-scissors though.


  • App to be developed: Medical Check for Doctors on their patients
  • Think about User Interface: Someone who had surgery recently and needs to be monitored still
  • Some criteria that should be recorded with the app: Mood/ Meals/ Fitness
  • Chosen Persona: Breast Cancer patient, 39 with kids and active life


She will be greeted with a screen “Hello, Gorgeous!” and asked how she feels today on scale from “moody” to “happy”…

So many ideas, so little time in the end…