HTML Feedback & CSS: The Presentational Layer

Class 3: What I Learned This Week…

Weekly Learning Cycle

Teaching – Attend lectures, provides framework for further study
Study – Read recommended texts, watch videos, experiment with relevant software
Reflect – Make notes based on studies. “What I learned today blog posts”
Practice – Complete project tasks on HTML/CSS etc.
Feedback – Get feedback in next session, make changes accordingly

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’s something I already know how to do in HTML/CSS I’ve had the bad habit of going straight to the practice work, then studying, and then reflecting on what I’ve learned and expanding on the notes made in class.

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.

HTML Feedback

Elements such as <br> and <hr> shouldn’t 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.
First and foremost, don’t use code that you don’t understand. If you see something in somebody else’s code and take inspiration from it, take the time to understand why and how it does what it does first before using.
“Don’t just make things work, make things right” – You could cheat or be lazy and use techniques that work and won’t 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.
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’t show up as easily in search engines as SEO uses h1 to decipher what your site is about.
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’t know how much space to reserve, causing the page to jump about once loaded which is very annoying for UX.
The purpose of HTML is to provide structure and meaning – don’t include code if you don’t need it, this just creates a larger file size that the user must download.

What Is CSS?

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.

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 – 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’re only changing 1 line of code as apposed to if you did it separately for multiple pages.

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.

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.

Link to Eric Meyer’s reset CSS: https://meyerweb.com/eric/tools/css/reset/

It is also best practice to acknowledge anyone who’s 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’re not the person who’s put all that effort in. In your code you can do this by commenting out a simple ‘thank you to…’ or listing the author’s 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.

Typography

Oliver Reichenstein wrote Web Design is 95% Typography.
Web safe fonts is what are already comes installed on your operating system and guaranteed to work on the web.
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.
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’s 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.
For type design you should use em instead of px – 1 em = 16px. If the parent font size changes, so will the em as it is proportional.

CSS Box Model

Padding – Creates space around content within element
Border – Decoration or separation
Margin – Control over top/bottom/left/right
The box model applies to every HTML element, block level and inline
The content depends where you use em or px
* = Selects everything inside HTML file. The box sizing rule makes sure box model stays fixed. * { box-sizing: border-box; }
Margin: 20px 20px 20px 20px; – Browser knows the clockwise order e.g. top, right, bottom, left.
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.
Border styles: none; hidden, solid; dotted; dashed, double; groove; ridge; inset; outset
Outline and border are very similar however there is a small distinction. An outline is drawn just outside of the border’s edge. It’s not part of the box model so doesn’t effect the position of the element or adjacent elements.

Colour:

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’t capable of distinguishing each one.
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.
Shorthand hexadecimal colours can help to optimise your style sheets, especially when combined with shorthand properties and grouping.
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.
RGBA: Red, green, blue and alpha. Alpha specifies opacity for a colour, 0 is fully transparent and 1 is fully opaque.
HSL: Hue, saturation and light.
Hexadecimal – Numbers used on web pages to set colours.
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.

Useful References