Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

No matter what I do I can’t get the " Your portfolio should contain at least one element with a class of project-tile ." check to activate. I’ve tried taking all but the basics and the project-title code out and just trying to run it on its own, but nothing has worked. I’ve been on this one test for three days and I can’t figure out what isn’t working.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
  </head>
  <body>
    <header id="welcome-section">Welcome to The Portfolio of 
      <h1>Check it out</h1>
    </header>
     <header id="header">
     <nav id="navbar">
       <li><a class="nav-link" href="#Pizza">Pizza Survey</a></li>
       <li><a class="nav-link" href="#frog">Pet Frog Tribute</a></li>
         <li><a class="nav-link" href="#color">Primary Colors Guide</a></li>
       <li><a class="nav-link" href="#sand">Sand Toy Product Landing Page</a></li>
       </nav>
       </header>
<p id=projects>
  <h1>Check it out</h1>
  <h1 class="project-tile">Pizza Survey<h1>
   <p class="Pizza">Pizza Survey</p>
   <img src="https://cdn.pixabay.com/photo/2016/06/01/12/59/pizza-1428931__340.png" alt="Pizza clipart">
    <a id=profile-link target="_blank" href="https://gardenpenguin.neocities.org/pizza">pizza webpage</a>
</p>
   <p class="project-tile">Pet Frog Tribute</p>
 <img id="image" src="https://cdn.pixabay.com/photo/2018/08/31/15/16/frog-3644865_960_720.jpg" alt="A Frog" >
    <a id=profile-link target="_blank" href="https://gardenpenguin.neocities.org/frog">frog webpage</a>
</p>
   <p class="project-tile color">Primary Colors Guide</p>
   <img src="https://cdn.pixabay.com/photo/2016/10/14/15/21/colour-wheel-1740381_960_720.jpg" alt="Color wheel">
    <a id=profile-link target="_blank" href="https://gardenpenguin.neocities.org/color">color webpage</a>
</p>
   <p class="project-tile sand" >Sand Toy Product Landing Page</p>
   <img src="https://cdn.pixabay.com/photo/2016/09/02/18/40/sandburg-1639999_640.jpg" alt="a sand sculpture of a turtle">
   <a id=profile-link target="_blank" href="https://gardenpenguin.neocities.org/sand">sand webpage</a>
</p>
<a id=profile-link target="_blank" href="https://www.freecodecamp.org/CodePenguin">My Code camp Profile</a>
</p>

</body>
</html>

/* file: styles.css */
html {
  color: Navy;
  
   background: linear-gradient(
      white,
      cyan 20%,
      #00Beef 40%,
        #0090ff 100%
    );
}
header{
  color: navy;
  background-color:white;
  z-index: 1;
display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  
}
.project-tile{
  font-size: 30px;
}

img {
  display: block;
  margin-right: auto;
  max-width: 700px;
  max-width: 190px;
  height: 150px;
}

@media (min-width: 800px) {
html{
 padding: 10px %;
}
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Perhaps the test is looking to see that you have one element with the class of project-tile.

Try limiting the use of it to one element and see if the test approves.

3

I already attempted that and it wasn’t responsive . I saved the code from my atempt if you would like to see it.

4

Welcome to our community!

Your html code has a lot of mistakes. Check it out:

I will mention here one of them:

  • you have duplicated the id profile-link. This is not allowed in html.
1 Like
5

Thank you, that’s probably what is holding it up. Rookie mistake I suppose.

2 Likes
6

ok, that didn’t fix it, I’m going to try playing with the formatting more and see if that dose anything.

8

my updated Code, I still can’t figure out what’s not working.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css"/>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
  </head>
  
    <header id="welcome-section">Welcome to The Portfolio of code penguin
      <h1>Check it out</h1>
    </header>
     <header id="header">
     <nav id="navbar">
       <li><a class="nav-link" href="#Pizza">Pizza Survey</a></li>
       <li><a class="nav-link" href="#frog">Pet Frog Tribute</a></li>
         <li><a class="nav-link" href="#color">Primary Colors Guide</a></li>
       <li><a class="nav-link" href="#sand">Sand Toy Product Landing Page</a></li>
       </nav>
       </header>
       <body>
<p id=projects>
  <h1>Check it out</h1>
  <h1 class="project-tile">Pizza Survey</h1>
   <p class="Pizza">Pizza Survey</p>
   <img src="https://cdn.pixabay.com/photo/2016/06/01/12/59/pizza-1428931__340.png" alt="Pizza clipart">
    <a id=pizzalink="_blank" href="https://gardenpenguin.neocities.org/pizza">pizza webpage</a>
</p>
   <p class="Frog">Pet Frog Tribute</p>
 <img id="image" src="https://cdn.pixabay.com/photo/2018/08/31/15/16/frog-3644865_960_720.jpg" alt="A Frog" >
    <a id=froglink="_blank" href="https://gardenpenguin.neocities.org/frog">frog webpage</a>
</p>
   <p class="color">Primary Colors Guide</p>
   <img src="https://cdn.pixabay.com/photo/2016/10/14/15/21/colour-wheel-1740381_960_720.jpg" alt="Color wheel">
    <a id=colorlink="_blank" href="https://gardenpenguin.neocities.org/color">color webpage</a>
</p>
   <p class="sand" >Sand Toy Product Landing Page</p>
   <img src="https://cdn.pixabay.com/photo/2016/09/02/18/40/sandburg-1639999_640.jpg" alt="a sand sculpture of a turtle">
   <a id=sandlink="_blank" href="https://gardenpenguin.neocities.org/sand">sand webpage</a>
</p>
<a id=profile-link target="_blank" href="https://www.freecodecamp.org/CodePenguin">My Code camp Profile</a>
</p>

</body>
</html>

/* file: styles.css */
html {
  color: Navy;
  
   background: linear-gradient(
      white,
      cyan 20%,
      #00Beef 40%,
        #0090ff 100%
    );
}
header{
  color: navy;
  background-color:white;
  z-index: 1;
display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  
}
.project-tile{
  font-size: 30px;
  color: red;
}
#projects{
font-size: 50px;
}

img {
  display: block;
  margin-right: auto;
  max-width: 700px;
  max-width: 190px;
  height: 150px;
}

@media (min-width: 800px) {
html{
 padding: 10px %;
}
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

9
  • <a id=pizzalink**=** " _blank**"**
  • <li><a class="nav-link" href="#Pizza">Pizza Survey</a></li>
    where is the ‘ul’ element?
  • The projects section should contain at least one element with a class of “project-tile” to hold a project. You don’t have that section element.
  • <p class="Frog">Pet Frog Tribute</p> ↩
    <img id="image" src="https://cdn.pixabay.com/photo/2018/08/31/15/16/frog-3644865_960_720.jpg" alt="A Frog" > ↩
    <a id=froglink="_blank" href="https://gardenpenguin.neocities.org/frog">frog webpage</a> </p>… Where is the opening p tag?
    .
    .
    .
1 Like
10

Got it fixed, thank you!

1 Like
11

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