So, we had our team's AMA (Ask Me Anything) session today, and it was fantastic! I'm so stoked, I can't wait for day one of class!
I'm learning about zepto, which is like jQuery, but with a lighter footprint.
When using Foundation (not via a CDN), we used this in the script tag:
<script>
$(document).foundation();
</script>
It tells the browser to load everything.
I'm using Orbit now, wish is a Foundation image slider, but the neat thing is on touch-enabled devices, you can swipe right or left to affect the image!
This is interesting, when you add data-orbit with Foundation, it automatically adds some classes to your HTML which you can view in the console, like so:
You can then target those classes. This seems a bit odd to me, because someone that doesn't know Foundation, or that particular Foundation feature, won't know that those classes are there.
Now I'm working on grids with Foundation...this class, "large-offset-4" will offset the column by that many columns:
That's cool. According to the class, Foundation automatically assigns images in content a max-width of 100% and height of auto, which makes images fully responsive.
With class="th radius" we give an image a small grey border and then make it rounded.
I'm making good progress on Foundation today. We worked on a modal, we used this:
<a class="medium button hide-for-small" data-reveal-id="formModal">Text me the link</a>
With this:
<!-- Form Modal -->
<div id="formModal" class="reveal-modal">
<h3>We'll Text You The Link!</h3>
<a href="#" class="close-reveal-modal">×</a>
</div>
<!-- End Form Modal -->
To make a modal appear. We made a video modal appear that adjusted the size of the modal based on the video, and made it responsive as well, and we did this by wrapping the video in a div and giving it the class, "flex-video":
<div id="vidModal" class="reveal-modal">
<div class="flex-video">
<iframe width="420" height="315" src="http://www.youtube.com/embed/hTf0CgRC1_Q" frameborder="0" allowfullscreen></iframe>
<a href="#" class="close-reveal-modal">×</a>
</div>
</div>
That's useful, and we can add the "widescreen" class after flex-video to make the video wide-screen.
With Foundation the icon file is not included, so it has to be downloaded separately at:
http://zurb.com/playground/foundation-icon-fonts-3
The relevant link in the head of the page would be:
<link href="css/foundation-icons.css" rel="stylesheet" media="screen">
As an side, here's the actual <head> element I'm working with:
<head>
<title>Ribbit - A Treehouse Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/normalize.css" rel="stylesheet" media="screen">
<link href="css/foundation.css" rel="stylesheet" media="screen">
<link href="css/foundation-icons.css" rel="stylesheet" media="screen">
<link href="css/my-styles.css" rel="stylesheet" media="screen">
<script src="js/vendor/custom.modernizr.js"></script>
</head>
All right, here's an example of calling an icon:
<i class="fi-cloud"></i>
That works, and to make it larger...
[class*="fi-"] {
font-size: 3em;
}
The above is a selector we used to target every element that contains "fi-" anywhere in its class elements. Note that we used font-size, because the icons are like a font.
Now I'm working on using the Interchange Plugin, it allows us to change images being loaded to the page depending on the size of the viewport.
Now I'm working on Joyride, a JavaScript plugin, which gives users a tour of a site, with sequential popups guiding the user.
Here's the code:
<!-- Joyride -->
<ol class="joyride-list" data-joyride>
<li data-id="firstStop" data-text="Go!" data-options="tipLocation:top; tipAnimation:fade; scrollSpeed=600;">
<p>Check out these neat features!</p>
</li>
<li data-id="secondStop" data-text="Next!">
<p>We'll teach you how to build them...</p>
</li>
<li data-id="thirdStop" data-text="Go!">
<p>When you sign up for Treehouse</p>
</li>
</ol>
<!-- End Joyride -->
We later added this:
<li data-id="firstStop" data-text="Go!" data-options="tipLocation:top; tipAnimation: fade; scrollSpeed=600;"></li>
That was added to the line with the "firstStop" id.
And then we have to add this at the end, (the line below the first $(document).foundation(); which was already there):
<script>
$(document).foundation();
$(document).foundation('joyride', 'start');
</script>
If you add this cookie file to the script above:
<script src="js/foundation/foundation.cookie.js"></script>
Then the joyride will only be played once.
Note that Foundation uses the Sass pre-processor. Foundation is not supported by IE8. There are 3 different ways to download the Foundation framework.
Woohoo, I earned my "Prototyping with Foundation" badge today! Tomorrow I take a class on customizing foundation, then another class on what's new with Foundation, then it's time to wireframe my portfolio!
SUMMARY OF CODING SKILLS
Books: Status
"Head First HTML and CSS," by E. Robson & E. Freeman Complete
"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
Team Treehouse (Front End Web Dev Track Complete): Status
How to Make a Website Complete
HTML Complete
HTML Forms Complete
HTML Tables Complete
HTML Video and Audio Complete
CSS Foundations Complete
CSS Basics Complete
CSS Layout Techniques Complete
CSS Layout Basics Complete
CSS Selectors Complete
Responsive Layouts Complete
CSS Flexbox Layout Complete
Git Basics Complete
Console Foundations Complete
Introduction to Programming Complete
JavaScript Basics Complete
JavaScript Loops, Arrays, & Objects Complete
AJAX Basics Complete
JQuery Basics Complete
Interactive Web pages with JavaScript Complete
Object-Oriented JavaScript Complete
Accessibility Complete
Website Optimization Complete
Front End Performance Optimization Complete
Aesthetic Foundations Complete
Design Foundations Complete
Adobe Photoshop Foundations Complete
Adobe Illustrator Foundations 66% Complete
Framework Foundations (Bootstrap & Foundation) In Progress
Framework Foundations (Bootstrap & Foundation) In Progress
Other Courses: Status
HTML and CSS (Codecademy) Complete
Introduction to Web Dev (The Odin Project) Complete
Web Dev 101 (The Odin Project) 33% 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 Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete
5. jQuery Complete
6. Basic Front End Development Projects Complete
7. Basic JavaScript Complete
8. Object Oriented and Functional Programming Complete
9. Basic Algorithm Scripting Complete
10. JSON API's and Ajax Complete
11. Intermediate Front End Development Projects Complete
12. Intermediate Algorithm Scripting Complete
13. Advanced Front End Development Projects Complete
14. Claim Your Front End Development Certificate Complete
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 Projects: http://codepen.io/Adancode/
Week 22-24: Final Project
CodePen Projects: http://codepen.io/Adancode/
GitHub Projects: https://github.com/Adancode
LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode
Hours Spent Coding Today: 6
Total Hours Coding: 1,114
No comments:
Post a Comment