Flexbox in CSS & HTML: Opzetten van het initiële project

In deze handleiding leer je hoe je je project voorbereidt om met CSS Flexbox te werken. Het is belangrijk om een solide basis te hebben voordat je dieper in de Flexbox-layouttechnieken duikt. We gebruiken Visual Studio Code voor de ontwikkeling, maar je kunt ook een eenvoudige teksteditor en een browser kiezen. In de volgende stappen zetten we een eenvoudig project op dat je zal helpen om Flexbox te begrijpen en toe te passen.

Belangrijkste inzichten

• Het gebruik van een ontwikkelingsserver vergemakkelijkt het werken aan je projecten.
• Je kunt zonder frameworks werken om de basisbegrippen van JavaScript en CSS te leren.
• Het index-HTML-bestand is het centrale punt in je project van waaruit je zult werken.

Stapsgewijze Handleiding

Open eerst een terminal in Visual Studio Code of een ander programma naar keuze. Zorg ervoor dat Node.js is geïnstalleerd voordat je verder gaat. Dat is essentieel om NPM-opdrachten uit te voeren.

Je kunt nu het NPM-pakket gebruiken voor het structureren van je project. Typ in de terminal de opdracht npx create-v in om het creatieproces voor je project te starten. Je wordt gevraagd of het pakket gedownload moet worden. Bevestig dit.

Voer vervolgens de naam voor je project in. Ik raad aan om het gewoon "flexbox" te noemen, aangezien het onderwerp daar precies over gaat. Nadat je de naam hebt ingevoerd, wordt je gevraagd naar een UI-framework. Kies in dit geval "Vanilla JavaScript", aangezien we geen specifieke frameworks zullen gebruiken.

In de volgende stap wordt je gevraagd of je TypeScript wilt gebruiken. Ook hier is het raadzaam om "nee" te kiezen, om het eenvoudig te houden en je te concentreren op de kerntechnologieën.

Je bent nu bijna klaar. Je hoeft alleen nog maar naar de directory van je nieuwe project te navigeren. Dit doe je met de opdracht cd flexbox. Zo kom je in de zojuist aangemaakte map.

Voer dan de opdracht npm install uit in de terminal. Hiermee worden alle vereiste pakketten voor je project geïnstalleerd.

Zodra dat is voltooid, start je de lokale ontwikkelingsserver met npm run dev. Hiermee wordt je project geopend en beschikbaar gesteld op een lokale server.

Je kunt nu een kijkje nemen in het gegenereerde index-HTML-bestand dat zich in je projectdirectory bevindt. Dit bestand is het belangrijkste onderdeel van je project, waarin je al je inhoud en structuren zult opbouwen.

Wat we vervolgens zullen doen, is het standaardscript verwijderen dat voor het project is gegenereerd. We hoeven het script main.js niet meteen te gebruiken, dus gewoon verwijderen. Ook het stylesheet style.css kun je weghalen, aangezien we in eerste instantie alles in het index-HTML-bestand willen beheren.

In het index-HTML-bestand zullen we onze Flexbox-containerstructuur opbouwen. We hebben een hoofdcontainer nodig die op zijn beurt enkele subcontainers zal bevatten. Dit is een basisstructuur die we nodig hebben voor Flexbox.

Om je wijzigingen in de browser te kunnen zien, open je Chrome en ga je naar http://localhost:3000. Wanneer je de ontwikkelingsserver start, wordt de URL weergegeven waarmee je je index-HTML-bestand kunt openen.

Ik raad je aan om bij het openen van links in de browser de control-toets (of Command op Mac) te gebruiken om ze direct in de standaardbrowser te openen. Zo houd je je wijzigingen in de gaten.

Zodra de pagina open is, kun je bijvoorbeeld de titel in de index-HTML van "Weed App" naar "Flexbox" wijzigen en de pagina opslaan. De live-update brengt je wijzigingen direct naar de browser.

Je kunt ook meer tekst aan de pagina toevoegen, bijvoorbeeld "Flexbox cursus", en zien hoe de tekst dynamisch wordt bijgewerkt zonder dat je handmatig de pagina opnieuw hoeft te laden. Deze realtime voorvertoning maakt het werk enorm makkelijker.

De flexbox-voorbeelden zullen in de volgende stap verder worden bewerkt in het index-HTML-bestand. Hier gaan we dan de layout vormgeven met CSS en de flexbox-containers creëren. Kijk uit naar de komende video's waarin we de flexbox-technieken zullen verdiepen.

Samenvatting

In deze handleiding heb je geleerd hoe je een eenvoudig project instelt om met CSS Flexbox te werken. Je hebt de basisprincipes voor de projectstructuur herkend, het index-HTML-bestand voorbereid en de lokale ontwikkelingsserver gebruikt. Dit zijn de eerste stappen op jouw pad om Flexbox onder de knie te krijgen.