{"id":6028,"date":"2017-02-03T15:51:32","date_gmt":"2017-02-03T15:51:32","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=6028"},"modified":"2024-02-29T22:17:28","modified_gmt":"2024-02-29T22:17:28","slug":"dear-developers-basic-body-language-code","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/","title":{"rendered":"Dear Developers, you still have to know basic body language to code"},"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\">It\u2019s been two weeks since <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/dear-developers-the-universe-is-telling-me-to-code\/\">I announced to the world<\/a> I'd be learning to code from scratch and documenting it all here on the internet...for everyone to see. And if that isn\u2019t a motivator, I don\u2019t know what is.<\/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 past couple of weeks have flown by, as they always do. You\u2019ll be proud to know I stuck to my four hours a week goal, and even found that after two hours I had enough for a post for you guys. One challenge I found with writing this article for you was how to format it to keep the mass of you engaged, whether you\u2019re learning with me or just interested in my journey.<\/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 figured I\u2019d start with stating my end goal, it\u2019s all good and well my saying I\u2019m going to learn but if there is no ongoing work-in-progress, I could just be copy pasting this for all you know. Having something tangible that I can build week by week and share with you to show my progress and continue to (hopefully) inspire, is ideal really.<\/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\">\"So, I have decided my end goal is going to be, queue drum roll please, my very own website! I bet you weren\u2019t expecting that one after learning I am teaching myself HTML and CSS.\"<\/span><\/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\">These days I guess it\u2019s kind of horrific not to have your own personal website, right?<\/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\">It's clear that professionals have a need for it, for example there are lots of Designers who don\u2019t know how to code but need an online portfolio to show their work. This offensive thought has led me to the plan of building a personal website, consisting of the standard website material you see these days of young professionals. I\u2019ll also play about with the idea of a blog called \u2018The Food Store\u2019, and will be my starting point.<\/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\">Here\u2019s an overview of what is in today\u2019s entry:<\/strong><\/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>The 'stupid' questions<\/li>\n<li>Boilerplate code<\/li>\n<li>Body language<\/li>\n<li>Takeaways<\/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\">Pledging total honesty, as always.<\/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;\">The \u2018stupid\u2019 questions<\/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\"><span class=\"long-quote\">\"First of all, a quick recap. HTML aka Hyper Text Markup Language, is the computer language that defines the structure and presentation of raw text, providing a logical way to structure content for web pages.\"<\/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\">I call this section the \u2018stupid\u2019 questions because it holds the answers to things I was a little afraid to ask. But here, safe behind my screen there is no-one to judge me. I now understand what HTML means, but where exactly am I supposed to write it? How do I get to view it locally? And once I\u2019m done, how do I get it to become an actual 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\">Technically, you can write HTML in any kind of word processor but there are two programs that\u2019ll make you feel a little more suave and like you\u2019re doing this for real. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a> is a developer go to when it comes to writing code, with <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/atom.io\/\">ATOM<\/a> being a close second. Both text editors are free but Sublime Text pesters you with ads every thirty minutes if you don\u2019t have a license.<\/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:\/\/www.sublimetext.com\/\">Sublime Text<\/a> looks like this and is described as the text editor you\u2019ll fall in love with:<\/p>\n<div id='gallery-1' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.30.38.png'><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"556\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.30.38.png\" class=\"attachment-full size-full\" alt=\"code\" aria-describedby=\"gallery-1-6033\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.30.38.png 840w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.30.38-600x397.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.30.38-768x508.png 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-6033'>\n\t\t\t\tSublime Text, Screenshot\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/atom.io\/\">ATOM<\/a>, like this:<\/p>\n<div id='gallery-2' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.32.03.png'><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"421\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.32.03.png\" class=\"attachment-full size-full\" alt=\"code\" aria-describedby=\"gallery-2-6034\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.32.03.png 884w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.32.03-600x286.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-30-at-15.32.03-768x366.png 768w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-6034'>\n\t\t\t\tATOM, Screenshot\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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 you\u2019ve chosen your desired text editor and are set to start building your website. To start viewing how your code will show in the browser, first save your work as index.html to somewhere like your documents. When you open it, it\u2019ll launch in your browser and you\u2019ll see how your code has translated into the browser. Then once you\u2019re all set and ready to go, you can deploy it using a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.appypie.com\/free-web-hosting\">web hosting<\/a> service, like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.mediatemple.net\/\">Media Temple<\/a>, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/pixeno.com\/\">Pixeno<\/a>, and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uk.godaddy.com\/offers\/default.aspx?tmskey=1dom_15&amp;isc=gcouuk26&amp;currencytype=GBP&amp;cvosrc=ppc.google.godaddy&amp;cvo_crid=140251504934&amp;matchtype=e&amp;mkwid=sXCQ4rIZ6_pcrid_140251504934_pkw_godaddy_pmt_e_pdv_c&amp;gclid=CNzQ8OyM9NECFUUq0wodVL8GJA\">GoDaddy<\/a>.<\/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\">\"Pixeno has been recommended to me as one of the easier services to understand, so beginners, go forth.\"<\/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\">There, that\u2019s all out of the way and I feel no shame. I know which text editor I\u2019m going to use to write my HTML, I know how to view it locally and I know that when I\u2019m done, I\u2019ll need to take it to a web hosting site and show some cash.<\/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 for what I\u2019ve learnt the past couple of weeks!<\/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;\">Basic vocabulary<\/h2>\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\">\"Before getting into the thick of any task, it\u2019s essential that we lay down the common terms that are used.\"<\/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\">On this journey I expect to come across a bunch of new jargon which is totally alien to me. Best to start making notes and getting familiar with them sooner rather than later.<\/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><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Angle brackets<\/strong>: These are the <code class=\"fontSize-s language-js centered\">&lt;<\/code> and <code class=\"fontSize-s language-js centered\">&gt;<\/code> signs - you\u2019ll be seeing a lot of these babies<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">HTML element<\/strong>: This is the code that resides within the aforementioned angle brackets. Can also just be referred to as \u2018element\u2019.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Opening tag<\/strong>: The first tag that introduces a HTML element (eg.<code class=\"fontSize-s language-js centered\">&lt;p&gt;<\/code>)<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Closing tag<\/strong>: The second tag that closes a html element, these tags usually have a \u2018\/\u2019 in them. With the exception of a few, most elements consist of an opening and closing tag. (eg.<code class=\"fontSize-s language-js centered\">&lt;\/p&gt;<\/code>)<\/li>\n<\/ul>\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;\">Boilerplate Code<\/h2>\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\">\"\u2018Boilerplate code\u2019 is the basic HTML which is needed to build a webpage.\"<\/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\">In order for the web browser to understand your HTML document there are a few things you have to set straight first. You need to declare what kind of language you\u2019ll be writing by introducing it within the first line of your HTML documents, as it is essential for the computer to be able to read the code efficiently.<\/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 done by introducing your document with the following element:<\/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\"style=\"text-align: center;\"><code class=\"fontSize-s language-js centered\">&lt;!DOCTYPE html&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\">I like to think of this first step like a handshake, a polite introduction to the computer. If you don\u2019t state your intent, the computer may assume that you are using the most current version of HTML language, which is HTML 5. New adaptations of the language are coming out all the time, so it\u2019s best to declare it straight away to be sure there are no misinterpretations. So, always start with <code class=\"fontSize-s language-js centered\">&lt;!DOCTYPE html&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\">However, <code class=\"fontSize-s language-js centered\">&lt;!DOCTYPE html&gt;<\/code> doesn\u2019t add HTML structure. For this, in the next line, you\u2019ll need to add <code class=\"fontSize-s language-js centered\">&lt;html&gt;<\/code>and close with <code class=\"fontSize-s language-js centered\">&lt;\/html&gt;<\/code>. Anything and everything between these tags will be considered HTML.<\/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 far, my document looks like this.<\/p>\n<div id='gallery-3' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.22.09-1.png'><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"114\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.22.09-1.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.22.09-1.png 637w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.22.09-1-600x107.png 600w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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 that we\u2019ve stated our intent by declaring the document, what comes next is to start personalising it. Next Codecademy introduces the <code class=\"fontSize-s language-js centered\">&lt;head&gt;<\/code> tags. Within the opening and closing tags the code\/text you will not be displayed directly on the webpage.<\/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, the <code class=\"fontSize-s language-js centered\">&lt;title&gt;<\/code> tags can sit within the <code class=\"fontSize-s language-js centered\">&lt;head&gt;<\/code> tags and the text that sits between the <code class=\"fontSize-s language-js centered\">&lt;title&gt;<\/code> tags will appear in your browser tab.<\/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 if my code looks like this:<\/p>\n<div id='gallery-4' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.25.39.png'><img loading=\"lazy\" decoding=\"async\" width=\"641\" height=\"139\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.25.39.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.25.39.png 641w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.25.39-600x130.png 600w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Will show up like this in my browser:<\/p>\n<div id='gallery-5' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.38.48.png'><img loading=\"lazy\" decoding=\"async\" width=\"706\" height=\"180\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.38.48.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-5-6037\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.38.48.png 706w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-11.38.48-600x153.png 600w\" sizes=\"auto, (max-width: 706px) 100vw, 706px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-6037'>\n\t\t\t\tYou have no idea how excited that makes me. I made that happen. This is working! Maybe this whole coding business is just really easy&#8230;????\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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 what we want to appear on the actual webpage, we need to add <code class=\"fontSize-s language-js centered\">&lt;body&gt;<\/code> tags. Similar to <code class=\"fontSize-s language-js centered\">&lt;head&gt;<\/code> tags, everything we enter between these tags will be read as html but will appear in the browser webpage. That\u2019s it, that\u2019s the basic HTML\u00a0that you need to start building your website, also referred to as <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">'boilerplate code'<\/strong>.<\/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;\">Body language<\/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\">By \u2018body language\u2019, I mean the text we\u2019re entering between the body tags but it\u2019s nice to make the connection between code and the more familiar human interaction. This section covers the basic body language.<\/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\">One of the first things to know about html, is that there are six types of heading and no more. The tags for these change with each heading size and are followed by the relevant closing tag. Written from largest to smallest: <code class=\"fontSize-s language-js centered\">&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;<\/code> and <code class=\"fontSize-s language-js centered\">&lt;h6&gt;<\/code> followed by their relevant closing tags.<\/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\u2019s an example of how this would look in full form in Sublime:<\/p>\n<div id='gallery-6' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.23.11.png'><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"257\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.23.11.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.23.11.png 637w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.23.11-600x242.png 600w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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\u2019ll see that I\u2019ve now added the body element to write these headings within.<\/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\">It\u2019ll show like this in the browser:<\/p>\n<div id='gallery-7' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.24.37.png'><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"393\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.24.37.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.24.37.png 647w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-12.24.37-600x364.png 600w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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\u2019m going to stick with <code class=\"fontSize-s language-js centered\">&lt;h1&gt;<\/code>as this is going to be the title of my page, I'm a girl that likes to have plenty of options for subtitle sizes.<\/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 that, we\u2019re going to want to throw in some more text to tell people a little more about the website they\u2019re on. To begin a paragraph, you open with the <code class=\"fontSize-s language-js centered\">&lt;p&gt;<\/code> tag and close with the <code class=\"fontSize-s language-js centered\">&lt;\/p&gt;<\/code> tag. In between these tags, type away at your heart\u2019s content.<\/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\u2019s mine:<\/p>\n<div id='gallery-8' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.11.21.png'><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"262\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.11.21.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.11.21.png 640w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.11.21-600x246.png 600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And in the browser:<\/p>\n<div id='gallery-9' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.12.30.png'><img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"247\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.12.30.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.12.30.png 673w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-01-31-at-15.12.30-600x220.png 600w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Remember the self closing tags I mentioned in the basic vocabulary section? There\u2019s one that\u2019s handy for manipulating space within the browser. The \u2018break\u2019 tag is self closing and is written as <code class=\"fontSize-s language-js centered\">&lt;br\/&gt;<\/code> or simply, <code class=\"fontSize-s language-js centered\">&lt;br&gt;<\/code>. This is written as a standalone tag and can sit within the <code class=\"fontSize-s language-js centered\">&lt;p&gt;<\/code> tags or outside of them. These are used because you'll find that adding white space to your html document won't add any spaces to your text in 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\">When we\u2019re reading copy, paragraphs are all good and well but nothing draws in a reader more than breaking text down into the short, manageable chunks that are bullet points. There are two types of list that can help structure your text. Unordered lists, (bullet points) and ordered lists (numbered lists).<\/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 an unordered list, you\u2019ll need to start it with the opening with <code class=\"fontSize-s language-js centered\">&lt;ul&gt;<\/code>and close the list with <code class=\"fontSize-s language-js centered\">&lt;\/ul&gt;<\/code>. Similarly for an ordered list, the same process but with the tags <code class=\"fontSize-s language-js centered\">&lt;ol&gt;<\/code> and <code class=\"fontSize-s language-js centered\">&lt;\/ol&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\">Now, for the stand alone points, each point should be opened with the text <code class=\"fontSize-s language-js centered\">&lt;li&gt;<\/code> and closed with <code class=\"fontSize-s language-js centered\">&lt;\/li&gt;<\/code> as follows.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"fontSize-s language-html centered\">&lt;ul&gt;\n    &lt;li&gt;Point 1&lt;\/li&gt;\n    &lt;li&gt;Point 2&lt;\/li&gt;\n    &lt;li&gt;Point 3&lt;\/li&gt;\n&lt;ul&gt;<\/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\">And the same format for the ordered list. Here\u2019s an example:<\/p>\n<div id='gallery-10' class='gallery galleryid-6028 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-02-at-18.00.44.png'><img loading=\"lazy\" decoding=\"async\" width=\"637\" height=\"331\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-02-at-18.00.44.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-02-at-18.00.44.png 637w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/Screen-Shot-2017-02-02-at-18.00.44-600x312.png 600w\" sizes=\"auto, (max-width: 637px) 100vw, 637px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Anchors and attributes<\/h3>\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\">\"Attributes provide more information about the element\u2019s content.\"<\/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\">Think of anchors as the literal object, it holds down the purpose of an element, and the attribute provides more information about that element\u2019s content.<\/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 good place to start is with adding hyperlinks to text. To add a link to a piece of text in HTML, you open with the <code class=\"fontSize-s language-js centered\">&lt;a&gt;<\/code> tag, which acts as the anchor, then add the text you would like to hyperlink and close with <code class=\"fontSize-s language-js centered\">&lt;\/a&gt;<\/code>. But as well as stating which text or object we would like to link, we need to add a URL. This is where the attribute comes in.<\/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 live directly inside the opening tag and are made up of two parts: the name and the value. In a link element, the name of the attribute is \u2018href\u2019 and the value will be the url. To connect the name of the attribute and the value you insert an \u2018=\u2019 sign directly after the name and write the URL or other value 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\">Let\u2019s say I wanted to link this word to Marvel\u2019s homepage in HTML\u00a0it would read like this.<\/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\"style=\"text-align: center;\"><code class=\"fontSize-s language-js centered\">&lt;a href=\"https:\/\/marvelapp.com\"&gt;word&lt;\/a&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\">Simple 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\">This can be taken even further, something I was really excited about. If you want to direct the hyperlink to open in a new tab when clicked, you can do this by adding the \u2018target\u2019 attribute, with the value of <code class=\"fontSize-s language-js centered\">&lt;_blank&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\">Reading like this:<\/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\"style=\"text-align: center;\"><code class=\"fontSize-s language-js centered\">&lt;a href=\"https:\/\/marvelapp.com\" target=\"_blank\"&gt;word&lt;\/a&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\">This is crazy useful in terms of visitor engagement, when you click on a link you don\u2019t want to be driving people away from the site and taking control away from users. You just want to show them the link in another tab so they can come back to you with ease, reducing drop offs.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Images<\/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\">Remember earlier in the article I mentioned there are some elements which do not have closing tags? Image tags are one of these pesky individuals, it\u2019s self closing. The <code class=\"fontSize-s language-js centered\">&lt;img\/&gt;<\/code> tag also works as an anchor, similar to the links above and is always followed by the <code class=\"fontSize-s language-js centered\">src<\/code> (source) attribute, where you paste the image URL.<\/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 if I was to link to this lovely image of a delicious Honest Burgers that I found on Google, it\u2019d read like this.<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"language-html\" style=\"white-space: pre-wrap !important;\">&lt;img src=\"http:\/\/www.honestburgers.co.uk\/wp-content\/uploads\/2016\/11\/HB_ChristmasBurger-282x139.jpg\"\/&gt;<\/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\">You can easily make the picture a link as well by enclosing the image element inside the link element.<\/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 it reads like this:<\/p>\n<aside class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s\">\n<pre><code class=\"language-html\" style=\"white-space: pre-wrap !important;\">&lt;a href=\"http:\/\/www.honestburgers.co.uk\"&gt;&lt;img src=\"http:\/\/www.honestburgers.co.uk\/wp-content\/uploads\/2016\/11\/HB_ChristmasBurger-282x139.jpg\"\/&gt;&lt;\/a&gt;<\/code><\/pre>\n<\/aside>\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;\">Takeaways<\/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\">That\u2019s it for my first roundup, where I think we\u2019ve covered some good basics. The first couple of weeks have gone really well and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.codecademy.com\">Codecademy<\/a> has been a super simple introduction. Their format of interactive learning gives you this additional leg up, you\u2019re having it explained to you, reading the code in the text editor and seeing the changes you make appear in 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\">Throughout the courses they have some handy tips on creating a more user friendly website like avoiding text heavy sites and optimising your site for people with disabilities (including captions alongside images by adding the attribute <code class=\"fontSize-s language-js centered\">alt<\/code> within the <code class=\"fontSize-s language-js centered\">img<\/code> element). There are handy tests that pop up and you can quiz yourself when you revisit the site as well.<\/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 think they\u2019ve hit the nail on the head here when it comes to teaching yourself code. For me, taking down notes when I\u2019m running through a course and revisiting them often has really helped in making what I\u2019ve learned really stick. People usually identify with one of the three forms of learning styles: visual, auditory and kinaesthetic or \u2018writing\u2019, \u2018listening\u2019 and \u2018doing\u2019.<\/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\">\"People usually identify with one of the three forms of learning styles: visual, auditory and kinaesthetic.\"<\/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\">Using a learning tool like Codecademy, taking detailed notes and using a text editor like Sublime or ATOM to start slowly building your own website targets all three learning styles. So, hopefully this method is foolproof and I\u2019ll be a pro soon enough. I\u2019ve also found it fun and useful to associate different stages of coding with things I am familiar with, like the tag being similar to a handshake, and stating your intent.<\/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\">\"Another thing I have to my advantage is the fact I\u2019m sitting with talented coders in the office everyday. If I have a question there is a person that I can turn to and ask but I realise that\u2019s not the case for everyone. I\u2019d be interested to hear from anyone who\u2019s taught themselves to code and how you challenged this - are there online communities out there that support questions you guys have?\"<\/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\">I hope you\u2019ve enjoyed this post, follow me on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/twitter.com\/naomfranci\">Twitter<\/a> to get updates on future posts and follow my journey.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s been two weeks since I announced to the world I&#8217;d be learning to code from scratch and documenting it all here on the internet&#8230;for everyone to see. And if that isn\u2019t a motivator, I don\u2019t know what is. The past couple of weeks have flown by, as they always do. You\u2019ll be proud to know I stuck to my&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":6090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[504],"tags":[],"class_list":["post-6028","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=\"description\" content=\"The second entry from our writer, Naomi, who is learning to code from scratch and documenting it all. This week is body language and boilderplate code.\" \/>\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-basic-body-language-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dear Developers, you still have to know basic body language to code | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The second entry from our writer, Naomi, who is learning to code from scratch and documenting it all. This week is body language and boilderplate code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/\" \/>\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-02-03T15:51:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-29T22:17:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/222.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1500\" \/>\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=\"11 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-basic-body-language-code\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/02\/222.jpg\",\"width\":2000,\"height\":1500},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/\",\"name\":\"Dear Developers, you still have to know basic body language to code | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#primaryimage\"},\"datePublished\":\"2017-02-03T15:51:32+00:00\",\"dateModified\":\"2024-02-29T22:17:28+00:00\",\"description\":\"The second entry from our writer, Naomi, who is learning to code from scratch and documenting it all. This week is body language and boilderplate code.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Dear Developers, you still have to know basic body language to code\",\"datePublished\":\"2017-02-03T15:51:32+00:00\",\"dateModified\":\"2024-02-29T22:17:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#primaryimage\"},\"articleSection\":\"Web Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/dear-developers-basic-body-language-code\/#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\/6028","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=6028"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/6028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/6090"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=6028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=6028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=6028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}