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.
html<header><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">My Portfolio</a><buttonclass="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.
html<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
¡Gracias por tus comentarios!