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