Jouw Complete Tailwind CSS Primer

CSS-frameworks hebben de manier waarop ontwikkelaars webontwikkeling benaderen veranderd door het bieden van vooraf gebouwde componenten en stijlen. Veel frameworks hebben echter een eigenzinnig ontwerp en opgeblazen stylesheets die aanpassing beperken.

Tailwind CSS hanteert een andere aanpak. Als een utility-first CSS-framework biedt het low-level hulpklassen die ontwikkelaars in staat stellen om aangepaste ontwerpen te maken zonder beperkt te worden door vooraf gedefinieerde componenten.

Met meer dan 675.375 websites die Tailwind CSS gebruiken en meer dan 8,61 miljoen afhankelijke repositories, is Tailwind meer geworden dan alleen maar een ander CSS-framework.

In dit artikel gaan we de concepten van Tailwind CSS, het instellen en praktisch gebruik behandelen, zodat je kunt beginnen met het bouwen van je prachtige aangepaste UI’s zonder CSS te leren.

Laten we beginnen!

Wat Is Tailwind CSS?

Tailwind CSS is een zeer aanpasbaar, low-level CSS framework dat een reeks hulpprogramma klassen biedt om snel aangepaste gebruikersinterfaces te bouwen. Het is voor het eerst ontwikkeld en uitgebracht door Adam Wathan in 2017.

Sindsdien heeft Tailwind een opwaartse trend gezien in websites die gebouwd zijn met de Tailwind-bibliotheek.

Hoewel de groei momenteel lijkt te zijn vertraagd volgens de BuiltWith-grafieken, wordt het framework regelmatig bijgewerkt met nieuwe functies, klassen en meer.

Volgens de technologiestapelgegevens van BuiltWith gebruiken alleen al in de VS meer dan 100.000 websites Tailwind om hun gebruikersinterfaces te bouwen, samen met het VK, Indonesië, Duitsland en andere landen die tot de top 10 gebruikers van deze bibliotheek behoren.

De kernfilosofie achter Tailwind CSS is om ontwikkelaars te voorzien van een set bouwblokken in plaats van kant-en-klare componenten. Deze bouwblokken zijn kleine, enkelvoudige hulpprogramma-klassen die gecombineerd kunnen worden om complexe en responsieve lay-outs te creëren.

Deze aanpak biedt meer flexibiliteit en controle over het ontwerp, omdat je elk aspect van je UI kunt aanpassen zonder te worden beperkt door de vooringenomen stijlen van het framework.

Wat Maakt Tailwind CSS Anders?

Traditioneel schrijven ontwikkelaars, wanneer ze met CSS werken, aangepaste klassen in afzonderlijke stylesheets om hun HTML-elementen vorm te geven. Deze aanpak kan leiden tot grote CSS-bestanden en het onderhouden en bijwerken van stijlen in een project uitdagend maken.

Tailwind biedt een uitgebreide set hulpprogramma-klassen die rechtstreeks op HTML-elementen kunnen worden toegepast. Deze klassen zijn zeer samenstelbaar, waardoor ontwikkelaars complexe, aangepaste ontwerpen kunnen bouwen zonder een enkele regel aangepaste CSS te schrijven.

Bijvoorbeeld, in plaats van het schrijven van een aangepaste CSS-klasse om een knop te stijlen, kun je de vooraf gedefinieerde klassen van Tailwind gebruiken zoals dit:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Knop
</button>

Deze aanpak heeft verschillende voordelen:

1. Snellere Ontwikkeling: De vooraf gedefinieerde klassen helpen ontwikkelaars snel te bouwen en te itereren aan ontwerpen zonder voortdurend te wisselen tussen HTML en CSS-bestanden.
2. Consistente Stijl: Tailwind biedt een gestandaardiseerde set van klassen, wat helpt om consistentie in design te behouden over een project.
3. Kleinere CSS-bestanden: Omdat stijlen rechtstreeks in de HTML worden toegepast, is er geen behoefte aan grote, aangepaste CSS-bestanden.
4. Makkelijker Onderhoud: Met stijlen gedefinieerd in de HTML, is het makkelijker om te zien hoe veranderingen een specifiek element beïnvloeden zonder door aparte CSS-bestanden te hoeven zoeken.
5. Betere Prestaties: Vele moderne stijlsystemen zoals Emotion of Styled Components vertrouwen op javascript (meestal tijdens runtime, langzamere prestaties) om je css te renderen. Tailwind is uiteindelijk gewoon CSS.

Tailwind heeft mij een complete stack-ontwikkelaar gemaakt ?”
— Boris Lepikhin

Aan De Slag Met Tailwind CSS

Voordat we naar voorbeelden gaan, laten we een basisproject opzetten met Tailwind CSS. We gaan ervan uit dat je enige bekendheid hebt met HTML en CSS. Ook moet je npm geïnstalleerd hebben op je systeem. Zodra je klaar bent, kun je verder gaan!

Maak een nieuwe map voor je project en navigeer ernaar:

mkdir mijn-tailwind-project
cd mijn-tailwind-project

Start een nieuw npm-project en installeer Tailwind CSS:

npm init -y
npm install -D tailwindcss

Maak een tailwind.config.js bestand aan:

npx tailwindcss init

Maak een input.css-bestand en voeg het volgende toe:

@tailwind base;
@tailwind components;
@tailwind utilities;

Werk je tailwind.config.js bestand bij om je input.css te verwerken:

module.exports = {
  inhoud: ["./src/**/*.{html,js}"],
  thema: {
    uitbreiden: {},
  },
  plugins: [],
}

Maak een index.html-bestand in een src-map en voeg het volgende toe:

<!DOCTYPE html>
<html>
  <head>
    <link href="/dist/output.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-3xl font-bold text-center mt-4">Welkom bij Tailwind CSS!</h1>
  </body>
</html>

Bouw je CSS:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Nu, wanneer je index.html opent in je browser, zou je een grote, vetgedrukte kop moeten zien die zegt Welkom bij Tailwind CSS!

Gefeliciteerd, je hebt je eerste Tailwind-project opgezet!

Tailwind CSS Hulpclassen

Tailwind CSS biedt een breed scala aan hulpprogrammaklassen die verschillende aspecten van stijlen dekken, zoals lay-out, tussenruimte, typografie, kleuren en meer. Deze klassen volgen een naamconventie die het intuïtief maakt om hun doel te begrijpen.

Laten we enkele veelgebruikte hulpklassen in Tailwind CSS verkennen.

Tailwind Indelingsklassen

• flex: Past een flex container toe.
• grid: Past een grid container toe.
• block: Toont een element als een blokniveau-element.
• inline: Toont een element als een inline-niveau element.

Voorbeeld:

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Tailwind Afstandsklassen

• m-{size}: Past marge toe aan alle kanten.
• p-{size}: Past opvulling toe aan alle kanten.
• mx-{size}: Past marge toe aan de linker- en rechterkant.
• py-{size}: Past opvulling toe aan de boven- en onderkant.

Voorbeeld:

<div class="m-4 p-2">
  Inhoud met marge en opvulling
</div>

Tailwind Typografieklassen

• text-{size}: Stelt de lettergrootte in.
• font-{weight}: Stelt het lettergewicht in.
• text-{color}: Stelt de tekstkleur in.
• uppercase, lowercase, capitalize: Transformeert teksthoofdletters.

Voorbeeld:

<p class="text-lg font-bold text-blue-500 uppercase">
  Stijlvolle Tekst
</p>

Tailwind Kleuren

Tailwind CSS biedt een standaard kleurenpalet dat kan worden aangepast. Kleuren worden gedefinieerd door een combinatie van de kleurnaam en schaduw.

