Help - challenges/build-a-personal-portfolio-webpage

1

Hi guys,

I am new to freecodecamp and just started the second challenge.
I feel a bit out of my depth.

Is there a library for HTML, CSS, and Bootstrap that is easy to search?

I went to the get bootstrap page and found some info on building a nice looking navbar, but I have no idea what all the class and ID functions do.

<nav class="navbar navbar-default navbar-static-top">

<div class="container">
	<div class="navbar-header">
		<h1 class="navbar-brand">WPDES</h1>
	</div>
	<div id="navbar" class="navbar-collapse collapse">
		<ul class="nav navbar-nav">
			<li><a href="#about">About Me</a></li>
			<li><a href="#skills">My Skills</a></li>
			<li><a href="#work">My Work</a></li>
			<li><a href="#contact">Contact Me</a></li>
		</ul>
	</div>
</div>

There are so many references to the navbar, that I have no idea what to reference to put in my own style.
That made me realise that I also don’t have all the knowledge in CSS to build what I want.
The first 4 courses just before the challenges, doesn’t leave you that well prepared.

I guess this might be the idea. Throwing you in the deep end. So back to my original question.

Is there a library for HTML, CSS, and Bootstrap that is easy to search?

Thanks for all your help in advance.

2

Hi @JanvdW1983 ,

What I would suggest you to do is to try learning what each class of boostrap is doing to that navigation item.
Try removing some classes and see how the navigation changes. I would also use web developer tools to see what peoperties each class has.

This is basic in bootstrap and if you understand it, you will win on the long run.

What I usually do to overwrite the styles is that I create another CSS file which I’ll link underneath bootstrap and then in this file I write my own CSS.

If, for example you want to change the navbar’s background color, you’ll write in your CSS, something like this:
.navbar-default{
background-color: orangered;
}

This will overwrite the default grey bg color of the navbar.

Hope this helps :slight_smile: !
Florin

3

W3schools will let you “try” their examples, so you can see the code already written, see it run, and fiddle with it to look at the changes.

Also Coursera was helpful to get a quick overview of lots of Bootstrap components but I don’t know if you can simply audit it (I mean for free). But it covered lots of things in navbars, toggle elements, nav-pills etc, panels, wells, tabs, scrollspy and affix.

I know it’s not vital to get along with Css and Bootstrap but it’s saved me a lot of time: now I know more or less where to look and what I can expect.

4

There’s Bootstrap’s site

You can also check out https://devdocs.io/

1 Like
5

@Flopet17 @timotheap @kevcomedia

I completely forgot about the inspect in the browser. I will definitely try that when I get back in front of a PC.
I have been doing some fiddling but I get all mad scientists, and have to start from the beginning again. The almighty blank page.

I will definitely look for that Coursera. That will help a lot. Hope it’s a free audit. Most have that option.
As for W3Schools. I find that great for a single element problem, but bootstrap nav is a lot of problems. Easier to just muck about in code pen.

I was on getbootstrap. Got some info their but seems to be for people more familiar with coding.
I will definitely have a look at devdocs. Just doesn’t work lekker on mobile.

Thanks for the resources and suggestions guys.

2 Likes