Day 34: Grid Layouts

When creating a grid layout, the CSS looks like this, for example:

.grid-1 {

width: 6.5%;

}

.grid-2 {

width: 15%;

}

.grid-3 {

width: 23.5%;

}

There is a max of 12 grid columns.  With grids, when you make the screen very large, the grid size (in pixels) provides a maximum size for the content.  This is nice, so the format remains readable.  With floats, flexboxes, and grids, CSS gives us a variety of tools to accomplish what we need.

I finished the CSS Layouts course today!  The next course is called Aesthetic Foundations, and it's composed of the classes "Elements," "Principles," and "Color Theory."  I'm looking forward to it!  A couple of weeks ago, I knew nothing about web design.  Two weeks or so after that, I could create a basic webpage.  Now, I can create a good-looking website, but I'm still getting in the practice necessary to be able to whip one up according to a client's exact specs.  Web development has been fun to learn because every day I learn something new that enhances my toolkit.  I'm really enjoying this, and I'm curious about the possibilities that Ruby, and perhaps Javascript after that, will open up.

SUMMARY OF CODING SKILLS

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

Badge(s) Earned Today:
Grid Layout

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

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

Day 33: Flexbox Layouts

Today I went over the flexbox layouts.  The instructor included the logo part of the heading/nav bar as part of a list item, so that he could then manipulate it with this pseudo-element.

 .main-logo:first-child {

margin-right: 50px;
flex-grow: 1.5;
}

He also use this code to get the flexbox set up:

.main-nav {
display: -webkit-flex;
display: flex;
height: 100%;
}

.main-nav li {
-webkit-align-self: center;
align-self: center;
-webkit-flex-grow: 1;
flex-grow: 1;
margin-left: 8px;
margin-right: 8px;
}

We used to code below to exempt the logo from a transition effect:

.main-nav li:hover:not(.main-logo) {
flex-grow: 2;
}

We used this code to insert some icons and transitions for those icons:

.main-nav a {
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 8px 15px;
border-radius: 5px;
position: relative;
overflow: hidden;
}

.main-nav a::before {
font-family: 'icomoon';
  content: attr(data-icon);
color: #fff;
position: absolute;
top: 10px;
left: -30%;
}

Regarding flex-boxes, the code below sets up equal columns:

.content-row {
display: flex;
}
.col {
flex: 1;
}

If you add the code below, one of the columns (whichever you designate with the primary-content class) will take up more space than the others:

.primary-content {
flex: 2;
}

The code below will move the targeted column to the left:

.primary-content {
flex: 2;
order: -1;
}

The code below will move a column to a spot to the right of the column in the code above, but before another column which has not been assigned an order value:

.extra-content {
order: 1;
}

This is what the code looks like after adding the webkit code:

.content-row {
display: -webkit-flex;
display: flex;
}
.col {
-webkit-flex: 1;
flex: 1;
}
.primary-content {
flex: 2;
-webkit-order: 1;
order: -1;
}
.extra-content {
-webkit-order: 1;
order: 1;
}

We used this html code as the last element in the head, to enable some javascript code:

<script type="text/javascript" src="js/modernizr.js"></script>

The code helps browsers display flexboxes correctly.  The code below provides alternate code for the browser to run if it does not show flexboxes:

.no-flexbox .main-nav li {
display: inline-block;
margin-top: 12px;
width: 150px;
}

SUMMARY OF CODING SKILLS

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

Badge(s) Earned Today:
Flexbox-Layout

Courses Completed:
How to Make a Website
HTML
CSS Foundations

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

Day 32: Positioning Schemes

Today I went over CSS positioning schemes.  In the example we went over, the overflow property, with a value of hidden, allowed us to "chop off" some extra blank space to the side of the website, to avoid having the browser create a horizontal scroll bar.  When using absolute positioning, we should make sure the containing element has a height.  By default, elements with an absolute position have a higher z-index than elements with a fixed position.  The code below will make the header be "locked" into place, while the elements below (as long as they have a lower z-index) will slide under when the user scrolls down.  It's a neat effect:

.main-header {

position: fixed;

width: 100%;

top: 0;

z-index: 100;

}

I used code similar to this to get my header on my portfolio site to have this effect.  I worked on my portfolio website today, using the things I've learned so far to make it look better.  I also had to move the .wrapper down 140 px offset from top in order to prevent the wrapper from starting off under the header.  I like the new look of my portfolio site, but now I need to fill it with an actual portfolio, haha!  Here's a screenshot of part of the site:

SUMMARY OF CODING SKILLS

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

Badge(s) Earned Today:
Positioning Schemes

