Simple Portfolio webpage using HTML and CSS 2023 edition

Welcome, curious minds and eager learners, to a new blog of Codewithrandom. If you’re looking to create a standout online portfolio to showcase your skills and accomplishments, you’re in the right place.

In this blog, we’ll walk you through the essential steps, for making your portfolio shine by using HTML and CSS. Let’s get started on crafting a captivating portfolio webpage that will leave a lasting impression on your interviewer!

First, let us start with the basic HTML structure for making a portfolio webpage

Table of Contents

HTML CODE :

<div class="wrapper">
  <nav class="main-nav" id="navbar">
    <a class="home-button" href="#">Yossi Fisch</a>
    <ul class="navigation">
      <li class="nav-item"><a class="nav-link" href="#welcome-section">Welcome</a></li>
      <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
      <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
    </ul>
  </nav>
  <section id="welcome-section">
    <div class="section-content">
      <h1>Welcome to my portfolio page</h1>
      <a class="nav-link" href="#about">Learn More</a>
    </div>
  </section>
  <section id="about">
    <div class="section-content">
      <h2>About myself</h2>
      <p>I am an aspiring web developer and currently a student of FreeCodeCamp. I built the projects below as part of the new curriculum which is still in beta at the time of this writing.</p>
      <a class="nav-link" href="#projects">My Projects</a>
    </div>
  </section>
  <section id="projects">
    <div class="section-content">
      <h2>My basic HTML-CSS projects</h2>
      <div class="project-tiles">
        <div class="project-tile">
          <div class="tile-details">
            <img class="tile-image" src="http://image.ibb.co/e8RY4n/Tribute.png" alt="My tribute page">
            <p class="tile-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, sunt quis enim libero at provident?</p>
          </div>
          <span><a href="https://codepen.io/yoizfefisch/full/PKmpxm" target="_blank">Tribute Page: George Washington</a></span>
        </div>
        <div class="project-tile">
          <div class="tile-details">
            <img class="tile-image" src="http://image.ibb.co/hgDD4n/Survey.png" alt="My survey page">
            <p class="tile-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, sunt quis enim libero at provident?</p>
          </div>
          <span><a href="https://codepen.io/yoizfefisch/full/gxEKJN" target="_blank">Survey Form: Rate your day</a></span>
        </div>
        <div class="project-tile">
          <div class="tile-details">
            <img class="tile-image" src="http://image.ibb.co/fFo2x7/Landing.png" alt="My landing page">
            <p class="tile-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, sunt quis enim libero at provident?</p>
          </div>
          <span><a href="https://codepen.io/yoizfefisch/full/XebKOw" target="_blank">Product Landing Page: PerformDrive</a></span>
        </div>
        <div class="project-tile">
          <div class="tile-details">
            <img class="tile-image" src="http://image.ibb.co/m876Pn/Documentation.png" alt="My documentation page">
            <p class="tile-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, sunt quis enim libero at provident?</p>
          </div>
          <span><a href="https://codepen.io/yoizfefisch/full/yvvpXb" target="_blank">Technical Documentation: Power Query (M)</a></span>
        </div>
      </div>
    </div>
  </section>
  <section id="contact">
    <div class="section-content">
      <h2>Contact me:</h2>
      <form action="#">
        <div class="flex-parent">
          <div class="flex-item">
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" placeholder="Your full name:">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" placeholder="Your email address:">
          </div>
          <div class="flex-item">
            <label for="comment">Comment:</label>
            <textarea name="comment" id="comment" cols="30" rows="7"  placeholder="Your message:"></textarea>
          </div>
        </div>
        <input class="nav-link" type="submit" value="Submit">
      </form>
    </div>
  </section>
  <footer>
    <p><a id="profile-link" href="https://beta.freecodecamp.org/en/yoizfefisch" target="_blank">Check me out on FreeCodeCamp</a></p>
  </footer>
</div>

Let’s understand the above HTML code line by line :

Simple Portfolio webpage using HTML and CSS 2023 edition

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

In the Html code first, we have a parent class div having a class attribute “wrapper” <div class=”wrapper”>. It would group and contain the overall content of the webpage within a specific container.
Then nav element is there representing the navigation section of the webpage. <nav class=”main-nav” id=”navbar”> . It has a class attribute set to “main-nav” and an id attribute set to “navbar”.
Next, we have`<a>` (anchor) element which represents a link containing the text “Yossi Fisch”.<a class=”home-button” href=”#”>Yossi Fisch</a>: It has a class attribute that is set to “home button” and a href attribute set to “#” (hash symbol). The “#” in the href means that the link points to the current page itself.
Then ul tag shows (unordered list) a list of navigation items. <ul class=”navigation”>
<li class=”nav-item”><a class=”nav-link” href=”#welcome-section”>Welcome</a></li>: This `<li>` (list item) element contains an anchor `<a>` element with the text “Welcome”. It is a navigation item with the class attribute “nav-item”. The anchor has a class attribute “nav-link” and an href attribute pointing to “#welcome-section” which means that when the “Welcome” link is clicked, the user will be taken to the section with the id “welcome-section” on the page.
<li class=”nav-item”><a class=”nav-link” href=”#about”>About</a></li>: Similar to the previous list item, this is a navigation link for the “About” section with an href pointing to “#about”.
<li class=”nav-item”><a class=”nav-link” href=”#projects”>Projects</a></li>: This is a navigation link for the “Projects” section with an href pointing to “#projects”.
<li class=”nav-item”><a class=”nav-link” href=”#contact”>Contact</a></li>: This is a navigation link for the “Contact” section with an href pointing to “#contact”.
Then comes the <section>element which represents a section with the id attribute “welcome-section”.<section id=”welcome-section”>:
Further, we have another div <div class=”section-content”>. This <div> element has a class attribute “section-content” having content of the “Welcome” section.
The `<h1>` element represents a heading with the text “Welcome to my portfolio page”.
<a class=”nav-link” href=”#about”>Learn More</a> This is an anchor link with the text “Learn More”. It has a class attribute “nav-link” and an href attribute pointing to “#about”.