• bg-{color}-{shade}: Stelt de achtergrondkleur in.
• text-{color}-{shade}: Stelt de tekstkleur in.
• border-{color}-{shade}: Stelt de randkleur in.

Voorbeeld:

<button class="bg-blue-500 text-white border-2 border-blue-700">
  Knop
</button>

Tailwind Classes Voor Responsief Ontwerp

Tailwind maakt het eenvoudig om responsieve ontwerpen te creëren door responsieve varianten voor de meeste van zijn hulpprogrammaklassen te bieden. Deze varianten stellen je in staat om verschillende stijlen voor verschillende schermgroottes te specificeren.

Tailwind gebruikt een mobiel-als-eerste benadering, waar de basisstijlen worden toegepast op alle schermformaten, en vervolgens worden grotere schermformaten gericht met behulp van responsieve prefixes:

• sm: Past stijlen toe op kleine schermen en groter (640px en hoger).
• md: Past stijlen toe op middelgrote schermen en groter (768px en hoger).
• lg: Past stijlen toe op grote schermen en groter (1024px en hoger).
• xl: Past stijlen toe op extra grote schermen en groter (1280px en hoger).
• 2xl: Past stijlen toe op extra-extra grote schermen en groter (1536px en hoger).

Om deze responsieve varianten te gebruiken, prefix je simpelweg de hulpklasse met de gewenste schermgrootte:

<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">
  <!-- Inhoud -->
</div>

In dit voorbeeld zal de div een blauwe achtergrond hebben op kleine schermen, een groene achtergrond op middelgrote schermen en een rode achtergrond op grote schermen.

Je kunt ook responsieve varianten gebruiken om de lay-out van je elementen te beheren:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 lg:w-1/3">Kolom 1</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Kolom 2</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Kolom 3</div>
</div>

Hier zullen de kolommen verticaal worden gestapeld op kleine schermen, weergegeven in twee kolommen op middelgrote schermen en in drie kolommen op grote schermen.

Aanpassen Van De Standaardklassen Van Tailwind CSS

Een van de sterke punten van Tailwind CSS zijn de aanpassingsopties. Je kunt de standaardconfiguratie eenvoudig aanpassen om aan de ontwerpvereisten van je project te voldoen. Het tailwind.config.js bestand stelt je in staat om de standaardinstellingen uit te breiden of te overschrijven.

Hier zijn een paar veelvoorkomende aanpassingsopties. Je kunt elk onderdeel van Tailwind volledig aanpassen, dus dit is zeker geen uitputtende lijst.

Kleuren

Tailwind CSS biedt standaard een rijke kleurenpalet, maar je kunt deze eenvoudig aanpassen om aan te sluiten bij de branding of ontwerpvereisten van je project. Het tailwind.config.js bestand stelt je in staat om de standaard kleurenpalet uit te breiden of te overschrijven. Om aangepaste kleuren toe te voegen, kun je de extend-eigenschap binnen het colors-object gebruiken:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#ff5a5f',
        'brand-secondary': '#484848',
        'brand-accent': '#ffcc00',
      },
    },
  },
}

In dit voorbeeld hebben we drie aangepaste kleuren toegevoegd: brand-primary, brand-secondary en brand-accent.

Deze kleuren kunnen nu worden gebruikt met hulpprogrammaklassen zoals bg-brand-primary, text-brand-secondary, border-brand-accent, etc. Je kunt ook bestaande kleurtinten wijzigen of nieuwe tinten toevoegen aan het standaard kleurenpalet zoals hier:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          '100': '#e6f0ff',
          '200': '#c3d9ff',
          '300': '#a1c2ff',
          '400': '#7eabff',
          … en zo voort …
        },
      },
    },
  },
}

Lettertypefamilie

Tailwind CSS gebruikt standaard een lettertype familie stack, maar net als bij kleuren, kun je deze standaarden wijzigen om aan te sluiten bij de typografische stijl van je project.

