Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
I still can’t open the page that we are asked to do something similar to it. The URL that emerges is: https://personal portfolio.freecodecamp.rocks. Then I get from my browser a note saying: " …can’t reach this page".
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Persoal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
    </head>
<body>
  <navbar id="nav-bar">
    <a class="nav-link" href="#survey form">Survey Form</a> 
    <a class="nav-link" href="#tribute-page">Tribute Page</a> 
    <a class="nav-link" href="#documentation-page">Documentaion Page</a> 
<a class="nav-link" href="#product-landing-page">Product Landing Page</a> 
     </navbar>  
  <main>
    <section id="welcome-section">
      <h1>My Personal Portfolio</h1>
       <p><span class="bold"> <i>My freeCodeCamp Profile</i></span> <a id="profile-link" href="https://www.freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
        </section>
         <section   id="projects">
<div id="survey form" class="project-tile">
 <header class="dhead"> <a name="survey-form">Survey Form</a></header>
  <p>This form was to collect data for the purpose of clarifying a profile that may be unclear</p>
  The profile included name, gender, ageadhoies,  among other things</p>
  <p>See the project at <a href="https://www.freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
  </div>     
    <div id="tribute-page" class="project-tile">
  <header class="dhead"><a name="tribute-page">Tribute Page</a></header>
      <p>This was a tribute for the Egyptian writer Naguib Mahfouz<p>
        <p> His work was characterized by the blunt expression of his ideas, coverinng a broad range of topics and dealing with Egypt’s development in the 20th century</p>
        <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature</p>
        <p>See the project at <a href="https://www.freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
   </div>         
      <div id="documentation-page" class="project-tile">
     <header class="dhead">   <a name="documentation-page">Documentation Page</a></header>
      <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 methods and the modern ones that rely of software<p/>
<p>See the project at <a href="https://www.freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
             </div>
      <div id="product-landing-page" class="project-tile">
       <header class="dhead"> <a name="product-landing-page">Product Landing Page</a></header>
        <p>This page was about a store called Child Play</p>
        <p>It gave a representation of products that it sells, services that it provides and its pricing list</p>
        <p>See the project at <a href="https://www.freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
        </div>
      </section>
    </main>
  </body>
  </html>
/* file: styles.css */
#nav-bar {
  display: flex;
  flex-direction: column;
  position: fixed;
  text-align: center;
  width: 100vw;
}
.nav-link {
  text-decoration: none;
}
#welcome-section {
  height:100vh; 
  text-align: center;
position: relative;
  padding: 50% 0; 
}
#profile-link {
  color: blue;
}
.bold {
  font-weight: 800;
}
.dhead {  font-weight: bold;
  font-size: 18px;
}
.project-tile {
  padding-left: 20px;;
}

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.42

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

There’s a dash between personal and portfolio. The correct URL is https://personal-portfolio.freecodecamp.rocks/.

I am able to click on that link in the instructions and bring up the page. Not sure why you can’t? Are you able to reach it from the link I gave above?

No, I tried but couldn’t reach the page.

Tell us what’s happening:
Describe your issue in detail here.
I tried to open the model page that we have to do something similar to but failed. Over 4 days with several attempts at different times every day the page can’t be reached. The problem is not in my computer as the trouble shooter shows. Is there anything else I can do?
Thank you.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Persoal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
    </head>
<body>
  <nav id="nav-bar">
    <a class="nav-link" href="#survey form">Survey Form</a> 
    <a class="nav-link" href="#tribute-page">Tribute Page</a> 
    <a class="nav-link" href="#documentation-page">Documentaion Page</a> 
<a class="nav-link" href="#product-landing-page">Product Landing Page</a> 
     </nav>  
  <main>
    <section id="welcome-section">
      <h1>My Personal Portfolio</h1>
       <p> My freeCodeCamp Profile <a id="profile-link" href="https://www.freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
        </section>
         <section   id="projects">
<div id="survey form" class="project-tile">
  <a name="survey-form">Survey Form</a>
  <p>This form was to collect data for the purpose of clarifying a profile that may be unclear</p>
  The profile included name, gender, ageadhoies,  among other things</p>
  </div>     
    <div id="tribute-page" class="project-tile">
      <a name="tribute-page">Tribute Page</a>
      <p>This was a tribute for the Egyptian writer Naguib Mahfouz<p>
        <p> His work was characterized by the blunt expression of his ideas, coverinng a broad range of topics and dealing with Egypt’s development in the 20th century</p>
        <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature</p> 
      </div>         
      <div id="documentation-page" class="project-tile">
        <a name="documentation-page">Documentation Page</a>
      <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 methods and the modern ones that rely of software<p/>
             </div>
      <div id="product-landing-page" class="project-tile">
        <a name="product-landing-page">Product Landing Page</a>
        <p>This page was about a store called Child Play</p>
        <p>It gave a representation of products that it sells, services that it provides and its pricing list</p>
        </div>
      </section>
    </main>
  </body>
  </html>
