Validation & Browser Test Report

Validating code & Checking browser usability

Validation

I validated both my HTML and CSS files to ensure that my code is free from errors and missing closing tags.

I validated my HTML files using the W3C Markup Validation Service: https://validator.w3.org/

I found 2 errors for my <button> and <a> tags. Apparently, the button should not have the <a> as its parent.

html02

In order to fix this, I interchanged both my <button> and <a> tags. Surprisingly, it still showed the same error. For some reason, both elements did not want the other to be their respective parent / descendant tags.

html03

Since both options did not work, I changed it so that the <a> element becomes the parent of the <button> child element. Whenever I tested my website, I did not find any errors nor bugs so I kept it this way.

I also validated my html file for my contact_message page and I’m happy that it did not find any errors.

html01

 

Browser Test Report

Throughout building my website, I used Google Chrome and Mozilla Firefox to test what I have coded. Although Google Chrome was my go-to browser, I still viewed my website with Mozilla Firefox to ensure that the design and functionality of my website works perfectly fine.

  • Google Chrome

gc-1

Screenshots of website viewed from Chrome

 

  • Mozilla Firefox

ffox-01

Screenshots of website viewed from Firefox

 

One main issue I had with building my website is making it responsive with different screen sizes. I usually work on my 15″ laptop and the 27″ iMac uni computers. Although I am aware of media queries (and I have added media queries to my code), I’m not 100% sure why the text and spacing within the elements inside my containers remain unresponsive. I find that my elements would have a considerable amount of space when viewed in the 27″ iMac. However, when I fix this and view it back in my 15″ laptop, the content cannot be fully seen. This is an issue that I want to keep learning and understand so that I can build a more effective and fully responsive website in the future, regardless of whichever screen it is viewed in.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s