Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
I have a grid of two columns only. A problem is that the sections don’t appear equal in width. The two sections where I placed items in specified sells are less in total width and the second column in the projects secrion is narrower than the first. in addition, one tile of a project is pushed down in its column leaving a big empty space. I tried to place the items in grid areas rather than within columns but the problem remained unsolved. Please let me know what is wrong.
Thank you.
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>   <title>Personal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
    </head>
<body>
  <main>
  <nav id="navbar">
    <a class="nav-link" href="#About">About</a> 
    <a class="nav-link" href="#projects">Projects</a> 
    <a class="nav-link" href="#Contact">Contact</a>
    </nav>  
    <section id="welcome-section">
      <h1>MY PERSONAL PORTFOLIO</h1>
       <p><span class="bold name"> <i>Hamdy ElHinnawy</i></p>
<p id="profile-link"><a>See my profile at<a href="https://freecodecamp.org" terget="_blank" rel="noreferrer"/> freecodecamp</p>
      </section>
  <section id="About"> 
    <header class="dhead"><a name="About">About</a></header>
<p>With this portfolio I am not addressing recruiters. I am not looking for a job as a developer.

</p>
<p>I am learning coding, and I am a beginner.</p> 
<p>I'll continue learning and in due course will decide what to do with my learning.</p>
<p>For now, I represent my portfolio to see if I am really on the right track.</p> 
<p> One  more reason for not addressing recruiters is that I am old and most likely will use my skill for my own purposes.</p>  
 </section>      
     <section   id="projects">
<header class="work"> <a name="projects">Projects</a></header>

<article id= "item-1"class="project-tile">
 <h2>Survey Form</h2>
  <p>This form was to collect data for the purpose of clarifying a is normally donr in research.</p>
<p> The data to be collected includes name, gender, age and hobbies, among other things</p>
<p>See this project at <a href="https://Survey Form: Build a Survey Form | freeCodeCamp.org" target="_blank" rel="noreferrer">freecodecamp</a>
  </article>

    <article id="item-2" class="project-tile">
  <h2>Tribute Page</h2>
      <p>This was a tribute for an Egyptian writer whose work
 was unique in expressinghis ideas on Egypt’s development in the 20th century</p>
        <p>his funeral wa honered by the president and the highest rank of the Egyptian elite.</p> <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature and is the only Arab writer who got this award</p>
        <p>See the project at <a href="https://Tribute Page: Build a Tribute Page | freeCodeCamp.org" target="_blank" rel="noreferrer"> freeCodeCamp<a></p>
   </article>   
      <article id="item-3"
      class="project-tile">
    <h2>Technical Documentation Page</h2>
      <p>This page documented the process of design and manufacturing of a printed circuit board</p>
<p>It highlighted six steps of the process referring to the old manual method and the modern ones that rely on software<p/>
<p>See the project at <a href="https://www.Technical Documentation Page: Build a Technical Documentation Page | freeCodeCamp.org" target="_blank" rel="noreferrer"> freeCodeCamp<a></p>
      </article>

      <article 
  id="item-4"    class="project-tile">
      <h2>Product Landing Page</h2>
      <p>This page was about an imaginary store called Child Play</p>
      <p>It gave a representation of products that it supposedly sells, services that would be provided and a pricing list</p>
      <p>See the project at <a href="https://www.Product Landing Page: Build a Product Landing Page | freeCodeCamp.org" target="_blank" rel="noreferrer"> freeCodeCamp<a></p>
      </article>
      </section>
       <section id="contact">
<header class="dhead"> <a name="Contact">Contact</a></header>
<img class="image" src="https://lh3.googleusercontent.com/a/ALm5wu3Rr1II1eKScPghch5zwxL3OX__1ZYukAZKOaKWTg=s450-p-rw-no">
<div class="text">
<p><span class="bold">Name</span>: Hamdy Elhinnawy</p>
<p><span class="bold">email</span>: haahinnawy@hotmail.com</p>
<p><span class="bold">Contry</span>: Egypt</p>
<p><span class="bold">Education</span>: Ph.D Economics, London School of Economics.</P>
<p><span class="bold">Date of Birth</span>: November27, 1941</p>
</div>
      </body> 
    </main>
  </html>



html {
box-sizing: border-box;
}
main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#navbar {
  width: 100vw;  display: grid;
  grid-template-columns: repeat(3, 1fr);  
grid-column: 1/-1;  position: fixed; 
text-align: center;
  background: gray;
  height: 65px;
top: 0;
left: 0;  z-index: 2;
}
.nav-link {
  text-decoration: none;
  color: cyan;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 15px;
}
#welcome-section {
  display: grid;
  
grid-column: 1/3; 
height:100vh; 
  text-align: center;
position: relative;
  padding: 50% 0;  background: linear-gradient(to bottom, #F5F5DC 0%, 
#E0FFFF 100%);
}
h1 {
  font-size: 2rem; 
}
.name {
  font-size: 2rem;
}
#about {
  display: grid;
  grid-column: 1/3;
  padding-left: 10px;
  background: linear-gradient(90deg, #ffffff 0%, #E0FFFF 100%)
}
#profile-link {
  color: red;
 }
 a { text-decoration: none;
}
.bold { font-weight: 800;
}
.dhead {  font-weight: bold;
  font-size: 1.5rem;
  text-align: center;
}
.work {
 text-align: center; margin-bottom: 25px;
  
font-size: 1.5rem;
  font-weight: bold;
 grid-column: 1/3;
}
#projects {
  display: grid;
}
.project-tile {
  border: 2px solid; padding-left: 10px; 
margin-bottom: 10px;
margin-left: 10px; 
background: linear-gradient(45deg, #ffffff  0%, #ffe6e6 100%);
}
#item-1 {
  grid-column: 1/2;
}
#item-2 {
  grid-column: 2/3;
}
#item-3 {
  grid-column: 1/2;
}
#item-4 {
  grid-column: 2/3;
}
#contact {
  top: 20px;
