Personal Portfolio Webpage -- I'm a Newbie

Project Feedback
#1

I’m working on passing the Personal Portfolio Webpage and I’m just doing the very basic to pass each test.

I’m failing User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.

Here’s my HTML:

<section id="projects" class="project-tile"></section>

What doesn’t my code pass user story #4? Thanks.

#2

Nevermind. Think I got it:

<section id="projects"> 
  <p class="project-tile"></p>
</section>

“Contains” must mean that there needs to be an element within another element. Sometimes writing the question out helps me figure out the answer.

Thank you.

#3

@Macro You got the concept! User Story #4 is asking for the projects section to contain another element with the class set to “project-tile”. However, I would not use p class to do so. Can you link you Code Pen?

#4

As @Macro as said try the above short code and make sure u input some sort of text in between the P element

#5

Hi Nikki! Thanks for your response.

Here’s the link: https://codepen.io/MacroFrito/pen/VwaJzKv

What are your thoughts?

#6

Hi! I’m failing user story #10:

The height of the welcome section should be equal to the height of the viewport.

I updated the #welcome-section to a vh of 100:

#welcome-section{
  padding: 10vh;
  height: 100vh;
}

but am still failing. What am I not understanding? Here’s the link to the project:

https://codepen.io/MacroFrito/pen/VwaJzKv

Thank you!

#7

Hi! Maybe removing the 10vh padding from the welcome section?

#8

Thank you! You’re right!

1 Like
#9

So, here’s my finished portfolio that passed all 12 tests:

Why aren’t there more CSS tests to help challenge our style knowledge? How does one go from passing the tests to making the webpage look good? Open to any suggestions. Thank you.

1 Like
#10

I honestly don’t know for sure how to help you. I had the help of a friend who led me through styling and making my page look good.
But this first page, my tribute page, I did it mostly on my own.
First thing I decided was to have a theme for the page. As it was the band I’m tributing had a bio book that had a strong black and white layout, so I decided to make the page background black. The text was white I chose a font I liked and then justified the text to give it an even feel. Then as it was divided into “chapters” about each album they took out, I put a cover of each, and I decided to get out of the square thing rounding the corners with border-radius: 10px;
I added a final closer that changed the color on hover, you could do that with #tribute-link:hover {} in css and then add cursor: pointer; and color: violet; as this was the case.
I’m just giving you ideas of course you will make it your own way, but that’s how I made it in the beginning.
Good luck and happy coding!
Here’s my tribute page code pen:

#11

Adding more CSS requirements is not likely to help much in teaching CSS, although it has been talked about. I would suggest you take the requirements as a simple bare minimum that has been put in place just to test for something. And not as a guide to help you get (much) better at HTML/CSS. For that, you have to start creating your own projects and/or do a bunch of tutorials (YouTube is full of them).

Some channel links




#12