Day 28: Flexboxes

Today I studied flexboxes and the multi-column layout property.  The multi-column layout feature is great for creating scale-able layouts that fit all types of screen sizes.  It's similar to the flex boxes.

-webkit-column-gap: 3em;

-website-column-rule-width: 2px;-website-column-rule-style: dotted;-webkit-column-rule-color: 070641;-webkit-column-rule: 2px dotted #070641; (short for -website-column-rule-width, -website-column-rule-style, and -webkit-column-rule-color)

-webkit-column-width: 250px;-webkit-column-count: 3;-webkit-columns: 250px 3; (short for -webkit-column-width and -webkit-column-count)

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,752

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

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

Badge(s) Earned Today:

Flexbox and Multi-Column Layout

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

Day 27: CSS Gradients

Today I went over CSS gradients and started on flexboxes.  I went over linear gradients and radial gradients.  I learned that the old syntax for prefixed gradients was like so:

<position>, <shape> <size>

For unprefixed gradients, the syntax is like so:

<shape> <size> at <position>

In reference to a background, the keyword transparent is the same as rgba (0,0,0,0).  However, using rgba (255,255,255,0) instead of transparent will prevent the transparent gradient from having a greyish tone.  Transparency can work with linear or radial gradients.

Flexboxes

I also learned about flexboxes today.  Flexboxes are a way to control layout similar to the float property.  Flex items are held within flex containers.  Flex boxes have a main axis (X) and a cross axis (Y). Note: the webkit is due to using the Chrome browser.

display: -webkit-flex; (this sets up the flex-box)
-webkit-flex-direction: row; (this makes the content organized in a row)
-webkit-justify-content: space-between; (this makes the content justified to the left and tight, and leaves a space in between)

With -webkit-flex-wrap: wrap; the content will wrap down to a new row when the screen size shrinks.  A flex item is a direct child of a flex container.

-webkit-flex-grow: 1;  makes the free space between flex items be the same.
-webkit-align-self: center; aligns a flex box vertically
-webkit-order: -1; moves a flex-box to the first spot on the left
-webkit-align-self: flex-end; moves a flex box to the bottom of the flex-container
-webkit-align-self: stretch; stretches the flex box to fit the flex container

@media screen and (max-width: 999px) { .main { -webkit-flex-direction: column; }}

^^ The above is a way to make the flex box turn into a column instead of rows when the viewport is 999 pixels or less.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,704

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

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

Badge(s) Earned Today:

Gradients

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

Total Hours Coding: 112

Day 26: Choosing a Typeface (CSS)

Today I learned about typefaces.  These are some typography terms.

x-height: height f the main body of a lower case lettercap-heights: height of the upper case lettersascenders and descenders: they are the upward or downward vertical strokes on lower case letters that ascend or descend above the x height or below the baselinecounter: the fully or partially enclosed space within a letteropen bowls: the curved stroke which encloses a letter's counteropen apertures: the opening at the end of an open counter (like at the bottom of an h)serifs: the tapering strokes that tail the end of some letter strokes

Readability can be influenced by many things.  Text layout can affect readability.  Lines of text that are too long are difficult to read because of the eye movement required.  Lines of text that are too short have similar effect becausvwe they force the reader to jump frequently between lines.  Line length is most effective at between 45 to 75 characters (including spaces and punctuation).  Line height should be 1.5 times the text size.  If it is too large, the text becomes harder to read.  If it is too small, the lines can seem to blend together, and as the line becomes longer, a reader can lose track of which line they are on.  Rhythm can also affect readability, for example, block quotes, images, color changes, etc., can affect the rhythm of a page.Chunking text means to merge related elements together.  White space is the space between elements, line of text, and words.  White space does not have to be white.  Links should be easily identifiable.  Regular text should not appear clickable.  

I also read today about responsive text and vertical rhythm.  By default, text is fluid.  The browser's default size for text is usually 16 pixels.  So, for example, if I set the font size to 1.5em, that would mean it would be 24 pixels (if no other em units have been set in a parent element).  Using a typographic scale is heavily preferred over simply using any font size we think looks nice.  This is so that end end result can be orderly and aesthetically pleasing.  A font size of 1rem sets the text to the root em unit, which is 16 pixels.

We discussed media queries again, as they pertain to typefaces.  The vw unit stand for viewport width, and 1vw means 1/100th of the viewport width.  

When making a font stack, first we will list the ideal font, followed by the alternative, then the common or generic versions, like so:

font-family: "droid_serifbold", Georgia, serif;

