Flexbox i CSS & HTML: Upprättande av det initiala projektet

I denna handledning kommer du att lära dig hur du förbereder ditt projekt för att arbeta med CSS Flexbox. Det är viktigt att ha en solid grund innan du dyker djupare in i Flexbox-layoutteknikerna. Vi använder Visual Studio Code för utvecklingen, men du kan också välja en enkel textredigerare och en webbläsare. I följande steg kommer vi att skapa ett enkelt projekt som hjälper dig att förstå och använda Flexbox.

Viktigaste insikter

• Användningen av en utvecklingsserver underlättar arbetet med dina projekt.
• Du kan arbeta utan ramverk för att lära dig grunderna i JavaScript och CSS.
• Index-HTML-filen är den centrala punkten i ditt projekt, där du kommer att arbeta ifrån.

Steg-för-steg-guide

Börja med att öppna en terminal i Visual Studio Code eller i ett annat program enligt ditt val. Se till att Node.js är installerat innan du fortsätter. Det är avgörande för att köra NPM-kommandon.

Nu kan du använda NPM-paketet för att strukturera ditt projekt. Skriv in kommandot npx create-v i terminalen för att starta skapandeprocessen för ditt projekt. Du kommer att bli ombedd att ladda ner paketet. Bekräfta detta.

Ange sedan namnet på ditt projekt. Jag rekommenderar att helt enkelt kalla det "flexbox", eftersom det är exakt vad guiden handlar om. Efter att du har angett namnet kommer du att bli ombedd att välja ett användargränssnittsramverk. Välj i detta fall "Vanilla JavaScript", eftersom vi inte kommer att använda några specifika ramverk.

I nästa steg kommer du att bli ombedd om du vill använda TypeScript. Även här rekommenderas det att välja "nej" för att hålla det enkelt och fokusera på kärnteknologierna.

Nu är du nästan klar. Du behöver bara byta till katalogen för ditt nya projekt. Det gör du med kommandot cd flexbox. På så sätt kommer du till mappen som just skapades.

Kör sedan kommandot npm install i terminalen. Detta kommer att installera alla nödvändiga paket för ditt projekt.

När detta är klart, starta den lokala utvecklingsservern med npm run dev. Detta öppnar och gör ditt projekt tillgängligt på en lokal server.

Nu kan du titta på den genererade index-HTML-filen som finns i din projektmapp. Denna fil är den viktigaste delen av ditt projekt, där du kommer att skapa all din innehåll och struktur.

Nästa steg är att ta bort standardskriptet som genererades för projektet. Vi behöver inte använda skriptet main.js direkt i början, så bara ta bort det. Du kan också ta bort stilmallen style.css, eftersom vi först vill hantera allt i index-HTML.

I index-HTML kommer vi att bygga vår Flexbox-containerstruktur. Vi behöver en föräldercontainer som i sin tur kommer att innehålla några underordnade containrar. Det är en grundläggande struktur som vi behöver för Flexbox.

För att kunna se dina ändringar i webbläsaren, öppna Chrome och gå till http://localhost:3000. När du startar utvecklingsservern kommer URL:en att visas, vilken du kan använda för att öppna din index-HTML-fil.

Jag rekommenderar att när du öppnar länkar i webbläsaren använder du Kontrolltangenten (eller Command på Mac) för att öppna dem direkt i standardwebbläsaren. På så sätt har du dina ändringar i sikte.

När sidan är öppen kan du till exempel ändra titeln i index-HTML från "Weed App" till "Flexbox" och spara sidan. Uppdateringen visas direkt i webbläsaren.

Du kan också lägga till mer text på sidan, t.ex. "Flexbox Kurs", och se hur texten uppdateras dynamiskt utan att du manuellt behöver ladda om sidan. Denna realtidsgranskning underlättar mycket arbete.

Flexbox-exemplen kommer att fortsätta att bearbetas i index-HTML-filen i nästa steg. Här kommer vi att designa layouten med CSS och skapa flexbox-container. Var spänd på de kommande videorna där vi kommer att fördjupa oss i flexbox-teknikerna.

Summering

I denna handledning har du lärt dig hur man skapar ett enkelt projekt för att arbeta med CSS Flexbox. Du har förstått grunderna i projektstrukturen, förberett index-HTML-filen och använt den lokala utvecklingsservern. Detta är de första stegen på din väg att bemästra flexbox.