Flexbox i CSS & HTML: Opsætning af det initiale projekt

I denne vejledning lærer du, hvordan du forbereder dit projekt til at arbejde med CSS Flexbox. Det er vigtigt at have et solidt fundament, før du dykker dybere ned i Flexbox-layoutteknikkerne. Vi bruger Visual Studio Code til udvikling, men du kan også vælge en simpel teksteditor og en browser. I de følgende trin opretter vi et simpelt projekt, der vil hjælpe dig med at forstå og anvende Flexbox.

Vigtigste erkendelser

• Brug af en udviklingsserver gør det nemmere at arbejde på dine projekter.
• Du kan arbejde uden frameworks for at lære grundlagene i JavaScript og CSS.
• Index-HTML-filen er omdrejningspunktet i dit projekt, hvorfra du vil arbejde.

Trin-for-trin-guide

Begynd med at åbne en terminal i Visual Studio Code eller et andet program efter eget valg. Sørg for, at Node.js er installeret, inden du fortsætter. Det er afgørende for at køre NPM-kommandoer.

Nu kan du bruge NPM-pakken til projektstrukturering. Indtast kommandoen npx create-v i terminalen for at starte oprettelsesprocessen for dit projekt. Du vil blive bedt om at downloade pakken. Bekræft dette.

Derefter angiv navnet på dit projekt. Jeg anbefaler simpelthen at kalde det "flexbox", da emnet netop omhandler det. Når du har angivet navnet, vil du blive bedt om at vælge et UI-framework. Vælg i dette tilfælde "Vanilla JavaScript", da vi ikke vil bruge specifikke frameworks.

I næste trin vil du blive spurgt, om du vil bruge TypeScript. Her er det også bedst at vælge "nej" for at gøre det enkelt og fokusere på kernteknologierne.

Nu er du næsten færdig. Du skal bare skifte til mappen for dit nye projekt. Dette gøres med kommandoen cd flexbox. Derved navigerer du til mappen, der lige er oprettet.

Kør derefter kommandoen npm install i terminalen. Dette vil installere alle nødvendige pakker til dit projekt.

Når det er færdigt, skal du starte den lokale udviklingsserver med npm run dev. Dette åbner dit projekt og gør det tilgængeligt på en lokal server.

Nu kan du se på den genererede Index-HTML-fil, som befinder sig i din projektmappe. Denne fil er den vigtigste del af dit projekt, hvor du vil oprette al din indhold og struktur.

Næste step er at slette standard-scriptet, som er blevet genereret til projektet. Vi behøver ikke at bruge skriptet main.js lige fra starten, så bare slet det. Du kan også fjerne stylesheetet style.css, da vi først vil administrere alt i Index-HTML-filen.

I Index-HTML'en vil vi opbygge vores Flexbox-containerstruktur. Vi har brug for en overordnet container, der igen vil indeholde nogle underordnede containere. Dette er en grundlæggende struktur, som vi har brug for til Flexbox.

For at se dine ændringer i browseren, åbn Chrome og gå til http://localhost:3000. Når du starter udviklingsserveren, vil du få vist URL'en, hvorfra du kan åbne din Index-HTML-fil.

Jeg anbefaler, at du bruger kontroltasten (eller Command på Mac) når du åbner links i browseren, så de åbner direkte i standardbrowseren. På den måde kan du holde øje med dine ændringer.

Når siden er åben, kan du f.eks. ændre titlen i Index-HTML fra "Weed App" til "Flexbox" og gemme siden. Live-opdateringen bringer dine ændringer straks til browseren.

Du kan også tilføje yderligere tekst til siden, f.eks. "Flexbox-kursus", og se, hvordan teksten dynamisk opdateres, uden at du manuelt behøver at genindlæse siden. Denne realtidsforhåndsvisning gør arbejdet meget lettere.

Flexbox-eksemplerne vil blive yderligere bearbejdet i index-HTML i næste trin. Her vil vi designe layoutet med CSS og oprette Flexbox-containere. Glæd dig til de kommende videoer, hvor vi vil uddybe Flexbox-teknikkerne.

Resumé

I denne vejledning har du lært, hvordan man opsætter et simpelt projekt til at arbejde med CSS Flexbox. Du har forstået grundlaget for projektstrukturen, forberedt index-HTML-filen og brugt den lokale udviklingsserver. Dette er de første skridt på din vej til at mestre Flexbox.