Icon fonts load faster than using images for icons.  Also, they scale to any size without losing quality, so they look crisp at any resolution.

Using line rules is a good symbol for separation.  Create a rule with a horizontal rule or by applying a border style with CSS.  

The letter-spacing property allows us to control the spacing between letters.  We should use <strong> and <em>, not <b> and <i>.  We also learned about ligatures.  Single words left at the end of a paragraph are referred to as orphans.  Single words that fall at the beginning of the following column are called widows.  When there are many large gaps between words in a paragraph, they are referred to as "rivers," and this look is discouraged.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,626

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

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

Badge(s) Earned Today:

Web Typography

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

Day 25: Background Properties

Today I went over CSS background properties.  The background property is set to transparent by default.  In an element, everything except the margin area is considered the background.  When using the background-image property, the image url should be enclosed in either single or double quotes.  A good site to get background images that are aesthetically pleasing when they repeat (the default for background images is for them to repeat) is www.subtlepatterns.com.  The background property can be used to enter all the values you want for background in one property.  If you do this, the order is background-color, background-image, background-repeat, background-attachment, and background-position.  The values should be separated by a space.  However, if you leave out a value, the browser will simply use the default value, such as the scroll value for the background-attachment property, for example.

We discussed how to set a border-radius and how it is that the CSS determines how the image looks.  If we only enter in one value, the corner is based on a circle, but if we enter two values for border-radius, the image will be based on an ellipse.  An interesting thing is that the border-style will be applied to the circle, so you could have a circle with a dashed border, for example.  Also, when using the border-radius property, you can enter one, two, three, or four values, and how many values you enter will determine which value affects which corner.  To make a circle, simply set the height and width of the containment to equal amounts, and then set the border-radius to 50%.  For an oval, make the height and width of the containing element different amounts (say, 100px and 200px, for example), and then set a border-radius.

We went over box-shadows and then advanced backgrounds.  We layered background images on top of each other today.  We also discussed the background-size property.  If only one value is entered, the second value will be set to auto, and negative values are not permitted.  If two values entered, first is width, second is height.  These properties are a way to do some photoshop work without having to go into photoshop, then save the file, and insert it into the CSS again.  This is an example of the value for background when inserting one or multiple images (separate with a comma, the first image on the list is stacked on top)

url('img/smiley.png') no-repeat 50px -200px;

But it can also be done like so:

url('img/smiley.png') no-repeat right bottom;

With the property background-size and the "cover" value, the background image is resized to cover the entire browser window (if the selector is the html element, otherwise, the image will simply stretch to fit the containing element).  However, the height value should also be set to 100% for this to work, otherwise, there will be blank spots.  The background-clip property "clips" the background img or background color.  The default values is border-box, which sets the background to the border area of the div.  With content-box, the background is clipped to the content of the div (so no border or padding areas included).  With padding-box, the padding space is included.  With the background-origin property, the values can be border-box, padding-box, and content-box.  If the background-attachment property is set to fixed, then the background-origin property will have no effect.  With border-box, the position is relative to the border's (outer) edge.

The contain value (for the background-size property) scales the image to the largest size it can be while preserving its original proportions.  

 

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,566

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

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

Badge(s) Earned Today:

