Projecten bouwen is erg belangrijk voor het leren hoe je code schrijft. Als je een project maakt, breedt je je porftfolio uit en leert je hoe je je vaardigheden kunt toepassen in nieuwe situaties.

We hebben net een 2-uurscursus uitgebracht op de YouTube-kanaal van freeCodeCamp.org Spanish die je stap voor stap doorbrengt met het bouwen van 3 projecten met HTML, CSS en JavaScript. Je zal je vaardigheden oefenen door een responsieve navigatiebalk met keuzemenus, een schuifregelaar en een landingspagina met een aangepaste modal te maken.

Als je Spaanstalige vrienden hebt, zijn je welkom om de Spaanse versie van dit artikel met hen te delen.

Jordan Alexander Cruz Garcia geeft deze cursus. Hij is een webontwikkelaar die het delen van zijn kennis en het onderwijzen van anderen over de prachtige wereld van CSS erg waardoor vindt.

💡 Tip: Let op: de cursus focus op HTML en CSS, maar vereist ook basisvaardigheden in JavaScript voor de implementatie van interactiviteit.

HTML, CSS en JavaScript

HTML staat voor HyperText Markup Language en CSS voor Cascading Style Sheets. HTML biedt de structuur en inhoud van een website, terwijl CSS bepaalt hoe de inhoud wordt weergegeven. Het beheert de visuele aspecten van de website, zoals lettertypen, kleuren, lay-outs, ruimte en animaties.

Met CSS kun je gemakkelijk verschillende stijlen en lay-outs voor verschillende schermgroottes maken, zodat je website er goed uitziet op desktopcomputers, tablets en mobiele apparaten.

💡 Tip: Websites die zich aanpassen aan verschillende schermgroottes worden “responsieve websites” genoemd.

We schrijven CSS meestal in een externe bestand, wat we de “stijlbestand” noemen. Daarna linken we dit bestand aan het HTML-bestand, zodat alle stijlen op de HTML-elementen worden toegepast op basis van CSS-selectors en eigenschappen.

Het scheiden van de inhoud van de website van haar presentatie is erg handig. Het resulteert in een meer onderhoudsbaar projectstructuur en een meer efficiënte rendereringproces, want browsers kunnen de structuur sneller renderen, terwijl CSS-stijlen in de achtergrond worden gedownload.

In principe is CSS een essentieel gereedschap voor het maken van de mooie, visuele en gebruiksvriendelijke websites die we nu zien.

JavaScript voegt interactiviteit aan de website toe. Het maakt eenvoudige elementen interactief om engagerende gebruikerservaringen te creëren.

HTML, CSS en JavaScript-projecten in het Spaans

Geweldig. Nu dat je meer over HTML, CSS en JavaScript weet, laten we kijken naar de projecten die je tijdens het cursus zal bouwen.

Project 1: Navigatiebalk

Je zal beginnen met het bouwen van een navigatiebalk met dropdown-menus. Deze navigatiebalk zal responsief zijn, dus ze zal expanderen of krimpen om de grootte van het scherm te passeren. Als het scherm te klein is, zal ze automatisch omgaan in een zijbalk.

💡 Tip: De belangrijkste opties zullen altijd getoond worden. Als de gebruiker klikt op “Over” of “Projecten”, verschijnt er een keuzemenu met extra opties.

Desktopversie

Hier kunt u de desktopversie zien.

Mobiele versie

Dit is de mobiele versie die u zult zien op kleine apparaten.

💡 Tip: Deze techniek om de navigatiebalk te verbergen en in- en uit te schakelen wordt veel gebruikt om zo veel mogelijk ruimte voor de inhoud te optimaliseren.

Project 2: Slider

Volgens gaat u een slider bouwen met drie posities die veranderen als de gebruiker op de pijlen links of rechts klikt. Elke positie heeft een titel, een korte paragraaf en een cirkelvormig beeld.

💡Tip: Sliders zijn handig voor het delen van gebruikersreacties, citaten en recensies.

Project 3: Landing Page

Tot slot zal u een landingspagina stap voor stap met CSS Grid bouwen.

Als de gebruiker op de knop “Doe mee!” klikt, verschijnt een aangepaste modale dialoog. U zal deze modale dialoog stap voor stap met HTML, CSS en JavaScript implementeren.

Als u klaar bent om uw vaardigheden in HTML, CSS en JavaScript te oefenen, kijk dan op het cursus op de freeCodeCamp.org Spaanse YouTube kanaal:

✍️ Cursus gemaakt door Jordan Alexander Cruz Garcia (AlexCG).