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-navbar

Responsive navbar using html, css and bootstrap5 navbar with code minimised etc. for perfect lighthouse score
https://github.com/andrewjbateman/html-css-navbar

bootstrap css html javascript lighthouse-audits navbar netlify-deployment responsive

Last synced: 7 days ago
JSON representation

Responsive navbar using html, css and bootstrap5 navbar with code minimised etc. for perfect lighthouse score

Host: GitHub
URL: https://github.com/andrewjbateman/html-css-navbar
Owner: AndrewJBateman
License: mit
Created: 2023-10-01T20:33:12.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-10-07T13:52:32.000Z (about 1 year ago)
Last Synced: 2024-11-07T03:32:18.458Z (about 2 months ago)
Topics: bootstrap, css, html, javascript, lighthouse-audits, navbar, netlify-deployment, responsive
Language: HTML
Homepage: https://sparkly-muffin-90f22d.netlify.app/
Size: 4.03 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # :zap: HTML CSS Navbar

* Responsive navbar using html, css and bootstrap5 navbar with code minimised etc. for 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-navbar?style=plastic)

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

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

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

## :page_facing_up: Table of contents

* [:zap: HTML CSS Navbar](#zap-html-css-navbar)

  * [: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, CSS and JavaScript with Bootstrap 5 CSS and Javascript

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

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

## :camera: Screenshots

![Example screenshot](./imgs/home.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)

* [Online JavaScript Minifier Tool and Compressor](https://www.toptal.com/developers/javascript-minifier)

* [Boxy SVG: Online scalable graphics generator](https://boxy-svg.com/)

## :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

          


            

              

              

              

            

            

              Terracota

              

                Una vivienda moderna, muy bien equipada y muy confortable. En

                este alojamiento se respira tranquilidad: ¡relájate con toda la

                familia!

              

            

          

```

## :cool: Features

* Lighthouse score perfect

## :clipboard: Status & To-Do List

* Status: Working.

* To-Do: Optimise images using compress or CDN. Work out how to remove unused javascript.

## :clap: Inspiration

* [Anna Monus: 9 tricks to eliminate render blocking resources](https://blog.logrocket.com/9-tricks-eliminate-render-blocking-resources/)

* [Maddy Osman: The Ultimate List of Web-Safe HTML and CSS Fonts](https://blog.hubspot.com/website/web-safe-html-css-fonts)

## :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]`