{"id":46,"date":"2022-10-12T16:53:00","date_gmt":"2022-10-12T16:53:00","guid":{"rendered":"https:\/\/mjonesdesign.co.uk\/blog\/?p=46"},"modified":"2023-02-25T17:54:19","modified_gmt":"2023-02-25T17:54:19","slug":"html-feedback-css-the-presentational-layer","status":"publish","type":"post","link":"https:\/\/mjonesdesign.co.uk\/blog\/2022\/10\/12\/html-feedback-css-the-presentational-layer\/","title":{"rendered":"<strong>HTML Feedback &amp; CSS: The Presentational Layer<\/strong>"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Class 3: What I Learned This Week\u2026<\/h2>\n\n\n\n<p><strong>Weekly Learning Cycle<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Teaching \u2013 Attend lectures, provides framework for further study<\/li>\n\n\n\n<li>Study \u2013 Read recommended texts, watch videos, experiment with relevant software<\/li>\n\n\n\n<li>Reflect \u2013 Make notes based on studies. \u201cWhat I learned today blog posts\u201d<\/li>\n\n\n\n<li>Practice \u2013 Complete project tasks on HTML\/CSS etc.<\/li>\n\n\n\n<li>Feedback \u2013 Get feedback in next session, make changes accordingly<\/li>\n<\/ol>\n\n\n\n<p>This is very self-explanatory and steps that I have already been undertaking, however not always in the same order as this model. For example if there\u2019s something I already know how to do in HTML\/CSS I\u2019ve had the bad habit of going straight to the practice work, then studying, and then reflecting on what I\u2019ve learned and expanding on the notes made in class.<\/p>\n\n\n\n<p>I will now follow this structure in order as even if I think I already know something, I could have easily missed something important or misunderstood a section. Also going over what has been discussed in class allows me to retain the information more and form a better understanding, or if we ran out of time and only skimmed over a section then I can find out more detail about it.<\/p>\n\n\n\n<p><strong>HTML Feedback<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Elements such as &lt;br&gt; and &lt;hr&gt; shouldn\u2019t be used for presentational purposes as you can do this later in CSS. It is rare that they are used at all so not necessary.<\/li>\n\n\n\n<li>First and foremost, don\u2019t use code that you don\u2019t understand. If you see something in somebody else\u2019s code and take inspiration from it, take the time to understand why and how it does what it does first before using.<\/li>\n\n\n\n<li>\u201cDon\u2019t just make things work, make things right\u201d \u2013 You could cheat or be lazy and use techniques that work and won\u2019t throw up any errors, however this would be semantically incorrect and in a lot of instances would make life harder for users relying on screen readers.<\/li>\n\n\n\n<li>If you skip the h1 element and instead start at h2, not only is this semantically incorrect but it also means that your webpage won\u2019t show up as easily in search engines as SEO uses h1 to decipher what your site is about.<\/li>\n\n\n\n<li>Height\/width attributes in image elements are optional butt should be used by default, they should also be used together or not at all. Not including these attributes makes images load slower on your page because the browser doesn\u2019t know how much space to reserve, causing the page to jump about once loaded which is very annoying for UX.<\/li>\n\n\n\n<li>The purpose of HTML is to provide structure and meaning \u2013 don\u2019t include code if you don\u2019t need it, this just creates a larger file size that the user must download.<\/li>\n<\/ul>\n\n\n\n<p><strong>What Is CSS?<\/strong><\/p>\n\n\n\n<p>You can make CSS work within a HTML file, as is what had to be done back in the day before it originated in 1994, 5 years after HTML. However for good practice it should always be kept as a separate file. This makes it much easier to work with when you have to go back and tweak something, it makes your code easier to read and more organised. The first version, CSS1, was recommended in 1996 by W3C.<\/p>\n\n\n\n<p>CSS allows us to progressively enhance the content and user experience as we add this layer, making it much more visually appealing and smoother to navigate. There is greater control over formatting and allows for easier site maintenance \u2013 You can place the background colour in the body section at the top so that if you need to go back and tweak it, its not only easy to find but means you\u2019re only changing 1 line of code as apposed to if you did it separately for multiple pages.<\/p>\n\n\n\n<p>For accessibility you can create a dark or light toggle mode to give the user choice and a clearer view of the text depending on what works best for their eyesight.<\/p>\n\n\n\n<p>Whilst I have some previous experience with CSS, I had no idea about the need to reset the browser default styling so that you can start designing from a clean slate. I found this really interesting and will be incorporating it into my styling from now on.<\/p>\n\n\n\n<p>Link to Eric Meyer\u2019s reset CSS:<a href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\"> https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/<\/a><\/p>\n\n\n\n<p>It is also best practice to acknowledge anyone who\u2019s code you may have used or taken inspiration from, much like with crediting an artist instead of just reposting their work and saying nothing. Not doing this is disrespectful as you\u2019re not the person who\u2019s put all that effort in. In your code you can do this by commenting out a simple \u2018thank you to\u2026\u2019 or listing the author\u2019s link. This means it will stay off your live website so as not to interfere with your theme, but when people view your source code they will see it.<\/p>\n\n\n\n<p><strong>Typography<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Oliver Reichenstein wrote Web Design is 95% Typography.<\/li>\n\n\n\n<li>Web safe fonts is what are already comes installed on your operating system and guaranteed to work on the web.<\/li>\n\n\n\n<li>Typeface is a design, such as Trebuchet which includes several fonts such as bold, regular, italic. Font is a package in which the design lives.<\/li>\n\n\n\n<li>Font family is a fall back in case the first, second, third font fail and so on. This is called a font stack. Serif is your system\u2019s default font which all browsers will show as a last resort if the previous fonts fail. All operating systems have a version of this font and therefore it will work for everyone.<\/li>\n\n\n\n<li>For type design you should use em instead of px \u2013 1 em = 16px. If the parent font size changes, so will the em as it is proportional.<\/li>\n<\/ul>\n\n\n\n<p><strong>CSS Box Model<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Padding \u2013 Creates space around content within element<\/li>\n\n\n\n<li>Border \u2013 Decoration or separation<\/li>\n\n\n\n<li>Margin \u2013 Control over top\/bottom\/left\/right<\/li>\n\n\n\n<li>The box model applies to every HTML element, block level and inline<\/li>\n\n\n\n<li>The content depends where you use em or px<\/li>\n\n\n\n<li>* = Selects everything inside HTML file. The box sizing rule makes sure box model stays fixed. * { box-sizing: border-box; }<\/li>\n\n\n\n<li>Margin: 20px 20px 20px 20px; &#8211; Browser knows the clockwise order e.g. top, right, bottom, left.<\/li>\n\n\n\n<li>Padding syntax: You can use shorthand notation if the properties for top\/bottom and left\/right are the same e.g. padding 10px 20px; (as the browser knows the order, it knows that both the top and bottom are 10px, and that the right and left are 20px.<\/li>\n\n\n\n<li>Border styles: none; hidden, solid; dotted; dashed, double; groove; ridge; inset; outset<\/li>\n\n\n\n<li>Outline and border are very similar however there is a small distinction. An outline is drawn just outside of the border&#8217;s edge. It&#8217;s not part of the box model so doesn&#8217;t effect the position of the element or adjacent elements.<\/li>\n<\/ul>\n\n\n\n<p><strong>Colour<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How many colours do we have access to? 16 million. 256 variations of each colour. This is referred to as true colour because the human eye isn\u2019t capable of distinguishing each one.<\/li>\n\n\n\n<li>Adobe colour wheel app is a useful app to use because you can create colour pallettes, take references from images, and explore ideas from latest colour trends.<\/li>\n\n\n\n<li>Shorthand hexadecimal colours can help to optimise your style sheets, especially when combined with shorthand properties and grouping.<\/li>\n\n\n\n<li>RGB: Red, green, blue. First number measures intensity of red, second measures the green and third measures the red e.g. rgb (255, 50, 22). 0 measures absense of colour and 255 is highest. Absense of all colours is black, all three colours mixed at highest intensity creates white.<\/li>\n\n\n\n<li>RGBA: Red, green, blue and alpha. Alpha specifies opacity for a colour, 0 is fully transparent and 1 is fully opaque.<\/li>\n\n\n\n<li>HSL: Hue, saturation and light.<\/li>\n\n\n\n<li>Hexadecimal \u2013 Numbers used on web pages to set colours.<\/li>\n\n\n\n<li>Hexadeicmal has 16 digits: 0-9 and A-F. The hex system reduces space it takes to store certain information so is widely used e.g. RGB values reduced from three to two digits once converted.<\/li>\n<\/ul>\n\n\n\n<p><strong>Useful References<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Learning Web Design by Jennifer Niederst Robbins<\/li>\n\n\n\n<li>HTML, CSS &amp; Javascript In Easy Steps by Mike McGrath<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/tympanus.net\/codrops\/css_reference\/\">https:\/\/tympanus.net\/codrops\/css_reference\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/www.freecodecamp.org\/news\/html-button-link-code-examples-how-to-make-html-hyperlinks-using-the-href-attribute-on-tags\/\">https:\/\/www.freecodecamp.org\/news\/html-button-link-code-examples-how-to-make-html-hyperlinks-using-the-href-attribute-on-tags\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/posi\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/posi<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Class 3: What I Learned This Week\u2026 Weekly Learning Cycle This is very self-explanatory and steps that I have already been undertaking, however not always in the same order as this model. For example if there\u2019s something I already know how to do in HTML\/CSS I\u2019ve had the bad habit of going straight to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-design-for-web-content"],"_links":{"self":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":1,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjonesdesign.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}