For this assignment we were supposed to take a file from earlier and run it through the validation checker again but I just don't feel like I'm learning anything by making a fake error and then fixing it so we're putting my website in again... I know it's overkill but to be fair. Um. No this is overkill I didn't need to do this. Not for this assignment.

Anyway... Remember how in chapter 2 it said "hey man you can't put divs inside of spans that's illegal"?

Yeah I didn't do anything about it then. So I'm fixing that, first of all, but there's some other stuff that needed looked at, too.

The biggest problems are as follows;

1. Images lacking alt text - specifically the false window buttons
2. Paragraphs inside of spans, which is apparently also illegal

Also, you're apparently not supposed to use <br>s inside of lists. Whoops! I did that on the index for this site!! I did it to make my lists more readable without making them separate lists, but, well, bad practice is bad practice, so it's got to go.

Breaking Up Lists Without <br>

It's an easier fix on the website than it is on here. I just pick the list item I want to have a break after it and give it a bottom margin. I don't have very large lists that need broken up so that I can read them properly on my personal site, so it doesn't need to be fancy.

The list problem on here is a lot more interesting since I wanted a space after every 5th element, but it's also pretty easy. Since you can style multiple elements at once and because of pseudo-selectors like 'first-child' I looked there first and found 'nth-of-child', and then 'nth-of-type'. I gave each of the sections inside the 'chapter' buttons a class called 'handson'. I used the > greater than sign to target all 'li' elements inside of 'handson', hit it with nth-of-type, and said "(6n)". I tried just putting 5 in the parenthesis the first time, but that only put a space after the 5th list item, and then when I tried 5n, I realised it would put a space after the 5th 'li' item even if there was another list underneath it, so I changed it to '6n' so that every 6th item put a space above itself. I made an 'innerMulti' class for mini lists that has top-margin set to 0 too.

Alt text. Alt text. Alt text. AGH.

There's a lot of missing alt text because there's a lot of little decorative junk on the page. Stamps, mostly, but also my goofy little icon and the buttons. The buttons on the window are decorative, and apparently best practice there is to put a blank alt text tag. I was intending on adding functionality later, but since it's not there yet, blank alt text is the best bet for those. It's a boring and tedious fix.

I ran it through one more time :)

We're in the final stretch now!

Wait.

What do you mean sections need headers.

"use a div element instead for any cases where no heading is needed." What if I This content is not appropriate for a school-hosted website rated E for everyone. I can't use span because you can't put paragraphs inside of span, I can't use section because there's no headers, What Even Do I Do Here? I mean Yeah I Could just put them in divs but man. Come on. I don't like putting everything in divs, it's hard to read that kind of code. I've massively destroyed code trying to move something with lots of nested divs somewhere because I forgot one of the end tags somewhere and couldn't see where it was missing. It's horrible.

Something you don't see is me realising this page is formatted with paragraphs inside of sections and scrambling to fix it. Nor the fact it is 6AM and I have been awake since 10PM. I got paid today I'm getting some red bull I deserve it.

Running the site through again did dig up one new issue that wasn't visible before. Apparently, I've been nesting my lists wrong; you're supposed to put your nested list inside list tags, which is something I messed up here too. Whoops. I think I had been taught that in high school, but forgot.

Ok one more time

Only one missing alt tag. Yayyyyyy!!! And it's purely decorative so it's an easy fix!

The fun part is that visually absolutely nothing anywhere has changed. It's just that the code is nicer. Like I wanted to have screenshots to show the site improving as I tweaked it but there's just nothing to show.