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.

Okay all… I’m still not passing my tests. Specifically, the 2 tests that involve projects. #5 - The projects section should contain at least one link to a project. I went back to all the other projects in the curriculum and submitted my github pages, but it is still not passing test (so there goes my theory about that.)
#4 - The projects section should contain at least one element with a class of “project-tile” to hold a project. This is still not passing.

Anybody tell me how to share codepen code? And will it work if I don’t have an account? For all the curriculum challenges I’ve been forking the one they have linked and working from that. I’ve been saving the code and loading it into github.

Thanks again for any help. I’d really like to move on to next projects, but also understand why this isn’t working. I still believe it to be something to do with it searchign for specific projects and me linking the github pages, but again I went through and resubmitted all the github pages at the end of each challenge days ago, so that should’ve solved/tested that.

You can post your GitHub live page for this project then.

From the FAQ:

Do I have to use CodePen for the front end projects?

As long as your code is publicly viewable, and you have a live demo, you can use whatever you want.

You can use GitHub pages or surge.sh as alternatives to CodePen.

As far as I can see, you don’t have to link to actual projects, you can just put any link.

In your GitHub page, could you move the script tag with the test suite from the head to the body of your HTML? Right now it’s impossible to tell which tests are failing.

I have now updated code to move testing to body. Thanks for taking a look.

The problem I see is that you’ve given the id projects to your h2 and not to the whole section. I’m guessing that the tests look for an element with class project-tile inside the element with id projects, but as your h2 doesn’t have any child elements, the test fails. I don’t think it matters which element exactly you give the id projects, just be sure that the element with class project-tile is a child element of the projects element.
I suppose that would also make the other test that currently fails pass.

That was absolutely correct. I guess first step when a test fails would be to re-read the test parameters in detail. :wink: sorry for the madness.