Introduksjonskurs i HTML og CSS for å få innsikt i hvordan utviklere jobber. Inneholder også litt mer kompliserte oppgaver for dem som måtte ønske det.
Hvordan kan du faktisk bygge det du tegner i Figma? Hvordan fungerer egentlig styling og spacing? Har du hørt om Tokens? Vel vi bruker det i utviklingsverden også. Fører all design til lik mengde arbeid i utvikling? Definitivt ikke. Her kan du få innsikt i hva som er vanskelig å jobbe med, slik at man kan velge lettere design å implementere. Du vil blant annet få muligheten til å jobbe med farger, borders, knapper, checkbox, dropdowns, bilder, tabeller og mye mer.
På grunn av noen sikkerhetsmekanismer i Github som blokkerer innhold, er det best å lese disse sidene i nettleseren med det lokale oppsettet du finner i menyen under.
Hvis oppsettet er ferdig, begynn alltid med å trykke
Watch SassogGo Livenederst til høyre i VSCode. Dette er for å kunne bla gjennom dokumentene, samt skrive kode og se endringer umiddelbart.
Alle lenkene er beregnet på å klikkes på i nettleseren med Live Server (html). Hvis du leser dette fra VSCode eller Github, bruk lenkene bak annotert med
(markdown)i stedet.
- Oppsett (Nødvendig å gjennomføre før workshop.) (markdown)
- Introduksjon (Kjapp introduksjon til temaet HTML og CSS) (markdown)
- HTML oversikt (Byggeklosser og eksempler i HTML) (markdown)
- CSS oversikt (Selectorer, attributter og tokens) (markdown)
- VSCode oversikt (Frivillig -- hvordan bruke VSCode effektivt) (markdown)
- Inspect (Hvordan inspisere elementer i nettleseren) (markdown)
- HTML tags (enkel, html) (markdown)
- Skjema (middels, html, css?) (markdown)
- CSS (enkel, css) (markdown)
- Tabell (vanskelig, html, css) (markdown)
Hvis du bare ønsker å teste litt tilfeldige ting, ta en titt i mappen sandbox.
Der er det satt opp to templates du kan gjøre hva du vil i.
Den første er tom, mens den andre inneholder et eksempel på bilde med styling.