{"id":8270,"date":"2017-04-06T15:33:42","date_gmt":"2017-04-06T14:33:42","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=8270"},"modified":"2020-11-12T13:27:22","modified_gmt":"2020-11-12T13:27:22","slug":"dear-developers-box-model-blessing","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/","title":{"rendered":"Dear Developers, The Box Model is a Blessing"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven\u2019t already guessed it, this next post in my <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-the-universe-is-telling-me-to-code\/\">Dear Developer<\/a> series of learning HTML and CSS is of course about the Box Model. Not, in fact, figurative boxes. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.  <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For this lesson I dabbled between the education tools <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.udacity.com\/?utm_source=adwords&utm_medium=search&utm_campaign=2016-03-adwords-search-brand&gclid=CNSzhtTLj9MCFdURaAodsuwKvA\">Udacity<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.codecademy.com\/learn\">Codecademy<\/a>, read a few articles here and there and spoke to some of my colleagues. If you\u2019re on this journey with me - I hope this clears up the basics of what you might need to know. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Just in case you want to jump between topics, here's the breakdown:<\/strong><\/p>\n<section class=\"long-post-content\">\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part1\">The Box Model:<\/a><\/strong> The CSS-ecret formula<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part2\">Comparing Education Tools:<\/a><\/strong> Codecademy vs Udacity<\/li>\n<\/ul>\n<\/section>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The Box Model<\/h2>\n<div id=\"part1\"><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019ll 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.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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? <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\"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.\" - <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.w3schools.com\/css\/css_boxmodel.asp\">W3Schools<\/a><\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">* { \r\n  border: 1px solid rgba(0, 0, 0, 0.3);\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With this knowledge, you start to see a website in all it\u2019s simplicity with all the elements, in boxes, piled on top of each other. Which is much less intimidating, right?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The CSS Box Model, consists of five core parts which we\u2019ll cover: <\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Border<\/li>\n<li>Padding<\/li>\n<li>Margin<\/li>\n<li>Width<\/li>\n<li>Height<\/li>\n<\/ul>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Border<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The concept of borders is nothing new, right? Finally a term we\u2019re 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. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To adjust the pattern style of the border here are the key styles you can attribute to the <code class=\"fontSize-s language-css centered\">border-style<\/code> property:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><code class=\"fontSize-s language-css centered\">solid<\/code> - A solid line<\/li>\n<li><code class=\"fontSize-s language-css centered\">dashed<\/code> - A series of lines or dashes<\/li>\n<li><code class=\"fontSize-s language-css centered\">dotted<\/code> - Square dots<\/li>\n<li><code class=\"fontSize-s language-css centered\">double<\/code> - Two solid black lines<\/li>\n<li><code class=\"fontSize-s language-css centered\">groove<\/code> - The border is a groove<\/li>\n<li><code class=\"fontSize-s language-css centered\">inset<\/code> - Appears to cut into the screen<\/li>\n<li><code class=\"fontSize-s language-css centered\">outset<\/code> - Appears to pop out of the screen<\/li>\n<li><code class=\"fontSize-s language-css centered\">ridge<\/code> - Appears as a picture frame<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019d like to keep it simple - you can also adjust the sizing with named thicknesses: <code class=\"fontSize-s language-css centered\">thin<\/code>, <code class=\"fontSize-s language-css centered\">medium<\/code>, <code class=\"fontSize-s language-css centered\">thick<\/code>. <\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n   border-style: 5px;\r\n} \r\n<\/code><\/pre>\n<\/aside>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n   border-style: thick;\r\n} \r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s 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. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Like so: <\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">\r\np {\r\n   border-style: solid;\r\n   border-width: 3px 1px 2px 1px;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Padding & Margins<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To explain padding and margin, I'm going to quote the awesome article written by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/devmanual\">Kevin Kononenko<\/a>, Founder of Manual, which describes the Box Model wonderfully as being no different to your <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.freecodecamp.com\/css-box-model-explained-by-living-in-a-boring-suburban-neighborhood-9a9e692773c1\">classic surburban neighborhood<\/a>. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1-T9PFj7v8hFovBOR2qW0JYg.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/04\/1-T9PFj7v8hFovBOR2qW0JYg.png\" alt=\"1-t9pfj7v8hfovbor2qw0jyg\" width=\"1000\" height=\"877\" class=\"alignnone size-full wp-image-8280\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1-T9PFj7v8hFovBOR2qW0JYg.png 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1-T9PFj7v8hFovBOR2qW0JYg-600x526.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/1-T9PFj7v8hFovBOR2qW0JYg-768x674.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Kononenko describes <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">padding<\/strong> to be similar to \u2018the 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.\u2019 <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As for the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">margin<\/strong>? It\u2019s \u2018the 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.\u2019<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The properties for adjusting each of these can be done simply by adjusting the pixel size using the <code class=\"fontSize-s language-css centered\">padding<\/code> and <code class=\"fontSize-s language-css centered\">margin<\/code> properties.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Resizing boxes for the better<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/@adambsilver\">Adam Silver<\/a> provides a sweet run through of this in his article <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/simple-human\/stop-using-device-breakpoints-b11a87e2625c\">'Stop Using Device Breakpoints'<\/a>, if you want to do some further reading. <\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Good design always comes down to thinking about the user and their needs.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">width<\/code> and <code class=\"fontSize-s language-css centered\">height<\/code> are the two key dimensions in every element\u2019s box. Each one is automatically given its default size but it\u2019s 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.  <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><code class=\"fontSize-s language-css centered\">px<\/code> - pixels, your basic unit of programmable colour<br \/>\n<code class=\"fontSize-s language-css centered\">ems<\/code> - Set the dimensions of the box relative to the size of the text within it<br \/>\n<code class=\"fontSize-s language-css centered\">%<\/code> - Set dimensions in relation to the size of the actual element in the box<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n   width: 200px;\r\n   height: 200px;\r\n}\r\n<\/code><\/pre>\n<\/aside>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019s display. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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 <code class=\"fontSize-s language-css centered\">min-width<\/code> and <code class=\"fontSize-s language-css centered\">max-width<\/code>, <code class=\"fontSize-s language-css centered\">min-height<\/code> and <code class=\"fontSize-s language-css centered\">max-height<\/code> properties to your CSS values, you can keep your design consistent. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">These properties are particularly important when you\u2019re dealing with text; any text element that is expanded or reduced will severely affect the legibility. If the <code class=\"fontSize-s language-css centered\">max-height<\/code> is set too low, you\u2019ll 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. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can tell the unruly text what to do with the overflow property, and give it one of these two values:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><code class=\"fontSize-s language-css centered\">hidden<\/code> - This will simply just hide any of your content that is spilling out of the box<\/li>\n<li><code class=\"fontSize-s language-css centered\">scroll<\/code> - This adds a scrollbar to your element\u2019s box so you\u2019re not losing any info <\/li>\n<\/ul>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">p {\r\n  min-width: 300px;\r\n  max-width: 600px;\r\n  min-height: 150px;\r\n  max-height: 300px;\r\n  overflow: scroll; \r\n}\r\n<\/code><\/pre>\n<\/aside>\n<div id=\"part2\">\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Comparing education tools<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">I\u2019ve been using Codecademy since the beginning here and I really do recommend it, for all learning types. As I\u2019ve said before, the format really gets you thinking and doing at the same time. When we\u2019re trying to pick up a new skill we don\u2019t just want to be playing sponge and simply absorbing.<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/www.codecademy.com\/learn\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Codecademy<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Learn to code interactively, for free.<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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\u2019s 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. <\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/classroom.udacity.com\/courses\/ud304\/lessons\/2617868617\/concepts\/28750285360923\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Udacity - Intro to HTML and CSS<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Learn how to convert digital design mockups into static web pages and how to build a responsive portfolio site to showcase your work.<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Also, be warned these videos might also be for the younger age group and hold a considerable amount of the cheese factor. <\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">For my next trick<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">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. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven\u2019t 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&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":8301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[504],"tags":[],"class_list":["post-8270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Developers, The Box Model is a Blessing | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven\u2019t 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... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-06T14:33:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T13:27:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Group.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"968\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Group.png\",\"width\":1600,\"height\":968},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/\",\"name\":\"Dear Developers, The Box Model is a Blessing | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#primaryimage\"},\"datePublished\":\"2017-04-06T14:33:42+00:00\",\"dateModified\":\"2020-11-12T13:27:22+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Dear Developers, The Box Model is a Blessing\",\"datePublished\":\"2017-04-06T14:33:42+00:00\",\"dateModified\":\"2020-11-12T13:27:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#primaryimage\"},\"articleSection\":\"Web Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-box-model-blessing\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\",\"name\":\"Naomi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c520343b1feb2f69cca53916bf57f5c457b3a2640d405e0f9f20a8f8e8bb7ca7?s=96&d=mm&r=g\",\"caption\":\"Naomi\"},\"description\":\"Writing for Marvel. Writing for fun. Eating everywhere, all the time.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/8270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=8270"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/8270\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/8301"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=8270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=8270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=8270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}