Jouw idee.
Jouw verhaal.
Jouw site.

01<!-- eerst luisteren -->
02<main>
03  <p>Een frisse start</p>
04  <h1>
05    Waar wil je naartoe?
06  </h1>
07</main>

01<header>
02  <a href="/">Jouw merk</a>
03</header>
04<main class="hero">
05  <h1>Ruimte voor wat volgt.</h1>
06  <a href="#contact">
07    Ontdek wat mogelijk is ->
08  </a>
09</main>

01.hero {
02  min-height: 100svh;
03  display: grid;
04  place-items: center;
05  background:
06    #f7f6f2;
07}
08.hero h1 span {
09  color: #f71b1d;
10}

01@media (max-width: 768px) {
02  .hero {
03    grid-template-columns:
04      1fr;
05    padding: 4rem 7%;
06  }
07  :focus-visible {
08    outline: 2px solid red;
09  }
10}

01✓ index.html
02✓ styles.css
03✓ responsive getest
04
05$ git push origin productie
06Bouwen... klaar
07✓ beveiligde verbinding
08✓ live op jouw domein
09
10-> www.jouwvolgendestap.nl