Day 18: CSS Values and Units

I learned about different CSS values and units today.  For example, although CSS is capable of understanding millimeters, centimeters, and inches, CSS incorporates some units of measurement I hadn't been familiar with before, such as picas, points, and pixels (I knew what a pixel was, though).  Millimeters, centimeters, and inches are not intended for web design because they are highly dependent on the output medium.  Picas (1 pc is equal to 12 points, or 1/6 of an inch) and points (1 pt is equal to 1/72 of an inch) are also not really intended for web design (intended for print), so that leaves pixels!

Regarding Pixels:

An interesting thing to note is that when using pixels as a unit of measurement, our work will not scale for various media (such as mobile).  A pixel is also the smallest unit of screen design, because it is the smallest unit a screen can display.  A pixel is 1/96 of 1 inch.

Total Treehouse Points: 1,224

Treehouse Points by Subject Matter: HTML 663, CSS 531, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 64% of all students."

Badge(s) Earned Today:

None

Courses Completed:

How to Make a Website
HTML 

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)

Hours Spent Coding Today: 1

Total Hours Coding: 73

Day 17: Advanced CSS Selectors

Today I learned about about advanced CSS selectors.  I used some  CSS pseudo classes and pseudo elements.  On a side note, my favorite selector is :hover.  :)

I didn't get to to do any coding the last five days (Friday = camping, Saturday = Recover from massive headache from getting dehydrated while camping, Sunday = Drove 6 hours to Brownsville, TX, Monday = Drove 6 hours back to Austin, TX, Tuesday = My birthday, which I spent in quiet contemplation), but now I'm back in action!

I found two magazines that are a cross between a magazine and a book by the publisher of a magazine called .Net, which is an English (as in, from England) magazine that deals with web development, and they're fantastic.  One of the magazines/books is about how to build a website and the other one is about responsive web design.  They were both published in 2013, which is great, because I find that it's not too common to find print media that is current enough to be really helpful.  I like to go to Half-Price Books a lot, but the print media there is usually too dated for me to study (I don't want to diligently go through a dated book, then a day later have to un-learn the old web standards in that book, for example).  The magazines/books retail for like $26, and I got one for about $6 and the other for about $8, so that was pretty sweet.  The quality of both items' layout/graphics, as well as the content itself, is very high and has been an enjoyable read so far.  I find that I'm getting very interested in keeping up with the latest happenings in the developer world!

I'm finding that this career, becoming a web developer, requires constant learning in order to keep skills current, and that's a major plus for me, because I've always enjoyed learning!

Total Treehouse Points: 1,218

Treehouse Points by Subject Matter: HTML 663, CSS 525, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 64% of all students."

Badge(s) Earned Today:

Advanced Selectors (CSS)

Courses Completed:

How to Make a Website
HTML 

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)

Hours Spent Coding Today: 3

Total Hours Coding: 72

Day 16: CSS Selectors

Today I learned about CSS selectors.  

Update From Reviewing on 8/5/2013: Selectors are patterns that allow us to target html elements and apply CSS to them.   We have been creating css files and saving them as style.css.  We then insert this into the html file so that the file can apply the css to the html: <link rel="stylesheet" nref="css/style.css">.

The universal selector is a very powerful selector.  It selects every element on the page at once and applies the styles we set.  It takes precedence over all other selectors.  It goes like this:

* {

sample-property: sample-value;

}

If the universal selector is used, inheritance in CSS values will not work.  A descendant selector targets a descendant of another element. like so:

h1 span {
sample-property: sample-value;
}

id selectors have to be unique, while class selectors can be used on multiple elements.

Total Treehouse Points: 1,140

Treehouse Points by Subject Matter: HTML 663, CSS 447, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 62% of all students."

Badge(s) Earned Today:

Selectors (CSS)

Courses Completed:

How to Make a Website
HTML 

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)

Hours Spent Coding Today: 2

Total Hours Coding: 69

Day 15: Continuing with CSS

I spent two hours coding today, continuing with CSS basics.

I learned that a "#" calls an id and a "." calls a class.  I learned that an id cannot be repeated on a page, but a class can be repeated.  I also learned how to use an id to make a "back to top" link (you set an id attribute in an element at the top of the page, then in an element at the bottom of a page, you set an anchor element with an href attribute of # followed by the name of the id attribute in the element at the top of the page).

Total Treehouse Points: 1,056

Treehouse Points by Subject Matter: HTML 663, CSS 363, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:

Getting Started with CSS

Courses Completed:

How to Make a Website
HTML 

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)

