Avancerad frontend-teknik
Positionering, overlays och progressiv förbättring.
0% klart · 6 frågor
Från plan till kod
Du har ett företag, en persona och ett papper med wireframes. Nu börjar kodandet.
Det du ska bygga känner du redan igen, även om du aldrig tänkt på det. Öppna nästan vilken webbplats som helst: en hero som fyller fönstret med ett budskap och en knapp, en liten badge som ligger ovanpå ett produktkort, en hamburgermeny som vecklar ut sig på mobilen. Det är webbens standardkomponenter, och de bygger på tekniker du inte har ännu: element som delar samma plats på skärmen, innehåll som centreras mot hela fönstret, och JavaScript som förbättrar utan att exkludera.
I det här området lär du dig teknikerna en gång var. Sedan har du dem med dig, för de här komponenterna kommer tillbaka i nästan varje webbplats du kommer att bygga.
- 1 Avancerad positionering Lär dig lägga element omlott. Badges, overlays och text ovanpå bilder med position: relative och absolute.
- 2 Hero-arkitektur Bygg en hero-sektion med Grid-centrering, rätt bakgrundsteknik och läsbar text oavsett bild.
- 3 Progressiv förbättring Bygg en tillgänglig mobilmeny och lär dig konceptet progressiv förbättring på ett verkligt problem.