Beginner portfolio website – would really appreciate feedback 🙏

Code Feedback
1 
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
    rel="stylesheet">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <header>
    <a href="https://github.com/HIMED-DEV" target="_blank">
      <img class="logo" src="./assets/Adobe Express - file.png" alt="Logo">
    </a>
    <nav>
      <div>
        <a href="#home">
          <h4>Home</h4>
        </a>
        <a href="#about">
          <h4>About</h4>
        </a>
        <a href="#projects">
          <h4>Projects</h4>
        </a>
        <a href="#contact">
          <h4>Contact Me</h4>
        </a>
      </div>
    </nav>
  </header>
  <main>
<section id="home">
  <div class="hero-content">
    <h1>Hello!</h1>
    <h2>My name is Ibrahim Abdulhameed</h2>
    <p>I am a Developer / Designer</p> 
  </div>
</section>  
  </main>
</body>
</html>

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family:'Montserrat', sans-serif;
}
html{
    scroll-behavior: smooth;
}
body {
    background-color: #0b1120;
    color: white;
}

header {
    display: flex;
    justify-content: space-between; 
    align-items: center;           
    padding: 20px 5%;
    background-image: linear-gradient(rgba(11, 17, 32, 0.6), rgba(11, 17, 32, 0.6)), url('./assets/jeremy-bishop-G9i_plbfDgk-unsplash.jpg');
     background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    width: 120px; 
    height: auto;
}

nav>div {
    display: flex;
    gap: 30px; 
    align-items: center;
}

nav>div>a {
    text-decoration: none; 
    color: white;            
}
nav>div>a>h4 {
    transition: 0.4s; 
}
nav>div>a:hover>h4 {
    color: #3bb4f2;       
}
#home{
    background-image: url(./assets/ales-nesetril-Im7lZjxeLhg-unsplash.jpg);
    background-position:center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;

}

Hey everyone,

I’ve recently started learning HTML and CSS on freeCodeCamp and decided to build my first portfolio website. I’m still a beginner, but I tried to apply what I’ve been learning instead of just following tutorials.

I’d really appreciate any feedback — especially on the design, layout, and code structure. I want to improve and make it look more professional over time.

Also, if there’s anything I should focus on next or improve, please let me know :folded_hands:

Thanks a lot!

2

Welcome to the forum @hmdcore

A good layout.

You used a relative link for image, so the alt text will appear instead of the image.

Check other places where you used relative links.

I liked the design of the navigation bar.

The first thing I noticed is that body text was too close to the edge of the page. Maybe add some padding to create some space.

Since you decided to keep the hero section simple, make sure you really market yourself in the “About” section.

Happy coding

1 Like
3

Keep mobile/ipad/iphone designs in mind and maybe for mobile version use a hamburger navbar (if you want…some people also just do “menu” and people can press that and access ).

4

I will do that
but i am currently looking for extensions that can show me a preview of my website
do you know any?

5

dev tools on desktop and u can always resize ur browser

1 Like