Day 62: Introduction to Programming (Javascript)

The next section of the Odin Project is an introduction to javascript.  However, on the Treehouse Front End Web Development track, the next course is "Introduction to Programming."  Now, still in Treehouse, right after that course, comes "Javascript Foundations."  So, because of that, I think now would be a good time to get "Introduction to Programming" knocked out, that way I can get that out of the way and get started on Javascript on Treehouse at the same time that I do so on The Odin Project.  

I started the "Introduction to Programming" course, and the programming language for the course is javascript, so it looks like I'm diving right into javascript.  Javascript is the language of the web browser.  TO access the Javascript console on the Chrome web browser, we can go to View, Developer, Javascript Console, or by pressing Command, Option, J.  REPL stands for Read, Evaluate, Print, Loop.  To multiply in the Javascript Console, we use the * key, so 9*2 would result in an output of 18.  For text in javascript, we should wrap the text up in quotes (either double or single) to create a string.  When we insert a plus sign between two strings, javascript will join, or concatenate the strings together, so "Hello" + "World" would result in an output of "HelloWorld" in the console.

We used the alert(12) function to make a small popup appear on the screen with the number 12 in it.  The command alert(12) does not return or evaluate to anything, so it shows "undefined" in the console.  Alert is the function, and we are executing the function by entering parentheses with a value inside.  We used the prompt function, followed by parentheses with a string inside, to make the browser pop up a small window with a text box inside for the user to input information into.  We can also combine the prompt and alert functions to create sequentially appearing pop up boxes.

In order to add javascript to a website, we should first create the usual index.html site, and once that's created, in a folder near to it, we should create a file with a .js extension.  The name of the file does not matter, as long as the extension is .js.

