Skip to main content
Practice

Portfolio Template 1

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


1. Header (<header>): The header section at the top of the website.

<header>...</header>

  • Logo: The part where the logo image is located.
<div class="header-icon">
  <img
    class="logo-icon"
    src="https://assets.codefriends.net/templates/web/portfolio-1/assets/logo-icon.svg"
  />
</div>

  • Navigation (<nav>): The main navigation menu of the website.
<nav>
  <ul class="navigation">
    <li><a href="#intro">WORK</a></li>
    ...
  </ul>
</nav>

  • Dropdown Menu: The dropdown menu used on smaller screens.
<div class="dropdown">...</div>


2. Main Content (<main>): The section where the main content of the website is located.

<main>...</main>

  • Intro Section (#intro): The introduction section, containing the main title and a brief introduction of the designer.
<section id="intro">...</section>

  • Skills Section (#skills): The section that showcases the designer's skills.
<section id="skills">...</section>

  • Projects Section (#project): The section that displays the designer's project portfolio.
<section id="project">...</section>


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

<footer id="contact">...</footer>

  • Contact Information: The part where the designer's contact information and a message sending form are located.
<div class="footer-top">...</div>

  • Social Media Icons: The part where the social media icons are located.
<a href="#">
  <img
    class="social-icon"
    src="https://assets.codefriends.net/templates/web/portfolio-1/assets/instagram.png"
  />
</a>

  • Copyright Information: The copyright information.
<div class="footer-bottom-text">...</div>


4. Modal (#modal): The modal window that appears when an image is clicked to show it in a large view.

<div id="modal">...</div>

Want to learn more?

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