Hours Spent Coding Today: 2

Total Hours Coding: 69

Day 14: Back to CSS

I only got an hour of coding in today, (I reviewed CSS fundamentals on Treehouse), so not much to write about.  I learned about importance, specificity, and source order, as these pertain to CSS, and also, about the different ways to insert CSS into an HTML document and the pros and cons of each method.

Total Treehouse Points: 1,008

Treehouse Points by Subject Matter: HTML 663, CSS 315, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:

None

Courses Completed:

How to Make a Website
HTML 

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)

Hours Spent Coding Today: 1

Total Hours Coding: 67

Day 13: Completed the HTML Section of the Book!!! Moving on to CSS!!!

I got up to page 255 of the HTML and CSS book today.  Page 255 is the first page of the CSS section of the book, so that means I have now completed the HTML section.  I now have a solid grasp of HTML, through the Treehouse videos and the book, both of which teach HTML which is compliant with HTML5 standards.  The next step is to go back to the Treehouse videos and continue with the CSS course, which is the course that follows the HTML course.  After I complete the CSS course on Treehouse, I plan to go back to the HTML and CSS book and complete the CSS section of the book, just like I did after completing the Treehouse HTML course.  Completing both the Treehouse course and the book is allowing me to delve deeper into these subjects than I would have with the use of either source by itself.  

Total Treehouse Points: 1,008

Treehouse Points by Subject Matter: HTML 663, CSS 315, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:

None (completed the HTML section of the HTML and CSS book today)

Courses Completed:

How to Make a Website
HTML 

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)

Hours Spent Coding Today: 4

Total Hours Coding: 66

Day 12: The img Element and Photoshop Purchase

I wasn't able to finish the HTML section of the book today as I had planned, but I did get to page 200 of the book, so that's 44 more pages of progress.  I purchased Photoshop (it was over $100), installed it, and started working with it.  Tomorrow I will continue with photoshop, complete the chapter on HTML standards, and then move on to CSS on Treehouse.  I spent today working on img elements, the various formats they can be saved as, how to resize them, and how to make them hyperlinks, for example.

Total Treehouse Points: 1,008

Treehouse Points by Subject Matter: HTML 663, CSS 315, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:

None (read more of the HTML and CSS book)

Courses Completed:

How to Make a Website
HTML 

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 200 pgs. of actual content)

Hours Spent Coding Today: 4

Total Hours Coding: 62

Day 11: More Progress on the HTML and CSS Book

I'm still working on getting through the HTML half of the HTML and CSS book before I continue with CSS on the Treehouse website.  The book is going more in depth that the Treehouse lessons go, so I'm learning quite a bit. I made it to page 156, which means I read 118 pages today. I was at Strange Brew from 8:30 a.m. to 10:30 p.m., that's 14 hours, and I was coding/ for 10 of those hours.

Today I learned the difference between the strong and em tags and the b and i tags, and why it is important to use the strong and em tags.  This is because HTML should leave styling to CSS, and strong and em convey that the text should be strong or emphasized, which usually translates to bold or italics, but leaves it up to the CSS to decide how to convey strong or em, instead of the explicit b and i.

As an aside, very old browsers do not recognize the strong and em tags.

Also, when we use the q HTML tag, the content it encloses tells the browser there is an actual quote from some outside source, as opposed to a "quote, unquote" expression.  For a "quote, unquote" expression, we can simply type in quotes without using the q tag.

