Assist with Personal Portfolio

Code Feedback
1

Hi There

I’ve done the Personal portfolio and when I run the test, I get two errors because my page is structured a bit different and I would like to keep it this way. I have a div with class wrapper, which I have made my viewport height. The div tag contains the whole body section.

  1. The height of the welcome-section is not equal to the height of the viewport.
  2. Navbar’s parent should be body and it should be at the top of the viewport.

https://github.com/JoBarkhuizen/FCC-Personal-Portfolio-Page.git

Any suggestion on this is much appreciated.

Thank you in advance

2

@JoBarkhuizen we need a link to the live website so we can view the work you have created. You can turn you project into a Github page or put it in Codepen and edit your post with the new link. That way we will be able to review it.

3

Hi Brandon

Thanks for assisting. I’ve set the Github project to page
https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/

Thank you

4

Hi Guys

I fixed my navbar error but still waiting on a response for viewport. The test see this as an error as mine is on my div class=wrapper and not on the welcome-section

Thanks in advance

5

Hey @JoBarkhuizen, it’s difficult to give you any specific advice without being able to see your code. But it sounds like the test is telling you exactly what you need to do. You should adjust your welcome-section to respond to the viewport height instead of your div wrapper.

6

@JoBarkhuizen here are a few tips. These are just my opinion.

  • Create a hamburger menu for mobile view.
  • Replace the lorem ipsum to make the project look more professional.
  • Add some more CSS stying to the text and surrounding areas.
7

Hi There

I made a screenshot of the code so you can have a look and I added it to my github folder.

Thank you

8

Hi Brandon

Thanks for the advice, I’ve added the hamburger menu for mobile visibility.
The reason why I have the Lorem ipsum in is that I wanted enough information so that my page scroll.
Will make it prettier with css.
Thanks

9

Hi

I changed my page so that the viewport can be set on welcome-section. Run test script and all pass.

I took Brandon’s advice: created hamburger menu for mobile view, replaced lorem ipsum with better text and add some styling…and then I broke it and cannot find the problem
The link to my page:
https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/

The problem: The Resume heading seems to be part of the Project section and the only way I could fix this was to add another heading (which is such bad coding). I cannot see why this is part of this section as it is in a separate section.

<a id="resume"><h2 style="background: brown;text-align: center;padding: 0.2em 0em 0.2em 0em;">Resume</h2></a><p>Studying Responsive Web Design through FreeCodeCamp.  My next project is studying and completing JavaScript and SQL.</p>
	<div class="resume-section">```

Can you also pls check the whole page and tell me if my coding is good practice

Thanks for your help
10

@JoBarkhuizen Hi.
The page is looking even better!

The a tag should be inside of the h4 tag not the other way around.

<h4><a href="#">resume</a></h4>

Paste your HTML in an HTML validator to make sure everything is okay.
W3 HTML Validator

I recommend only putting your CSS style inside of your style sheet not inside of the HTML so that one will not override the other and it will be easier to find it if all CSS is in one place.

11

Hi Brandon

Thanks for assisting. I forgot about the validator, thanks for the reminder.

I removed the inline style sheet from the heading elements and the changes to the a tag but this did not solve the problem.

When I run this through the validator it shows that Resume and Projects are children of body and Tribute/Landing/Technical page columns are children of Projects.

THank you