HOE

Hoe naar huis

Menu's

Pictogrambalk Menupictogram Accordeon Tabbladen Verticale tabbladen Tabkoppen Tabbladen op volledige pagina Beweeg tabbladen Bovenste navigatie Responsieve Topnav Navigatiebalk met pictogrammen Zoekmenu Zoekbalk Vaste zijbalk Paginanavigatie Responsieve zijbalk Navigatie op volledig scherm Off-Canvas-menu Beweeg de Sidenav-knoppen Zijbalk met pictogrammen Horizontaal scrollmenu Verticaal menu Bodemnavigatie Responsieve bodemnavigatie Onderste rand navigatielinks Rechts uitgelijnde menulinks Gecentreerde menulink Menukoppelingen met gelijke breedte Vast menu Schuif de balk omlaag bij scrollen Verberg navigatiebalk op scrollen Navbar verkleinen bij scrollen Sticky Navbar Navigatiebalk op afbeelding Vervolgkeuzemenu's voor zweven Klik op vervolgkeuzelijsten Trapsgewijze vervolgkeuzelijst Vervolgkeuzelijst in Topnav Dropdown in Sidenav Vervolgkeuzelijst Resp Navbar Subnavigatiemenu Drop-up Mega-menu Mobiel menu Gordijnmenu Samengevouwen zijbalk Samengevouwen zijpaneel Paginering Paneermeel Knop groep Verticale knopgroep Sticky Social Bar Pil navigatie Responsieve koptekst

Afbeeldingen

Diavoorstelling Galerij met diavoorstelling Modale afbeeldingen Lichtbak Responsief afbeeldingsraster Afbeeldingsraster Tabblad Galerij Afbeeldingsoverlay vervagen Dia overlay afbeelding Afbeelding Overlay Zoom Titel afbeelding overlay Afbeeldingsoverlay-pictogram Afbeeldingseffecten Zwart-wit afbeelding Afbeeldingstekst Afbeeldingstekstblokken Transparante afbeeldingstekst Afbeelding op volledige pagina Formulier op afbeelding Heldenafbeelding Achtergrondafbeelding vervagen Wijzig Bg bij scrollen Afbeeldingen naast elkaar Afgeronde afbeeldingen Avatar-afbeeldingen Responsieve afbeeldingen Afbeeldingen centreren Miniaturen Rand rond afbeelding Ontmoet het team Kleverige afbeelding Een afbeelding spiegelen Schud een afbeelding Portfolio Galerij Portfolio met filtering Afbeelding zoomen Afbeelding vergrootglas Schuifregelaar voor beeldvergelijking favicon

Toetsen

Waarschuwingsknoppen Overzichtsknoppen Split-knoppen Geanimeerde knoppen Vervagende knoppen Knop op afbeelding Knoppen voor sociale media Lees meer Lees minder Knoppen laden Downloadknoppen Pil Knoppen Meldingsknop Pictogramknoppen Volgende/vorige knoppen Meer Knop in Nav Blokkeerknoppen Tekstknoppen Ronde Knoppen Scroll naar boven-knop

Formulieren

login formulier Aanmeldingsformulier Afrekenformulier Contact Formulier Sociaal inlogformulier Inschrijfformulier Formulier met pictogrammen Nieuwsbrief Gestapelde vorm Responsieve vorm Pop-upformulier Inline formulier Invoerveld wissen Nummerpijlen verbergen Tekst kopiëren naar klembord Geanimeerd zoeken Zoekknop Zoeken op volledig scherm Invoerveld in Navbar Inlogformulier in Navbar Aangepast selectievakje/radio Aangepaste selectie Tuimelschakelaar Vink selectievakje aan Caps Lock detecteren Triggerknop op Enter Wachtwoordvalidatie Toggle Zichtbaarheid wachtwoord Formulier met meerdere stappen Automatisch aanvullen Automatisch aanvullen uitschakelen Spellingcontrole uitschakelen Knop voor het uploaden van bestanden Lege invoervalidatie

Filters

Filterlijst Filtertabel Filterelementen Filter Dropdown Sorteer lijst Spell-tabel

Tafels

Zebra gestreepte tafel Middelste tafels Tafel over de volledige breedte Side-by-side tafels Responsieve tabellen Vergelijkingstabel

Meer

Video op volledig scherm Modale dozen Modaal verwijderen Tijdlijn Scroll-indicator: Voortgangsbalken Vaardigheidsbalk Bereikschuifregelaars Knopinfo Weergave-element zweven Pop-ups Opvouwbaar Kalender HTML bevat Te doen lijst Laders Sterrenclassificatie Gebruikersbeoordeling Overlay-effect Contactchips Kaarten Kaart omdraaien Profielkaart Productkaart Waarschuwingen Uitroepen Opmerkingen: Etiketten Cirkels Stijl HR Coupon Lijst groep Lijst zonder opsommingstekens Responsieve tekst Uitgesneden tekst Gloeiende tekst Vaste voettekst Kleverig element gelijke hoogte Clearfix Responsieve floats Snack bar Venster op volledig scherm Roltekening Vloeiend scrollen Verloop Bg Scroll Sticky Header Koptekst bij scrollen verkleinen Prijstabel Parallax Beeldverhouding Responsieve Iframes Wisselen van leuk/niet leuk Toggle Verbergen/Tonen Schakel donkere modus in Tekst wisselen Klasse wisselen Klasse toevoegen Klasse verwijderen Actieve klasse Boom zicht Eigenschap verwijderen Offline detectie Zoek verborgen element Webpagina omleiden Zoom zweven Flip Box Verticaal centreren Middelste knop in DIV Overgang bij zweven Pijlen vormen Download link Element op volledige hoogte Browservenster Aangepaste schuifbalk Verberg schuifbalk Schuifbalk tonen/dwingen Apparaat uiterlijk Bewerkbare rand Tijdelijke aanduiding kleur Tekst selectie kleur Kogelkleur Verticale lijn Verdelers Animeren van pictogrammen Afteltimer Schrijfmachine Binnenkort pagina Chatberichten Pop-up chatvenster Gesplitst scherm Getuigenissen Sectieteller Citaten Diavoorstelling Afsluitbare lijstitems Typische apparaatonderbrekingen Versleepbaar HTML-element JS-mediaquery's Syntaxis markeerstift JS Animaties JS-snaarlengte JS Machtsverheffen JS-standaardparameters Huidige URL ophalen Huidige schermgrootte ophalen Iframe-elementen ophalen

