Scotland class 5 - karma clone

[bonboh]

Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in HOW_TO_MARK.md in the root of this repository

Your Details

• Your Name:
• Your City:
• Your Slack Name:

Homework Details

• Module:
• Week:

Notes

• What did you find easy?

• What did you find hard?

• What do you still not understand?

• Any other notes?

[bonboh]

Great job @M-hayek! Nice to see semantic HTML 👍 I've left some comments and tips for you to read, but you don't have to do anything else. Generally, the main things to note are:

• Software teams typically use class names for styling, not ID, so the HTML document doesn't need to have as many IDs
• Code formatting matters to software teams, so try and style it with proper indents and style
• We should use relative units like rems by default rather than pxs

[bonboh]

Suggested change

	font-size: 16px;
	font-size: 1rem;

We should use relative units like rem, especially for font-size. If we use pixels, then if a user changes their browser default font size setting then the screen doesn't increase in size

[bonboh]

Suggested change

	width:100%;
	height:100%;

We don't need these properties so we can remove them

[bonboh]

Suggested change

display: block; /*each element as a block*/

Normally, it's not a good idea to turn every element into a block, because when we use inline elements like <a> and <strong> for example, they will all be on separate lines which does not make sense

[bonboh]

Suggested change

	height: 70px;
	height: 4.5rem;

We should use relative units where possible. Same applies to all the other uses of px in this file

[bonboh]

Suggested change

	#nav-bar ul a:hover {color:#F15B2A;
	}
	#nav-bar ul a:focus,
	#nav-bar ul a:hover {
	color:#F15B2A;
	}

We should also add :focus so that keyboard users who use the Tab key to jump to the link also get a change in colour.

Also, for coding the formatting of the code matters in software teams. Typically, it's structured like in my suggestion. This applies to the whole file

[bonboh]

Suggested change

	footer ul li img : hover {cursor:pointer;
	}

The icons aren't clickable so we shouldn't add a mouse pointer on hover. If we want a mouse pointer on hover, we should put the icons in a link <a>

[bonboh]

Suggested change

	<article>
	<main>

This seems like it should be a main, since we normally have header main footer as the top level elements on a page

[bonboh]

Suggested change

	<header id="header">
	<nav id="nav-bar">
	<header class="header">
	<nav class="nav-bar">

Normally, software teams use classes for styling and not IDs. The same applies for the rest of this file

[bonboh]

Suggested change

	<h1> Everyone needs a little Karma.</h1>
	<h2> Everyone needs a little Karma.</h2>

We should only have one h1 on the page, so we should update this to h2

[bonboh]

Suggested change

	<p> Join us on </p>
	<h2> Join us on </h2>

This seems like it could be a heading, so we could make it one