Stuck with portfolio page challenge

Stuck with portfolio page challenge
0

#1

Dear all,

I am a beginner in code learning.

To Build a Personal Portfolio Webpage, i don’t know how to make the navigation menu bar. I googled and found this site. I test and follow up to Step 3 and there are two situations.

Situation 1

After pasting the code, no sections (that means ABOUT, PORTFOLIO, CONTACT) are shown.

Situation 2

Not until I test & delete the original line 4
div class=“collapse navbar-collapse” id=“myNavbar”

then three sections (that means ABOUT, PORTFOLIO, CONTACT) are shown.

My questions are :

1/ Why Situation 2 shows the sections but Situation 1 does not?

2/ are there any recommendable resources or readings before i start to work this challenge out?

I think and think but still cannot figure it out. I hope I can really LEARN & understand coding, rather than just copy & paste. Thank you in advance.:pray:


#2

The collapse navbar-collapse classes are for when you are viewing the page at a smaller screen size and will show the “hamburger” icon (3 lines) on the side instead of the text. If you click the icon, it should show the hidden sections.

The reason you aren’t seeing these may be because you need to adjust the screen/column size when testing out in Codepen. I would suggest keeping a tab open with the Full Screen size or manually adjusting the column size in Codepen as you code.

A lot of times when you’re working on a project like this, you are learning despite feeling like you’re just copying and pasting. Reading documentation to figure out how to make something look and work the way you want it to is a skill especially in web development that also has to be learned.


#3

Thank you for ur prompt help!

1/ I have tried to keep a tab open with the Full Screen size or manually adjusting the column size in Codepen as shown below, but it is pity that situation 1 still exists (all sections ABOUT, PORTFOLIO, CONTACT cannot be shown)

2/ thanks for the link info & ur kind advice. I will keep trying. :slight_smile:


#4

I’ve followed the steps from the link you’ve shown above. You’re not seeing any CSS styling because the CSS link is probably in the wrong place (check the CSS tab on codepen and double check on that website’s tutorial).

I made you an updated version of the navbar, as that tutorial is using bootstrap 3 and there is now a version for bootstrap 4. Here’s the link: https://codepen.io/v-lai/pen/ZvKrgp

Here are the steps I took in order if you want to do it yourself from scratch:

  • create a new codepen
  • open the bootstrap docs’ intro
  • click on the Settings button in codepen and copy the CSS url from the docs into the CSS tab’s ‘Add External Stylesheets/Pens’
  • copy all the JS urls from the docs into the JS tab’s ‘Add External Scripts/Pens’ (jQuery, popper, bootstrap)
  • look through the docs/use the search bar to add things to the site and modify the HTML as necessary, so I searched for navbar and edited the HTML from the examples to look like that tutorial’s info

Best of luck and keep at it!


[Solved] Bootstrap v4 navbar collapsing & scrollspy won't work on CodePen
#5

Thank you for your step-by-step tutorial.
Here is my updated site. https://codepen.io/cywind1/pen/OzWwzb
Learning the method is useful, thank you!