Lær CSS Flexbox på Lynda.com

• Kan 16, 2024

Etter ti år, som er en levetid på nettet, bestemte vi oss for å gi nettstedet MUSED Literary Review et nytt utseende. Selvfølgelig ønsket vi å bruke de nyeste HTML og CSS, og det betyr å bruke Flexbox, CSS Grid og Responsive Web Design.

Takket være Lynda.com tok det ikke lang tid å komme opp i fart. Nedenfor er bare noen av de beste videoopplæringen som hjalp meg å designe det nye utseendet til MUSED.

Avanserte responsive oppsett med CSS Flexbox
Morten Rand-Hendriksen
I dette prosjektbaserte kurset tar forfatteren deg steg for steg når han bygger Flexbox-menyer, responsive kortoppsett, Holy Grail-oppsettet og interaktive komponenter.

CSS Avanserte oppsett med rutenett
Morten Rand-Hendriksen
Du vil lære mye på dette kurset. Forfatteren begynner med det grunnleggende om CSS Grid og planlegger nettoppsett. Da er du klar til å lage et flersøyles layout og en fullblods oppsett med en enkelt kolonne. Deretter lærer du hvordan du designer forskjellige kortoppsett og et navigasjonspanel utenfor skjermen som glir i synet når det er nødvendig.

CSS Essential Training 3
Christina Truong
I dette kurset lærer du å bruke CSS Grid og Flexbox til å lage responsive oppsett. Du vil også lære om hvordan du forbereder webbildene dine for retina-skjermer og SVG-vektorbilder. Forfatteren går videre til enkle CSS-animasjoner, responsive typografi og tilgjengelighet.

CSS Flexbox First Look
James Williamson
Dette kurset tar deg trinn for trinn når du lærer all syntaks for CSS Flexbox Layout Module. Forfatteren diskuterer hva Flexbox kan gjøre og den nåværende nettleserstøtten. Deretter diskuterer han grundig emner som elementflyt, innpakning av innhold, justering av gjenstander og hekkende flexbeholdere.

CSS Grid First Look
Morten Rand-Hendriksen
I dette kurset lærer du en ny og forbedret måte å lage todimensjonale rutenettoppsett på. Fra og med det grunnleggende for å bruke CSS Grid til å lage responsive rutenettoppsett, dekker forfatteren det du trenger å vite for å kunne bygge både et online magasin og en tre-kolonne-layout.

Bygge responsive skjemaer med Flexbox
James Williamson
Du kan ikke designe et nettsted uten skjemaer. Skjemaer må være like responsive for alle typer og størrelser på skjermbilder, akkurat som resten av nettstedet. Williamson lærer deg hvordan du bruker CSS Flexbox-boksmodellen til å lage og style responsive webformer. Han begynner med et enkelt søkeskjema og bygger seg opp til en stor, to kolonneform.

Responsive bilder
Morten Rand-Hendriksen
Hvis du bruker Wordpress, vet du at det automatisk vil generere flere bilder i forskjellige størrelser for hvert bilde som du laster opp til systemet. Hvorfor? Dette kurset vil forklare konseptet bak responsive bilder og hvordan du bruker dem på din egen webside.

Video Instruksjoner: Angular 7 Google Maps Tutorial with IPAPI (Plotting a User's Location) (Kan 2024).