7.2 KiB

Raw Blame History

CSS Refaktorering Oppgave

Mål

Transformér terrarium-prosjektet ditt til å bruke moderne CSS-layoutteknikker! Refaktorer den nåværende tilnærmingen med absolutt posisjonering for å implementere Flexbox eller CSS Grid for et mer vedlikeholdbart og responsivt design. Denne oppgaven utfordrer deg til å bruke moderne CSS-standarder samtidig som du opprettholder det visuelle utseendet til terrariet ditt.

Å forstå når og hvordan man bruker ulike layoutmetoder er en viktig ferdighet innen moderne webutvikling. Denne øvelsen bygger bro mellom tradisjonelle posisjoneringsteknikker og moderne CSS-layoutsystemer.

Oppgaveinstruksjoner

Fase 1: Analyse og Planlegging

Gå gjennom din nåværende terrariumkode - Identifiser hvilke elementer som for øyeblikket bruker absolutt posisjonering
Velg din layoutmetode - Bestem om Flexbox eller CSS Grid passer best til dine designmål
Skisser din nye layoutstruktur - Planlegg hvordan containere og planteelementer skal organiseres

Fase 2: Implementering

Lag en ny versjon av terrarium-prosjektet ditt i en separat mappe
Oppdater HTML-strukturen etter behov for å støtte den valgte layoutmetoden
Refaktorer CSS til å bruke Flexbox eller CSS Grid i stedet for absolutt posisjonering
Oppretthold visuell konsistens - Sørg for at plantene og terrarium-glasset vises på samme posisjoner
Implementer responsiv oppførsel - Layouten din skal tilpasse seg elegant til ulike skjermstørrelser

Fase 3: Testing og Dokumentasjon

Tverrnettlesertesting - Verifiser at designet ditt fungerer i Chrome, Firefox, Edge og Safari
Responsiv testing - Sjekk layouten din på mobil, nettbrett og desktop-skjermstørrelser
Dokumentasjon - Legg til kommentarer i CSS som forklarer dine layoutvalg
Skjermbilder - Ta bilder av terrariet ditt i ulike nettlesere og skjermstørrelser

Tekniske Krav

Layoutimplementering

Velg EN: Implementer enten Flexbox ELLER CSS Grid (ikke begge for de samme elementene)
Responsivt Design: Bruk relative enheter (rem, em, %, vw, vh) i stedet for faste piksler
Tilgjengelighet: Oppretthold riktig semantisk HTML-struktur og alt-tekst
Kodekvalitet: Bruk konsistente navnekonvensjoner og organiser CSS logisk

Moderne CSS-funksjoner som skal inkluderes

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

Nettleserstøttekrav

Chrome/Edge: De nyeste 2 versjonene
Firefox: De nyeste 2 versjonene
Safari: De nyeste 2 versjonene
Mobilnettlesere: iOS Safari, Chrome Mobile

Leveranser

Oppdatert HTML-fil med forbedret semantisk struktur
Refaktorert CSS-fil som bruker moderne layoutteknikker
Skjermbilde-samling som viser tverrnettleserkompatibilitet:
- Desktop-visning (1920x1080)
- Nettbrett-visning (768x1024)
- Mobil-visning (375x667)
- Minst 2 forskjellige nettlesere
README.md-fil som dokumenterer:
- Ditt layoutvalg (Flexbox vs Grid) og begrunnelse
- Utfordringer møtt under refaktoreringen
- Notater om nettleserkompatibilitet
- Instruksjoner for å kjøre koden din

Vurderingskriterier

Kriterier	Fremragende (4)	God (3)	Under utvikling (2)	Nybegynner (1)
Layoutimplementering	Fremragende bruk av Flexbox/Grid med avanserte funksjoner; fullt responsiv	Korrekt implementering med god responsiv oppførsel	Grunnleggende implementering med mindre responsproblemer	Ufullstendig eller feil layoutimplementering
Kodekvalitet	Ren, godt organisert CSS med meningsfulle kommentarer og konsistent navngivning	God organisering med noen kommentarer	Tilfredsstillende organisering med minimale kommentarer	Dårlig organisering; vanskelig å forstå
Tverrnettleserkompatibilitet	Perfekt konsistens på alle nødvendige nettlesere med skjermbilder	God kompatibilitet med mindre forskjeller dokumentert	Noen kompatibilitetsproblemer som ikke bryter funksjonaliteten	Store kompatibilitetsproblemer eller manglende testing
Responsivt Design	Eksepsjonell mobil-først tilnærming med jevne brytningspunkter	God responsiv oppførsel med passende brytningspunkter	Grunnleggende responsiv funksjonalitet med noen layoutproblemer	Begrenset eller ødelagt responsiv oppførsel
Dokumentasjon	Omfattende README med detaljerte forklaringer og innsikt	God dokumentasjon som dekker alle nødvendige elementer	Grunnleggende dokumentasjon med minimale forklaringer	Ufullstendig eller manglende dokumentasjon

Nyttige Ressurser

Layoutmetode Guider

Verktøy for nettlesertesting

Verktøy for kodekvalitet

Ekstra Utfordringer

🌟 Avanserte Layouts: Implementer både Flexbox OG Grid i ulike deler av designet ditt
🌟 Integrering av Animasjoner: Legg til CSS-overganger eller animasjoner som fungerer med din nye layout
🌟 Mørk Modus: Implementer en tema-bryter basert på CSS-tilpassede egenskaper
🌟 Container Queries: Bruk moderne container query-teknikker for komponentnivå responsivitet

💡 Husk: Målet er ikke bare å få det til å fungere, men å forstå HVORFOR den valgte layoutmetoden er den beste løsningen for akkurat denne designutfordringen!

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.

7.2 KiB Raw Blame History