Please view the .zip file for Unit 3 here: Unit 3 - Google Drive

Work Done For This Unit

In this unit, I applied some CSS knowledge to focus on making my static HTML pages from Unit 2 more visually appealing and readable. Each page has a consistent and identifiable layout that scrolls vertically, displaying more items as the user scrolls down. This easy to understand and read format allows personas from Unit 1, such as John the recruiter, to easily find the information they’re looking for. Business owners who are looking for more information on my status or availability can also easily view this by seeing full size, clear content, such as my resume and project summary table. The overall structure and style of the website can also be helpful for personas such as Eric in Unit 1, who can easily reference it in their own personal website. 

To do all this, I created a CSS stylesheet in another folder in my code structure and referenced it in the head of all of the HTML files. This stylesheet contained all the styles for each types of elements, including where they should be positioned (such as the navbar at the top and the footer at the bottom), their margins and padding, their sizes and colours, etc. I did not change any of the HTML code, and I think I did a good job of making use of divs, ids and classes in Unit 2 for this reason. 

Learning Outcomes

1. When you have completed this unit, you should be able to write well-structured, easily maintained, standards-compliant CSS code to present HTML pages in different ways.

   - I believe I have met this learning outcome, as the structure of my CSS code is broken down by element. It applies to general cases such as the header as a whole, but is also accessible by subtags and divs within elements, which makes adding CSS more structured and maintainable in the stylesheet.

   - The organization of divs and their tags helps make well-structured CSS code in this way. Each page is understandable, its content is presented in a readable format, and the colours and styling of each page is understandable and visually appealing.

   - The separation of fonts for both headings and subheadings, different to body text, also provides a difference in visual hierarchy and makes it easy for readability.

   - All elements are structured in a way that any persona from Unit 1 can access the information they are looking for from my website.

What Went Well and What Didn’t

The most outstanding thing to me about this unit’s work is how well the Unit 2 work on HTML divs, tags and ids was for this unit. The fact that I did not have to change any of the HTML code to adhere more to the CSS spoke a lot, as it made it super easy to go into each element, apply a CSS styling to it, and fix the errors iteratively. By no means did I get it on the first try, either - it took a LOT of iterations to get the right styling. However, I was able to do it all by only iteratively changing the CSS to match what I wanted, since I knew that each element was sectioned into divs and sections from my Unit 2 work. But, this took me a long time to do and a lot of trial and error. I’m glad I was persistent. The CSS knowledge I had prior to this helped me immensely. The sitemap that I laid out in Unit 1 was very helpful in understanding what kind of styles I might need to apply. Next time, I’ll set up the Live Server extension on VScode to automatically sync my changes, since refreshing with CSS took quite a bit of work to do every time to check if my changes actually worked.

References

• I went through a lot of pages on W3 schools to help me apply styles to tables, forms, control z-indexes, etc. CSS Tutorial

• I followed some YouTube tutorials to understand how to style the navbar: Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

• And also looked through this to understand CSS positioning on webpages: Learn CSS Flexbox in 20 Minutes (Course)

   

• This video also helped me learn how to position images and text relative to each other. How to Align Image & Text Side by Side in HTML using CSS