Backgrounds and Borders (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:4

Total Hours Coding: 102

Day 24: Finishing up the Box Model Concept and Starting on Background Properties

Today I finished up with the classes on the box model concept.  We went over the float property and the clear property, which clears the space around the floats.  It can have a value of left, right, both, and none.  None is the default value.  It is useful in manipulating the layout in cases where another element on the page has a float property and the layout is not appearing the way you would like.

I learned that an element can have multiple classes.  To do this, you simply insert the new class name into the quotation marks where the old class is, and just add a space between the first class and the second class.

I learned about the positioning property as well.  This property can have four values, which are static, relative, absolute, and fixed.  The default is static, which means the element is positioned according to the normal/default flow of the page.  If the position property is given a value of relative, then this allows you to use the left/right/top/bottom properties to move the element outside of its normal place in the flow of the html file.  If the value of absolute is used with an element, then that element is completely removed from its normal position in the flow of the html page.  If an element with a position property is given a value of relative, then any child elements with a left, right, bottom, or top property will base the results of these properties on the positioning of the parent element with the position property set to relative.  So, keep in mind that the absolute value in a position will always be relative to the first parent element with a position other than static.  If no parent elements (or any elements up the nesting chain) have a position property set, then the position will be based on the browser window or viewport.

If the position value is set to fixed, this fixes the element relative to the viewport.  This is used, for example, for the header/nav bar at the top of a page when you want the header/nav bar to stay in the same place on the screen, even if there is lots of content on the page and the user scrolls down to view more content.

With the z-index, we add a third dimension to a page.  Higher z-index values sit on top of lower z-index values.  The z-index property will only work with elements that have a position value other than static.

When using the position property, remember not to use the float property on the same element, because this creates conflicting positioning scales.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,464

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

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

Badge(s) Earned Today:

CSS Box Model

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

Day 23: More on the Box Model Concept

Today I explored more of the CSS box model. The display property, in regards to how to set up a navigation bar, is something I spent some time playing around with.  I used the float property as well, something we had used previously, but I hadn't been totally clear as to how the elements interacted.  I set up some anchors, then gave them a border-style (none of the border properties work unless a border-style is set, although, you can set a border-style via the border property, since the border property accepts multiple values).

For example:

border-style: solid; 

border-color: black; 

border-width: 10px;

conveys the same as:

border: solid black 10px;

I created this today (I don't want to make it go live on the web via my hosting provider, so I just included a screenshot):

I gave the div a min-height that way when the browser screen becomes tiny, the div border does not keep going to the left until it "goes under"/passes the nav anchor elements.  I also gave it a min-height, that way when the browser screen is too short, the div border does not keep going up until it "goes under"/passes the nav anchor elements.  For the anchor elements' display properties, I set a value of block, that way the elements get their own line and stack on top of each other.  For the anchor elements' float properties, I set a value of left, that way the paragraph element could flow up and around the nav elements, which would float (position itself) to the left.

I learned about the box-sizing property as well today.  It's an interesting way to set the size of a box to make sure you get the size you actually want (it changes the border and padding to fit within the size you specify).  To do this, you can give that property a value of border-box, then in the line below, specify what property and value you wish to set, for example, width: 400px;, and that will be the total width, with the padding and border included.  The overflow property (through the use of the "hidden" value ("visible" is the default value) is a way to hide content that has gone outside of its box.  This property can also have a value of "scroll," which is neat, it creates a scroll bar within the box, so that the user can scroll through the box to see the extra content.  If the value is set to scroll, some browsers will give two scroll bars by default, a vertical and a horizontal bar, one of which may be unnecessary.  To avoid this, we can use the value "auto," which will provide a vertical/horizontal scroll bar only if necessary.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,398

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

Treehouse Ranking (%): "You have more total points than 67% 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: 5

Total Hours Coding: 94

Day 22: The Box Model Concept

Today I studied a topic I'd been looking forward to getting to for a while, the CSS box model concept.  We went over the difference between block elements and inline elements, and it was interesting to see how even images which may not be a square/rectangle (such as a hexagonal icon) are actually, in essence, a square/rectangle on the webpage.  It was interesting to see the relationship between the content, padding, border, and margin.  

I learned how to set padding and how to set a border.  For a border, the border-style property must be set to something other than "none," which is the default, in order for a border to appear on the browser.  There are many border-style values, and I played around with none, solid, dashed, dotted, groove, inset, outset, ridge, and double.  Border-style accepts up to four values, so you can actually have a different border value for each side of the element.

The margin property can have negative values, and this allows you to move an element around the webpage.  The browser will interpret your markup differently depending on how many values you enter for the margin property.  This is an example from the W3C website:

Examples:

• margin:10px 5px 15px 20px;
  • top margin is 10px
  • right margin is 5px
  • bottom margin is 15px
  • left margin is 20px
• margin:10px 5px 15px;
  • top margin is 10px
  • right and left margins are 5px
  • bottom margin is 15px
• margin:10px 5px;
  • top and bottom margins are 10px
  • right and left margins are 5px
• margin:10px;
  • all four margins are 10px

The default display for anchor elements is inline, so multiple anchor elements (like links in a navigation bar) will go side by side, unless you give them a display value of block.  If you do that, the elements will display one on top of the other, like block elements do, because they each take up a line, instead of being on the same line.  The display property can use the inline-block element to create blocks that are inline, which is useful for styling navigation bars with several links side by side.

Visibility is another property I learned about today.  If you use a value of hidden with the visibility property, the element specified will be invisible, but will still take up space as if it was there (unlike the value "none," which will make the element both invisible and not take up any space on the page).

SUMMARY OF CODING SKILLS

Total Treehouse Points: 1,398

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

Treehouse Ranking (%): "You have more total points than 66% 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: 4.5

Total Hours Coding: 89