I also learned the difference between block elements and inline elements (block elements stand on their own, while inline elements go with the flow of the text (appear "in-line").

I learned that br and img are called void elements because they have no content enclosed between the opening and closing tags, by design.  So, to avoid having to type an opening and closing br tag and an opening and closing img tag, the folks who designed HTML decided to only use a shorthand opening tag for void elements.  This is a more efficient way to handle these elements.  Also, unless you're writing pages that need to be compliant with XHTML, you should use br, not br/.

I learned that if I need to use an ampersand; in my webpages, I should enter it as &amp, not as an ampersand by itself; (because ampersand by itself is the first part of abbreviations for many symbols).

The first time I typed this blog post in, it was a complete mess, due to my use of ampersands and angle brackets, because the browser was reading the symbols as HTML, when I just wanted them to be typed in as text, like this: <p></p>.  It's probably best to just avoid using tags as text, to avoid issues with browsers.  I also learned that angle brackets are also called inequality signs.

The HTML entities can be found at http://www.w3schools.com/html/html_entities.asp. I had to use an anchor element to insert the hyperlink in the sentence preceding this one! I learned that Dreamweaver and Coda allow you to make changes to your website's code, save the changes, and then these changes are automatically transferred to your website without having to manually upload files from your computer to the FTP application. That's handy. I've never used either program, though (I've been loading my code into the FTP (Cyberduck) manually). It's time to go to bed so I can wake up tomorrow and get to page 254 of the book and be done with the HTML section, so I can move on to CSS.
 

Total Treehouse Points: 1,008

Treehouse Points by Subject Matter: HTML 663, CSS 315, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:

None (read 118 pages of the HTML and CSS book)

Courses Completed:

How to Make a Website

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 156 pgs. of actual content)

Hours Spent Coding Today: 10

Total Hours Coding: 58

Day 10: More Progress on the HTML and CSS Book

I continued with "Head First HTML and CSS," by Elisabeth Robson and Eric Freeman today.  I can now create a basic website with a couple of pages completely from memory.  I'm very glad I bought the book as an addition to my Treehouse education, because it is reinforcing all the concepts I learned at Treehouse.  The total effect of combining the two inputs, the book and the Treehouse videos, is that I'm not memorizing the content, I'm learning the content, and learning how to apply it.

I downloaded code from a Github repository for the first time today (the authors of the "Head First HTML and CSS" book made the code referenced in the book available on Github).

Total Treehouse Points: 1,008
Treehouse Points by Subject Matter: HTML 663, CSS 315, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:
None

Courses Completed:
How to Make a Website
HTML

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 38 pgs. of actual content)

Hours Spent Coding Today: 2

Total Hours Coding: 48

Day 9: Reviewing HTML Course and Starting an HTML and CSS Book!

I spent the day reviewing the HTML I've learned this week, and also, I purchased a book titled "Head First HTML and CSS," by Elisabeth Robson and Eric Freeman.  One of the drawbacks of books on web development (versus internet learning) is that the material becomes obsolete relatively fast.  This book, however was published in 2012, so it is still fairly current.  I wanted to have a book on HTML and CSS that I could read concurrently with the HTML and CSS courses on Treehouse, to enable me to get a more in-depth look at HTML and CSS and to give me even more opportunities to practice what I've learned.  That way if the Treehouse videos miss anything, perhaps the book will touch on it, and vice versa.  I want to ensure that my background in HTML is solid and up to date.  The book has 710 pages of actual content (plus 37 pages before page 1, and then some more extra pages of index and advertisements after page 710).  So, I will be tracking my progression as I get through all 710 pages of the actual material.

Total Treehouse Points: 1,008
Treehouse Points by Subject Matter: HTML 663, CSS 315, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:
None (I reviewed sections of the HTML course on Treehouse, watched one CSS video, and took a quiz)

Courses Completed:
How to Make a Website
HTML

Books Read or in Progress:
"Head First HTML and CSS," by E. Robson & E. Freeman (in progress, read the 37 pg. preface and the first 20 pgs. of actual content)

Hours Spent Coding Today: 3

Total Hours Coding: 46

Day 8: Finished HTML Course!

I completed the HTML course today, however, I want to go over the last class in the course (Forms) again tomorrow.  I considered purchasing some HTML and CSS books today, but I decided to focus on Treehouse courses for now, since I'm extremely satisfied with how much I've learned so far.  The material is very well organized, and quite enjoyable to learn.  My brother is also studying on Treehouse, but his main focus is on real estate, so he is only putting in an hour or two of coding a day.  The really great thing is that whenever he has gotten stuck on a problem, I've been able to solve it within a couple of seconds!  It's great because it means I'm retaining the information!  Since he is taking the same courses I am, he is basically just giving me a quick refresher every time he asks for help with an issue!  It's great. 