Courses Completed:
How to Make a Website
HTML
CSS Foundations

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

Day 31: CSS Layout Techniques

Today I studied CSS layout techniques.  We discussed the CSS reset file, which aids in preventing cross-browser issues by resetting default CSS values to zero.  Normalize.css resets many, but not all of the default CSS values.  With the CSS reset, we can simply add the code to the top of our style sheet.  With normalize.css, we should actually use a separate file, the normalize.css file.  The code at the beginning of our webpage will look like this:

<!DOCTYPE html>

<html>

<head>

<title>Display Modes</title>

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/style.css">

</head>

Anchor elements are inline by default.  We used box-sizing to re-size the nav section:

* {

box-sizing: border-box;

}

* is the universal selector.  Margin does not work on elements that are displayed as table cells (use padding instead).  The code below allows us to vertically align the nav bar:

.main-nav {

display: table-cell;

vertical-align: middle;

}

We went over inline-block, and using negative margins, like -5px, to add a space between inline-block elements.  The code below makes the elements "fit" nicely, height-wise:

html,

body,

.main-wrapper,

.col {

height: 100%;

}

I also went over float layouts today.  Floats are technically block level elements, but they behave like inline elements because they don't exist on a line of their own.  Floated elements exist outside the normal document flow.  The class, the code below was used to get the background element to "clear" both of the floated elements:

.group::after {
content: " ";
display: table;
clear: both;
}

<div class="content-row group"> is what would be in the html for this (in the div right below the header, in this case).  The important part is the word group should be inserted into the class name, so it can be affected by the CSS.  The code below calls for a random placeholder image.

<img class="feat img" src="http://lorempixel.com/400/300">

This media query below resizes the image so that it looks good on a smaller viewport:

@media (max-width: 768px) {
.main-wrapper,
.main-nav li, 
.main-logo,
.col,
.feat-img {
width: initial;
height: initial;
float: initial;
}

.feat-img {
width: 100%;
}

.main-logo {
margin-right: 0;
}
.extra-content {
display: none;
}

}

I also went over the concept of creating website layouts with a mobile-first strategy for the.

SUMMARY OF CODING SKILLS

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

Badge(s) Earned Today:
Display Modes
Float Layout

Courses Completed:
How to Make a Website
HTML
CSS Foundations

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: 7.5
Total Hours Coding: 134.5

Day 30: Media Queries

Media queries allow us to taylor our content to a wide range of devices.  This is a basic media query that changes the background color when the screen is 768px wide or less:

@media screen and (max-width: 768px) {
body {
background: #FF6347;
color: #FFF;
}
}

Note that the max-width property is contained withing parentheses, NOT curly braces.  Also, note that the 768px value for the max-width property is NOT followed by a semicolon.  

I learned of three ways to call a media query.  The first way is to insert all the media queries into your css file and then call the css file in the head element of your html (below the <title> is fine) like so:

<link rel="stylesheet" href="css/style.css">

This method is faster than the second method, as the server will only load the media query when it returns a positive.  The second method is to make an individual css file for each media query, and then link them like so (right below the main link to the style sheet in the html file):

<link href="css/wider.css" rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 481px)">

<link href="css/narrow.css" rel="stylesheet" media="screen and (max-width: 480px)">

The drawback to the second method is that the server will always load the media query, whether it returns a positive or a negative, and this can significantly affect your site's performance.  The third method is to add the media query as part of an import directive in our style sheet.  This can be added into the style.css file like so:

@import url("wider.css") screen and (max-width: 768px) and (min-width: 481px);

@import url("narrow.css") screen and (max-width: 480px);

The @import method can be very expensive performance-wise, because each one is a server request, so it shares some of the downsides of the second method.  This query will fix the content's width (in this case labeled via a class, and called ".wrap")  at 700 px when the viewport goes to 1000px or more:

@media screen and (min-width: 1000px) {
.wrap {
width: 700px;
}
}

The modern trend in web design is to take a mobile-first approach.  That is, we should design the mobile version of the website first, and then, after that's done, we can design the tablet/desktop version of the site.  This media query works for phones to tablets (and larger):

@media screen and (min-width: 481px) {
}

This media query works for tablets to desktop (and larger):

@media only screen and (min-width: 769px) {
}

This media query caps the .wrap class at 980px width when the viewport goes to 1024px or greater, to avoid stretching it too far on very large viewports.

@media only screen and (min-width: 1024px) {
.wrap {
width: 980px;
}
}

I went over device-specific media-queries as well.  The first line of code we inserted, to make an iphone screen display the sample mobile site correctly, was this (specifically, it instructs a device to zoom its layout viewport to 100% of the device width):

