Day 38 & 39

     Yesterday, my bootcamp received a new assignment, Assignment 3 in which our task is to clone the webpage for http://www.onsite.io. This will be a good assignment to try to use some of the new skills I have learned!  Upon starting, I decided I would try to get as far as I could without looking at the website's code, but did allow myself to look at some of my previous projects and to use google. Once I made a perfect clone of the site or reached a point where I could not improve my clone further, only then would I allow myself to start inspecting the original site's elements using Chrome's Dev tools to uncover the site's true code.  Lets get to it....

Here is a log of my activities:
After watching the assignment video, I set up sublime text, and began trying to recreate the code. Had some problems before I realized I hadn't added bootstrap.  Found it can be a lot harder to recall syntax when you're staring at a blank screen. 

Reviewed the instruction video, organized the main sections into Header, Article and Footer. Started downloading the images.

Struggled making downloaded images show up in clone.  File could not be linked locally.  Also, couldn't figure out how to download the majority of the images from the site.

Started organizing the article into columns and rows.

Added more text, still having problems with coloring sections.

It took awhile before i figured how to link to css, but one I got it working, I spent some time trying to match the site's css.

Next, I realized that the clone site has a navigation bar that stays at the top as the user scrolls through the rest of the site. I have never run across how to do this in my lessons so I went to my friend google.  I found some code that accomplished this with a combination of html/css/javascript.  Then, I figured out how to link my html to javascript. As of now I just started analyzing the code so that I can understand it instead of just using cut and paste, but it still is not working on my clone.  Plan on staying up a couple more hours and trying to figure it out before I go to sleep for the night.

     It's good to be applying my new knowledge to actual projects.  Building things is the best way to learn!  As promised, I will be updating my coding skills summary twice a month.  It's that time, so here you go:


SUMMARY OF CODING SKILLS

LearnJS Bootcamp                                                                           Status (starts 8/8/2016)
Week 1: Basic HTML/CSS & Javascript                                               Complete

     Codecademy: Introduction to Javascript                                       Complete

     Codecademy: Make a Website                                                      Complete
     Codecademy: Make an Interactive Website                                   Complete
     Codecademy: Learn the Command Line                                 21% Complete
     Codecademy: Learn Sass                                                       17% Complete 
Week 2: Clone a Website                                                                  In Progress

Books:                                                                                              Status
"Eloquent Javascript" by Marijn Haverbeke                                   11% Complete

Free Code Camp (FCC)                                                                      Status

1. Get Started with Free Code Camp                                                   Complete

2. HTML5 and CSS                                                                              Complete

3. Responsive Design with Bootstrap                                                   Complete

4. Gear up for Success                                                                75% Complete
5. jQuery                                                                                          Complete
6. Basic Front End Development Projects                                      33% Complete
7. Basic JavaScript                                                                            Complete
8. Object Oriented and Functional Programming                                 Complete
9. Basic Algorithm Scripting                                                               Complete
10. JSON API's and Ajax                                                                     Complete
11. Intermediate Front End Development Projects                          0% Complete

12. Intermediate Algorithm Scripting                                            42% Complete

13. Advanced Front End Development Projects                                    Incomplete

14. Claim Your Front End Development Certificate                          Incomplete

15. Video Challenges                                                                   60% Complete

Other:                                                                                          Status

CodeWars                                                                                      Rank: 6kyu 

                                                                                                     Honor: 59 

                                                                                                     Honor Position: #26418/71%

    

My Web Dev Portfolio: In Progress
CodePen Projects: http://codepen.io/LosslessBinary/

GitHub Projects: https://github.com/LosslessBinary

Free Code Camp Profile: https://www.freecodecamp.com/losslessbinary

Hours Spent Coding During This Blog Entry:4.5

Total Hours Coding:88