I upgraded my Sublime 3 text editor (I use Sublime and Atom now) with this command:
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
Followed by this command:
git clone https://github.com/zurb/foundation-5-sublime-snippets.git
Both in the console/command line. So, what that does, is create the ability to insert entire sections of a site, using Foundation, with a few keystrokes. Here are the code shortcuts:
Available Components
| Component | Usage |
|---|---|
| Offcanvas | zf-offcanvas + tab |
| Topbar | zf-topbar + tab |
| Sidenav | zf-sidenav + tab |
| Subnav | zf-subnav + tab |
| Breadcrumbs | zf-breadcrumb + tab |
| Pagination | zf-pagination + tab |
| Orbit | zf-orbit + tab |
| Clearing | zf-clearing + tab |
| Buttons | zf-button + tab |
| Button Groups | zf-button-group + tab |
| Split Buttons | zf-split-button + tab |
| Dropdown Buttons | zf-dropdown-button + tab |
| Reveal | zf-reveal + tab |
| Alerts | zf-alert + tab |
| Panels | zf-panel + tab |
| Pricing Tables | zf-pricing-table + tab |
| Progress Bars | zf-progress-bar + tab |
| Accordion | zf-accordion + tab |
| Tabs | zf-tab + tab |
| Vertical Tabs | zf-vertical-tab + tab |
| Horizontal Iconbar | zf-iconbar-horizontal + tab |
| Vertical Iconbar | zf-iconbar-vertical + tab |
| Flex Video | zf-video + tab |
Here is it in screenshot form:
And then here's an example of what this code produces, using zf-topbar-tab:
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">Something</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Nav Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button with Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
This is great stuff. Amazing.
Okay, i just spent about an hour working with Foundation icons, trying to get them to work, with no luck. There were similar issues as I looked around the internet, and it looks like folks end up using the CDN to get the icons to work. I went ahead and did that with this:
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
Screenshot of a star, icons working now:
Okay, I've spent several hours now working with Foundation to try to get a nav bar going, and it's not appearing correctly. I really want to get my portfolio done and move on to React or Angular, so I'm going to skip Foundation and make my portfolio in Bootstrap, since that seems to be the more widely used framework.
Frameworks are supposed to be easy to use, and while Foundation looks easy to use in the Team Treehouse tutorials, once I try it out in the real world, there's all kind of issues, one after another, and that's not good because I want to focus on actually learning to code, not on fixing issues with a Framework someone made. If I had a ton of time and I had to do this, then I'd invest more time into Foundation, but I'm short on time and Bootstrap is right there, and I've always been able to use Bootstrap with zero issues, so Bootstrap, round one of the Framework wars goes to you.
There may not be another round.
Let me get an index.html file going with Bootstrap and then we'll continue this.
Okay, Bootstrap is the winner, I got it set up in just a few minutes, like 5 minutes, and everything is working fine. I had been messing with Foundation for over 2 hours and it was not working correctly. I've already got my nav bar done in Bootstrap too.
So, I'm going to invest in getting good at Bootstrap, because I like tools that just work. Okay, it's official, I'm in love with Bootstrap, check out what I've got so far:
And then on a mobile device:
Neat! It's coming along, this is what I have now:
It's responsive too, the arrow moves as the width of the screen is re-sized. Here it is, it's coming along, I removed the arrow and decided to make it a multiple-page portfolio site:
That's the portfolio section, under construction. Here's an update:
I love Bootstrap. So now I'm working out which portfolio pieces to include...
Okay, this is going to make my portfolio take longer to deploy, but it's all right. I'm going to go through the 12 pieces I selected to be part of the portfolio and spruce up the CSS and functionality in some cases. Some are great the way they are, but some can definitely be improved to both look and function better.
It'll be fun using all my new skills to upgrade these projects! All right, so I'm going to call it a day for now, it's been great.
I ended up making a portfolio completely different from my wireframe, but that's okay, the main thing was to get practice wireframing, hahaha!
I put in a good 8 hours today. :)
I love my life.
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
Framework Basics (Bootstrap and Foundation) Complete
Framework Basics (Bootstrap and Foundation) 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
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: 8
Total Hours Coding: 1,127
No comments:
Post a Comment