Looking for feedback on portfolio page and a bit of help with the anchor tag

Code Feedback
1

Hello all, I’m looking for any feedback/suggestions for my portfolio page. The main thing I’m having trouble with is figuring out how to get my links to move to a specific part of the page. Clicking on the “About” link cuts off the “About Me” header when you click on it and clicking on other links also will not show the title of the section when clicked on. How can I fix this?
My portfolio sample is here - https://codepen.io/melylagunas/pen/VzXwbo.

Also, just a side note–I used photos from unsplash.com as placeholders. I claim none of the beautiful photography as my own.

2

First off, good job. The portfolio is looking very nice. Secondly, the “navbar cuts off my headers” is a well-known issue of the bootstrap fixed navbar.

You can solve it by giving some padding and some negative margin to the headers, like this:

h1, h3 {
   padding-top: 70px;
   margin-top:-70px;
}

Some things you should note:

  • You don’t need an empty anchor for your sections, you can give the id to the headers. So this:
<a id="portfolio"></a>
	<h1>Portfolio</h1>

becomes:

<h1 id="portfolio">Portfolio</h1>
  • Put your CSS in the CSS panel. There’s nothing wrong by having it where you put it, but it’ll be easier for you to modify it if you ever need to do it.
  • You don’t need the html, head and body tags in codepen and you should link all your external files in the pen settings, instead of having them in your HTML panel.

802c8249d6115a49a6d929d6d0f99633.png948×290 14.9 KB

67bd862be01f906ee0e4975d929ed10d.png942×223 12.1 KB

Lastly, you can make use of the “Scrollspy” Bootstrap plugin. It makes it so when you scroll through your sections, the corresponding link on the navbar will become active. You can do it like this:

  • Remove the active class from your “about” li
  • Wrap your content in a <body> tag (like you already have, but you just need the body for this)
  • Make your opening body tag like this:

<body data-spy="scroll" data-target="#navbar" data-offset="20">

  • Give your nav the same id of the data-target on the body (in this case, “navbar”):

<nav class="navbar navbar-inverse navbar-fixed-top" id="navbar">

You can read more about the Scrollspy here.

All that aside, you did a fine job. Nice work!

1 Like
3

Thank you so much for your help, I appreciate it! I’ve applied all of the changes you suggested :slightly_smiling_face:
Quick question – if I want to change the background color of each section (like the portfolio or contact me section) do you suggest I do that with the div element?

4

No problem! And, yes. Your best bet will be to wrap each of your sections in a container, instead of having one container wrapping them all. That way, you’ll be able to style the indivual sections as you prefer.

Also, good job implementing the fixes!