This is a solution to the Room homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Live on GitHub Pages
-
Accesibility & semantics
-
Make it pixel-perfect and color-perfect
-
Make sure svgs contain valid properties
-
Better image compression without loosing that much quality
-
Prevent image layout shifting on page load
-
Extract page into Astro components
-
Too much horizontal padding on screens over
max-w-2xl -
Remove tailwind treeshaking hack on
body -
Improve Carrousel accesibility and SEO, implement
tabindexand make it SEO-friendly -
Lazy load images
-
Better
picture&srcsetattributes and responsive images -
Better image handling, use proper
widthandheightinstead of absolute positioning for getting them to be the minimum height of the container -
Run rests when zooming-in
-
Cross-browser testing
-
Run this stuff on lighthouse
- Help from Web.dev: https://web.dev/
- Help from W3Schools: https://www.w3schools.com/graphics/svg_polygon.asp
- Help from MDN: https://developer.mozilla.org/en-US/
- Help from W3 ORG: https://www.w3.org/
- Tons of help from StackOverflow: https://stackoverflow.com/
- Tons of help from Stack Exchange: https://webmasters.stackexchange.com/
- Kevin Powell's YouTube Channel: https://www.youtube.com/@KevinPowell helped me a lot
- Kevin Powell's Responsive Design Article: https://www.freecodecamp.org/news/taking-the-ri:ght-approach-to-responsive-web-design/
- Adam Wathan's YouTube Channel: https://www.youtube.com/@AdamWathan
- SVGOMG - SVGO's Missing GUI: https://jakearchibald.github.io/svgomg/
- How to Scale SVG: https://css-tricks.com/scale-svg/
- Previous project: https://github.com/pedroalonsoms/sunnyside-agency-landing-page
- Typescript Docs: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
- The JavaScript Modulo Bug by Stephen Chapman: https://web.archive.org/web/20090717035140if_/javascript.about.com/od/problemsolving/a/modulobug.htm