This HTML code builds a straightforward webpage structure with four sections at the top: “Welcome,” “About,” “Projects,” and “Contact.” Users can go to the respective areas on the page using the navigation links, and each section has its own distinctive content. The framework for a simple portfolio webpage is provided by this code.

Output for the HTML Structure

Now let’s go through the CSS effect on the above structure

CSS CODE:

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: Oxygen;
}

.wrapper{
  max-width: 1920px;
  margin: auto;
}

.main-nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  background: #ff6d00;
  z-index: 10;
}

.home-button {
  display: flex;
  align-items: center;
  color: black;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: 900;
  padding: 5px;
}

.navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style-type: none;
  margin: 6px;
  padding: 0;
}

.nav-link {
  display: flex;
  width: 90px;
  height: 40px;
  border-radius: 8px;
  color: black;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.nav-link:hover {
  background: #ff9e40;
  box-shadow: 0 0 15px 1px #c43c00;
  font-weight: 700;
}

#welcome-section {
  background: url("http://image.ibb.co/bUeaH7/abstract.jpg") center fixed no-repeat;
}

#about {
  background: url("http://image.ibb.co/e4VRPn/circles.jpg") center fixed;
}

#projects {
  background: url("http://image.ibb.co/erhjAS/shapes.jpg") center fixed;
}

#contact {
  background: #9eff40 url("http://image.ibb.co/jogBqS/banner.jpg") no-repeat;
  min-height: 0;
  height: 600px;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
}

.section-content {
  text-align: center;
  padding: 15px;
  background: #ff6d00;
  box-shadow: 0 0 15px 1px #c43c00;
  max-width: 90%;
}

h1 {
  font-family: Rufina;
  font-size: 2.5em;
}

.project-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: space-between;
}

.project-tile {
  flex-basis: 250px;
  width: 20%;
  padding: 5px;
  margin-bottom: 15px;
  box-sizing: border-box;
  background: #ff6d00;
  box-shadow: 0 0 15px #c43c00;
  text-align: center;
}

.project-tile:hover {
  transform: scale(1.1);
  z-index: 9;
}

.tile-details {
  position: relative;
}

.tile-image {
  width: 100%;
}

.tile-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 5px;
  background: #ff6d00;
  z-index: -1;
  font-weight: 700;
}

.project-tile:hover .tile-text {
  z-index: 1;
  opacity: .8;
}

a {
  color: black;
  text-decoration: none;
  font-family: inherit;
}

.flex-parent {
  display: flex;
}

.flex-item {
  border: none;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}

input, textarea {
  display: block;
  width: 250px;
  max-width: 95%;
  min-height: 30px;
  background: #ff9e40;
  border: none;
  resize: none;
  padding: 5px;
}

input:focus, textarea:focus {
  box-shadow: 0 0 15px 1px #c43c00;
  outline: 0;
}

footer {
  background: #9eff40;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 600px);
  min-height: 60px;
}

p {
  margin: 0;
}

@media only screen and (max-width: 620px) {
  .flex-parent {
    flex-direction: column;
  }
}

Let’s explain the code in brief:

scroll-behavior: smooth – enables smooth scrolling behavior whenever navigating to different sections of the webpage using any anchor link.
body styling sets the font family to “Oxygen” and removes any default margin and padding.
`.wrapper`: style the container that holds the webpage’s whole content. It centers the container on the page and specifies a maximum width of 1920 pixels.
.main-nav: customizes the top navigation bar, which is fixed. It appears as a flex container with an orange (#ff6d00) background.
.home-button: Styles the home button/link in the navigation bar.
.navigation: Styles the list of navigation links in the navigation bar.
.nav-link Styles the individual navigation links.
Different sections (the “#welcome-section,” “#about,” “projects,” and “contact” sections) are styled with backgrounds and other aesthetic components.
.section: creates flexible containers with centered content for the page’s sections.
.section-content: style each section’s content by adding padding and background color.
.project-tiles and .project-tile: Organises the project information and photographs in a grid structure in the section called project tiles.
`.tile-details`, `.tile-image`, and `.tile-text`: Styles the information displayed on the project tiles.
Styling for hyperlinks (`a`) on the webpage.
.flex-parent and .flex-item: Styles for flexbox containers and items used in the contact section form.
Styling for form elements like input and textarea.

Styling for the footer section of the page.

Media query: alters the layout by switching the flex-direction of ‘.flex-parent’ to the column when the screen width is less than or equal to 620 pixels.

Overall, this code offers a layout that is visually pleasing, complete with a fixed navigation bar, eye-catching section backgrounds, and a responsive layout for different screen sizes. Information about the “Welcome,” “About,” “Projects,” and “Contact” sections will be shown on the portfolio homepage with the appropriate styling and visual components.

FINAL HTML + CSS OUTPUT

Here, we wrap up our blog for our portfolio webpage.
We appreciate your participation in this learning experience on codewithrandom. Your encouragement and excitement are greatly appreciated. Watch this space for more intriguing blogs and articles on codewithrandom .