Building the Header and Navigation
1. Create a Navigation Bar
Start by adding a navigation bar at the top of the page. Use Bootstrap's Navbar component for this purpose.
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Portfolio</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<!-- Navigation links will be added here -->
</ul>
</div>
</div>
</nav>
</header>
2. Add Navigation Links
Within the navbar-nav
class, add navigation links for the homepage, about me, experience, skills, and contact sections.
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
Result
index.html
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 3
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 3.23
Building the Header and Navigation
Veeg om het menu te tonen
1. Create a Navigation Bar
Start by adding a navigation bar at the top of the page. Use Bootstrap's Navbar component for this purpose.
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">My Portfolio</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<!-- Navigation links will be added here -->
</ul>
</div>
</div>
</nav>
</header>
2. Add Navigation Links
Within the navbar-nav
class, add navigation links for the homepage, about me, experience, skills, and contact sections.
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
Result
index.html
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 3