Exercises

Combined HTML and CSS Exercises

1. Styled Navigation Bar:

   • Create a navigation bar using HTML and CSS:

     <nav class="navbar">
         <ul>
             <li><a href="#home">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#services">Services</a></li>
             <li><a href="#contact">Contact</a></li>
         </ul>
     </nav>
     

     .navbar {
         background-color: #333;
         overflow: hidden;
     }
     .navbar ul {
         display: flex;
         flex-direction: column;
         gap: 20px;
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
     .navbar li {
         float: left;
     }
     .navbar li a {
         display: block;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
     }
     .navbar li a:hover {
         background-color: #111;
     }
     

2. Responsive Grid Layout:

   • Create a responsive grid layout:

     <div class="grid-container">
         <div class="grid-item">1</div>
         <div class="grid-item">2</div>
         <div class="grid-item">3</div>
         <div class="grid-item">4</div>
         <div class="grid-item">5</div>
         <div class="grid-item">6</div>
     </div>
     

     .grid-container {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
         gap: 10px;
         padding: 10px;
     }
     .grid-item {
         background-color: #ccc;
         padding: 20px;
         text-align: center;
     }
     

These exercises will help reinforce your understanding of HTML and CSS, providing practical experience in applying these concepts to create structured, styled, and responsive web pages. Happy coding!

---

Help us improve the content 🤩

You can leave comments here.