I'm knocking out the CSS videos quickly, it's all basics, so far so good. We used a descendent selector, such as:
.main-header span {
or
header span {
or
ul li {
Basic stuff, good review. Avoid using descendent selectors, generally speaking, as when the page gets more complicated, they can cause confusion/issues. We went over :active :focus :visited :link.
If you just do:
:focus {
That will target any element on the page that is ready to receive user interaction (all the links, for example, so we don't need to do a:focus, but that's what we usually do. We can target multiple classes via CSS, like so:
.classname1, .classname2 {
The base font size is 16px, which equals 1em. Using em can get troublesome once you go several layers deep. Using rem units, which are only relative to the default 16px font-size of the root html element, is a bit easier to work with.
I worked with rgba today, for for example, rgba(255, 255, 255, .5) makes a transparent color. It's cool and easy to work with.
Remember that font names/font families, with more than one word need to be inside quotes. We used line-height:
line-height: 1.5
What the code above does is make the line height 1.5 times the size of the text in the element it is selecting. We should use a unitless number for line-height. If you use a:link, you will affect all unvisited links on the page.
Note that if we use percentage values for top and bottom for padding, the percentage is based on the width, not the height. We went over the display: block, inline-block, and inline selector/properties.
I'm working on the box-sizing CSS property. If we set this:
div {
box-sizing: border-box;
}
You could use the universal selector, like so:
* {
box-sizing: border-box;
}
And then what it does is, when you set a width, it actually sets to what you want it to be, instead of you having to factor in padding/border-width, etc. In other words, the padding and border-width are included WITHIN the width you set, instead of in addition to it.
background-size: cover;
Will display the full image while maintaining the width and height properties.
So, overflow: auto works to prevent floated elements from squeezing into another element (you give this to the element being squeezed into), but it causes scroll bars to appear on some browsers, so other alternatives are preferable. Another way to accomplish this is to give the element that is being squeezed into a class of "group," and then do this:
.group:after {
content: "";
display: table;
clear: both;
}
This is good stuff, I needed a refresher on this. The first 6 weeks of the boot camp will be on HTML, CSS, JavaScript, and JQuery, and this CSS review will come in handy then!
The text shadow value takes horizontal, vertical, blur, and color values. Try this:
text-shadow: 5px 8px 10px #222;
or
text-shadow: 5px 8px 0px #222;
Try those as starting points. Now this is neat, we can stack text-shadows to make a 3d Effect. You can go here:
http://markdotto.com/playground/3d-text/
To grab this code:
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
So cool! Then, the box-shadow property allows us to cast shadows on elements! The values are the same as with the text-shadow property. Box shadows and text shadows have no effect on the layout positioning, they don't push any element around. With box-shadow, you can also do thos:box-shadow: 15px 15px 10px 20px rgba(0,0,0, .8);
Notice the 4th number! It's the spread value, which spreads the box shadow around every side of the div. This gives a subtle, floating box effect:
box-shadow: 0 15px 20px -12px rgba(0,0,0, .8);
You can also add the inset keyword, like so:
box-shadow: inset 20px 20px 20px rgba(0,0,0, 1);
That gives an inner-shadow effect. This is how you would stack box-shadow properties:
.main-header {
box-shadow: 0 2px 15px #aaa,
inset 0 0 60px 5px firebrick;
}
So, only write box-shadow once. We went over border-radius and gradients. Check out this code:
background: linear-gradient(#ffa949, transparent 90%),
#ffa949 url('../img/mountains.jpg') no-repeat center;
Here's a screenshot, from my Treehouse project:
That looks nice! Also, this is what makes that arrow there, it's an img file:
<img class="arrow" src="img/arrow.svg" alt="Down arrow">
I like it, but it would be nice if it was clickable and scrolled down. Next, we did this:
background: linear-gradient(#ffa949, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url('../img/mountains.jpg') no-repeat center;
The first line is the topmost value, and the lines below it are behind it. If you make a fully opaque background image or color anywhere above the bottom background layer, the fully opaque layer will cover up all background layers behind it.
So, that code made the bottom blend in with the background. I'm not a fan of the look, though.
Now we're working with @font-face, EOT (Embedded Open Type, proprietary for Internet Explorer) format, WOFF (Web Open Font Format, it's newer, fast, supported by all modern browsers), TTF (True Type Format, for Safari, Android, and iOS display).
All right, now I'm going through media queries. Here's one:
@media (max-width: 960px) {
body {
background: royalblue;
}
p {
color: white;
}
}
The code above changes the background color to blue when the browser goes below 960px;
We can then add:
@media (max-width: 480px) {
body {
background: darkred;
}
}
That makes the background switch to darkred when the viewport is less than 480px. If you remove the floats on a media query and switch the width to 100%, that will remove multiple columns from a layout. We talked about adding this in the head:
I saw how to simulate a phone on the Chrom Dev tools, you click on the little phone in the upper left. This code helps with issues with content displaying correctly on phones, due to their high resolution screens:
<meta name="viewport" content="width=device-width">
Woohoo, I'm on the last part of the CSS Basics course! Okay, I completed the CSS Basics course. I'm working on a smaller course now, CSS Layout Basics. The instructor mentioned the normalize file for CSS.
To create a wrapper, wrap a div around the site (within the body), give it a class name, then style it like so:
.wrapper {
width: 70%;
margin: 0 auto;
}
We went over collapsing margins, and we are supposed to change the margin of the bottom element to 0 (in the case example provided). The video mentioned that when two elements have their top and bottom margins meet, the margins will collapse to the size of the larger margin.
A common page layout is to have the main site centered content with a limit on each side, except for the header and footer, those are allowed to stretch from edge to edge. Here's the CSS:
/* =================================
Base Element Styles
==================================== */
body {
line-height: 1.6;
color: #3a3a3a;
}
a {
color: #fff;
text-decoration: none;
}
/* =================================
Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
margin: 0;
}
/* ---- Layout Containers ---- */
.container {
width: 70%;
margin: 0 auto;
}
.main-header {
background: #3acec2;
padding: 1em 0;
width: 100%;
}
.main-footer {
text-align: center;
padding: 2em 0;
background: #d9e4ea;
}
/* ---- Page Elements ---- */
And the HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best City Guide</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<div class="container">
<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">
<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>
<h2>Great food</h2>
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
</div>
<footer class="main-footer">
<span>©2015 Residents of The Best City Ever.</span>
</footer>
</body>
</html>
Cool, so this helps with centering wrappers.
All right, since the first half of the day was spent going through that CSS basics course, I wanted to actually work on a project for the second half of the day. With that in mind, I figured I could add a couple of features to my Flickr API project as well as work on the CSS for it, so I did, and I finished it! I think it looks pretty nice, check it out:
Here's my JavaScript:
$(document).ready(function() {
//I included a default search for a cute bulldog on page load, just to send some good vibes. :)
var searchTerm = $('#search');
var submitButton = $('#submit');
// The code below sets the search button value to "searching" while a search is being performed and is also disables the search field so that the user cannot type in it while a search is being performed.
searchTerm.prop("disabled", true);
submitButton.attr("disabled", true).val("Searching Flickr...");
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var searchTermValue = searchTerm.val();
var flickrOptions = {
tags: searchTermValue,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<div>';
$.each(data.items,function(i,photo) {
photoHTML += '<a href="' + photo.link + '" class="">';
photoHTML += '<img src="' + photo.media.m + '"></a>';
}); // end each
photoHTML += '</div>';
$('#photos').html(photoHTML);
// The code below resets the button value to search once the search is complete.
searchTerm.prop("disabled", false);
submitButton.attr("disabled", false).val("Search Flickr");
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
$('form').submit(function (evt) {
evt.preventDefault();
var searchTerm = $('#search');
var submitButton = $('#submit');
// The code below sets the search button value to "searching" while a search is being performed and is also disables the search field so that the user cannot type in it while a search is being performed.
searchTerm.prop("disabled", true);
submitButton.attr("disabled", true).val("Searching Flickr...");
// the AJAX part
var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var searchTermValue = searchTerm.val();
var flickrOptions = {
tags: searchTermValue,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<div>';
$.each(data.items,function(i,photo) {
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m + '"></a>';
}); // end each
photoHTML += '</div>';
$('#photos').html(photoHTML);
// The code below resets the button value to search once the search is complete.
searchTerm.prop("disabled", false);
submitButton.attr("disabled", false).val("Search Flickr");
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
}); // end click
$('#clear').click(function (evt) {
evt.preventDefault();
$('#photos').empty();
document.getElementById('search').value = '';
});
}); // ends the document.ready function
As far as the CSS, I kept it simple, I enjoy minimalist design, but once I do employer projects, it'll be up to my employer's taste! Here it is:
body {
font-family: Monospace, Arial;
color: white;
min-width: 600px;
}
#search {
color: #2D3339;
}
.heading {
background-color: #2D4671;
padding-bottom: 60px;
}
.myButtons {
background-color: #7689A9;
}
#theForm {
font-size: 18px;
}
#hOne {
margin-top: 0;
margin-bottom: 20px;
padding-top: 4%;
}
img {
width: 260px;
height: 260px;
border-radius: 10px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 2%;
margin-right: 2%;
border: 4px solid #2D4671;
background-color: #2D4671;
}
img:hover {
-webkit-transform:scale(1.05); /* Safari and Chrome */
-moz-transform:scale(1.05); /* Firefox */
-ms-transform:scale(1.05); /* IE 9 */
-o-transform:scale(1.05); /* Opera */
transform:scale(1.05);
}
#containerDiv {
text-align: center;
}
Here's the HTML, I may as well show that as well:
<body>
<div class="heading text-center">
<h1 id="hOne">Flickr Photo Search</h1>
<form id="theForm">
<label for="search"></label>
<input type="search" name="search" id="search" value="cute bulldog">
<input type="submit" value="Search Flickr" id="submit" class="myButtons">
<input type="submit" value="Clear Results" id="clear" class="myButtons">
</form>
</div>
<div id="containerDiv">
<div id="photos">
</div>
</div>
</body>
I had a great time working on this project! All my knowledge came together to complete that project! I'm winding down the day, and now I've got to plan tomorrow's activities.
All right, tomorrow I'm going to continue with the CSS Layout Basics class I was working on earlier in the day, the Treehouse courses are really helping, combining them with FCC's project-centered approach is really producing results for me.
I completed 12 hours of study today! I actually got it down to seconds thanks to my new productivity app, it's really cool! Check it out, here's my proof:
See the 12 hours and 2 minutes in the bottom right? Yeah! So the 12 hours and 2 minutes is the time I was studying or working on coding projects (Codepen, Team Treehouse, Free Code Camp, this blog, etc.). I'm counting the hour and a half or so that I put in yesterday after midnight because my code buddy and I decided to do it that way, so that we wouldn't be tempted to procrastinate by saying, "I'll stay up late and complete my 12 hours later in the day." So this way, the best strategy is to wake up super early, so as to knock out the work asap, then have some leeway in case something comes up during the day.
This is great, fantastic day! oh, and my code buddy got like ten or 11 hours of studying in himself today, just like me if you don't count my work last night, really, so it's pretty awesome! He also got accepted to UT's boot camp, so things are looking up for both of us!
Note: I knocked off the time I added today to make the twelve hours (the work done after midnight yesterday) from yesterday's blog, to be consistent with the productivity app.
Good night!
SUMMARY OF CODING SKILLS
Total Treehouse Points: 6,566 (miscellaneous not included)
HTML: 663
CSS: 2,153
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
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: 953
No comments:
Post a Comment