I learned about a new sizing method, the vh unit, so for example, if I set a min-height for a container that holds everything except the footer to 100vh, that means the height will be 100% of the viewport height. To avoid a scrollbar caused by the extra height of the footer, we can use the Chrome dev tools.
If we use the inspect option for Chrome, we can see this for a few seconds:
Cool, so now we have the height of that footer (89px) and we can do this:
.wrap {
min-height: calc(100vh - 89px);
}
So, calc is a built in CSS function that does math for you. And that does it! Wow, that's way simpler than other methods I've used to do that! Note that that method works if your footer has a fixed height, but I don't know yet if it works if you footer's height is not fixed. It's still neat, though!
Note that vertical margins collapse when there is not border, padding, or content area to interrupt two touching margins. If we want to remove spaces between a list in a nav bar, here's an example:
We can remove the closing li tags (weird, but according to the video, it works), leave no spaces in the markup between the anchor element and the li tags (also weird, but video says it works), or we can do this:
.main-nav li {
margin-right: -4px;
}
Cool. To make a nav bar that generates a block element that flows with the surrounding content, we do this:
.main-nav li {
display: inline-block;
}
In the case above, the main-nav class is placed in the ul opening tag. So, this:
<!DOCTYPE html>
<html>
<head>
<title>Getting Started with CSS Layout</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<img class="logo" src="city-logo.svg" alt="logo">
<ul class="main-nav">
<li><a href="#">Ice cream</a></li>
<li><a href="#">Donuts</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</header>
</div>
</body>
</html>
And this:
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.main-nav li {
display: inline-block;
}
Will create this:
Cool. Then if we change the logo to a block level element, like so:
.logo {
display: block;
}
We'll get this:
Al right, here's the media query we're using in the project to switch content when the viewposrt goes to 769px or greater:
@media (min-width: 769px) {
}
You place all the new CSS rules within. So my task is to make that query trigger a two-column layout (it's set to one column by defaults, using a mobile-first approach). This is how we ended up doing it:
.primary {
/* float: right;*/
width: 50%;
margin-right: -4px;
vertical-align: top;
padding-right: 1em;
padding-left: 1em;
display: inline-block;
}
.secondary {
/* float: left;*/
width: 50%;
vertical-align: top;
padding-right: 1em;
padding-left: 1em;
margin-right: -4px;
display: inline-block;
}
Keep in mind that that code goes within this:
@media (min-width: 769px) {
}
The media query that triggers at 769px or greater. It's interesting that between elements displayed inline or inline-block, the browser interprets line breaks and spaces in the HTML as content, so it displays extra whitespace between elements. Weird.
The reason to style inline elements as inline-block is to style them like you would a block elements, with width, height, and top/bottom margin properties. You can also use vertical-align on inline-block elements. So, to reiterate, with inline elements, the browser will not apply any width and height properties, or top and bottom margin settings to them.
Not that when floating an image next to text, we should apply the margin property to the image, not to the text element, (<p>, for example), to create space between the two. iF an element is collapsing due to floated elements within, like so:
What you can do is give that element a class name, in this case "clearfix," but it can be any class name, and then do this:
.clearfix::after {
content: "";
display: table;
clear: both;
}
That creates an empty virtual element that makes the element display. This is the result:
There's other solutions, but at least the ones we explored, such as giving the element a fixed height, or using overflow: hidden (will also hide any dropdown menus that extend past the bottom of the element), or overflow: auto, can lead to other issues. Here's the float version of that layout:
@media (min-width: 789px) {
.wrap {
min-height: calc(100vh - 89px);
}
.container {
width: 85%;
max-width: 1150px;
margin: 0 auto;
}
.main-nav {
float: right;
}
.name,
.main-nav li {
float: left;
}
.main-nav li {
margin-left: 12px;
}
/* ---- Columns ---- */
.col {
float: right;
padding-left: 1em;
padding-right: 1em;
}
.primary {
width: 60%;
}
.secondary {
width: 40%;
}
/* ------------- */
.feat-img {
width: 300px;
float: left;
margin-top: 5px;
margin-right: 25px;
margin-bottom: 25px;
padding: 10px;
border: solid 1px #d9e4ea;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
}
Note that we gave the container a class of clearfix:
<!DOCTYPE html>
<html>
<head>
<title>Best City Guide</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap">
<header class="main-header">
<div class="container clearfix">
<h1 class="name"><a href="#">Best City Guide</a></h1>
<ul class="main-nav">
<li><a href="#">ice cream</a></li>
<li><a href="#">donuts</a></li>
<li><a href="#">tea</a></li>
<li><a href="#">coffee</a></li>
</ul>
</div>
</header>
<div class="container clearfix">
<div class="secondary col">
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
</div><!--/.secondary-->
<div class="primary col">
<h2>Great food</h2>
<img class="feat-img" src="img/treats.svg" alt="Drinks and eats">
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
<p>Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
<p> Fruitcake jelly-o croissant soufflé . Biscuit jujubes dragée. Sesame snaps tootsie roll chocolate bar cake tart macaroon pudding. Ice cream gummies jujubes cupcake. Cake marshmallow cookie lollipop tart. Tootsie roll bear claw marzipan jujubes wafer tart chocolate bar cake biscuit. Jelly beans danish pastry apple pie fruitcake. Jelly-o icing candy canes lollipop tiramisu</p>
</div><!--/.primary-->
</div><!--/.container-->
</div><!--/.wrap-->
<footer class="main-footer">
<span>©2015 Residents of The Best City Ever.</span>
</footer>
</body>
</html>
I used the clear: both property for the project, which makes an element clear floating elements. This link has an example, as it's good to see this in action:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_class-clear
All right, now I'm working on a project...
Note that when trying to align the text inside a span, we should give the text-align property to the containing element, not the span itself, and assign a value of center to text-align.
I finished the project! Check it, out here it is as wide as it goes:
And here it is on a small screen:
That was good practice with floats! It's just a basic site, but again, I'm just reviewing all these things, I do think you kind of have to keep working with all these technologies almost daily to stay fresh on things.
If you give an element a property of position: relative, then any child elements with a property of position: absolute will base their position on the property with the relative position, instead of on the browser window. Here's an example of absolute position:
.logo {
position: absolute;
top: -45px;
left: 125px;
}
Then you could give another element position:relative, and that would change the reference point from the browser window to the element with position: relative. With position: fixed we get those neat fixed headers that stay put as you scroll down. With fixed positioning, if we have several items on the page, we can use the z index to keep things in the front-to-back order that we want. We can also apply a z index to elements positioned relatively, just as a heads up.
Check it out, we can chain media queries:
Cool. I'm working with flexbox now. I've worked with flexbox before, but I'm looking forward to this anyways!
The flex-direction property can be row-reverse, column, or column-reverse, for example. Column stacks the items on top of each other, while column-reverse stacks the items in a column in reverse.
The flex-wrap property, if set on the flex-container, to wrap, allows flex items to wrap onto a second line if the container becomes too small to fit all the items in one line. You can do this with flex items in a column also, the columns wrap to the side when the height is limited!
Neat, I can use this for my portfolio! Here's a shot of the code:
And the html:
Very cool. In the container, we can use justify-content and set it to justify the content, like in a word document! Woohoo! Values are flex-start, flex-end, flex-center, space-between (this aligns the items spread out, with the ones at the end a little different), and space-around (same as space-between, except the ends are treated differently, with more of a gap between them and the edge). With margin: 0 auto on an individual flexbox item, individual items can be manipulated to one side or another.
We can target individual items in a flexbox container like so:
.item-1 {
flex-grow: 4;
}
That will allocate four times as much space to that item as to other items in the container. It's a neat feature. So, flex-grow: 1; will make all the columns take the same amount of space and fill the row. There's flex-basis, flex-shrink, and flex-grow. The flex shorthand property is the shorthand property for those three.
I'm working on a flex-box project now. I worked on this:
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1;
flex-basis: 300px;
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Layout</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<div class="secondary column">
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for. Cupcake ipsum dolor sit.</p>
<p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
</div>
<div class="primary column">
<h2>How to get here</h2>
<p><strong>Plane: </strong>Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop dragée cheesecake.</p>
<p><strong>Train: </strong>Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin.</p>
<p><strong>Car: </strong>Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.</p>
</div>
<div class="tertiary column">
<h2>Great food</h2>
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread.</p>
<p>Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum.</p>
</div>
</div>
</body>
</html>
The HTML is not mine, though, it's from Team Treehouse. Now I'm working on an HTML course on forms. On a side note, I keep seeing this everywhere:
So, back to forms...
When we make a button, if we give it a type of reset, it will clear the form after it is submitted. Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<form action="index.html" method="post">
<h1>Sign Up</h1>
<input type="text" id="name" name="user_name">
<input type="email" id="mail" name="user_email">
<input type="password" id="password" name="user_password">
<textarea id="bio" name="user_bio"></textarea>
<button type="reset">Sign Up</button>
</form>
</body>
</html>
Just change the type to "submit" for the usual button. Buttons can also have a type of "button," and that type is mostly intended to be used in combination with JavaScript. Check out this code:
<body>
<form action="index.html" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="email">Email:</label>
<input type="email" id="email" name="user_email">
<label for="comment">Comment:</label>
<textarea id="comment" name="user_comment"></textarea>
<button type="submit">Submit Comment</button>
</form>
</body>
The label makes it so that when you click on the label text, it highlights the appropriate input, which helps eliminate any confusion on the user's part. You can use fieldsets to separate sections of forms and legends to label each fieldset, like so:
<form action="index.html" method="post">
<fieldset><legend>Tell us about yourself</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="email">Email:</label>
<input type="email" id="email" name="user_email">
</fieldset>
<fieldset><legend>What's on your mind</legend>
<label for="comment">Comment:</label>
<textarea id="comment" name="user_comment"></textarea>
<button type="submit">Submit Comment</button>
</fieldset>
</form>
The fieldsets and legends make the form look much, much nicer, even with pure HTML. I completed my 12 hours for the day. Today was awesome!
SUMMARY OF CODING SKILLS
Total Treehouse Points: 7,435 (miscellaneous not included)
HTML: 816
CSS: 2,749
Design: 1,193
Development Tools: 747
JavaScript: 1,747
Treehouse (and other) Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Basics
CSS Layout Techniques
CSS Layout Basics
Responsive Layouts
CSS Flexbox Layout
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
AJAX Basics
HTML and CSS (Codecademy)
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)
Books Read or in Progress: Status
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"A Smarter Way to Learn JavaScript," by Mark Myers Complete
"HTML and CSS," by Jon Duckett Complete
"JavaScript and JQuery," by Jon Duckett Complete
Free Code Camp (FCC) Status
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects Complete
10. JSON API's and Ajax Complete
11. Intermediate Algorithm Scripting Complete
11. Intermediate Algorithm Scripting Complete
12. Intermediate Front End Development Projects On 3 of 6
13. Claim Your Front End Development Certificate
14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects
20. Dynamic Web Application Projects
21. Claim Your Back End Development Certificate
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
The Coding Boot Camp at UT Austin Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)
Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)
Week 11-14: Server Side (Node.js, MySQL, MongoDB)
Week 15-18: PHP (WordPress, CodeIgniter, Laravel)
Week 18-21: Full Stack Coding
Week 22-24: Final Project
CodePen: http://codepen.io/Adancode/
Week 22-24: Final Project
CodePen: http://codepen.io/Adancode/
GitHub: https://github.com/Adancode
LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 12
Total Hours Coding: 965
No comments:
Post a Comment