<meta name="viewport" content="width=device-width">

This media query (below) removes the comments section of a website when a user accesses the website via a media device which has a device width of 479px or less (NOT a browser shrunk to 479px or less, a DEVICE).

@media screen and (max-device-width: 479px) {
.comments {
display: none;
}

}

This media query (below) takes effect when the orientation is set to portrait.

@media screen and (orientation: portrait) {
body {
background: red;
}

}

The issue with that code is that it also takes effect when a browser changes size on a desktop browser.  Because of the confusion this may cause, the instructor advised us to stick with the min-width/max-width property for now.

The acronym ppi is pixels per inch, dpi is dots per inch, and both mean the same thing.  Also, dppx means dots per pixels.  The device pixel ratio is the ratio between a device's logical pixels and physical pixels.  Latest iphone has a device pixel ratio of 2 because physical resolution on a retina display is double the logical resolution.  The physical resolution is 640 by 1136, while logical resolution is half of that, 320 by 568 pixels.  If pixel ratio is 2, then 1 CSS pixel in the code will be depicted as 2 CSS pixels on the screen (2 physical pixels, 1 logical pixel).

The resolution media feature has much stronger device support, so we only need to include the -webkit vendor prefix for device pixel ratios for older webkit browsers.  All other device browsers will use the resolution media query (min-resolution, max-resolution, or resolution).  The resolution media feature describes the resolution of the device (the pixel density). The display resolution of a screen is the total amount of pixels available.

High resolution displays can cause issues with images, making them look blurry if we don't optimize the image for that kind of display.  The code below is made to call a higher resolution image when a user is using a high resolution screen:

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
  screen and (min-resolution: 144dpi),
  screen and (min-resolution: 1.5dppx) {
  .mike {
  background-image:url("../img/mike2x.png");
  background-size: 45px 45px;
  }

  }

Here are some relevant formulas:

device-pixel-ratio: 1 = 96dpi

device-pixel-ratio x 96 = resolution in dpi

^^ That's how we come up with the 144dpi figure in the above code.  The above media query device pixel ratio and resolution number are a good starting point for making adjustments for high resolution screens. The dppx unit represents the number of dots per pixel, and it maps perfectly to the ratio value, so if we use it, we don't use the dpi in that case.  However, dppx is not widely supported yet, so until it is, we should do the match, figure out the dpi, and use the dpi figure for the min-resolution property, for example.

The next thing we went over was the code needed to make the printer-friendly version of a page show only the necessary content (for example, on a blog, we would not want the comments section included).  Below is the code that we entered.  It's quite a bit of code, it makes the page that gets printed be primarily text and helps with efficient printing in many ways.

@media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.main-nav,
.sidebar,
.comments,
.main-footer,
img {
display: none;
}
.main-header {
margin-bottom: 0;
border: none;
text-align: center;
}
a[href^="http:"]::after {
content: " [" attr(href)"]";
color: blue;
}
@page {
margin: .5cm;
}
@page :first {
margin-top: 2cm;
}
h2, ul {
page-break-after: avoid;
}
p, ul {
orphans: 3;
widows: 3;
font-size: 11pt;
}

}

SUMMARY OF CODING SKILLS

Total Treehouse Points: 2,016

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

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

Badge(s) Earned Today:

Media Queries

Courses Completed:

How to Make a Website
HTML
CSS Foundations

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

Total Hours Coding: 127

Day 29: CSS Transitions and Transforms and CSS Animations

Today I went over CSS transitions and transforms.  To use a transition on multiple elements, simply use the transition-property property, and then list the elements you want the transition to affect.  Alternatively, you could use the keyword "all" to select all animate-able properties declared in the CSS rule.  However, the default value for transition-property is "all," so if we actually want to animate all the animate-able CSS elements in the CSS rule, we can omit the transition-property property altogether.  In order to make the transition "un-transition" in the same amount it took to transition (when you used hover on it, like so ".classname:hover"), simply add the transition-duration property to the original rule (as opposed to the hover rule).

I also went over pre-defined timing functions today.  These control the speed at which the events that happen within the property-duration time frame occur  The transition-delay property allows us to delay the start of the transition.  The transition-timing-function property has many values available to it, including a cubic-bezier value, which would be entered as cubic-bezier(x, x, x, x), with the x's being points on a bezier curve.  It defaults to the ease value.

The transform property can accept as many functions as needed.  If we are wanting to rotate something, 400grad is equivalent to 360deg.  Both will rotate the item a full circle, so no change will be noticeable.  200grad is equivalent to 180deg.  Both equal a half rotation.  1rad equals about 57deg.  3.14rad equals 180deg.  1 full circle is 6.28rad or 360 deg or 200 grad.  If we use 1turn, that creates a full rotation.  It then follows that .5turn is half of a turn.

