Skip to content

jpmti2016/css-grid-album

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

css-grid-album

This project explored basics properties of CSS Grid and how it allows responsive layouts.

Also took into account how the use of images affect the page's performance and explored tools to detect and solve issues with the images.

GitHub code size in bytes GitHub last commit GitHub top language GitHub language count W3C Validation Website

CSS Grid properties used

  1. Properties
    1. grid-template-columns
    2. grid-template-rows
    3. justify-content
    4. gap
    5. grid-column
    6. grid-row
  2. Special Functions and Keywords
    1. repeat()
    2. minmax
    3. fr
    4. auto-fit

Image processing tools

  1. Gimp used to
    1. Scale the image to the needed dimensions.
    2. Reduce the image size.
  2. imageoptim used to
    1. Compress the image taking into account factors like
      1. Quality
      2. Format
      3. DPI mode
      4. Color quality

Page auditing tools

  1. Lighthouse
    1. Used to check the overall quality of the webpage
      1. Performance
      2. Accesibility
      3. SEO
      4. Best practices
  2. RespImageLint
    1. Used to detect images's issues.

The idea came from the Wes Bos's great course CSS Grid.

About

CSS Grid album project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published