Lab 4 - Part 1 - Coding and Validation

2. Code validator tests

Validators used:

HTML error(s)

I had one error. I had added some images to my Fishcreek website, when adding them, before styling with CSS, I included attributes for "width" and "height". These were not needed. The HTML checker didn't like my use of 100% for width, it expected a value, and "auto" for height. I had the same error for 4 images.

Error HTML

<img src="fishcreek.jpg" alt="Fish Creek" width="100%" height="auto" class="fishcreek-image">

HTML fix(es)

I was able to fix the errors by removing the width and height attributes. This did not change how my website rendered.

Fixed HTML

<img src="fishcreek.jpg" alt="Fish Creek" class="fishcreek-image">

CSS error(s)

I had no CSS errors. However I had a warning. I had accidentally set both the color and background-color property's of my header to the same colour. I had no text in the header so this didn't end up hiding anything. I had styled the color of my header text in a <h1> tag. For clarity I just removed the color property from the header CSS

3. Code browser tests

I tested my code on three browsers:

  • Mozilla Firefox: Version 143.0.4 (64-bit)
  • Google Chrome: Version 141.0.7390.77 (Official Build) (64-bit)
  • Microsoft Edge: Version 141.0.3537.71 (Official build) (64-bit)

I found no differences in how the code rendered on the three different browsers.

4. CSS Game

I managed to complete all 32 levels!!

I learned a great deal about selecting different elements using CSS. It was a very good game.

Comments

Post a Comment

Popular posts from this blog

Lab 3 - Part 1 - Cognition

3. Browse three university websites in the USA (observing content, layout, colour, responsiveness): US Universities Content Layout Colour Responsiveness Webber International University The homepage offers direct access to major categories (Academics, Admissions, etc.). Course offerings, on-campus and online programs, contact and location information are present. Some pages may become text heavy, but the structure is logical. The site uses a consistent navigation bar across pages. Flow is straightforward, with major sections clearly segmented (Programs, Catalogs, About). The “Home Video” page is a special visual section. The university’s official colours are Forest Green & Gold. On the website, dark green is used for headers and accent bars; gold/yellow is used for highlights. The site doe...
Read more

Lab 2 - Part 3 - SEO

1. What I Learned About SEO I explored the articles from Moz , Hobo , Increasily , Backlinko , Single Grain , Search Engine Journal , Leadfeeder , RankToday , and Google . Each of these articles highlighted best practices for improving search visibility and user experience. ChatGPT’s SEO guidance aligned closely with these sources. The key recommendations that could be confirmed across multiple references were: Use clear, descriptive <title> tags - ideally 50-60 characters, including keywords. This helps both Google and users understand the topic of each page. Structure pages with a single <h1> followed by meaningful <h2> and <h3> headings. This creates a logical hierarchy and improves accessibility. Write helpful, user-focused content that satisfies search intent. Avoid keyword stuffing; relevance and clarity matter more. Include structured data (Schema.org) to help search engines understand your business type and enable rich snippets. ...
Read more