I downloaded image editing software called Picasa.  I thought it may come in handy when I start working with CSS and images, and I played around with it a bit (but I don't count that as "coding time," I only count actual coding as coding time).

As a side note, I spend time every day updating this blog, but I don't count that in my "coding time."  I only count actual time I spend studying/coding in the daily tally (for example, watching Treehouse videos and following along on Sublime 2 or Codepen, or taking quizzes and tests, are all included in the tally), and I make sure not to count other ancillary activities which aren't actual studying or coding in the tally, because otherwise I could just surf the web and say I was "coding/studying," and that would be detrimental to my goal of becoming a developer. 

I passed the 1000 point milestone on Treehouse today.  :)

I love waking up early in the morning every day...just to code.  I'm very happy with my health, my productivity, my relationships...with everything, really. 

Life is good.  :)

Total Treehouse Points: 1,002
Treehouse Points by Subject Matter: HTML 663, CSS 309, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 59% of all students."

Badge(s) Earned Today:

Tables (HTML)
Forms (HTML)

Courses Completed:
How to Make a Website
HTML

Hours Spent Coding Today: 5

Total Hours Coding: 43

Day 7: Continuing with HTML

As usual, I woke up at 7 a.m. and was at the coffee shop coding by 8 a.m.  Today I learned more about HTML, such as how to work with hyperlinks and images. 

Total Treehouse Points: 840
Treehouse Points by Subject Matter: HTML 507, CSS 303, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 55% of all students."

Badge(s) Earned Today:

Links (HTML)

Objects (HTML)

Courses Completed:
How to Make a Website

Hours Spent Coding Today: 4

Total Hours Coding: 38

Day 6: World Cup Sunday

It's Monday morning, but this is my post for Sunday:

Today was the World Cup.  I woke up at 7 a.m. to code at the coffee shop, but I only got about an hour of coding in today.  My total hours spent coding this week came in at 34.  That's almost like a full time job!  I think that's a solid amount for my first week coding, especially considering it was also my first week back in America, so I was still settling in.

Also, there was the World Cup, haha.

Total Treehouse Points: 768

Treehouse Points by Subject Matter: HTML 435, CSS 303, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 53% of all students."

Badge(s) Earned Today:

Lists (HTML)

Courses Completed:

How to Make a Website

Hours Spent Coding Today: 1

Total Hours Coding: 34

Day 5: Saturday + HTML

I have been waking up at 7 a.m. every day this week, including today (Saturday) to go code for several hours at Strange Brew, a coffee shop on the South Side of Austin.  This habit has been great at keeping me focused, and I plan to continue it.  My brother and one of my friends are also meeting up with me and coding.  They don't have any coding experience, but they decided that waking up early and learning a new skill (coding) would be a positive use of their time, so that's why they join me almost every morning.  Being Saturday, we didn't get much studying done today, instead spending the morning socializing.

Once I was back home, however, I started up on Treehouse again.  The course I'm currently on, which is part two of the Web Design track, is titled HTML.  I just started this course today.  I have been using Treehouse's in-house editor (workspace) during the first course, but I did have Sublime 2 installed on my PC.  Today, I downloaded Notepad ++ to compare it to Sublime 2, but after comparing the two, I decided on Sublime 2.  I did not like that Notepad ++ was not indenting my code, and there's a plugin to make it do that, but after I installed the plugin, I received a message saying the plugin wasn't supported by the version of Notepad ++ that I had, and I didn't want to waste any more time on the editors, so I just went with Sublime 2.  I also preferred Sublime 2's more aesthetically pleasing interface.

I learned the HTML code "<blockquote></blockquote>" and I went back and used it on a blog post from two days ago that had a quote from Treehouse: Day 3: Lots of Coding. Getting Really Into This! 

I discovered a site called "codepen" today.  It's amazing, and I think it's going to be a great aid, both in learning HTML and CSS, and later on, as a tool to showcase my portfolio.  In addition to its amazing utility, the site is very crisp/clean.  This is the code I worked on today (I uploaded it onto codepen!).

 <!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Page</title>
