Validating code & Checking browser usability
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.
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.
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.
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
Screenshots of website viewed from Chrome
- Mozilla Firefox
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.