Website

Maak een gratis website Maak een website Een statische website maken Maak een website (W3.CSS) Een website maken (BS3) Maak een website (BS4) Maak een website (BS5) Een website maken en bekijken Een linkboom-website maken Maak een portfolio Maak een CV Maak een restaurantwebsite Maak een zakelijke website Maak een WebBook Center-website Contact Sectie Over pagina Grote kop Voorbeeldwebsite

Rooster

2-kolomsindeling 3-kolomsindeling 4-kolomsindeling Uitbreidend raster Lijstrasterweergave Gemengde kolomindeling Kolomkaarten Zig Zag-indeling Bloglay-out

Google

Google-kaarten Google-lettertypen Koppelingen van Google-lettertypen Google Analytics instellen

Converters

Gewicht omrekenen Temperatuur converteren Lengte converteren Converteer snelheid

Blog

Een baan als ontwikkelaar krijgen Word een front-end ontwikkelaar.

Hoe - Maak een gratis website


Bouw en host uw website met W3Schools Spaces.

Ga met een paar klikken aan de slag met uw gratis website.

Alles wat je nodig hebt, direct in de browser.

Het is gemakkelijk te gebruiken - probeer het!

Gratis aan de slag »

Maak uw eerste website met W3Schools Spaces

W3Schools Spaces is een persoonlijke plek waar je code kunt bouwen en ermee kunt experimenteren en je eigen website kunt hosten.

Met W3Schools Spaces kun je bouwen met HTML, CSS en JavaScript.

Bewerk de code rechtstreeks in uw browser.

Upload en host uw bestanden en afbeeldingen.

Begin vandaag nog met het vergroten van uw online aanwezigheid!


Waarom bouwen met W3Schools Spaces?

Spaces is gemaakt door webontwikkelaars voor webontwikkelaars.

  1. De interface is eenvoudig en gemakkelijk te gebruiken.
  2. Host en bewerk uw bestanden rechtstreeks in de browser.
  3. Gratis sjablonen.

Het is gratis om aan de slag te gaan en je hoeft je creditcard niet in te voeren.


Code bewerken en bekijken

De editor is gemakkelijk te gebruiken - waardoor u zich kunt concentreren op de belangrijkste dingen.

Controleer de responsiviteit van uw site met de verschillende preview-alternatieven.

Bekijk wijzigingen op uw site live!


Overal bouwen

Host uw bestanden en afbeeldingen in de cloud.

Blijf georganiseerd door een structuur te maken met mappen.

Alles wat je nodig hebt, direct in de browser.


Gratis sjablonen

Blader en gebruik onze responsieve websitesjablonen.

Wijzig, bewaar, deel en gebruik ze in uw projecten.

The templates are powered by W3.CSS


What Do I Need to Know to Get Started?

HTML, CSS and JavaScript are the foundational languages to build a website.

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML »
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS »
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript »

Do not worry if you do not know how to code. The most important thing is to get hands on, early on. Learning how to code is best done with getting practical. Start to build something today!


Lets Get Started in a Few Steps

Do you already have a W3Schools Account? If so, skip the first step


Step One: Sign Up For an Account

To be able to use Spaces you need to sign up and get your account.

Lets get you set up!

Go to - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.

Remember to validate your account in your email. Check the spam filter if you cannot find the validation email in your inbox.

Get more information about how to sign up in our article - How to sign up


Step Two: Start with a template or HTML skeleton

Go to

Select one of the options and click the "Continue" button.

Do not worry too much about this decision. You can reset your Space and start over again whenever you want.


Step Three: Give your space a name

Personalize your Space by giving it an amazing name.

You can not use special letters in the name, such as (#, ! or :). The only exception is dash ( - )

The name will be the link that you share with others to see your site. For example: yourname.w3spaces.com


Step Four: Enter your space

Great job! you made it to the dashboard.

In the dashboard you get an overview of your spaces and usage.

Enter your space and its File Overview by clicking somewhere on the space's row or click the button with the three dots to the right inside the row.

You can only have one space with the free plan. However, you can always upgrade to get more spaces.


Step Five: Edit code or upload files

This is where the magic happens!

Start to edit code or upload files

  • Edit code by clicking on the "Pen icon" to the right of the file that you want to edit.
  • Create new files by clicking on the "New file" button.
  • Upload files by clicking on the "Upload files" button.

Step Six: Publish your site and share it with someone

This is the start of building your online presence.

Learn, test, build, and go live with your space.

Create your website and share it with others.

Note: Your space name with the .w3spaces.com extension is your shareable link. Read more about how to share your space in this article How can I share my space?


W3Schools Spaces

W3Schools-ruimten

Build your own website with W3Schools Spaces.

Get Started for Free