In het tailwind.config.js-bestand kun je de standaard lettertypefamilie uitbreiden of vervangen. Om aangepaste lettertypefamilies toe te voegen, gebruik je de extend-eigenschap binnen het fontFamily-object:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
        mono: ['Fira Code', 'monospace'],
      },
    },
  },
}

Je kunt ook het standaard lettertype volledig vervangen door de extend eigenschap weg te laten:

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      'body': ['Open Sans', 'sans-serif'],
      'heading': ['Montserrat', 'sans-serif'],
    },
  },
}

Responsieve Breekpunten

Tailwind CSS biedt standaard een responsief ontwerpsysteem, maar je kunt het verder aanpassen om te voldoen aan de specifieke breakpoints en responsieve vereisten van je project.

Door het aanpassen van het screens-object in het tailwind.config.js-bestand, kun je aangepaste breekpunten definiëren en verschillende stijlen toepassen op basis van schermformaten.

Bijvoorbeeld, stel dat je een unieke breekpunt hebt bij 1440px waar je specifieke stijlen wilt toepassen:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1440px',
    },
  },
}

Met deze aangepaste breekpunt gedefinieerd, kun je responsieve hulpprogramma klassen zoals xl:text-lg, xl:flex, xl:w-1/2, etc., gebruiken om stijlen specifiek toe te passen voor schermen breder dan 1440px.

Ruimte

Tailwind CSS biedt een uitgebreide set van afstandswaarden voor marges, opvullingen en andere afstandsgerelateerde hulpmiddelen. Je kunt deze waarden aanpassen om aan de lay-outvereisten van je project te voldoen. Om aangepaste afstandswaarden toe te voegen, gebruik je de eigenschap uitbreiden binnen het afstandsobject:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

Integratie Van Bibliotheken Van Derden

Tailwind CSS integreert met populaire frontend-bibliotheken en -frameworks zoals React, Vue en Angular. Wanneer je werkt met deze bibliotheken, kun je de hulpprogrammaklassen van Tailwind gebruiken om je componenten te stylen, waardoor je consistente en onderhoudbare gebruikersinterfaces creëert. Bijvoorbeeld, in een React-component kun je Tailwind-hulpprogrammaklassen direct toepassen op de JSX-elementen:

import React from 'react';

const Card = () => {
  return (
    <div className="bg-white shadow-md rounded-lg p-6">
      <h2 className="text-2xl font-bold mb-4">Kaart Titel</h2>
      <p className="text-gray-600">Inhoud van de kaart komt hier...</p>
    </div>
  );
};

export default Card;

Deze multi-framework aanpak maakt het heel gemakkelijk om het beste van alle werelden samen te brengen, waardoor je met bijna geen moeite een prachtige app kunt creëren.

Een Eenvoudige Applicatie Bouwen In Tailwind CSS

Stel je voor dat je een eenvoudige landingspagina bouwt voor een fictief online cursusplatform genaamd LearnHub waarbij je Tailwind gebruikt om de hele pagina te stylen.

Stap 1: De HTML-structuur Opzetten

Laten we eerst de basis HTML-structuur voor onze landingspagina creëren:

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="output.css" rel="stylesheet">
  <title>LearnHub - Online Cursusplatform</title>
</head>
<body>
  <header>
    <!-- Navigatiemenu komt hier -->
  </header>

  <main>
    <!-- Hoofdinhoud komt hier -->
  </main>

  <footer>
    <!-- Voettekst komt hier -->
  </footer>
</body>
</html>

In deze stap hebben we de basisstructuur van ons HTML-document opgezet. We hebben de <head> sectie waar we de benodigde meta tags opnemen en linken naar ons CSS-bestand (output.css). In de <body>, hebben we de <header>, <main>, en <footer> secties waar we onze inhoud zullen toevoegen.

Stap 2: Het Navigatiemenu Maken

Laten we nu een eenvoudig navigatiemenu toevoegen aan de <header> sectie met behulp van Tailwind CSS utility classes:

<header class="bg-blue-600 text-white py-4">
  <nav class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">LearnHub</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="hover:text-blue-200">Cursussen</a></li>
      <li><a href="#" class="hover:text-blue-200">Prijzen</a></li>
      <li><a href="#" class="hover:text-blue-200">Over</a></li>
    </ul>
  </nav>
</header>

Hier is wat elke klasse doet:

• bg-blue-600: Stelt de achtergrondkleur van de kop in op een tint blauw.
• text-white: Stelt de tekstkleur in op wit.
• py-4: Voegt vulling toe aan de boven- en onderkant van de kop.
• container mx-auto: Centreert het navigatiemenu horizontaal.
• flex justify-between items-center: Gebruikt flexbox om het logo en de menu-items gelijkmatig te verdelen en verticaal uit te lijnen.
• text-2xl font-bold: Maakt de tekst van het logo groter en vetgedrukt.
• flex space-x-4: Voegt ruimte toe tussen de menu-items met behulp van flexbox.
• hover:text-blue-200: Verandert de tekstkleur naar een lichtere tint blauw wanneer eroverheen wordt gehoverd.

Stap 3: Het Toevoegen Van De Hoofdinhoud

Laten we wat inhoud toevoegen aan de <main> sectie van onze landingspagina:

<main class="container mx-auto mt-8">
  <section class="bg-gray-100 rounded-lg p-6">
    <h1 class="text-3xl font-bold mb-4">Welkom bij LearnHub</h1>
    <p class="text-gray-700 mb-6">Ontdek een wereld van kennis met onze online cursussen.</p>
    <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Begin Nu</a>
  </section>

  <section class="mt-8">
    <h2 class="text-2xl font-bold mb-4">Aanbevolen Cursussen</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Course cards will go here -->
    </div>
  </section>
</main>

Hier is wat elke klasse doet:

• container mx-auto: Centreert de hoofdinhoud horizontaal.
• mt-8: Voegt marge toe aan de bovenkant van de hoofdinhoud.
• bg-gray-100 rounded-lg p-6: Voegt een lichtgrijze achtergrond toe, rondt de hoeken af en voegt padding toe aan de welkomstsectie.
• text-3xl font-bold mb-4: Maakt de koptekst groter, vetgedrukt en voegt marge toe aan de onderkant.
• text-gray-700 mb-6: Zet de tekstkleur op een donkergrijs en voegt een marge toe aan de onderkant van de paragraaf.
• bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700: Stijlt de Start Met Leren knop met een blauwe achtergrond, witte tekst, padding, afgeronde hoeken, en een donkerdere blauwe achtergrond bij hover.
• text-2xl font-bold mb-4: Maakt de koptekst voor Uitgelichte Cursussen groter, vetgedrukt en voegt marge toe aan de onderkant.
• grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4: Creëert een responsieve grid lay-out voor de cursuskaarten. Het toont één kolom op kleine schermen, twee kolommen op middelgrote schermen en drie kolommen op grote schermen, met een opening tussen de kaarten.

Als je de koptekst en de hoofdcode samenvoegt, moet je de volgende uitvoer hebben:

Stap 4: De Voettekst Toevoegen

Laten we tenslotte een eenvoudige voettekst toevoegen aan onze landingspagina:

<footer class="bg-gray-800 text-white py-4 mt-8">
  <div class="container mx-auto text-center">
    <p>&copy; 2023 LearnHub. Alle rechten voorbehouden.</p>
  </div>
</footer>

Hier is wat elke klasse doet:

• bg-gray-800 text-white: Stelt de achtergrondkleur van de voettekst in op donkergrijs en de tekstkleur op wit.
• py-4: Voegt opvulling toe aan de boven- en onderkant van de voettekst.
• mt-8: Voegt een marge toe aan de bovenkant van de voettekst.
• container mx-auto: Centreert de inhoud van de voettekst horizontaal.
• text-center: Centreert de tekst binnen in de voettekst.

