Throughout the course, I will be applying CSS rules to an HTML Resume file. Each iteration of that file will be saved and made accessible here with a brief explanation of what CSS has been applied to it in comparison tp the previous iteration. This will start with the first iteration with the files as they are at the start of the course so no changes have been made to the CSS as yet.

Version...... Description
Resume1 This is the starting point. There is a CSS file which is attached to the HTML file, but to begin with, this is an empty file.
Resume2 Images have been set to a width of 300 pixels.
Resume3 Set the font colour to dark gray for the whole page and also the background colours for each individual section except Educatio. We then overrode the font-colour in header and footer because they have dark background and the text was difficult to see against the dark blue background in the header and invisible against the dark gray background in the footer.
Resume4 Styled the links. For most of these, this means changing the colour to yellow, but the links in the projects section have a light background so they need to be darker. Some of these are styled to look like buttons and some just have a darker colour.
Resume5 Styling has been added to centre the sections in the page while ensuring that the background colour still spans the whole page.
Resume6 Margins have been zero'ed for all <h1>, <h2> and <p> elements. The result is that the gaps between elements have disappeared, but this has made the elements appear to be squished together somewhat.
Resume7 The margins that were zero'ed out in resume 6 have been put back in and we have used a different technique to esnure that we have the vertical spacing we want.
Resume8 Different fonts are being used (these are web fonts and more specifically Google fonts - Montserrat for the body and Caveat for the headings. He have also tweaked some other font properties including font-size and line-height and changed the margins.
Resume9 In the projects section, floats have been added to the images so that the text flows around them giving a nice effect. This hasn't completely worked and we need to apply a clear property which we will do for the next version so versions 9 and 10 show the same resume without any kind of fix to clear floats (resume9) and with a fix applied (resume 10).
Resume10 As mentioned above, this is the same version as resume9, but this one has had a fix applied to the parent element (overflow: hidden;) to keep everything in the right place.
Resume11 In this version, the order of the elments within each project-item has changed so that the image comes before the heading. This allows both the heading and the remaining text to flow around the image and gives a better overall look.
Resume12 This is almost identical to resume11.html, but we have removed the margin from the top of the heading to give a slightly better look.
Resume13 Flexbox properties are used to style the list of items in the contact info section. The list styles have been removed so the elements don't look like a list although they are still link items. In addition, the heading in the contact info section and the heading and text in the header section have been centre aligned, but this was done without using flex.
Resume14 We have updated the employment section. This contains three jobs and we have added a simple two column grid layout to each so that we have the job details on the left and the job summary on the right.
Resume15 Additional styling added to the education and work experience sections to add a border at the bottom of each work or education item. Note that these styles have been applied using advanced selectors including sibling combinators.
Resume16 As resume15, but a further stlye has been applied using a last-of-type selector to remove the bottom border from the last work item and the last education item.
Resume17 Using a more fluid layout by changing the width of 800 pixels to a maximum width of 800 pixels for each section. We also specified a width of 85% so each section will be 85% of the screen width up to a maximum of 800 pixels.
Resume18 We have added a background image to the Education section and tried to make it as fluid as possible. We also reduced the width of the paragraphs, just in the Education section, so that they didn't clash quite so much with the image.
Resume19 Previous versions of the resume used a fluid layout that looked okay on smaller devices, but not great when the device size is really small and this would include the majority of phones. For this version, we have made quite a few changes with media queries. The two column layouts in projects and work experience becomes a single column layout, we have changed the appearance of the header and stacked items in the contact info section rather than spreading them across the screen in a flexbox as we do on larger screens. This is the last version of the resume for the course, but I haven't yet adpated it to act as my own resume. When I do that, I will add further versions as I adapt it.