How can I proceed?

hi,

Just to clarify, are you saying you no longer need help with the profile page at this point?

If you need help with the others, we have to tackle them one by one in the same way.
We need to see what is the code and does it have any issues etc.

`Yes, I think there is no problem now with the profile page. However, this is my point of view. You may have a look on what I did. Here I provide the code. with many thanks.

<!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>PERSONAL PORTFOLIO</h1>
       <h2><span class="bold"><i>Hamdy ElHinnawy</i></span></h2>

      </section>
  <section id="About"> 
    <h2><a>About</a></h2>
<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">
<a class="item0">Projects</a>

<div class="project-tile item1">
 <h2>Survey Form</h2>
  <p>This form was to collect data for the projectpurpose 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://codepen.io/hinnawy/pen/poKLrKK" target="_blank" rel="noreferrer">Codepen</a>
  </div>

    <div class="project-tile item2">
  <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://codepen.io/hinnawy/pen/oNyqeKx" target="_blank" rel="noreferrer">Codepen</a></p>
   </div>   
      <div      class="project-tile item3">
    <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://codepen.io/hinnawy/pen/RwJMLwV" target="_blank" rel="noreferrer">Codepen</a></p>
      </div>
      <div  class="project-tile item4">
      <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://codepen.io/hinnawy/pen/qBKoPaN" target="_blank" rel="noreferrer">Codepen</a></p>
      </div>
      
      </section>
       <section id="Contact">
<h4 class="item0"><a>Contact</a></h4>
<img class="image" src="https://lh3.googleusercontent.com/a/ALm5wu3Rr1II1eKScPghch5zwxL3OX__1ZYukAZKOaKWTg=s450-p-rw-no" alt="Photo of Hamdy Elhinnawy">
<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>
<p>I didn’t publish a profile on the internet,some personal information are in my<a id="profile-link" href="https://myaccount.google.com/personal-info?hl=ar" target="_blank" rel="noreferrer"> Google Account</a></p>
</div>
  </section>
        </main>
      </body> 
  </html>

html {
  box-sizing: border-box;
}
body {
  background: floralwhite;
}
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;
background: gray;
height: 65px;
position: fixed;
z-index: 2;
top: 0px;
left: 0px;  
}
.nav-link {
  text-decoration: none;
  color: cyan;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 15px;
}
#welcome-section  {
height: 100vh;
display: grid;
grid-column: 1/3;
justify-content: center;
align-content: center;
padding: 50%;  
background: linear-gradient(90deg, floralWhite, beige); 
}
h1 {
  text-align: center;
}
.bold {
  font-weight: 800;
}
.bold {
font-size: 1.5rem;
}
#profile-link {
  color: red;
}
a   {
text-decoration: none;
}
h2 {
  font-size: 1.5rem;
   text-align: center;

}
#about {
  grid-column: 1/3;
  background: linear-gradient(to bottom, beige, lightCyan);
}
#projects {
  display: grid;
  width: 100vw;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.item0 {
grid-column: 1/3;text-align: center;
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 20px;
margin-top: 20px;
background: LightCyan;
}
.project-tile {
  border: solid 2px black;
  padding: 5px;
 background: linear-gradient(90deg,Lavender, lightCyan); 
}
#contact {
 display: grid;
  grid-column: 1/3;
  gap: 10px;
  
}
.image {
  grid-column: 1/2;
  border: solid 2px green;
  width: 120px;
  border-radius: 50%;
padding: 5px;
margin-top: 20px;
}
.text {background: linear-gradient(90deg, floralwhite, beige);
  grid-column: 2/3;

}
@media only screen (max-width: 600px) {
   #contact {
    grid-template-columns: 1fr;
  }
}

This code is passing the tests now. If you would like feedback on the design or code you can open a request for feedback in the Code Feedback subforum and provide a link to the your codepen so people can review and give feedback on it.

Thank you. I’ll do that for this and for the tribute page , which I reshaped.

I am writing again to you as I try to have help on an issue in the certification project of building a documentation page. I noticed that I can’t create a post. I click on the lind but it doesn’t open. I could only open the list of previous questions that were put by others. Some of those questions are similar to mine,. That is getting a result of the test saying:
Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id). As a matter of fact I did that but I have the href link underlined. Each time I delete and rewrite the underline reappears. I underlines the (#something) of the nav-links.
I am sorry but I had to find some help. I hope this may bot be inconvenient for you.
Thank you.

can you give more details? Which challenge are you working on? And please post the code.

The challenge is building a documentation page. When I post the code I am afraid the underline does’t appear. However, here it is. Please note that what appears underlined on my page are the six nav links: #itroduction, #How_to+design, #Free_software, #Opensource_software, #Actual_design, and #manufacturing.

type or paste code here<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <title>Documentation Page</title>
     <link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
      <nav id="navbar">
        <header>Printed Circuit Board (PCB) Documntation</header>
        <a class="nav-link" href="#Introduction">Introduction</a>
          <a class="nav-link" href="#How_to_design">How to design</a>
          <a class="nav-link" href="#Free_software">Free software</a>
          <a class="nav-link" href="#Opensource_software">Opensource software</a>
        <a class="nav-link" href="#Actual_design">Actual design</a>
        <a class="nav-link" href="#Manufacturing">Manufacturing</a>
        </nav>
     <Main id="main-doc">   
        <section id="Introduction" class="main-section">
         <header class="sechead" >Introduction</header>         
      <p>
      Printed circuit board is an electronic circuit that relies on DC current. </p> 
      <p>Components on this board are not connected by wire but by lines of copper stretched across a fiber board.</p> 
      <p>Such board is manufactured of fiber covered with a layer of copper.</p>
    <p> A design for connection lines in the circuit is printed on this layer then then the copper is removed except where the lines of design exist.</p>
     <p> These lines are used as the atcual copper connections.</p>
          </section>
    <section id="How_to_design" class="main-section">
      <header 
class="sechead">How to design</header>
      <p>To design a PCB you need some kind of software. In this regard the available software can be divided into categories.</p> 
      
      <ul>
        <li>For beginners and hobbyists, there is relatively simple software. One of the best is <code>Express PCB</code>.	</li>
        <li>	More advanced software may differ in many terms. A main difference is related to the number of layers that can be included in a design in a design.</li>
          <li>Highly advanced software may integrate PCB design with other industrial designs and manufacturing operations. An example is <code>Eagle</code>.</li>
     </ul>
     <p>Note that the number of layers in a design refers to an integrated circuit that is very small and is installed not on fiber but on a silicon wafer. </p>
      </section>
      
      <section id="Free_software" class="main-section">
  <header class="sechead">Free  software</header>
  <p>Free software as the title suggests can be used for free. This category includes a variety of software.</p>
  <ul>
    <li>	Some are relatively simple and are intended to be used for training by students and beginner professionals. An example is the previously mentioned <code>Express PCB</code>.</li>
      <li>	All you need for downloading this software is to register your email while applying for a download. Its developers recover their cost by providing optional paid services for users.</li>
      <li>	Developers of other software that are more sophisticated cannot recover their costs by selling paid services. An example is the previously mentioned <code>Eagle</code>, which is used in return of subscriptions, remaining to be free for hobbyists and students. </li>
    </ul>
        </section>
    <section id="Opensource_software"  class="main-section">
      <header class="sechead"> Opensource software</header>
      <p>There are similarities between free and opensource software. Important features are:</p>
        <ul>
          <li>Open-source software is generally released under a license in which the copyright holder grants users the rights to use, study, change, and distribute the software as well as its source code to anyone and for any purpose. </li>
            <li>	Opensource software allows any capable user to participate in development, making the number of possible contributors indefinite. In the meantime, the ability to examine the code facilitates public trust in the software. </li>
      <li>	Open source code can be used for studying and allows capable end users to adapt it to their personal needs in a similar way <code>User Scripts</code> and <code>Custom Style Sheets</code> allow for web sites. This results in savings for consumers</li>
          </ul>
      <p>These features apply to opensource PCB design software. I should refer to Wikipedia as the main source of this and of more information about this type of software.    </p>
      </section>
   <section id="Actual_design" class="main-section">
     <header class="sechead"> Actual design</header>
     
       <p>	Actual PCB design may begin by doing a Schematic design as a guide for a Layout. </p>
       <ul>
         <li>The schematic is a plan for the circuit that includes selecting the components and specifying their electrical connectivity.</li>
         <li>The Layout is the process in which this plan is applied. In this process components are placed on the board and their actual connections are specified as on the physical board.</li>
         <li>You will use your problem-solving skills to place the components and specify their lines of connections within the tightly constrained space of the board.</li>
         <li>Before you are finished you have to check for mistakes of electrical connectivity. The schematic is the reference, and the software normally connects the layout to the schematic, doing the checking and telling you about the mistakes. </li>
       </ul>
     </section> 
     <section id="manufacturing"
   class="main-section">
    <header class="sechead" >Manufacturing</header>
  <p>Steps for manufacturing include:</p>
  <ul>
    <li>Printing the board. It is not to be printed on paper but on fiber material. 
      </li>
      <li>If silk screen is used, the board will be treated in an acidic solution to erase the redundant copper that is outside the lines of connectivity.
        </li>
        <li>The ink is then removed and the placement holes are drilled in preparation for installing the components. 
          </li>
          <li>Advanced methods don’t use silk screen, and the lines of connection are directly made by mechanically scratching the copper guided by the software.  </li>
            <li>Finally, the components are soldered at points of connection. For a small number of boards this can be done manually. For large quantities soldering is carried out by mechanically throwing molten tin on the boards while passing over a conveyer belt.</li>
    </ul> 
    </section>  
        </main>
      </body>
    </html>

Thank you.

Can you describe the problems you are trying to solve again?
You mentioned something about trying to remove the underlines? (Do you mean you want the link text to not be underlined?)

This is a css property that you can apply to the anchor element which can do this for you.
Example of how to do this in this article:

Let me know if I have misunderstood something.

The underline is not in the preview. I know the CSS rule for text decoration. The underlines are in the HTML code itself and is not removed by CSS. It is seen in the code but is not seen when the code is posted. I don’t know why and I wonder if this makes a nav link unrecognized and causes it not to navigate as it looks different than the targeted name. Otherwise, why a nav link doesn’t work?

i created a codepen with the code you shared https://codepen.io/hbar1st/pen/YzjLZpN?editors=1000
I don’t see any issue in the code and your navigation from the top menu is working.
The only one that didn’t work was the Manufacturing one because you didn’t write the id exactly. But other than that they all work (I fixed it in the pen).

Can you please explain again, maybe by sharing a screenshot, what it is you need to fix?

Yes, the nav-links navigate on code pen but this is an old version. I introduced some changes to comply with a requirement that the nav bar must appear on the left side of the page and remain in place in a fixed position. I did not use a grid to have a similar appearance to the one of the mode page because the grid technique was not introduced in previous lessons. So, I put the nave bar on top on the left side and gave all the #main-doc a wide padding-left and a wide negative padding-top so that other text on the page doesn’t be covered under the nav-bar and doesn’t flow upwards with a large chunk of the text unseen. With this change the nav-links stopped navigation and the href began to be automatically underlined with the result of the test revealing that they are not recognized. The test result reveals one mistake saying ( Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text “Hello world”, the page navigates to a section element with that id).).
Unfortunately, I can’t have a screenshot of the page as I don’t find a button for this purpose. This is the problem and the exact situation in detail. Should I go back to the old structure?
Thanks a lot.

I used the code you provided to me. I now feel like I have wasted my time.

To get help on the forum you must post the code. Please shut down your browser, and reopen it then try to log back info fCC and try to press the get help button again to post a new thread on the forum. You must copy your most recent code into the thread at that time.

Taking a screenshot has nothing to do with fCC. It is something you can do from your operating system. Please take 5 minutes to google how to do this for your operating system. On Windows for eg I use an app called Snipping Tool to help me with this. Your situation may be different so you should investigate this.

All right. I am sorry that I wasted your time. Please note that I posted the last version of my code but I didn’t post it on code pen.
Thaks and sorry again.