{"id":8561,"date":"2017-05-01T12:28:46","date_gmt":"2017-05-01T11:28:46","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=8561"},"modified":"2021-02-15T06:26:20","modified_gmt":"2021-02-15T06:26:20","slug":"dear-developers-dont-let-prototypes-dreams","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/","title":{"rendered":"Dear Developers, Here&#8217;s to Turning Prototypes into Reality"},"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 last posts in the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/author\/naomi\/\">Dear Developers<\/a> series so far have been focused on the lessons I've learned from various coding classes and the step by step basics of HTML &amp; CSS. This post is a something a little more special as I'm going to share my progress in building my own website from scratch. I'll be sharing some nuggets of information I've picked up from my own mistakes, how I get my head around some of the hard stuff and also a run down of organising 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\">Here's what to expect:<\/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\">My Marvel Prototype:<\/a><\/strong> The perfect reference point<\/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\">The Real Deal:<\/a><\/strong> First peak at my website<\/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=\"#part3\">Divs, Unique IDs and Classes:<\/a><\/strong> The 'major key' of HTML &amp; CSS so far<\/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=\"#part4\">My Thought Process:<\/a><\/strong> What I learnt whilst I practiced what I learnt<\/li>\n<\/ul>\n<\/section>\n<div id=\"part1\"><\/div>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">My Marvel Prototype<\/h1>\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\">Why do this first?<\/strong> Well, prototyping your website is the perfect reference point for your CSS styling. In Marvel, I could quickly decide on the visuals like the colour scheme and typography, the content and button placement before diving into code. It holds all the hex codes I need, in the places I need and things like element sizing as well. Let's think of it as an interactive, visual map of my website.<\/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\">Now obviously I work at Marvel and have a couple of projects I've created already to make sure I know it inside out. But this is the first serious project where I've (tried) to create an appropriate and acceptable looking website mockup. I have to say, as a newbie to design, it couldn't have been more simple to use. I used <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/introducing-canvas-design-wireframe-and-animate-directly-in-marvel\/\">Canvas<\/a> to create my screens and then linked them together into a lifelike website in the prototype editor - but if you're already a pro you can easily pull in artboards from Photoshop and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.marvelapp.com\/sketch\">Sketch<\/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\"><iframe loading=\"lazy\" class=\"display-block marginTopBottom-l centered\" src=\"https:\/\/marvelapp.com\/1g8d3ae?emb=1\" width=\"1440\" height=\"575\" frameborder=\"0\"><\/iframe><\/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\">I appreciate the design is pretty basic but there's nothing wrong with 'simple'. Remember, the KISS principle? Keep it Simple, Stupid. Which can be read as calling yourself stupid, or telling you to keep things both simple and stupid. Either way, same meaning - one slightly less insulting.<\/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\">So, as you can see I have three screens, I've got my homepage with basic information. Two buttons in the top right which will lead to my portfolio and a hypothetical blog. As I've said previously, I am not a designer so please do not judge me on my lil' site. It's my baby.<\/p>\n<div id=\"part2\"><\/div>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">The Real Deal<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now here's what I've built so far - I give you, the first page!<\/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:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Final-First-Page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8798\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Final-First-Page.png\" alt=\"final-first-page\" width=\"1242\" height=\"838\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Final-First-Page.png 1242w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Final-First-Page-600x405.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/Final-First-Page-768x518.png 768w\" sizes=\"auto, (max-width: 1242px) 100vw, 1242px\" \/><\/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\">How that looks in my HTML doc:<br \/>\n<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/HTML-final.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8800\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/HTML-final.png\" alt=\"html-final\" width=\"1155\" height=\"872\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/HTML-final.png 1155w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/HTML-final-600x453.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/HTML-final-768x580.png 768w\" sizes=\"auto, (max-width: 1155px) 100vw, 1155px\" \/><\/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\">Last but not least, CSS:<\/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:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/css-final-first-page.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8799\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/css-final-first-page-736x1500.png\" alt=\"css-final-first-page\" width=\"736\" height=\"1500\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/css-final-first-page-736x1500.png 736w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/css-final-first-page-294x600.png 294w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/css-final-first-page-768x1566.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/04\/css-final-first-page.png 1000w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><\/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\">Whilst I was making the shift from prototyping in Marvel to actually coding my website, there was one thing that has made my life so much simpler. Something that you probably noticed running through my CSS doc. Divs, Classes and Unique IDs, all of which act as fantastic organisation tools and make targeting specific parts of your website super easy.<\/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\">There might be a few things in the code that you don't recognise but I'll run through as much as I can in this article - and save some of the bigger things for my next post.<\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Divs<\/h1>\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\">div<\/code> tags are an organisation tool that basically groups your code, so you can divide it into sections and divisions. It helps when grouping block elements. You'll see I used them throughout my HTML and also added classes to them including 'namelocation', 'wrapper' and 'footer'. Here's the run down on what adding a class or unique ID does for you and your code.<\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Unique IDs and Classes<\/h1>\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 you\u2019re styling with CSS, sometimes using the standard tag selectors we are familiar with aren\u2019t as effective as we'd like. There will come a time when some of the copy you under the <code class=\"fontSize-s language-css centered\">&lt;p&gt;<\/code> tag may need to be styled differently to other copy under another <code class=\"fontSize-s language-css centered\">&lt;p&gt;<\/code> tag. This can be fixed this with IDs and Classes. Both are commonly used throughout code and is something used to thoroughly improve the readability of your code.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Unique IDs<\/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\">Adding IDs will help you target certain HTML elements when you\u2019re styling in CSS. IDs are <em>unique<\/em> and should be used only once to target specific elements which will have <em>unique<\/em> qualities, otherwise you\u2019re defeating the point and may be better off using classes. Simply, add an ID as an attribute to an existing HTML tag and give a value of your choice enclosed in speech marks.<\/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\">Here's an example from my code above:<\/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\">&lt;input id=&quot;submit&quot; type=&quot;submit&quot; value=&quot;BREAK ICE&quot;&gt;<\/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\">Here I've decided to add an ID to this button in my form because it's going to look a little different to the other input elements. I've given it the ID of 'submit', to keep things simple and easy to remember if I revisit it. Then to style that specific ID in CSS, you target it with a hashtag followed by the ID name, like so:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">#submit {\n    color: white;\n    background: #6D696A;\n    font-size: 13px;\n}\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\">This CSS value above will change the background colour of the submit form button to the dark brown in my colour scheme, the font colour to white and the font size to 13px.<\/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\"><em>*Remember, Unique ID\u2019s should not be used across multiple elements - you\u2019ll find they\u2019re inefficient for multiple use and should only be used for quick fixes.<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Class<\/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\">Classes can be used several times across HTML to apply specific styling to each one. Which is why the class attribute will become your new best friend. You\u2019ll find that the names which people title their class tags actually reflect the type of content for their web page.<\/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 example, let's take a look at the 'button' class from my code above. I added the same class to each of these elements, like so:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">&lt;div class=\"buttons\"&gt;\n   &lt;a class=\"button\"&gt;Portfolio&lt;\/a&gt;\n   &lt;a class=\"button\"&gt;theFOODstore.&lt;\/a&gt;\n&lt;\/div&gt;\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\">To style classes in CSS, they are selected by entering a fullstop and followed by the class name, like so:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">.button {\n   background: #A2A7A5;\n   color: #fff;\n   height: 32px;\n   display: inline-block;\n   line-height: 32px;\n   padding: 0 20px;\n   border-radius: 16px;\n   margin-left: 5px;\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\">The code above has styled the size of the elements boxes (remember the box model) and positioning on the page as well as 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\">There may be a time when you need to target an element within a class. To save yourself adding a unique ID, you can simply target you might sometimes you might need to set the same typeface for say one h1 and p but you want the font size different. To target specific elements, for example just p of the class article you select with<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">.footer p {\n   margin-bottom: 10px;\n}\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\">There is no limit to number of selectors you can have and you can select multiple classes at once.<\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">My Thought Process<\/h1>\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;\">Think of the code as a whole, not just single components<\/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\">The first stages of coding my website went surprisingly well, when it came to adding text I got things into the right page positioning that I wanted them to be and manoeuvred my way around pretty easily. Then when I showed my code to one of Marvel\u2019s front-end developers, he pointed something out that made me realise I was thinking of each CSS value as a single component when I should be thinking of the website as a whole.<\/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 example, I had been setting the <code class=\"fontSize-s language-css centered\">font-family<\/code> property to each selector, repeating the same line of code around five times...when I could have just added the body selector and set the <code class=\"fontSize-s language-css centered\">font-family<\/code> in there once. This is something that could be extremely helpful in the future if I needed to make changes to the font or whatever, I can just do it in one place rather than about 50.<\/p>\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;\">How in the hell do I create a button?!<\/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\">The first true questionI asked myself when working on this was actually, but how do I make a button? Should I be designing it in a tool like Photoshop or Sketch and adding them as images because it really can\u2019t just be text with an adjusted background 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\">Au contraire. That's exactly how you do it. Adjusting the trusty box that houses every element to look desirable and essentially button like is in fact correct. It\u2019s actually quite a transferable thing to think that when something seems too simple that\u2019s usually the way to do it. There were a few interesting thing that came up when I was creating the buttons which I\u2019ll run through here which might also be useful to beginners.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Floating<\/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\">Firstly, you\u2019ll see that I\u2019ve added some small detail to the top left of my home screen which is just my name and location. When I added the text to create the buttons on the right, I set a <code class=\"fontSize-s language-css centered\">div<\/code> class which holds the button's text and some classes called <code class=\"fontSize-s language-css centered\">button<\/code>. In the css style document, I pushed the <code class=\"fontSize-s language-css centered\">div<\/code> class to the right using the <code class=\"fontSize-s language-css centered\">float<\/code> property.<\/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\">Once I did this and checked how it appeared on the screen, I found it was displaying on the right but wasn\u2019t inline with the detail on the top left. Annoying. To get my head around fixing this I found it makes it easier to think of coding CSS as playing with lego. They\u2019re all blocks that you\u2019re just piling on top of each other, with secret codes to getting them to sit inline.<\/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\">In this case, the <code class=\"fontSize-s language-css centered\">.namelocation<\/code> text is acting as a block and the same for the buttons I've added on the right. We can change this easily by setting the <code class=\"fontSize-s language-css centered\">display<\/code> to <code class=\"fontSize-s language-css centered\">inline-block<\/code> to each of their CSS values, forcing them to live in harmony and sit on the same line.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Box-Sizing: Crucial to styling<\/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\">This property is actually really crucial to your styling document, giving it the value of <code class=\"fontSize-s language-css centered\">border-box<\/code> rather than it\u2019s automatic, secret setting of <code class=\"fontSize-s language-css centered\">content-box<\/code> means you are resetting the format of the internal styling template of the browser.<\/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\">This is very important stuff. If every browser has a different internal styling template you\u2019ll never be starting from the same place which could mean your work will look different across them all.<\/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 stop this happening add this to the top of your styling doc:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">* { \n   box-sizing: border-box; \n} \n<\/code><\/pre>\n<\/aside>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Getting responsive<\/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\">By making our websites responsive we mean to make all the elements we include in our design to scale correctly across all devices. If we don't take this into account, if you've built a website tht looks perfect for the web, it's visual charm and usability may be at risk.<\/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\">Whilst this is maybe something I could maybe avoid for now and revisit later, it\u2019s something I want to try my best to include from the beginning. Especially due to the nature of internet consumption these days across all devices. In order to make a elements responsive they must be attributed with a <code class=\"fontSize-s language-css centered\">width<\/code> and <code class=\"fontSize-s language-css centered\">max-width<\/code>. I spoke about this briefly in my last post on the CSS box model.<\/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 first thing to attribute to the element you want to make responsive is a width of 100%. By setting it to 100% you are ensuring that across all devices, the element will appear at it's full size across screens.<\/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\">However, you'll notice when you set the width to 100% of the screen, it pushes the content of the element to the left of the screen. To stop this happening you need to add a <code class=\"fontSize-s language-css centered\">max-width<\/code>. By adding the <code class=\"fontSize-s language-css centered\">max-width<\/code> you're dictating the size of the element - whichever size you desire!<\/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\">Mine reads like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-css centered\">.wrapper {\n    margin-top: 200px;\n    margin-left: auto;\n    margin-right: auto;\n    width: 100%;\n    max-width: 600px;\n}\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\">So the <code class=\"fontSize-s language-css centered\">div<\/code> class of <code class=\"fontSize-s language-css centered\">.wrapper<\/code> positions the content within it 200px from the top of the screen and is centered by adding <code class=\"fontSize-s language-css centered\">margin-left<\/code> and <code class=\"fontSize-s language-css centered\">margin-right<\/code> to <code class=\"fontSize-s language-css centered\">auto<\/code>. The <code class=\"fontSize-s language-css centered\">width<\/code> is set to <code class=\"fontSize-s language-css centered\">100%<\/code> to keep it responsive. The <code class=\"fontSize-s language-css centered\">max-width<\/code> to control how much space it takes up on the screen.<\/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 test if your site is responsive simply drag your screen from the right to the left. As the browser size gets smaller then you'll see if your elements fall out of line.<\/p>\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;\">Until next time...<\/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\">To keep this digestable I'm going to round things up here. The main lesson from this past couple of weeks is that actually sitting down and making a proper go of it teaches you much more than sitting through lessons. By piecing together code from scratch you give yourself the opportunity to ask and answer questions which may not have risen from lessons.<\/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\">There is so much more I could run through like input forms, transformations and negative margins - but I'll leave you with the suspense and keep you coming back.<\/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\"><em>Follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/naomfranci\">Twitter<\/a> to keep up with my progress!<\/em><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">\nFurther reading:<br \/>\n<\/h3>\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><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/basic-rules-for-button-design\/\">Seven Basic Rules for Button Design<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/dear-developers-the-universe-is-telling-me-to-code\/\">Dear Developers, I feel like the universe is telling me to code<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/z-list-tech-terms-need-know-ux-designer\/\">An A-Z List of Tech Terms You Need to Know as a UX Designer<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>My last posts in the Dear Developers series so far have been focused on the lessons I&#8217;ve learned from various coding classes and the step by step basics of HTML &amp; CSS. This post is a something a little more special as I&#8217;m going to share my progress in building my own website from scratch. I&#8217;ll be sharing some nuggets&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":8882,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[496],"tags":[],"class_list":["post-8561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-prototyping-design-thoughts"],"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-dont-let-prototypes-dreams\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Developers, Here&#039;s to Turning Prototypes into Reality | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"My last posts in the Dear Developers series so far have been focused on the lessons I&#039;ve learned from various coding classes and the step by step basics of HTML &amp; CSS. This post is a something a little more special as I&#039;m going to share my progress in building my own website from scratch. I&#039;ll be sharing some nuggets... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/\" \/>\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-05-01T11:28:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-15T06:26:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/dear-developers.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1061\" \/>\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=\"9 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-dont-let-prototypes-dreams\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/05\/dear-developers.jpg\",\"width\":1500,\"height\":1061},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/\",\"name\":\"Dear Developers, Here's to Turning Prototypes into Reality | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#primaryimage\"},\"datePublished\":\"2017-05-01T11:28:46+00:00\",\"dateModified\":\"2021-02-15T06:26:20+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Dear Developers, Here&#8217;s to Turning Prototypes into Reality\",\"datePublished\":\"2017-05-01T11:28:46+00:00\",\"dateModified\":\"2021-02-15T06:26:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#primaryimage\"},\"articleSection\":\"Design &amp; Prototyping\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-dont-let-prototypes-dreams\/#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\/8561","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=8561"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/8561\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/8882"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=8561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=8561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=8561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}