Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrewjbateman/html-css-grid

Single page optimised HTML site to display an image grid and achieve maximum lighthouse score
https://github.com/andrewjbateman/html-css-grid

css grid html images lighthouse responsive-layout spain tourism-website

Last synced: about 2 months ago
JSON representation

Single page optimised HTML site to display an image grid and achieve maximum lighthouse score

Host: GitHub
URL: https://github.com/andrewjbateman/html-css-grid
Owner: AndrewJBateman
License: mit
Created: 2023-10-14T20:20:52.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2023-10-15T10:46:22.000Z (about 1 year ago)
Last Synced: 2024-01-29T21:34:34.762Z (11 months ago)
Topics: css, grid, html, images, lighthouse, responsive-layout, spain, tourism-website
Language: HTML
Homepage:
Size: 6.8 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # :zap: HTML CSS Grid

* Single page optimised HTML-CSS website to display a grid of images and achieve a perfect lighthouse score

* **Note:** to open web links in a new window use: _ctrl+click on link_

![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/html-css-grid?style=plastic)

![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/html-css-grid?style=plastic)

![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/html-css-grid?style=plastic)

![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/html-css-grid?style=plastic)

## :page_facing_up: Table of contents

* [:zap: HTML CSS Grid](#zap-html-css-grid)

  * [:page\_facing\_up: Table of contents](#page_facing_up-table-of-contents)

  * [:books: General info](#books-general-info)

  * [:camera: Screenshots](#camera-screenshots)

  * [:signal\_strength: Technologies](#signal_strength-technologies)

  * [:floppy\_disk: Setup](#floppy_disk-setup)

  * [:computer: Code Examples](#computer-code-examples)

  * [:cool: Features](#cool-features)

  * [:clipboard: Status \& To-Do List](#clipboard-status--to-do-list)

  * [:clap: Inspiration](#clap-inspiration)

  * [:file\_folder: License](#file_folder-license)

  * [:envelope: Contact](#envelope-contact)

## :books: General info

* Built with HTML and CSS. No Javascript.

* Perfect performance, Perfect scores on accessibility, best practices and SEO.

* CSS and HTML are minimised to reduce initial render/First Contentful Paint time.

## :camera: Screenshots

![Example screenshot](./imgs/grid.png).

## :signal_strength: Technologies

* [HyperText Markup Language HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML)

* [Cascading Style Sheets CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styling

* [JPG to WebP Converter](https://www.freeconvert.com/jpg-to-webp) to create new image formats that result in a higher Lighthouse score

* [PurifyCSS Online](https://purifycss.online/) - remove unused CSS code from your stylesheets

* [Online CSS Minifier Tool and Compressor](https://www.toptal.com/developers/cssminifier)

## :floppy_disk: Setup

* Open index.html using [Visual Studio Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). Changes are updated automatically on server.

## :computer: Code Examples

* index.html extract showing how new format webp images are marked up in HTML

```html

        

        


            

                

                

                

            

            Murcia, 51km

        

```

## :cool: Features

* Lighthouse score perfect

## :clipboard: Status & To-Do List

* Status: Working.

* To-Do: Image sizes can be reduced to improve loading time

## :clap: Inspiration

* [W3 Schools: How TO - Responsive Image Grid](https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp)

* [Stackoverflow: css grid layout make image fill space of column and row](https://stackoverflow.com/questions/76846528/css-grid-layout-make-image-fill-space-of-column-and-row)

## :file_folder: License

* This project is licensed under the MIT License - see the LICENSE file for details.

## :envelope: Contact

* Repo created by [ABateman](https://github.com/AndrewJBateman), email: `[email protected]`