I feel like I'm struggling conceptually

1

I got through up to creating a portfolio just fine. I thought I had grasped the CSS/Bootstrap content conceptually, but clearly that is not the case and its starting to bother me. Ill show you an example.

CodePen Link

All I’m trying to do is change the color of my navigation bar text by using the classes in CSS. I’ve tried multiple combinations including. I’ve used multiple different element tags in front of the squiggly brackets and I just don’t know what to do. Just in case the codepen gets changed, ill put it in this thread.

<!doctype html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<div id="navbar">
  <nav class="navbar navbar-default">"
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">ZCHDesign</a>
      </div>
      <ul class="navbar-nav">
        <li class="active">
          <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Hire</a></li>
      </ul>
    </div>
  </nav>

and the css is

li {
  color: black;
}

Ive also tried “a”, “navbar”,“.navbar”,“.navbar-default”, etc etc as the element tags. I feel even if i guessed it right theres simply something conceptually I’m not getting. Is it normal to be this stuck this early? Should I focus more on CSS instead of Bootstrap? Thanks for all your imput guys.

2

There were a few mistakes in your code which I cleaned up for you. That’s how a single HTML file should be written for your task. You said you were using Codepen - make sure to import bootstrap with Codepen’s interface (See: How To Add Bootstrap To Codepen)

Example of a standalone .html file using bootstrap

<!doctype html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
li {
  color: black;
}
</style>
</head>
<body>
<div id="navbar">
  <nav class="navbar navbar-default">"
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">ZCHDesign</a>
      </div>
      <ul class="navbar-nav">
        <li class="active">
          <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Hire</a></li>
      </ul>
    </div>
  </nav>
</body>
</html>
3

Thank you! I did add bootstrap to CSS, but I still couldn’t style anything in CSS. Was it because of the code being wrong in HTML?

4

Possibly but you are using codepen right? If so it’s a bit different for you and you only need to include the following in your HTML:

<div id="navbar">
  <nav class="navbar navbar-default">"
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">ZCHDesign</a>
      </div>
      <ul class="navbar-nav">
        <li class="active">
          <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Hire</a></li>
      </ul>
    </div>
  </nav>

Put the CSS code in the CSS Spot for Codepen and let codepen do it’s magic :slight_smile:

5

hello,
why the " at the end off line 6 ?
R

6

not line 6 but line 13

7

I got rid of it shortly after I posted it here, but all it was was plain text. Thanks for the reply.

8

Even if it’s plain text it’s still a different symbol type and changing it to a normal quote fixes the problem.

9

thank you so much for all of your help. I feel like im picking it up better.