Alles Samenvoegen

Hier is de uiteindelijke code samengevoegd:

<p><!DOCTYPE html><br />
<html lang="nl"><br />
 <head><br />
   <meta charset="UTF-8" /><br />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="output.css" rel="stylesheet" />
   <title>LearnHub - Online Cursusplatform</title><br />
 </head><br />
 <body></p>
<header class="bg-blue-600 py-4 text-white">
<nav class="container mx-auto flex items-center justify-between">
       <a href="#" class="text-2xl font-bold">LearnHub</a></p>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-200">Cursussen</a></li>
<li><a href="#" class="hover:text-blue-200">Prijzen</a></li>
<li><a href="#" class="hover:text-blue-200">Over</a></li>
</ul>
</nav>
</header>
<p>   <main class="container mx-auto mt-8"></p>
<section class="rounded-lg bg-gray-100 p-6">
<h2 id="h2_welkom-bij-learnhub" class="mb-4 text-3xl font-bold">Welkom bij LearnHub</h2>
<p class="mb-6 text-gray-700">Ontdek een wereld van kennis met onze online cursussen.</p>
<p>       <a href="#" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Begin Nu</a><br />
     </section>
<section class="mt-8">
<h2 id="h2_aanbevolen-cursussen" class="mb-4 text-2xl font-bold">Aanbevolen Cursussen</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
         <!-- Course cards will go here -->
       </div>
</section>
<p>   </main></p>
<footer class="mt-8 bg-gray-800 py-4 text-white">
<div class="container mx-auto text-center">
<p>&copy; 2023 LearnHub. Alle rechten voorbehouden.</p>
</p>
</div>
</footer>
<p> </body><br />
</html></p>

Om de output aan gebruikers te tonen, moet je Tailwind CSS correct hebben ingesteld in je project. Zorg ervoor dat je de eerder genoemde installatiestappen hebt gevolgd, inclusief het aanmaken van het tailwind.config.js bestand en het verwerken van je CSS met Tailwind.

Zodra je Tailwind CSS hebt ingesteld, kun je deze code opslaan in een HTML-bestand (bijv. index.html) en openen in een webbrowser. De browser zal de landingspagina weergeven met de stijlen toegepast met behulp van Tailwind CSS-hulpprogramma klassen. Als je Tailwind gewoon wilt testen, kun je altijd gebruik maken van Tailwind Play, een handig klein hulpmiddel van Tailwind waar je kunt spelen met de verschillende klassen.

En daar heb je het! We hebben een eenvoudige landingspagina gemaakt voor ons fictieve online cursusplatform met behulp van Tailwind CSS utility classes.

Waar Ga Je Nu Heen?

Nu je de kracht en flexibiliteit van Tailwind CSS hebt gezien, weet je dat de mogelijkheden eindeloos zijn. De flexibele en aanpasbare aard kan je helpen bij het bouwen van alles van eenvoudige landingspagina’s tot complexe webapplicaties terwijl je een schoon en consistent ontwerp behoudt.

Hier zijn enkele ideeën om je op weg te helpen:

• Bouw een portfolio website: Laat je vaardigheden en projecten zien met een indrukwekkende portfolio.
• Maak een blog: Deel je gedachten en ideeën met de wereld met behulp van een mooie en functionele blog ontworpen met Tailwind.
• Ontwikkel een webapplicatie: Tailwind CSS is perfect voor het bouwen van gebruikersinterfaces voor webapplicaties van allerlei soorten.

Ongeacht wat je bouwt, Tailwind CSS kan je helpen een prachtige en goed functionerende website te creëren.

En als het gaat om het hosten van je creatie, overweeg dan een betrouwbare en schaalbare oplossing zoals DreamHost’s VPS-services om ervoor te zorgen dat je website soepel en efficiënt werkt.

Begin met het bouwen van prachtige gebruikersinterfaces met minimale CSS-kennis!

Ian Hernandez