The great thing is I actually feel pretty comfortable with HTML and CSS now.  I'm looking forward to the day I can say the same about javascript, jquery, ruby, and ruby on rails.  It's just a matter of putting in the time and soon I'll be able to say I'm a web developer!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 4,236
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 747, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 88% 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, but switched focus to web dev, as opposed to web design)
Git 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 (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 2
Total Hours Coding: 302

Day 61: Completed Github Basics!

Today I'm working on a Git class on Treehouse, "Working with Remote Repositories."  Then, I'm reviewing all the work I've done on Git, briefly, so I can move on to Javascript. 

Unless we are starting the project ourself, usually the first step in working with Git is to clone the repository to your local computer and tell it the remote repositories you will be working with.  If we enter the git clone command, followed by the path to the Git repository, followed by the name of the folder we wish to clone the repository in, Git will clone the specified repository into the named folder.

When we clone a repository into our new project folder, Git creates a folder named origin in the new project folder.  The origin folder is a copy of the remote repository that was cloned into the new project folder.  On the other hand, the original repository is unchanged, no new folders are added to it whenever someone clones it.  However, with the git remote add command, followed by the folder name and the pathway of the cloned repository, we can add a copy of the new cloned folder to the original Git repository.

To push some work that we've done on a branch up to our remote, we would use the git push origin command, followed by the name of the branch we are pushing.

I then went over a video that went over Github and the services it provides.  Github offers pull requests.  Pulling means to merge changes in from a remote repositories.  A pull request is what you use when you have code that you want someone to pull into their project.  We also went over forking briefly, which is the process by which you clone someone else's repository.  

I finally completed the Github Basics course!  After doing so, I went back to the beginning and watched every video again.  I wanted to increase my retention of all the information I went over, and I thought reviewing the entire course would help, so I did.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 4,236
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 747, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 88% of all students."

Treehouse Badge(s) Earned Today:
Working with Remote Repositories

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, but switched focus to web dev, as opposed to web design)
Git 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 (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 3
Total Hours Coding: 300

Day 60: More Github Basics

I started the day off with a Github course class called "Introduction to Merging."  When in the git log, type in "q" to exit it and go back to the command prompt.  These are  some github commands I learned:

git clone - create a new repository that is a clone of a remote repository.

git remote - list all remote repositories associated with the current repository 

git remote add - add a new remote repository to the current repository.

Actually, the correct word would be that I used these commands, I haven't really learned them yet.  I got up to the video on merging, and then I didn't feel like I was learning anything anymore.  I need to complete the badge on Merging, and after that, the next badge is on Git workflows, but since I feel like the instructor is going too fast, I'm simply going to go over all the Git videos again.  I need to make sure that I'm VERY comfortable with Git, as, if I end up working remotely, it will be a very important part of my job.

Nonetheless, I've moved forward in The Odin Project!  I'm now at 29% done on Web Development 101!  The next lesson is called "Javascript 101," and I'll get to work on it as soon as I review all my Git work on Treehouse and complete the last badge.  This should be done by tomorrow, as I'd really like to wrap up this Git Basics training and keep moving forward.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 4,125
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 637, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 87% of all students."

Treehouse Badge(s) Earned Today:
Workflows

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

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (in progress, about 66% complete, but ceased work on this, switched focus to front end and back end web development, as opposed to web design)

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

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                29% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 2.5
Total Hours Coding: 297

Day 59: Github Basics

When I finished the Google homepage project, the instructors suggested I upload my project to the Odin Project's curriculum, which is housed on Github, so as to allow other students to view it.  I looked around a bit at the instructions on how to do so, but it's a bit unclear to me.  So, knowing that using a VCS (version control system) is an important part of being a developer, I'm jumping back over to Treehouse to take their Github Basics course.  I've already started on it, and so far the course explained why it is that a VCS is a powerful tool for developers.  Now it's time to learn how to actually use a VCS, like Github.  I'm already somewhat familiar with Github, as my work is uploaded on my Github account (my Google homepage project), but I'm not an expert at it, so I'd like to remedy that.

The act of telling your VCS that a version is finished is called committing.  VCS usually allow you to view and filter the full list of your commits.  Git was invented by Linus Torvalds, who is also the inventor of the Linux OS.  Linus invented git to organize collaboration on Linux.  Linus still maintains the Linux kernel.

Version control systems can be distributed or centralized.  If the repository is stored in one central location, the VCS is centralized.  With distributed MVS, each user has a repository, which means that any user can work on the project without being connected to a central repository.

Github is very popular with developers, and it's like a social network for your repository.  Your project can be shared and other people can contribute or comment on it.  

Setting up a git repository.

We can set up a file, then run the git init command from inside of it, and git will install repository files for that file.  You can verify this by running the ls -a command from inside of the file, and this will show any visible files in the folder, as well as the hidden git files which should now be in the folder as well (due to running git init).

The git add command (followed by the name of the file) adds all the changes in the file to the staging area.

rm -r .git, when inside the folder with the .git file inside it, will remove the git folder, but the -r (recursive) command is very powerful, so we should avoid using this unless we're absolutely sure we know what we are doing.

When inside of the project folder in the command line, in order to let git know that a certain file should be added to the repository, we must enter "git add" followed by the name of the file you want to add to the repository.

The git commit -a command tells git to commit all of the changes it can find in your project folder.  Or, we can do git commit -a -m "Added change X" to include a message (the -m is for the message, which should be in quotes).

The git log command will show us a log of all of our commits.  The command git checkout -b (followed by a branch name) will create a branch in that name and switch us to it.  The command git branch (followed by the branch name) will create a branch, but will not switch us to that branch.  The command git checkout (followed by the name of the branch) will switch you to the desired branch.  The command git branch will output a listing of all the branches in the project and place an asterisk next to the one that you are currently on.  The command git branch -D (followed by the name of the branch) will delete the branch named, but the command will not function if you are in the branch you want to delete.  So, if that's the case, enter git checkout master to switch to the master branch, then enter the command to delete the desired branch.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 4,010
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 522, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 86% of all students."

Treehouse Badge(s) Earned Today:
Why Version Control Matters
Getting Started with GIT
Branches

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

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (in progress, about 66% complete, but ceased work on this, switched focus to front end and back end web development, as opposed to web design)

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

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                25% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 3.5
Total Hours Coding: 294.5

Day 58: Finishing up the Google Page

I continued working on the google homepage project today.  This is what I have so far:

The part I'm having difficulty with is the section with the two <input> elements, "Google Search" and "I'm Feeling Lucky."  When I stretch the page, they stay in their same spot (because of how I set up their layout).  But, I want them to move, just like the search bar and the google image do...except, they are two elements, not one, so I can't just set margin-left and margin-right to auto...

I figured it out!!!  I had to use lots of containing divs to get what I wanted, but I got it!!!  Here it is!

And when you enlarge the page...

It all moves like it should!!!  The layout flexes properly and no part of my page is "broken."  I'm done!  Woohoo!  I learned a TON from this project!  The only code that I copied was the code to make the footer stick to the bottom of the page, and I'm going to look at that code in detail now, so that I can understand exactly how it is that the author made the code do what it does.  After I do that, I need to upload my creation to Github.  All right, taking a break to go eat a healthy lunch, and then I'll be back at it.  Worked on this a bit when I got back from lunch, my work is now on Github!  Today was great!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 3,823
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 336, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 86% of all students."

Treehouse Badge(s) Earned Today:
None

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

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (in progress, about 66% complete, but ceased work on this, switched focus to front end and back end web development, as opposed to web design)

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

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                25% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 5
Total Hours Coding: 291

Day 57: Finished the HMTL and CSS Book and Started on the Google Homepage Assignment

Started off the day on pg 682 of the HTML and CSS book, and finally finished the book.  My assignment now, following The Odin Project's coursework, is to make a copy of Google's homepage.  I'm supposed to copy it as close as I can without looking at the actual code (so, don't use the browser dev tools to cheat).

