Leer Een Volledige Website Bouwen Met HTML

We hebben nu de kernconcepten van HTML behandeld en zijn klaar om een volledige one-page portfolio website vanaf nul te bouwen.

Je kunt proberen deze zelf te maken of deze stapsgewijze handleiding volgen met code voor elk onderdeel.

Stapsgewijze Handleiding

1. Website Structuurplan

Onze portfolio pagina bevat:

Header: sitetitel en navigatielinks;
Over: een korte introductie over de eigenaar;
Portfolio: projecten met afbeeldingen, titels en korte beschrijvingen;
Contact: een formulier waarmee bezoekers contact kunnen opnemen;
Footer: copyright en contact-/sociale links.

2. Structureer inhoud met semantische HTML

Maak een nieuw index.html-bestand aan en voeg de basis HTML-structuur toe met <!DOCTYPE html>, <html>, <head>, en <body>.

index.html

3. Headersectie

Voeg een <header> toe met de naam van de eigenaar en een <nav> met links die naar de secties Over, Portfolio en Contact springen.

index.html

4. Over Sectie

Maak een <section id="about"> met een kop en een korte paragraaf die de eigenaar beschrijft.

index.html

5. Portfolio Sectie

Voeg een <section id="portfolio"> toe die projecten weergeeft met afbeeldingen, titels en korte beschrijvingen.

index.html

6. Contact Sectie

Maak een <section id="contact"> met een eenvoudig contactformulier dat naam, e-mailadres en bericht verzamelt.

index.html

7. Voettekstsectie

Sluit de pagina af met een <footer> die copyrighttekst en links naar sociale media, telefoon en e-mail bevat.

index.html

Bonus

Om de pagina visueel aantrekkelijker te maken, kunnen we een CSS-bestand koppelen en onze HTML opmaken. CSS regelt kleuren, afstand, lettertypen en lay-out, waardoor dezelfde structuur er veel verzorgder uitziet.

Vergelijk voorlopig hoe de pagina eruitziet met alleen HTML en hoe deze verandert zodra basis CSS-stijlen worden toegepast.

index.html

index.css

Hier is de link naar de volledige website die in dit hoofdstuk is gebouwd: Julia's Website

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 4

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Veeg om het menu te tonen

We hebben nu de kernconcepten van HTML behandeld en zijn klaar om een volledige one-page portfolio website vanaf nul te bouwen.

Je kunt proberen deze zelf te maken of deze stapsgewijze handleiding volgen met code voor elk onderdeel.

Stapsgewijze Handleiding

1. Website Structuurplan

Onze portfolio pagina bevat:

Header: sitetitel en navigatielinks;
Over: een korte introductie over de eigenaar;
Portfolio: projecten met afbeeldingen, titels en korte beschrijvingen;
Contact: een formulier waarmee bezoekers contact kunnen opnemen;
Footer: copyright en contact-/sociale links.

2. Structureer inhoud met semantische HTML

Maak een nieuw index.html-bestand aan en voeg de basis HTML-structuur toe met <!DOCTYPE html>, <html>, <head>, en <body>.

index.html

3. Headersectie

Voeg een <header> toe met de naam van de eigenaar en een <nav> met links die naar de secties Over, Portfolio en Contact springen.

index.html

4. Over Sectie

Maak een <section id="about"> met een kop en een korte paragraaf die de eigenaar beschrijft.

index.html

5. Portfolio Sectie

Voeg een <section id="portfolio"> toe die projecten weergeeft met afbeeldingen, titels en korte beschrijvingen.

index.html

6. Contact Sectie

Maak een <section id="contact"> met een eenvoudig contactformulier dat naam, e-mailadres en bericht verzamelt.

index.html

7. Voettekstsectie

Sluit de pagina af met een <footer> die copyrighttekst en links naar sociale media, telefoon en e-mail bevat.

index.html

Bonus

Vergelijk voorlopig hoe de pagina eruitziet met alleen HTML en hoe deze verandert zodra basis CSS-stijlen worden toegepast.

index.html

index.css

Hier is de link naar de volledige website die in dit hoofdstuk is gebouwd: Julia's Website

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 5. Hoofdstuk 4