top of page

Website Design for Beginners - Creating Responsive Navigation Bar

Updated: Nov 8, 2023

Website design for beginners

Learn the art of website design for beginners and create stunning web pages with our step-by-step tutorials and resources.

This guide sets the stage for beginners to learn HTML and CSS while working on a practical project: a blog website home page. It covers the fundamental concepts needed for web development and encourages hands-on learning. This beginner's guide is perfect for those who want to learn web development while building something real. By the end, you'll have a fully functional and visually appealing blog website home page.

Steps to run the HTML code and view the website:

  1. Begin by creating a project folder and opening it in Visual Studio Code.

  2. Inside your project folder, create this two following files: index.html and style.css.

  3. Enhance your development environment by installing the Live Server plugin in your Visual Studio Code editor.

  4. To preview your website, right-click on the index.html source code and choose the "Open with Live Server" command. This action will automatically open your web browser and load the HTML file for immediate viewing.

Website design for beginners

index.html <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CZ2M Gadgets</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=";400;700&family=Rubik:wght@300;400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"/> </head> <body> <section> <!-- Nav Bar --> <nav class="navbar"> <div class="logo-container"> <h3 class="logo">CZ2M Gadgets</h3> </div> <div class="search-box-container"> <input type="text" placeholder="Search..."> <button class="search-button"> <svg style="fill: #ffffff;" "" height="20" viewBox="0 -960 960 960" width="20"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/> </button> </div> <div class="menu-open-container"> <svg onclick="showMenu()" class="open-icon" style="fill: #ffffff;" xmlns="" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/></svg> </div> <div class="nav-links" id="navLinks"> <ul> <li><a href=""/>Headphones</a></li> <li><a href=""/>Cameras</a></li> <li><a href=""/>Laptop</a></li> <li><a href=""/>Smart Watches</a></li> </ul> <svg onclick="hideMenu()" class="close-icon" style="fill: #ffffff;" xmlns="" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg> </div> <div class="user-account"> <svg class="login-icon" style="fill: #F2C029;" xmlns="" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/></svg> </div> </nav>

<script> <!-- Javascript for Toggle menu --> var navLinks = document.getElementById("navLinks"); function showMenu(){ = "0"; } function hideMenu(){ = "-200px"; } </script> </body> </html>

Website design for beginners

style.css *{ padding: 0; margin: 0; } body { font-family: 'Lato', sans-serif; font-family: 'Rubik', sans-serif; } /* Style the navigation bar */ .navbar { position: relative; background: #312E8C; /* Background color */ color: #ffffff; /* Text color */ display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; } /* Style the logo */ .navbar logo-container .logo { color: #ffffff; font-size: 16px; font-weight: lighter; } /* Style the search box container */ .navbar .search-box-container{ display: flex; gap: 5px; } /* Style the search box */ .navbar .search-box-container input { padding: 8px; border: none; border-radius: 5px; width: 200px; } /* Style the Search Buuton */ .navbar .search-box-container .search-button { padding: 6px 15px; background: #F21B1B; /* Button background color */ color: #fff; /* Button text color */ border: none; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Style Nav Links */ .navbar .nav-links ul li { list-style: none; display: inline-block; padding: 8px 8px; position: relative; } .navbar .nav-links ul li a { color: #ffffff; text-decoration: none; font-size: 10px; font-weight: lighter; } .navbar .nav-links ul li::after { content: ''; width: 0%; height: 2px; background: #F21B1B; display: block; margin: auto; transition: 0.5s; } .navbar .nav-links ul li:hover::after { width: 100%; } /* Style the user account section */ .navbar .user-account { cursor: pointer; } .navbar .nav-links .close-icon { display: none; } .navbar .menu-open-container .open-icon{ display: none; } /* --- Nav Bar Ends ---- */ /* --- Media Queries for Nav Bar ---- */ @media(max-width:768px){ .navbar { padding: 5px 5px; } .navbar .logo-container .logo { font-size: 12px; font-weight: normal; } .navbar .search-box-container input { padding: 4px; border: none; border-radius: 3px; width: 150px; } .navbar .search-box-container .search-button { padding: 3px 5px; } .navbar .nav-links ul li { display: block; } .navbar .nav-links { position: absolute; background: #4843D9; height: 100vh; width: 200px; top: 0; right: -200px; text-align: left; z-index: 2; padding-top: 30px; transition: 1s; } .navbar .nav-links .close-icon { display: block; position: absolute; top: 10px; right: 10px; cursor: pointer; } .navbar .menu-open-container .open-icon{ display: block; position: absolute; top: 5px; right: 10px; cursor: pointer; margin-right: 20px; } } /* --- Media Queries for Nav Bar Ends ---- */

Website design for beginners

10 views0 comments

Recent Posts

See All


bottom of page