</head>
<header>Hello World!</header>
<body>
    <h1>This is a level 1 headline</h1>
    <h2>This is a level 1 headline</h2>
    <h3>This is a level 1 headline</h3>
    <h4>This is a level 1 headline</h4>
    <h5>This is a level 1 headline</h5>
    <h6>This is a level 1 headline</h6>
    <blockquote cite="http://example.com/story.html">
    <p><em>Sed ut perspiciatis unde omnis</em> iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <q>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora <q cite="http://example.com/story.html">incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</q> suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    </blockquote>
    <hr>
    <p>I know how to use <abbr title="self-contained underwater breathing apparatus">SCUBA</abbr> gear</p>
    <p><strong>"Sed ut perspiciatis unde omnis</strong> iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
    <br>
    <p>When we use the <code>drive()</code> function on the <code>vehicle</code> object, it moves forward</p>
    <pre>
        Here is some text.

        It is...
                preformatted!
    <br>
    <br>
    </pre>
    <pre><code>
        if (!foo) {
        then bar=3;
        }
    </code></pre>
    <address>
        Mr. Example<br>
        Example City, U.S.A.<br>
        1234 Example Road<br>
    </address>
    <p>My favorite book is <cite>A Tale of Two Cities</cite> by Charles Dickens</p>
    <p>think<wbr>vitamin.com</p>
</body>
<footer>Goodbye World!</footer>
</html>

Total Treehouse Points: 720

Treehouse Points by Subject Matter: HTML 387, CSS 303, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 51% of all students."

Badge(s) Earned Today:

HTML Introduction
Text

Courses Completed:

How to Make a Website

Hours Spent Coding Today: 5

Total Hours Coding: 33

Day 4: My Future Portfolio Website Went Live Today!

I learned today that an id is called with a “#” and a class is called with a “.”

I purchased a domain name for my portfolio site, www.adancode.com today from “Namecheap.” I also purchased hosting space from “Web Hosting for Students.” I then used Cyberduck for my SFTP. After my website went live, I noticed that my Facebook link was linking to Nick Pettit's Facebook (the Treehouse instructor) and that the Twitter link was only live on one of the pages. So, I fixed the code back in my workspace, downloaded the file to my computer, deleted the files I had uploaded previously on the SFTP, and uploaded the new files. I checked all the links on the site, and everything was well. I think this happened because I had accidentally deleted the index file yesterday, and when I downloaded the new index file, it defaulted to the original file, with Nick Pettit's information on it. However it happened, issue corrected!

I had actually attempted to make the necessary modifications by accessing the files on the SFTP, but I wasn't able to do that. This entire process took several hours, and there were many errors popping up (sometimes it was just on the host's side, because those errors would randomly go away after a couple of minutes of waiting).

I completed my first Treehouse course today!  It's called "How to Make a Website," and it was composed of all the classes I have been taking throughout the week!  This course is the first of ten courses that comprise the Web-Design track.  A track is a broader program of study, while a course is smaller, and a class is even smaller (and then each class has several videos and tests). 

SUMMARY OF CODING SKILLS

Total Treehouse Points: 648

Treehouse Points by Subject Matter: HTML 315, CSS 303, and Miscellaneous

Treehouse Ranking (%): "You have more total points than 49% of all students."

Badges Earned Today:

Sharing a Website

Debugging HTML and CSS Problems

Courses Completed:

How to Make a Website

Hours Spent Coding Today: 6

Total Hours Coding: 28

Day 3: Lots of Coding. Getting Really Into This!

Woke up at 6:30 a.m.  Started coding from 6 a.m. to 7:30 a.m., then headed out to the coffee shop for three hours, but only coded without interruption for one hour in those three hours at the coffee shop.  Went home, had lunch, then coded the rest of the day, socialized, and worked on this blog.  Ended up racking up 8 hours of solid coding today.

We're getting into adapting websites for optimization on various devices (smartphones, tablets, desktops, and TV-sized screens or larger). We are learning media queries which instruct the website as to what to display, depending on the device used to access it.

Media Queries:

@media screen and (min-width: 480px) {} is for anything larger than an average smartphone.

@media screen and (min-width: 660px) {} is for larger desktop screens.

We learned a line of code that goes like this:

":nth-child(4n)"

What the code above does is select every 4^th item. In a large screen, the website had three columns filled with images, but the problem was that the 4^th image was not clearing to the left because it's a floating item, and the 2^nd item (in the first row) was too tall, so it “blocked” the 4^th item from going all the way to the left on the second row, leaving an undesired blank space where two images should be. The presenter had us do this:

#gallery li:nth-child(4n) {
clear: left;
}

