Flexboks i CSS & HTML: Oppsett av det initiale prosjektet

I denne veiledningen lærer du hvordan du forbereder prosjektet ditt for å jobbe med CSS Flexbox. Det er viktig å ha et solid fundament før du går dypere inn i Flexbox-layoutteknikkene. Vi bruker Visual Studio Code til utvikling, men du kan også velge en enkel teksteditor og en nettleser. I de følgende trinnene setter vi opp et enkelt prosjekt som vil hjelpe deg med å forstå og anvende Flexbox.

Viktige innsikter

• Bruk av en utviklingsserver gjør det enklere å jobbe med prosjektene dine.
• Du kan jobbe uten rammeverk for å lære grunnleggende JavaScript- og CSS-konsepter.
• Index-HTML-filen er det sentrale punktet i prosjektet ditt, der du vil jobbe fra.

Trinnvise instruksjoner

Begynn med å åpne et terminalvindu i Visual Studio Code eller et annet program etter eget valg. Forsikre deg om at Node.js er installert før du fortsetter. Dette er avgjørende for å kunne kjøre NPM-kommandoer.

Nå kan du bruke NPM-pakken for prosjektstrukturering. Skriv inn følgende kommando i terminalen: npx create-v for å starte prosessen med å opprette prosjektet ditt. Du vil bli spurt om pakken skal lastes ned. Bekreft dette.

Skriv deretter inn navnet på prosjektet ditt. Jeg foreslår å kalle det bare "flexbox", siden det er det det handler om. Når du har skrevet inn navnet, vil du bli spurt om et UI-rammeverk. Velg i dette tilfellet "Vanilla JavaScript", siden vi ikke vil bruke spesifikke rammeverk.

I neste trinn blir du spurt om du ønsker å bruke TypeScript. Igjen er det lurt å velge "nei" for å holde det enkelt og fokusere på kjerne-teknologiene.

Nå er du nesten ferdig. Du trenger bare å bytte til den nye prosjektmappen din ved å bruke kommandoen cd flexbox. Dette tar deg til mappen som nettopp ble opprettet.

Kjør deretter kommandoen npm install i terminalen. Dette vil installere alle nødvendige pakker for prosjektet ditt.

Når dette er gjort, start den lokale utviklingsserveren med npm run dev. Dette åpner prosjektet ditt og gjør det tilgjengelig på en lokal server.

Nå kan du se på den opprettede Index-HTML-filen som ligger i prosjektmappen din. Denne filen er den viktigste delen av prosjektet ditt, der du vil opprette all din innhold og struktur.

Neste steg er å slette standardscriptet som ble generert for prosjektet. Vi trenger ikke å bruke scriptet main.js med en gang, så det kan enkelt slettes. Du kan også fjerne stilen style.css, siden vi foreløpig ønsker å administrere alt i Index-HTML-filen.

I Index-HTML vil vi bygge opp strukturen for vår Flexbox-container. Vi trenger en overordnet container som igjen vil inneholde noen underordnede beholdere. Dette er en grunnleggende struktur som vi trenger for Flexbox.

For å se endringene i nettleseren, åpne Chrome og gå til http://localhost:3000. Når du starter utviklingsserveren, vil URL-en vises slik at du kan åpne Index-HTML-filen din.

Jeg anbefaler at du bruker kontrolltasten (eller Command på Mac) når du åpner lenker i nettleseren for å åpne dem direkte i standardnettleseren. Dette vil la deg se endringene dine mens du jobber med dem.

Når siden er åpen, kan du for eksempel endre tittelen i Index-HTML-filen fra "Weed App" til "Flexbox" og lagre siden. Live-oppdateringen vil vise endringene dine umiddelbart i nettleseren.

Du kan også legge til mer tekst på siden, for eksempel "Flexbox-kurs", og se hvordan teksten oppdateres dynamisk, uten at du trenger å laste inn siden manuelt. Dette sanntidsforhåndsvisningen gjør arbeidet mye enklere.

Flexbox-eksemplene vil bli videre bearbeidet i neste steg i Index-HTML. Her vil vi designe oppsettet med CSS og opprette flexbox-containerne. Se frem til de kommende videoene, der vi vil fordype oss i Flexbox-teknikkene.

Oppsummering

I denne veiledningen har du lært hvordan man setter opp et enkelt prosjekt for å jobbe med CSS Flexbox. Du har forstått grunnleggende om prosjektstrukturen, forberedt Index-HTML-filen og brukt den lokale utviklingsserveren. Dette er de første stegene på veien mot å mestre Flexbox.