Build a Personal Portfolio - Build a Personal Portfolio

HTML-CSS
1

Tell us what’s happening:

Hello,
The code passes the test. Nonetheless, I would like to make the result looks much better, more professional and way more sophisticated.
Would you be so kind as to help precisely help me in that quest?
I am not happy with the current result. Please help out.
Thanks a lot

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <section>
    <div id="welcome-section"><h1>Welcome on my portfolio</h1></div>
    </section>

    <section>  
      <nav id="navbar">
        <ul>
          <li><a href="#Home"/>Home</li>
          <li><a href="#Projects"/>Projects</li>
          <li><a href="#Contact">Contact</li>
        </ul>
      </nav>
    </section>

    <hr></hr>

    <section id="project-section" href="#Projects" class="project-tile">
      <h2>The projects</h2>
      <div><a href="www.github.com/prbibe"/>The first project</a><p>The first project sums up as an amazing drawing that I did using only CSS which makes it a masterpiece at the crossroad of both IT and art</p></div>
      <div><p><a href="www.github.com/prbibe"/>The second project</a><p>The second project is a top notch table showing where to be at what time for a Tech Event</p></div>
      <div class="project-tile"><p><a href="www.github.com/prbibe"/>The third project</a><p>The third project is my amazing accomplishment of a customer feedback form with multiple sophisticated features such as name and phone number #technology</p></div>
    </section>

    <hr></hr>

    <section>
      <a id="profile-link" target="_blank"></a>
    <href="#Contact"><h2>Contact me </h2>
      <p>Follow me on <a href="x.com/prbibe">X</a><p>
      <p>Follow me on <a href="github.com/prbibe">Github</a></p>
    </section>
  </body>

  <hr></hr>

  <footer>All rights reserved. 2025
    <p>Email me at <a href="mailto:gyal@seanpaul.com">gyal@senapaul.com</a></p>
    <p>Follow me on <a href="#Contact">my socials</p>
  </footer>
</html>

/* file: styles.css */
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

h1 {
  display: flexbox;
}

@media (width <= 1250px) {
  body{ background-color: brown;}
}

@media (1250px >= width) {
  body {
background-color: beige;    
  }
}

#welcome-section {background-color: red;
width: 100%;
}

#project-section {background-color: white;
width: 100%;
}

.project-tile{background-color: grey;
width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build a Personal Portfolio - Build a Personal Portfolio

1 Like
2

Hi there!

Imagine that this would be your real work task. What will you do? What are the technical requirements?

1 Like