I learned that the opposite of "command z" is "command shift z."  That came in handy several times.  This is what I've got so far:

But then, I didn't like how the footer was "floating," instead of being stuck to the bottom of the page, so I looked around online and found this:

http://css-tricks.com/snippets/css/sticky-footer/

I inserted it into my code, made some modifications for the height of my footer, and then we're now at this point:

Much better!  I did notice a while back that the header and footer links that are floated right show up backwards.  And here we are now:

I've corrected the order of the nav and footer links that are floated right, and I've also added the "Sign in" <submit> element, along with some styling for it.

I added the little box image!  I made it an anchor element/link also!  It's coming along...

SUMMARY OF CODING SKILLS

Total Treehouse Points: 3,823
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 336, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 86% of all students."

Treehouse Badge(s) Earned Today:
None

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

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (in progress, about 66% complete, but ceased work on this, switched focus to front end and back end web development, as opposed to web design)

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

Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                25% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4
Total Hours Coding: 286

Day 56: HTML and CSS Book, Tables and Lists

I started the day where I left off yesterday, on pg 604, which is in Chapter 13: Tables and More Lists.  I'm almost done with the book!  Since I had read ahead earlier, that means I only need about 90 more pages to finish the book.  I was really content with my day yesterday, I did the work that I set out to do, I ate well, and I got a good night's sleep.