-webkit-transform: rotate(2turn) will make the target spin twice
-webkit-transform-origin: top left will change the center of the spin to the desired spot
-webkit-transform: scaleX(1.5) will enlarge the target on the X axis
-webkit-transform: scaleY(1.5) will enlarge the target on the Y axis
-webkit-transform: scale(1.5) will enlarge the target equally on the x and y axis
-webkit-transform: skewX(45deg) will skew the image 45 degrees on the x axis
-webkit-transform: skewX(45deg) will skew the image 45 degrees on the x axis in the other direction
-webkit-transform: translateX(200px) will move the image 200px to the right
-webkit-transform: translateX(100%) will move the target 100% of the target's size to the right
-webkit-transform: translate(300px, 100px) will move the target to the right and bottom (x and y), and if only one value is given in the parentheses, the browser will treat that value as the x and y value  (percentages can be used as well in this property)

Consider using the transform property before using positioning offsets when moving elements around a page, because the transform property performs better.

-webkit-transform: scale(1.5) rotate(25deg) translate(50%, -25%); will enlarge the target at the same time it will rotate the target at the same time it will move the target to the new position

The prefixes are:

-webkit
-moz
-ms

-o

The perspective property's value is the distance from the drawing surface to the assumed position of the viewer's eye.  The smaller the perspective value is, the deeper the perspective is, and the larger the value, the shallower it becomes.  800px to 1000px is pretty common.

To set up these 3d features, here's an example of how to do it.  First, give the body a perspective, like so: -webkit-perspective: 200px.  Then, give the desired target a transition, like so: transition: -webkit-transform 1s ease-in.  Finally, enable the 3d feature with -webkit-transform: rotateX(80deg).  You can also do -80deg, for example, and it just moves the top of the target towards you, instead of the bottom.  If you rotate the Y axis, the target will "spin" on a vertical axis (Y axis).  A positive value will move the left side of the target towards you, a negative value will move the right side of the target towards you.  If you rotate the target on the Z axis, it will spin as if it is lying flat on the screen.  A positive value will spin it from left to right, a negative value will do the opposite.

We can also do a 3d rotation this way:

-webkit-transform: rotate3d(1,1,0, 65deg)

There are four values, the first three set the direction of the rotation and the fourth value sets the rotation angle.  So x, y, and z are always number values, usually 0 or 1, and the fourth value is the angle that makes the rotation happen.  So, if the x, y, and z values are set to 1, the target will rotate by the degree specified in the 4th value.  If any are set to 0, the value set to 0 will not rotate.  You can use negative values.

Another property is -webkit-perspective-origin, which sets the vanishing point of the 3d space.  By default, this property is centered on the viewer.  This is because the default is equivalent to a value of 50% 50%, which sets the x and y position in the center, like so:

-webkit-perspective-origin: 50% 50%

The property can accept length units, percentages, or the keywords left, center, right, top, and bottom.  If we only define one value, the second value will simply default to center.

The perspective property and the perspective-origin property have to be defined on the parent, or root, element, in order to give the transformed children depth.  A perspective applied on the body, for example, only applies to its direct child elements.  To make the perspective pass down to the child's nested elements, we can give this property to the child element:

-webkit-transform-style: preserve-3d;

With the property -webkit-transform, we can make the target move towards or away from the viewer, like so:

-webkit-transform: translateZ(-200px)

A negative value moves the target away from the viewer, a positive target moves the value towards the viewer.

You can also you the -webkit-transform property like so:

-webkit-transform: translate3d(100px, 50px, 150px)

This uses x, y, z values to control the movement of the target.

-webkit-transform: scaleZ(2) translateZ(200px)

In the above case, the target ends up moving 400px, because the translateZ value is multiplied by the scaleZ value.  So, scaleZ is dependent on the translateZ value.

This property hides the back of your target (the default value is "visible"):

-webkit-backface-visibility: hidden

If you have one element on top of another, and you want to see the second element's content on the backside of the first element when the elements rotate, this property can be used on the second element so that it's "front" shows on the back of the first element (first, hide the back of the first element with the prior property).

-webkit-transform: rotateY(-180deg)

In the property above, a value in the parentheses of -1turn will make the target rotate one full circle.

CSS Animations

CSS animations are very similar to transitions, but the main difference is that transitions are immediately applied when property values change, while animations only execute when we bind them to a selector.  Also, the changes in CSS values are defined separately in a set of keyframes.  We can then control their direction, play state, how they iterate, and what happens before and after they execute with a few CSS declarations.

