devjoppe/mi-barbershop

Barbershop 💈

Överblick

Länkar

Personal Github: https://github.com/devjoppe/mi-barbershop

Personal Github pages: https://devjoppe.github.io/mi-barbershop/

Valideringsrapport

Se mapp: 📂 validation-reports

Screenshots

I mappen 📂 screenshots finns skärmdumpar från testade webbläsare med olika upplösningar.

Process

Att utifrån ett underlag bygga upp en webbsida genom att endast använda HTML5 och CSS (Javascript valfritt).

Underlaget bestod av en kortare beskrivning och ett antal bilder som illustrerade sidans design för olika upplösningar. Min uppgift var att koda fram en responsiv design baserat på detta underlag.

1. Skapade en wireframe baserat på designen för att snabbt kunna omsätta layouten till kod.
2. Tog fram en HTML-struktur.
3. Koda design och layout i SCSS.
4. Test och justeringar.
5. Klar.

Byggd med 🚧

• Semantisk HTML5
• SCSS/CSS
• JS (mobil navigering)

Lärdomar

⚠️ Alltid "mobile first".

Så enkelt med ack så viktigt. Även om det inte känns så i början så kommer man spara tid, kod och andra problem. 😱

👌 SCSS

Låt det ta lite längre tid i början för att strukturera upp din kod bättre.

👏 srcset, size, .webp

Nytt sätt att arbeta med bilder.