README.md

Documentation

(Back to home)

Table of contents

• Overview
• Colors
• Font family
• References
  • Guidelines
  • Web doc
  • Articles
  • Tools
  • Validation

Overview

This is the place where I document everything about this project. Feel free to take a look.

Colors

The site used all the colors from the style-guide.md and the pure black color, rgb(0, 0, 0).

Font Family

The site used the font family that has been specified on the style-guide.md

References

Guidelines

These are the guidelines that I follow when I write the code.

• HTML Best Practices
• Sass Guidelines

Web Doc

• <picture>: The Picture element - HTML: HyperText Markup Language | MDN
• resolution - CSS: Cascading Style Sheets | MDN
• -webkit-device-pixel-ratio - CSS: Cascading Style Sheets | MDN
• <address>: The Contact Address element - HTML: HyperText Markup Language | MDN
• HTML Standard - <address> element - address element should only contain contact information.
• Resource Hints - prerender
• Resource Hints - prefetch
• Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0

Articles

• Reverse Text Color Based on Background Color Automatically in CSS | CSS-Tricks
• A Complete Guide to Grid | CSS-Tricks
• Use density descriptors | web.dev - the article is about the 2x number on the srcset.
• Responsive Images in CSS | CSS-Tricks - it shows the example to use srcset.
• Contextually Marking up accessible images and SVGs | scottohara.me - it shows me how to take care decorative SVG
• Beyond Basic Alt Text – Charts, Maps, and Diagrams | equidox - it gives me an idea to write alternative text for the map image.
• Avoid these common alt-text mistakes - The Big Hack

Tools

• OpenStreetMap - get the coordinate numbers for 99 King Street, Newport, USA.
• Canva - design the banner
• Squoosh - optimize images
• Site shot - take screenshot of the site
• Pikwy - take screenshot of the site. alternative to Site shot.
• Percentage Calculator

Validations

• SEOptimer - The site got B+
• PageSpeed Insights - The site got 100 score for the performance
• HTML Validation - The site has valid HTML
• CSS Validation - The site has valid CSS
• Checklist - The A11Y Project
• MetaTags - it helps me to inspect the social media card for the site
• Front-End Checklist
• SSL Server Test (Powered by Qualys SSL Labs) - test how secure the site. SSL Report: officialartgallery.netlify.app
• VirusTotal - No security vendors flagged https://officialartgallery.netlify.app/ as malicious. Just for fun.

Others

• Media Queries: resolution feature | Can I use... Support tables for HTML5, CSS3, etc
• CSS at-rule: @media: -webkit-min-device-pixel-ratio media feature | Can I use... Support tables for HTML5, CSS3, etc
• Cartesian Coordinates - to reminds me about x-axis.
• Rhode Island - Wikipedia - RI stands for Rhode Island.
• Shift Dev 2019: "More Than You Wanted to Know About Resource Hints" - Harry Roberts (CSS Wizardry) - YouTube video