The keyframes below (either/or, not both) are the first part to making a basic progress bar-like animation.

@-webkit-keyframes slide {
from { width: 0%; }
to { width: 100%; }
}

@-webkit-keyframes slide {
0%         { width: 0%; }
100% { width: 100%; }
}

Both produce the same effect.  Then, you must bind the keyframe to a selector, by inserting these sample properties and values into the selector desired.

-webkit-animation-name: slide;

-webkit-animation-duration: 10s;

The animation-name property calls the keyframe by the same name, while the animation-duration property sets a time frame within which the animation will take place (without a time frame, by definition, there can be no animation, as animation requires time).

This:

@-webkit-keyframes slide {
0% { width: 0%; }
30% { width: 50%; }
100% { width: 100%; }
}

Makes the bar go to 50% in 3 seconds (30% of the animation-duration time in the example above).

This:

@-webkit-keyframes slide {
0% { width: 0%; }
30%,
60% { width: 50%; }
70% { width: 80%; }
100% { width: 100%; }
}

Freezes the progress bar starting at 3 seconds until 6 seconds at the 50% width mark (still using the previous 10 second animation-duration example).

The default timing-function for animations is ease, just like it is for the transition-timing-function.  In the selector (not in the keyframe), we can modify this like so:

-webkit-animation-timing-function: linear;

So, in addition to ease, we can use linear, cubic-bezier(n,n,n,n), ease-in, ease-out, ease-in-out, initial, and inherit.  For compatibility with various browsers, we would copy the keyframe several times, to include the vendor prefixes @-moz for Mozilla, @-webkit for Chrome, @-o for Opera, and just @, followed immediately by keyframes for the keyframe without the vendor prefix.  We DO have to copy the entire keyframe in this case, as putting the vendor prefixes together and separating them with a comma will not work here.  We have to also add all the vendor prefixes to the animation properties in the selector, and again, they have to be copied, they cannot be separated by a comma in one declaration. 

We are able to use transforms inside keyframes, like so:

@-webkit-keyframes rock-boat {
0% { -webkit-transform: rotate(0) translateY(0); }
50% { -webkit-transform: rotate(-5deg) translateY(-10px);}
100% { -webkit-transform: rotate(0) translateY(0);}
}

In the above example, the 0% and 100% lines of code could be deleted and you would have the same result, because the 0 values for rotate and translateY are the default values anyhow.  This only applies to 0% and 100%, as, if not specified, the browser defaults those to the values of the target (if none, zero).

Full Page Animation Project

The shorthand property to bind the keyframe to the selector goes like so:

-webkit-animation: animation-name animation-duration animation-timing-function animation-iteration-count;

An example of the above is:

-webkit-animation: rock-boat 3s ease-in-out infinite;

The -webkit-animation-iteration-count property allows us to use a value of infinite, which will make the animation repeat infinitely.  The default is 1, but you can set it to 2, 3, 4 and so on.

In the case below:

-webkit-animation: steam 4s 2s;

The first value is assigned to the animation-duration and the second value is assigned to the animation-delay.

With -webkit-animation-direction: reverse; will pay all iterations of the animation in reverse, even the animation-timing-function.  There's also -webkit-animation-direction: alternate; which cycles every odd iteration in the normal direction, then the animation iterations that are even are played in the reverse direction.  The value alternate-reverse cycles every even iteration in the normal direction, then the animation iterations that are odd are played in the reverse direction.

 When there is an animation-delay, at the beginning of the animation the target may have a "jump cut" effect.  At the end of the animation, the target may also go back to the original setting.  This can create a jump-cut effect.  To avoid it, we can use the -webkit-animation-fill-mode property and various.  Here are a few, from the W3C.

forwards	After the animation ends (determined by animation-iteration-count), the animation will apply the property values for the time the animation ended
backwards	The animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by animation-delay. These are either the values of the from keyframe (when animation-direction is "normal" or "alternate") or those of the to keyframe (when animation-direction is "reverse" or "alternate-reverse")
both	The animation will follow the rules for both forwards and backwards. That is, it will extend the animation properties in both directions

We can have two animation sequences in one rule, we just have to separate the relevant sets of values with a comma, like so:

.mike {
-webkit-animation: mike-move 6s 6s ease-out forwards,
  mike-float 3.2s infinite;
}

-webkit-animation-play-state: paused; can be used to pause an animation.  By default, an animation is "running."

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,890

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

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

Badge(s) Earned Today:

Transitions and Transforms
CSS Animations

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

Total Hours Coding: 122