I learned that em has a compounding effect relative to any use of the em unit in parent elements. This effect was not something I was keen on, but I was glad to learn that there is a new font-size called "rem" which decreases the compounding effect by referencing an em font-size in the root element. So, if I simply create an em font size in the usual root element (<html>), then any subsequent use of the rem unit will refer directly to the em unit in the root, minimizing possibly messy situations caused by the more encompassing compounding effect of the em unit.
Vw, vh, vmin, and vmax are called viewport relative units. These units eliminate the dependency on parent elements, and instead allow sizing purely based on the viewport size. These units are 1/100th of the size of the viewport, and will change size based on the size of the viewport. So, to reiterate, 1vw, for example, is equal to 1 percent of the viewport width. Vmin is interesting, it causes a resize based on whichever of the two (width or height) is lower (minimum), so, for example, if the width is lower, it would resize the element to the amount of percentage units desired of the width. At the time the video was made, these units were only available in the newer browser versions. These units are very fun to work with, I kept modifying the code to create interesting element/font-size combinations.
We went over colors today in class, and I learned the different values I can use to describe colors, such as keywords (example, lightgreen), hexadecimals (summoned by a # sign, then 6 (or 3) numbers/letters), and the rgb (red green blue) method. For example, rgb(65, 105, 255) would describe blue. There is also the rgba method, which adds the alpha value to the rgb method. The alpha value controls opacity (0 gives full transparency, and 1 would be completely opaque). Another method, hsl, stands for hue (hue is the actual color on the color wheel, from 0 to 300 degrees (but I can just enter in a number, no degree abbreviation is needed)), saturation (this is color, 0% means grayscale, 100% means full color), and lightness (0% is white, 100% is black, and 50% is normal). Hsl can also have the alpha added (hsla) to specify the opacity of a color. I really like the hexadecimal system, but it has a weakness, it does not include alpha, so transparency has to be set separately if we are using the hexadecimal system, according to the W3C. Considering that weakness, and after playing with the hsl color wheel, I'm leaning towards the hsl method as my favorite! Using http://www.workwithcolor.com/hsl-color-picker-01.htm, I can explore how the numbers change as you move around the color wheel. The hsl method was easy to work with, and the instructor mentioned that although both rga and hsl are widely supported in the major browsers, he thinks the hsla color model is more intuitive. I agree.
The following text regards a topic other than CSS values and units, but it really caught my attention, so I chose to investigate it further. Today the Treehouse instructor decided to enter a class within a div element. He called the class "box" and then went over to the CSS file. There, he selected the box class he had just created in the html file by entering ".class (remember, id's are called with the "#" sign, while classes are called with a ".")" and then creating the CSS rule (remember, a rule is composed of a selector and a declaration block). He only glossed over what he was doing with this "box" class briefly, but it really caught my attention. Within the declaration block for that selector, the instructor set out properties and values which controlled the layout of the "box," that is, the html element. He mentioned offhand that html elements can be considered to be in a "box." I thought this was a fantastic way to organize a page, so I froze the video while I researched this a bit. It looks like we will explore this concept, called the "box model" in depth in future classes, but not in the current class, since the current class focuses on values and units. Off the top of my head, it really struck me how creating a class called "box" and then using it to focus on page layout is a great way to organize my work, both in my mind, conceptually, and on the actual CSS file.
Exploring this concept, the box model (I believe that's what it is, but I could be 100% wrong, because I didn't actually skip forward to the course which goes into the box model, so what could be something unrelated to the box class the instructor created, but I believe the course and the instructor's use of the box class are related), led me to go over CSS syntax once more, in order to allow me to describe what I had learned in a correct manner. That, in and of itself, is interesting. So, in order to explain one concept, I went over a prior concept once more, and this process helps solidify the information in my mind. I like it, it's a fantastic way to learn! I'll make a strong, conscious effort to explain the concepts I learn in a proper manner, using the correct terminology, as using the correct terminology serves to connect the dots, so to speak.
Total Treehouse Points: 1,284
Treehouse Points by Subject Matter: HTML 663, CSS 591, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 65% of all students."
Badge(s) Earned Today:
Values and Units
Courses Completed:
How to Make a Website
HTML
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: 78
No comments:
Post a Comment