Day 145: FCC, Basic Front End Web Dev Projects, Portfolio Page

Okay, I was kind of curious as to how hard the next set of Bonfires are (after the current set of Ziplines), so I skipped over to the first Bonfire of that set that is coming up (section 8, Intermediate Algorithm Scripting), and I knocked out the first problem quickly.  We were given a two-number array, and we had to sum up all the values in the array, as well as every number between the two numbers.  Here's my solution, and it worked!

function sumAll(arr) {
  
  function getMaxOfArray(numArray) {
    return Math.max.apply(null, numArray);
  }
  function getMinOfArray(numArray) {
    return Math.min.apply(null, numArray);
  }
  var maxNum = getMaxOfArray(arr);
  var minNum = getMinOfArray(arr);
  newArray = [];
  for (var i = minNum; i <= maxNum; i++) {
    newArray.push(i);
  }
  var total = newArray.reduce(function(a, b) {
    return a + b;
  });
  return total;
}


sumAll([1, 4]);

That's pretty cool, I feel pretty confident now, so it's a good way to start the day off!

Okay, now, back to the first Zipline project, which entails building my own personal portfolio website.  O.k., so first thing to work on is the navigation bar.  Here's what I've got so far:

<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand texttopname">Adan Camacho | Web Developer</a>
    </div>
    <div class="collapse navbar-collapse"id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#" class="texttop" id="Home">Home</a></li>
        <li><a href="#" class="texttop" id="About">About</a></li>
        <li><a href="#" class="texttop" id="Portfolio">Portfolio</a></li> 
        <li><a href="#" class="texttop" id="Contact">Contact</a></li> 
      </ul>
    </div>
  </div>

</nav>

And as for the CSS:

.navbar {
  border-bottom: 4px solid #104DA1;
  border-top: 4px solid #104DA1;
}

.texttop {
  color: #104DA1;
}

.texttop:hover {
  color: #104DA1;
  font-weight: bold;
}

.texttopname {
  color: #104DA1;
}

#Home:hover, #About:hover, #Portfolio:hover, #Contact:hover {
  background-color: #ECF4FF;

}

The problem I'm having is that the nav bar items on the right, the list, is supposed to turn into a little box with a dropdown menu when the screen is smaller, but it isn't doing that.  Working on that right now.

Note: when using BootStrap, there is no need to include a normalize.css file in your project, as BootStrap already has that within it (so the bootstrap link is enough).

O.k., I figured it out, here's my final (so far) HTML for the nav bar:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand texttopname" href="#" id="brand">Adan Camacho | Web Dev</a>
    </div>
    <div class="collapse navbar-collapse"id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#" class="texttop" id="Home">Home</a></li>
        <li><a href="#" class="texttop" id="About">About</a></li>
        <li><a href="#" class="texttop" id="Portfolio">Portfolio</a></li> 
        <li><a href="#" class="texttop" id="Contact">Contact</a></li> 
      </ul>
    </div>
  </div>

</nav>

And the CSS:

.navbar {
  border-bottom: 1px solid #888888;
  border-top: 1px solid #888888;
  font-size: 14px;
}

.texttop {
  color: #104DA1;
}

.texttop:hover {
  color: #104DA1;
  font-weight: bold;
}

#Home, #About, #Portfolio, #Contact {
  color: #104DA1;
  background: #F8F8F8;
}

#Home:hover, #About:hover, #Portfolio:hover, #Contact:hover {
  background-color: #ECF4FF;
}

#brand {
  color: #104DA1;

}

It works in CodePen, but not in my browser (the dropdown doesn't drop down), which must be due to the links in my off-CodePen files (to JQuery or BootStrap) or a browser compatibility issue, but I'm going to leave that be for now and focus on CodePen.  This is because CodePen is where we're supposed to construct this Zipline project, and I can focus more on links, browser compatibility, and any other issues later when I make a project that goes live or when I make this project go live.  

O.k., closing up for today, and I'll be back at this tomorrow.


SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,120

Treehouse Ranking (%): "You have more total points than 94% of all students."

Treehouse Badge(s) Earned Today:

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (768 pgs.)
In Progress: "Head First JavaScript," by Eric Freeman and Elisabeth Robson (on pg. 56)
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers (293 pgs., 89 chapters with 20 questions/problems per chapter, for a total of 1,780 coding questions/problems answered)

My Progress on The Odin Project:

1.  Introduction to Web Development                                            100% Complete

2.  Web Development 101                                                               33% Complete 
Note: Switched to FCC for the great online community and better updates/support.

My Progress on Free Code Camp (FCC): 
1. HTML5 and CSS                                                                                  Complete
2. Responsive Design with Bootstrap                                                       Complete
3. jQuery                                                                                               Complete
4. Basic JavaScript                                                                                 Complete
5. Object Oriented and Functional Programming                                     Complete
6. Basic Algorithm Scripting                                                                    Complete
7. Basic Front End Development Projects                                                 On 2 of 5
8. Intermediate Algorithm Scripting
9. Upper Intermediate Algorithm Scripting
10. Automated Testing and Debugging
11. Advanced Algorithm Scripting
12. AngularJS
13. Intermediate Front End Development Projects
14. Git
15. Node.js and Express.js
16. MongoDB
17. Full Stack JavaScript Projects

After the FCC work above (estimated to take 800 hours), there are 800 more hours of coding projects on behalf of non-profits, which, in addition to contributing to the common good, provide us an opportunity to expand our networks and build a robust portfolio.

Hours Spent Coding Today: 6

Total Hours Coding: 656