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.
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
No comments:
Post a Comment