Day 160: "HTML & CSS," by Jon Duckett and Bill and Bonnie's Website

I got a ticket yesterday (for my registration being expired) and I had to go get my car horn fixed today (to get my inspection, to then get the registration, I think that's how it works), and while there, I was chatting up my mechanics, Bill and Bonnie.  I really like them a lot, they're good folks, so I told them I'd build them a website.  They're great mechanics, but not many people know they exist because they have virtually no web presence.  So, this will be a charity project, I'll deploy the site, then perhaps add features to it later as I level up my skillset.  I'll also make them a yelp page, since they don't have one of those either.

So, I'm going to approach this project from a mobile-first perspective.  Here's the layout breakpoints I'll use:

Layouts

1. Default
   Min-width: 780px 
2. Tablet Portrait (to landscape and desktop)
   Min-width: 768px / Max-width: 979px
3. Smartphone
   Max-width: 480px (using 800 px height for my mockup)

But before we can even write one line of code, I should be wireframing the site with Balsamiq, so I'll be doing that as well, I want this to be a professional job, not a haphazardly thrown together piece of work.  So here's my first draft for the mobile version:

It's simple, but I like that, I wanted to give off a very non-corporate, mom and pop vibe, because that's how Bill and Bonnie are in real life.  Now, under the image, I'll probably enter a little html5 <figcaption> element with a nice note about Billy and Bonnie's parrots.  I thought of including an email, but no one emails their mechanic...then again, on a long repair, that could be useful...but then you could just text.  Not including email meshes better with the folksy vibe of the page, but perhaps I should include it anyways.  I'll mull it over.

So I'm thinking the site will be www.billnbonnie.com.  It's easy to remember and it sounds more Americana than billandbonnie, which would be more generic.  Here's the first draft of the full page layout, it uses a different focal image, and has a small gallery beneath it, the pics are pics I just took a few hours ago when I went to get my horn repaired, and it was a bit too sunny for pics, but that's what I've got to work with, so that's what we're going with!

I like it, it's super basic, but continues with the folksy theme.  I'll make sure to add the new HTML5 <figure> and <figcaption> elements, as well as use alt values, in case the image doesn't load, and for users with some disabilities.  So, here's the tablet version, from 768px to 969px:

I'm not too sure on that one, I've never really done a table layout before.  You know, I really like the mobile one because it captures Bill and Bonnie's personality.  The large one is stylish, but the focus is then removed from Bill and Bonnie, and it feels somewhat lost.  Meanwhile, the tablet version is something of a balance between the two.  Also, I plan to use black letters with a white outline, as that's readable on any picture background.  What's interesting is that I keep making modifications here and there, and if I had started the process by coding instead of by using Balsamiq, every modification would have been a LOT of work.  Using Balsamiq so that I have a finished product, or as close to a finished product as possible, before I write one line of code, is the way to go.  This also applies to solving algorithms, I've been jumping in and solving the problem as I write it, somewhat, but I see that writing up some pseudocode would be a fantastic way to make the algorithm-solving experience more efficient.

This project is helping me a lot.  I've looked at a couple of other mobile mechanic sites, for inspiration, and they have a lot more content, with prices and such, but Bonnie and Bill prefer to be called and see what the problem is before they extend a quote, so I won't add those sections.  I'm not planning on using Bootstrap on this project...but perhaps I should finish the HTML & CSS book before coding everything up, to make sure I'm as standards-compliant as I can be. 

I'll work on that tomorrow morning, I'm going to take a break now.  In addition to the work above, I got up to page 209 of the book today.


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 

In Progress: "HTML and CSS," by Jon Duckett (On pg 209 of 490)
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: 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: 5

Total Hours Coding: 734