I'd like to have a repeat of that today, but I'm stepping it up a notch.  Yesterday I read 60 pgs.  Today, my goal is to read 90 pages.  It's noon right now, and I haven't started coding yet (I've been socializing at the coffee shop with my brother and my friend since 9 a.m.).  I'll go grab lunch in a bit, but if I woke up at 9 a.m., and if I'm awake for 16 hours, then I should be going to be no later than 1 a.m.  That means, factoring in an hour for lunch, I still have about 12 hours left in which to read the 90 pgs i would like to read today.  That comes out to about 7.5 pages an hour, which is a pg every 8 minutes.

All right, let's get to it.  :)

HTML Tables use a border-spacing property that sets the border-spacing property for every cell.  This is used instead of the usual margin property around box elements.  The border-spacing property can be one value for all sides, like this:

border-spacing: 10px;

Or, it can be one value for the vertical and one for the horizontal, like so:

border-spacing: 10px 30px;

Either is fine.  If we do border-spacing: 0px, then there will be no spacing between the borders of each cell, creating a wider line (because they are two lines, combined), if the borders are not clear (if they are colored black, for example).

I am on pg 616 now, and it's 1:06 p.m., 80 pgs to go.

Using the border-collapse property with a value of collapse will achieve a similar result, except this combines the two borders (of neighboring cells) into one, making a thinner line (the size of one line) if the borders are not clear (if they are colored black, for example).

If we need a td cell to span two rows, we can give it the property and value "rowspan="2".  If we need a td cell to span two columns, we can give it the property colspan, and a value specifying the number of columns we want it to span.  I created an HTML table and a table nested within the table as well.

When making lists, we have the option of allowing any texts that needs to wrap to start either below the marker or below the text above.  The property that controls this is called list-style-position.  If it is set to "inside," then the text will wrap under the marker.  If it is set to "outside," then the text will wrap just under the text above.

I'm on pg 645 now, which is the first page of Chapter 14: HTML Forms, and it's 6:52 p.m.  That means I've got about 50 pgs more and I finish the book.  My goal is still to finish it today.

I went over <input> form element, and the various "type" attributes used with that element such as text (enter text in a blank rectangular field), submit (creates a submit button that can be clicked on to send information to the server), radio (select only one of several buttons), and checkbox (check as many boxes as you want).

The <select> and <option> elements work in conjunction with each other (the <option> element is nested within the <select> element) to create a dropdown menu from which the user can make their selection (the content of the <option> element is used for the menu items' description.

The <textarea> element creates a text box (larger than that created by the <submit type="text"> method) in which users can input information, which can then be submitted to the server.

There are also some new HTML 5 input types that we went over, such as number, range, color, date, email, tel, and url, which create some interesting displays for the user to interact with.

To make a submit button say something other than submit, we can put a value attribute in the element and give it a value like "Order Now."  I ended the day on pg 682.  So close, almost finished the book!  It's ok, I will finish it tomorrow, and then my next task is to build a copy (HTML and CSS) of the google website.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 3,823
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 336, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 86% of all students."

Treehouse Badge(s) Earned Today:
None

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

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (

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

Books Read or in Progress:
"Head First HTML and CSS," by E. Robson & E. Freeman (I've read the 37 pg. preface the first 255 pgs. (the HTML section), and am now up to pg 682 (now in the CSS section).

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                25% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 8.5
Total Hours Coding: 282

Day 55: More of the HTML and CSS Books

The last couple of days have been spent with my family enjoying Thanksgiving!  :)

Time to get back to work!  

I started the day on pg 545 of the HTML and CSS book.  This chapter covers HTML 5.  I am learning about the new HTML elements, such as <header>, <article>, <footer>, <section>, <aside>, <nav>, and <time>, for example.  They are an interesting addition to HTML, and I can see how they, in a way, make the various sections of a page easier to structure, conceptually, and since HTML is all about structure, I can see how we arrived from point A, HTML, to point B, HTML 5.  It's interesting to see this progression in features as time has passed, and I'm very curious to see what direction HTML takes in the future.

When creating a nav bar using list items, the default is for the list to have a carriage return after each item.  In order to remove this, we can se the ul li to display: inline, and this will change the li elements from block to inline, eliminating the carriage return.

I used the HTML 5 <video> tag for the first time today!  I used the "autoplay" and "controls" attributes as well.  Regarding "controls" and "autoplay," these are boolean attributes which have no value.  They are either there or not.  If "controls" is present, the video will show controls for playing the video.  If "autoplay" is present, the video will play automatically when the page is loaded, which is considered bad web etiquette in some cases.  Another boolean attribute, "loop," will replay the video when it finishes playing.

The default image displayed before a video plays (if "autoplay" is not set), is a single frame of the video, typically the first frame, which may be just black.  If that's the case, you can use the "poster" attribute to set a default image other than the default frame.

I'm up to pg 604 so far, which is in the next section of the HTML and CSS book, Chapter 13: Tables and More Lists.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 3,823
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 1,193, Development Tools 336, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 86% of all students."

Treehouse Badge(s) Earned Today:
None

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

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (

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

Books Read or in Progress:
"Head First HTML and CSS," by E. Robson & E. Freeman (I've read the 37 pg. preface the first 255 pgs. (the HTML section), and am now up to pg 604 (now in the CSS section).

My Progress on The Odin Project:

1.  Introduction to Web Development             100% Complete

2.  Web Development 101                                25% Complete

3.  Ruby Programming                                       0% Complete

4.  Ruby on Rails                                               0% Complete

5.  HTML5 and CSS3                                           0% Complete

6.  Javascript and JQuery                                  0% Complete

7.  Getting Hired as a Web Developer                 0% Complete

Hours Spent Coding Today: 4.5
Total Hours Coding: 273.5