/* file: styles.css */

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.42

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

when you open the page, what URL is shown in the browser?
Please post it here.

I can’t sopy and paste, but what appears firsr is the words “about blank” then the url: https://www.personal portfolio.freecodecamp.rocks.

Okay, not sure why you cannot copy and paste it…
Here is the URL of the page. < https://personal-portfolio.freecodecamp.rocks/>
Try it again from here and if it doesn’t work again, then my guess is you are behind some firewall that is preventing you from seeing it, so using a VPN might help with that. Or you can look at the projects already done by others in the “Code Review” subforum and get inspiration from those ones.

I noticed you created 2 duplicate posts for the same issue. Please do not do that in future.
Just use the same topic to discuss further or to add more information.
The duplicates have now been merged.

When I ask for help I was not directed to the previous post. This is why I created a new one. So, How can I revisit a post?

every time you click the button ‘ask for help’ you are creating a new topic. So you should only do that once per challenge.
After you have created the first topic, then all you have to do is find it again in the forum (should be in your list of topics created in your profile) and then simply update it by replying to someone, or even to yourself and posting about any new code or questions.

Thank you.
Now may I ask how to get to the “Code Review” that you told me about earler? I couldn’t find a Sub-Forum page.
Thanks again.

Click on the hamburger menu in the forum here and find a list of subforums which include the Code Feedback one.

Click there and it will show all the posts.

You can also directly search for posts with the related subject and pick a few to look at.

Many thanks for your help.

1 Like

Tell us what’s happening:
Describe your issue in detail here.
I only can’t see the full preview of my work. I was following results of big changes that I was introducing and suddenly the preview was cut and only the navbar and the main titles remained. My changes were mainly in the HTML code. I guess I did something wrong but I don’t realise it. Please tell me what i got wrong.
Thank you.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Personal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
    </head>
<body>
  <navbar id="nav-bar">
    <a class="nav-link" href="#About">About</a> 
    <a class="nav-link" href="#Coding Work">Coding Work</a> 
    <a class="nav-link" href="#Contact">Contact</a>
    </nav-bar>  
  <main>
    <section id="welcome-section">
      <h1>MY PERSONAL PORTFOLIO</h1>
       <p><span class="bold name"> <i>Hamdy ElHinnawy</i></p>
       <p><span class="bold"> </span></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 an economist and have my PhD in economics from the LSI early in 1983.</p>
<p>For the time being I learn coding as a hobby, and in this field I am a beginner. My intention is to continue learning and in due course will decide what to do with my learning.</p>
<p>One more reason for not addressing recruiters is that I am more than 80 years old and will surely not compete with youth. I just continue learning for life  
 </section>      
     <section   id="projects">
<header class="dhead"> <a name="Coding Work">Coding Work</a></header>

<article class="project-tile">
 <h2>Survey Form</h2>
  <p>This form was to collect data for the purpose of clarifying a profile that may be unclear</p>
<p> This is normally done in a research, where profile included 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="noopener noreferrer">freecodecamp</a>
  </article>

    <article class="project-tile">
  <h2>Tribute Page</h2>
      <p>This was a tribute for the Egyptian writer Naguib Mahfouz<p>
        <p> His work was a blunt expression of his ideas dealing with Egypt’s development in the 20th century</p>
        <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature</p>
        <p>See the project at <a href="https://Tribute Page: Build a Tribute Page | freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
   </article>   

      <article 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 methods and the modern ones that rely of software<p/>
<p>See the project at <a href="https://www.Technical Documentation Page: Build a Technical Documentation Page | freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
      </article>

      <article class="project-tile">
      <h2>Product Landing Page</h2>
      <p>This page was about a store called Child Play</p>
      <p>It gave a representation of products that it sells, services that it provides and its 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="noopener noreferrer"> freeCodeCamp<a></p>
      </article>
      </section>
    </main>
  </body>
  </html>
/* file: styles.css */
#nav-bar {
  display: flex;
  flex-direction: column;
  position: fixed;
  text-align: center;
  width: 100vw;
}
.nav-link {
  text-decoration: none;
}
#welcome-section {
  height:100vh; 
  text-align: center;
position:absolutee;
  padding: 50% 0; 
  display: flex;
  flex-direction: column;
}
h1 {
  font-size: 2rem; 
}
.name {
  font-size: 2rem;
}
#about {
  padding-left: 20px;
}
#profile-link {
  color: blue;
}
.bold {
  font-weight: 800;
}
.bold.prelude {
  font-size: 20px;
}
.dhead {  font-weight: bold;
  font-size: 18px;
  margin-left: -20px;
}
.project-tile {
  padding-left: 20px;;  
}

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.42

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

There is no navbar HTML element. I think you mean nav. Also, make sure you are closing it off properly.

Thank you. You are right. The preview appeared completely just after correcting the nav element.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.