Some useful HTML reference notes

<meta charset="utf-8">

To accept special characters, like the ones in spanish

<meta name="viewport" content="width=device-width, initial-scale=1"/>

To optimize the view for phones and make pixels work as expected

Resources to practice frontend by Kevin Powell Short - Don't learn web dev this way

frontendmentor.io

frontendpractice.com

stylesatege.dev

firsttimersonly.com

Image page optimizations

Image optimization tips
Took a PageSpeed score from 52 to 97 on a page with 28 high res 
screenshots in three steps:

1. Lazy load images
<img loading="lazy" />

2. Compress to lossy webp (still looks great)
$ cwebp input.png -q 90 -alpha_q 100 -m 6 -o out.webp

3. Remove CLS
img { aspect-ratio: 1.4}