display: grid;  padding-left: 10px;  padding-bottom: 2px;
  background: linear-gradient(to bottom, #ffffff 0, #AFEEEE 100%);
}
.image {
  grid-column: 1/2; 
border: 2px solid green;  border-radius: 50%;
padding: 5px;
margin: 15px auto;
width: auto;
 height: 30%;
}
.text {
  grid-column: 2/2;
}
@media and (max-width: 600px) {
  #projects {
    grid-template-columns: 1fr;
  }
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

I would start by validating your HTML.

W3C Markup Validation Service

Thanks a lot. I checked my html code and there were errors. I corrected them except what I need to ask you about if you don’t mind. Basically, I was giving a reference as to where my projects may be seen at freeCodeCamp data base. I opened every project page and copied its link which I used in my coding. There are 4 projects for all of which I got an error. The error message for the first one says ( Error : Bad value https://www.Survey Form: Build a Survey Form | freeCodeCamp.org for attribute href on element a: Invalid host: Illegal character in domain: space is not allowed.. The other three say the same changing the name of the project. Don’t I have to give that reference? I would ask more questions later if you don’t mind again. Thank you.

This is definitely not a valid URL. You can’t have spaces in a URL. I don’t think you can directly link to your projects you created in the FCC editor. You have to put them somewhere else. Notice in the example FCC portfolio that all of the project links go to codepen.io. So you would need to load the HTML/CSS you created in the FCC projects into codepen (or something similar) and then link to them there.

Thank you. I was never able to see the page of the example page. Based on your advice I created a collection of my work at codepen.io and used its links. It remains now to ask about the rest of checking my html code. If you don’t mind again, I had two warnings about using the name attribute. Both warnings say ( Warning : The name attribute is obsolete. Consider putting an id attribute on the nearest container instead. . I actually used that in links for the navbar in order to navigate to the linked section in the page. What about that?
Thank you in advance.

I would follow this warning.

<a class="nav-link" href="#About">About</a>

Should link to an element with the id of About, not with a name attribute of About.

*strong text
Yes, it takes us to a section with the id of abot. but there is an a element where the name is about. Here is the code:

 <section id="About"> 
    <h2 class="dhead"><a name="About">About</a></h2>

All right. The page is now much better, but there is still a point about the beginning of my question. It is unequal columns in a two-column grid that i defined as equal. Is there a solution for this issue? i hope you are not bored. Many thanks.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Hi Hamdy, your code is hard to read because the formatting is not standard (for eg you place multiple css properties side by side on the same line, when they should each be on a separate row).

I suggest you copy the code over to codepen ( a website that lets you work on html and css development). Once copied into a pen, you can use the format option to help fix the readability issues and share the link to the pen here for people to review the code as well.

1 Like

You haven’t defined the columns for the #projects grid using grid-template-columns. Give it 1fr 1fr if you want them to be equal in width.

Your media query has invalid syntax (the and) but even if you fix it, it won’t do what you want it to because you have explicitly placed the grid items and how you have to place them again into the one-column layout. I would avoid explicitly placing grid items when at all possible.

Thank you. I just would like to give a feedback. First, about the media query I deleted and. Second, I redefined the columns for #projects giving the two columns a value of 1fr each. Yet, the two columns are still unequal where the 2nd one is notably smaller in width exactly as it was before. Meanwhile there is a wide space to the right. What can be done about that?
Thanks again.

Without seeing your latest code we can’t really help. It might be easier if you created a Codepen with your code instead of having to post the new code every time you make a change.

Anyway, when I fix the HTML and set the columns, they are equal in width.

Not sure where the space you are talking about is? Is it the one to the right of the contact section?

The space I am talking about is to the right of the contact and the projects sections.
My latest html code is in my Codepen collection that can be seen under my email (haahinnawy@hotmail.com), Many thanks for help.

to get help from strangers, you should consider making it easier for them to help you
(for eg. just post a link to your codepen, instead of asking people to search for it)

Extremely sorry. I did’nt look carefully for the link. Here you are:
Personal portfolio page (codepen.io)

1 Like

it looks like you still have syntax errors to fix.
You can see a complete list by copying your html to this online validator

Try to fix all the errors as Lasse said that the code worked after the errors were fixed and the correct spacing was applied.

Thanks. I fixed all the errors and have got that message: Document checking completed. No errors or warnings to show. Yet, the two grid columns are not equal as the second column is narrower and this is quite obvious in the section for projects. I revised the css code getting sure that the two columns are given a value of 1fr each. This was repeated twice once for (main) and another once for (projects). I wonder if you can have another look.

You have this HTML.

<section id="projects">
  <section id="projects">
  1. An id should be unique. Whatever looks for that id (a selector in this case) will find the first one and use that.

  2. The outer projects becomes the grid container and the container that should have been the grid container is now a grid child. It is also being auto closed after the contact section which means the contact section is inside the outer projects grid.

Delete the first opening <section id="projects"> tag.


HTML is very forgiving, but that doesn’t guarantee you will end up with the structure you expected. It is extremely important that you make sure your elements are closed correctly. Without the proper expected HTML structure, the CSS is never going to work as intended.

Learn the dev tools so you can inspect the DOM and how the page is actually being rendered and which styles are getting applied to which elements.

Thank you very much. You really helped me correct and understand many things.