Day 163: Bill 'n' Bonnie's Website

All right, since I finished the book yesterday, I'm starting today by going over mobile first design briefly, and then I'm coding up the website for Bill and Bonnie, a married couple here who are mobile mechanics.  It will be super basic, the main reason for it is simply to have something for people that find Bill and Bonnie on Yelp to click on.  That, and for me to have a project I can start from zero to finish by myself, using mobile-first design principles.  Later on, perhaps I'll add some special effects with JavaScript or JQuery. 

For the mobile site, we can use max-width, and for the desktop site, we can use min-width.  Now, for the in-between site, we can do this:

<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: red;
    }
  }
</style>

So that covers all the page widths between 500px and 600px.  I'll be using a mobile-first design approach, so the first thing I'll do is design the mobile site, then build up from there.  Once it's all designed, I'll code it up and deploy it.  All right, let's get started!

O.k., I'm done with the site, I made it super basic, and I also made a Yelp account for Bonnie, that will be the more important thing, as people will actually be able to find her.  Here's the yelp site:

And here's the actual site:

I also read 64 pages of the JavaScript book, it was lots of basics, nothing I don't already know, so I won't make any notes of it, but that's where I'll start my next entry.

SUMMARY OF CODING SKILLS

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

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

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)
Console Foundations
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

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 

Completed: "HTML and CSS," by Jon Duckett
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

My Progress on The Odin Project:

1.  Introduction to Web Development                                             100% Complete

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

My Progress on Free Code Camp (FCC): 
1. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                           Complete
5. jQuery                                                                                              Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                   Complete
9. Basic Front End Development Projects                                                 On 4 of 5
10. Intermediate Algorithm Scripting                 On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.

Hours Spent Coding Today: 6

Total Hours Coding: 750