Learning to Code: Reflections: November 2014

Tuesday, November 25, 2014

Day 54: More of the HTML and CSS Book

I started the day on pg 499 of the book, and made it to pg 544, which is the end of the Layout and Positioning chapter of the book.

We discussed two related layouts, the frozen layout and the jello layout. The jello layout is like a frozen layout, but a little more attractive. To make a frozen layout, we create a div inside the body element which has every other body element nested inside of it. Then, in the HTML, we give the div an id (id="allcontent"), and in the CSS, we use the id selector (#allcontent), and fill it with these properties and values, for example:

width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;

To make the frozen layout a jello layout, we add this:

margin-left: auto;
margin-right: auto;

The margin-right and margin-left properties are for the auto values, which center the element, creating the "jello" layout. The width of 800px sets the size of the containing div, and all nested elements will be constrained within those 800px. The padding-top and padding-bottom are for aesthetic purposes, and the background-color serves to separate the part of the page with content from the excess space on the left and right, if the viewport is large enough to have excess space.

The "clear" property instructs an element to "clear" itself of any floating elements. You can use the clear property to clear the selected elements of any floated elements to the left, right, or both sides of the element.

I learned that when using a CSS table, we only use block elements (we can use inline elements, but they must be nested inside a block element, such as a <div></div>). I really enjoyed the lesson on CSS tables, and the layout that resulted was very nice.

We went over the four kinds of positioning, static (default), absolute (based on the closest positioned parent element, which is usually <html>, that is, the actual page), fixed (based on the viewport), and relative (based on the element you specify).

Page 537 of the book has some really great bullet points regarding layout and positioning.

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 544 (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: 5
Total Hours Coding: 269

Monday, November 24, 2014

Day 53: Even More of the Head First HTML and CSS Book

I started the day off on pg 403 of the Head First HTML and CSS book and ended on pg 498. That means I've got only about 200 pages to go! I learned that the reader can override our style by inserting !important after the value, but before the semicolon (with a space between the value and the !important). I learned that if block elements are placed on top of each other, their shared margin is the size of the larger of the two margins.

If one element is nested inside the other, and they both have margins, they can collapse. Whenever you have two vertical margins touching, they will collapse, even if one element is nested inside the other. Notice that if the outer element has a border, the margins never touch, so they won't collapse. But if you remove the border, they will.

A requirement for any floating element is that it have a width. All block elements have line breaks before and after them, so that means that even if I give a block element a width that is less than the width of the page/browser window, the block elements below it will NOT move up to the right of it, because of the line break. When an element is floated, block elements will fill in the space where the floated elements should be, BUT when the inline elements within those block elements are positioned, they respect the boundaries of the floated element, since they are floated around it.

So, a part of the block element is actually positioned under the floated element (because, by default, block elements have a width that spans the entire length of the page), but the inline elements within that block element will flow around the borders of the floated block element.

The "clear" property instructs an element to "clear" itself of any floating elements. You can use the clear property to clear the selected elements of any floated elements to the left, right, or both sides of the element.

SUMMARY OF CODING SKILLS

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 498 (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 Since the Last Post: 8
Total Hours Coding: 264

Wednesday, November 19, 2014

Day 52: More of the Head First HTML and CSS Book

I started the day off on pg 361 of "Head First HTML and CSS," and read up to pg 402. I also cheated and read from pg 696 to pg 710 today, hahaha. That's a total of 57 pages today.

I learned that media queries are not supported by IE 8 and below. I went over vendor prefixes, here are the ones I learned, using an example div selector with a transform property:

div {
transform: rotate(45deg); (this is the general property with no vendor prefixes)
-webkit-transform: rotate(45deg); (this is for Safari and Chrome)
-moz-transform: rotate(45deg); (this is for Mozilla)
-o-transform: rotate(45deg); (this is for Opera)
-ms-transform: rotate(45deg); (this is for IE)
}

Browser makers use these vendor prefixes to test new features, or to implement CSS extensions that are being considered, but aren't yet approved by the standards bodies.

We went over the transition property again, it's a fun property. Here's an example:

transition: transform 2s

The property and value above will make a two second transition for another property, such as the transform property above that has a value of 45deg. That rotation would then occur over a period of two seconds if we used the transition property and value above.

SUMMARY OF CODING SKILLS

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 361 (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
Total Hours Coding: 256

Tuesday, November 18, 2014

Day 51: CSS and a Project, Building the Google Homepage

Today's Odin Project curriculum began with a project, "Building the Google Homepage." However, because that project involves the use of HTML and CSS, I decided to go ahead and use today to continue with the "Head First HTML and CSS" book, intending to finish the CSS part of the book (I completed the HTML part already), so as to be better prepared to complete the Odin Project's "Building the Google Homepage" project.

I completed pages 255 to 305 by midday, and then continued on, making it all the way to page 361 by 7:30 p.m., at which time I called it a day. Today was really productive!

SUMMARY OF CODING SKILLS

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)

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: 252

Monday, November 17, 2014

Day 50: HTML and CSS Review and Github Repositories

Adhering to The Odin Project curriculum, I went to a website called HTML Dog (www.htmldog.com) and completed the HTML Beginner tutorial. I then (on the same website) completed the CSS Beginner and the CSS Intermediate tutorials. During those courses, I mainly just reviewed CSS I already knew, but I also learned about reset.css today, which serves a similar purpose as normalize.css, except it creates something of a blank slate, whereas normalize.css tries to make a set of styles (chosen by the author) consistent across all browsers.

I created my first repository on github today! It's at https://github.com/Adancode/google-homepage! I'm not quite sure what it actually is yet, haha. From what I understand, it's a platform that allows collaborative work on projects, via a mechanism called forking, which allows modifications to be made, while preventing the loss of previous data with the creation of new "forks." This is cool. After creating the repository, I created my first commit through the github website! Sweet!

I then downloaded the repository onto my computer via the Command Line Interface, then made some changes to the readme file in the project folder, and attempted to send the changes back up to the github website via my Command Line Interface. However, I actually got stuck at a certain point on this while I was at the coffee shop, so then I took a break and went to a bookstore and to Whole Foods. Back home, I put on some Netflix (Peaky Blinders, season two), and got ready for bed, but as I was watching Peaky Blinders, I thought the problem through in the back of my mind, and suddenly, I saw the solution! So I paused the show, grabbed my macbook, opened the CLI, moved around a couple of directories, cloned the repository again, this time to a different destination folder, made the changes to the readme, and this time, when I entered the commands to update github, it worked! The updates I made on the file in my computer reflected in my github account. :)

I learned that when using the git clone command to get a repository onto my macbook, it is not necessary to run git init (otherwise, git init is required).

I advanced my Odin Project work in Web Development 101 from 22% to 25% complete today, and I'm looking forward to making even more progress tomorrow.

SUMMARY OF CODING SKILLS

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 (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

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: 247

Friday, November 14, 2014

Day 49: Sublime Text Editor, HTML, and CSS

Continuing with The Odin Project coursework, I took a class on the Sublime text editor. After that was a class in Codecademy on CSS/HTML. It was a 7 hour class, and I completed it today, but I have been working on it over the last two weeks, as well as moving forward with other classes in the Web Development 101 chapter of The Odin Project which preceded this 7 hour class. Here's a screenshot of the 7 hour class after I completed it:

I'm going to start tracking my progress in The Odin Project in my Summary of Coding Skills below. The Odin Project is divided into 6 sections, which I went over in an earlier blog post, but I will go over again here, with my progress on each section noted in parentheses to the right of each section:

1. Introduction to Web Development 100% Complete
2. Web Development 101 22% 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

I was going over pseudo-selectors, and I learned something interesting:

Make sure to leave a space between body:nth-child. If you don't have a space it means "find the body tag that is an nth-child". If you have a space it means "find the nth-child of the body tag".

Neat, huh? Having a space between the colon or omitting it changes the action the pseudo-class selector takes. While going over classes and id's (which I learned about previously when I learned CSS several months ago) today, I wondered why someone would ever use and id, when they could simply use a class. There was a big debate on stack exchange regarding this, and neither side really had any definitive answer. As things stand, according to the thread, you should use id's if the id will be unique, and you should use classes if you intend to apply the class to several elements. This is because this is a best practice. That doesn't answer why it's a best practice, though, and the debates on this were pretty lengthy.

I enjoyed going through the seven hour course. Even though it was very simple, it made me much more confident in my knowledge of HTML and CSS, so that's great. It was also great to go over some concepts again which maybe I had only browsed earlier, such as pseudo-classes. Tomorrow I'm going to continue with more HTML and CSS refresher courses. See you guys tomorrow!

SUMMARY OF CODING SKILLS

Treehouse Badge(s) Earned Today:
None

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

Aesthetic Foundations
Design Foundations
Photoshop Foundations

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

Books Read or in Progress:"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)

My Progress on The Odin Project:

1. Introduction to Web Development 100% Complete

2. Web Development 101 22% 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 Since Last Post (it's been almost two weeks): 10
Total Hours Coding: 242