This project's goal is to follow web accessibility, HTML validation guidelines and to implement a given design using all the knowledge of HTML and CSS from previous weeks.
This project actually required quite a bit of planning regarding it's structure, not only due to the fact that the given design had many sections that had withing different layouts and behaviour but also because it needed to be fully responsive across devices and pass the accessibility tests. This portfolio has 8 main sections the layout was made using mainly flexbox and css grid, I also used position:absolute for some elements, mainly in the header. I started by doing a "desktopt first approach" and halfway decided to change to a "mobile first approach", I realised how important it is to do a mobile first approach - as most of sites that work on mobiles will also work on desktop - it took some will power and a lot of work but I'm happy that I made that decision.
I made it responsive for mobile, tablet and desktop. Tested on Iphone X and Ipad (both on Safari) and different desktop screen sizes, for the remaining devices I used the google chrome dev tools. For cross browser testing I tested it on Chrome, Safari, Firefox and Edge.
-
HTML Validation W3C validator (https://validator.w3.org/)
-
Accessibility testing Lighthouse in Chrome Dev Tools, score: 96% accessibility, 100% best practices, 100% SEO. (check assets for the image of the score) Screen reader with ChromeVox chrome extension and Iphone voice over
-
Auditing Performed an audit using Wave (wave.webaim.org) and followed feedback to bring down alerts. No errors detected.
- HTML5
- CSS3