website blogging

 CSS and HTMl Validator

I have now the experience of making-sure that my HTML and CSS files have no syntax errors. The code from all documents were placed inside a validator input to help me with an issue. W3 revealed that there were typographic errors in my layout css. Using CMD J to quickly find the line where the mistakes is located.

I reinserted my CSS code until there was not any errors on W3's website. Correcting the mistakes resulted in a well-done message appearing on a site. The code below allows me to place a W3 CSS3 tested  certificate onto my website. Adding this symbol will signify to users that this site is trustworthy. Trustworthy is a key aspect of user experience design that web developers should consider when in the planning and production stage. 

However, validator has a problem at recognising figure caption and CSS3 functions. Even though captions are new tags, validator do not recognise them. Webfilters are other properties that validators have struggle to recognise.  However, I have attempted to correct many errors as possible.  It may appear that have more errors than usual. 

Z-index

A confliction between the navigation bar and SVG logos caused me to explore the Z-index. The SVG logos appeared a front of the fixed navigation links. W3schools points out that the z-index function arrange the graphical elements into layers resembling the ones used in Photoshop. The graphical element with the highest value appears on the top layer.  With my experience with CSS, I set the z-index at 100 for the navigation whilst 99 for the SVG logos. At first, I thought that this solution may not work due to my lack of experience using this specific code but the website was seen on browsers, the confliction disappeared. This experience taught me to make-sure that add the z-index to ensure that graphical elements do not collide.