Personal Portfolio Project - tests

I’m having a hard time with certain tests on this last CSS responsive website test.

First Issue: #2 of Layout - The height of the welcome section should be equal to the height of the viewport.

I have coded in CSS:
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #000;
padding-bottom: 4rem;
}

I have coded in HTML:

<div class="welcome-section" id="welcome-section">  
  <section class="welcome-section" id="welcome-section">
    <h1>Scott Brown</h1>
    <p>Web Developer</p>
  </section>
</div>  

I added the div because I couldn’t get it to work with just section, but still not passing.

Second Issue: #4 of Content - The projects section should contain at least one element with a class of “project-tile” to hold a project.

I have coded in HTML:



Projects

    <div class="row">
      <div class="column">
        <div class="project-tile">
          <a href="https://veganedge.github.io/book-presale/" 
             target="_blank">
            <img class="project-image" 
                 src="Roadside_Daisies.png" 
                 alt="Roadside Daisies Project">
            <div class="container">
             <p class="project-name">Book Presale Landing Page</p>
            </div>
          </a>
        </div>
      </div>

      <div class="column">
        <div class="project-tile">
          <a href="https://veganedge.github.io/web-dev-tasks/" 
             target="_blank">
            <img class="project-image" 
                 src="Web_Dev_Tasklist.png" 
                 alt="Web Dev Tasklist">
            <div class="container">
              <p class="project-name">Web Dev Tasks</p>
            </div>
          </a>
        </div>
      </div>  

      <div class="column">
        <div class="project-tile">
          <a href="https://veganedge.github.io/web-dev-projects/" 
             target="_blank">
            <img class="project-image" 
                 src="Web_Dev_Projects.png" 
                 alt="Web Dev Portfolio">
            <div class="container">
              <p class="project-name">Web Dev Portfolio</p>
            </div>
          </a>
        </div>
      </div>  
    </div>
  </section>
</div>

I originally had the a tags with classes of “project-tile” which wasn’t passing, so I moved them to divs, still not passing.

Third Issue: #5 of Content - The projects section should contain at least one link to a project.

See code above, but I have 3 a tags to my projects. Is it searching for something specific that I’m unaware of, as in maybe I didn’t save things to my freecodecamp account or something?

It’s also not passing on media queries, but I haven’t coded those yet. If anybody has any insights, I’d appreciate it.

Hi @XveganXedgeX can you share you codePen link or where you are doing this challenge
it would help more as we can check live code for what is going wrong also helps in debugging code :wink:

Hi and welcome :love_you_gesture:

I think this line: padding-bottom: 4rem; increases the height of the element, so it’s now 100vh + 4rem. I can’t test it without a codepen link but I’d try removing that padding first. Alternatively, if you want to keep the padding, you’d have to set the height to height: calc(100vh - 4rem) (those spaces before and after the - are important).

You do have an element with a class of project-tile, but you also have multiple elements with the same id="projects-section" which is invalid HTML. An id may only be present exactly once per page. Maybe this is messing up the tests.

Hope that helps.

I am brand new to this all. How can I do that without it just showing you a new codepen page that is empty?

I will go mess with that now, but it was failing when I only had one. I think I was trying to debug getting the anchor link to stop at right height due to the sticky navbar.

this is now fixed for all sections…

I am now re-thinking the project-tile situation. I believe it could possibly be failing because it doesn’t hold a project (as the test for having projects linked is failing.)

Would I be correct in thinking that this system wants me to use the locations of the projects I submitted at the end of the other lessons? I didn’t do that, I loaded them and hosted them into github and github pages, so the links on this project are to those (those were not the links I submitted when I said I finished the other projects.)

If nobody has a better idea, I’m going to go back to the other projects and submit the new url’s to the projects.