Skip to main content
Practice

Web Gallery Template

Let's take a look at the structure of the first template.


1. Navigation Bar (<nav>): The navigation bar containing major links for the website.

<nav>...</nav>

  • Logo: The website logo (symbol) and main link.
<a href="/" class="symbol">
  <img
    src="https://assets.codefriends.net/assets/etc/codefriends-symbol.png"
    width="40px"
    height="40px"
    alt="symbol"
  />
</a>

  • Main Menu: The main menu items and sub-menu icons.
<ul class="menu menu-large">
  ...
</ul>

  • Theme Toggle Buttons: Buttons for toggling themes.
<a id="dark" class="btn">...</a> <a id="light" class="btn">...</a>

  • Responsive Menu: The responsive menu.
<details>...</details>

2. Content Area (<div class="content">): The main content area of the website.

<div class="content">...</div>

  • Gallery Title: The gallery title and a brief description.
<h1>My Gallery</h1>
<p class="desc">Photo Album</p>

  • Photo Grids: The photo album in grid format.
<div class="grid-box">...</div>

3. Footer (<footer>): The footer section of the website.

<footer>...</footer>

  • Copyright Information: The website creator's info and logo link.
<a class="logo mini" href="https://www.codefriends.net/">CodeFriends</a>

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.