Help regarding Personal Portfolio Page Exercise

1

Hi everybody. I am just starting out with freecodecamp and I’m trying to build a Personal Portfolio page as part of the front end course. I have two questions.

  1. Firstly, I would like to create the divider below the heading. The ---------</>------------ but I can’t figure out how to do it with <hr/>.
  2. Secondly, can anybody tell me the bootstrap classes or any other method of achieving the behavior of this form, i.e when you click on the fields, the placeholder text becomes the label.

The picture would make understanding a little easier.

image.png664×565 8.67 KB

Thanks, in advance. :slight_smile:

2

I cleaned up your code.
You need to use backticks to post code to the forum.
See this post for details.

3

You don’t necessarily need to use a hr. Try doing it like this:

<div class="bar"></div>
<i class="icon-code"></i>
<div class="bar"></div>

.bar {
  display: inline-block;
  width: 100px;
  border-bottom: 5px solid #ddd;
}

I am not sure exactly what you want here. If you are changing the input field text or placeholder, you would probably need to use your own custom JavaScript for this (which shouldn’t be too hard with jQuery) as I don’t think it is part of Bootstrap.

1 Like
4

Isaac’s solution is a good one, but incase you want to strictly abide by using a hr tag, here’s your code:

`

hr.custom { border-top: 1px dashed #8c8b8b; }
`
5

Thank you all. No it was not about hr. I just wanted to find the best possible way to achieve. Thanks again for the help.
Will it be possible for me to complete the project and then post it on the forum to know about any corrections and mistakes?

6

@IsaacAbrahamson when I tried your method with <div class=bar> there were two problems.
Firstly I could not get the fa-code icon to show up from Font Awesome.
When I resize the page in the actual example, the divider just resizes itself, but in my example, in starts on the next line.

What could be the problem here?

7

Yes, there is a special place in our forum called “Project Feedback” for this very purpose. If you would to mention me, I will be sure to review it for you.

Make sure you have Font Awesome installed properly or try using it by itself in a different section of the page.

Please give me a link to your example and a link to your project (like on CodePen or GitHub).

8

Hi, @IsaacAbrahamson. I’ve built everything and almost everything looks great. I just can’t get the scrollspy to work properly. It needs to automatically select item in navbar as I scroll down but it is simply not moving. Could you please tell me what I’m missing here. Its making me pull my hair out.
Thanks.

Here’s the pen: Personal Portfolio

9

This is a Material Design thing and it’s hard as hell to implement yourself. You can take a look at MD implementations like Materialize, which will work much like Bootstrap (drop in CSS and JS files, add classes to the markup).

10

Thanks for the reply, I’ve tried and implemented it by using CSS and jquery, not sure if it is supported by all browsers but at the moment it works like a charm.