The presenter stated that this would fix the issue with every 4^th image going forward. That statement didn't make sense to me, though, because, although the solution worked for a site with only 6 images, a site with more than 6 images will end up with more than two rows, and the “leftover” image on the third row is not the 4^th (8^th) image, it is the 7^th, and on the forth row, the 1^st image to carry over would be the 10^th image, not the 12^th, image, which is the image that line of code would target. I wrestled with the code for a while, repeating the video over and over, then thought perhaps the code “resets” itself at the start of each row.

In fact, that's not the case. The presenter made a mistake in making that statement, so I was correct! I caught the error in his math! I only found this out when I was taking the code challenge later on, and I went back to the video to look at the notes under the video, and there was a note concerning the error in the video!

This is what Treehouse said about the error in the video:

Code Correction

In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.  Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.

Sweet!

I also learned about W3C validation (CSS 3 and HTML5 standards).

SUMMARY OF CODING SKILLS

Total Treehouse Points: 526
Treehouse Points by Subject Matter: HTML 219, CSS 267, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 45% of all students."

Badges Earned Today: 
Adding Pages to a Website

Responsive Web Design and Testing

Hours Spent Coding Today: 8
Total Hours Coding: 22

Day 2: Setting up a Work Platform, Dealing with Firefox Bugs, and Realizing the Importance of Backing up Code to Prevent Accidental Deletions

This is yesterday's update, I didn't get a chance to complete it yesterday:

Today, I set up my double monitor computer system (it had been stowed in my closet while I was in Manila).  Before I left to Asia, it was unable to maintain a steady wifi internet connection on it, and since I thought this was going to continue to be the case, I actually spent most of the day researching laptops (to purchase one), and when I finally decided on which laptop to purchase at Best Buy, the salesman informed me that all the Best Buys in the city were out of that model and that he could not sell me the floor model because that computer was not discontinued yet.

So, I went home and decided to set up my double monitor desktop system and give it a try, just in case, by some miracle, the previous wifi connection stability issue was gone.  Now I'm glad I did, because once I set the system up again, the connection has been very stable, which is the first time that has happened since I purchased to computer.

Fantastic!

So I've got a great setup and I'm ready to go!  For now, I'll just keep using my small notebook when I'm at the coffee shop and my double monitor setup at home (instead of purchasing a large laptop to use at home and at the coffee shop).  This will save me some cash, and that's great, because right now I'm in starving student mode, haha!

I woke up at 6:30 a.m., did some coding, then headed over to the coffee shop and coded until about 10, but because of the drive and breakfast, that period only resulted in about 2.5 hours of coding.  I went to the coffee shop later in the day and I did another two hours or so, for a total of about 4.5 hours of coding today, but I did not earn a badge.  I had two issues that slowed me down (although I still made progress).  The first issue was that I deleted my html file  by accident.  This taught me the importance of saving my work, and I soon as I learn the best way to save my code, I will implement strong practices to prevent any accidental deletion from becoming more than a minor inconvenience.

The second issue was that there was a bug in Firefox that created an issue with the way the lesson displayed, and I thought I had caused the problem, so I spent quite a bit of time chasing after an issue I did not know was caused by the browser.  Finally, I found a note in the lesson notes stating that the Firefox browser created an issue with this particular lesson, and showing the code to enter to get around the bug.

Some things I learned:

1 em is 16 pixels (16px = 1em)

So, an "em" is equal to the default font size, which is usually 16 pixels

In regards to headings, if you set font-weight to normal, seen as font-weight: normal; what that means is that you are changing the font weight to normal, which basically means to un-bold it, because the default font-weight for a heading is bold.

Using the command ctrl + / will make the highlighted area a comment. You can then just use ctrl + z or ctrl + / to undo the change after you check to see the effect removing the piece of code. This seems like it could come in handy in many situations.

Badges Earned Today:

None

Hours Spent Coding Today: 4.5

Total Hours Coding: 14

Day 1: Back in America

I spent the last two weeks enjoying the little time I had left to share with my girlfriend in Manila.  I arrived in America two days ago, and am still getting everything in order.

However, I did wake up at 7 a.m. today to code for two hours, then later in the day, I went back to the same coffee shop and put in another two hours.

Badges Earned Today:
Customizing Colors and Fonts
Styling Web Pages and Navigation

Hours Spent Coding Today: 4

Total Hours Coding: 9.5