One of the drawbacks of TOP is that when you get stuck, you get stuck. Also, it's somewhat of a lonely journey, which I'm cool with, but it's also cool to both have someone to reach out to when you have a question, and also, to be able to reach out to new guys and help them up. So for those two reasons, having a more vibrant community appeals greatly to me.
I decided to check FCC out and see what was going on there. I made an account, then browsed the site. It has chat rooms which are tremendously active, unlike the TOP chat rooms, which are pretty empty. This is great because after doing some pair programming with a buddy of mine, I saw the power of teaming up with people on a project, how it builds enthusiasm and how we can learn from each other.
Free Code Camp (FCC) focuses on a JavaScript Stack, as opposed to Ruby on Rails. I'm in no way qualified to vouch for one stack or the other, and my personal view is that the more you know the better (but make sure to know something really well, haha).
But yeah, I'm feeling great, everything I've learned so far is 100% transferable, and going over HTML and CSS briefly with FCC will serve as a great way to refresh my memory. I'm glad to join the FCC community and I want to contribute to it.
I started out with some HTML basics, including how to comment out some HTML:
<!--
<h1>Sample Title</h1>
<p>My sample code</p>
-->
The code above would comment out the heading and the paragraph. This is some of the code I worked on today, basic stuff:
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: Monospace;
}
h2 { font-family: Lobster;}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
It was fun to breeze through it. We used this to specify backup fonts, in this case, Monospace:
h2 {
font-family: Lobster, Monospace;
}
I inserted an image in a page:
<img src="https://bit.ly/fcc-relaxing-cat">
And this adds a class to the img, smaller-image, which makes the image smaller:
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image {
width: 100px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat">
Here's an example of an element (an image) with multiple classes:
<style>
.smaller-image {
width: 100px;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
}
</style>
<img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat">
Note that there is no comma separating the two classes. This creates a dead hyperlink, which is useful for jQuery later on (we replace the href content with #):
<p>Click here for <a href="#">cat photos</a>.</p>
I'm going over lists and ordered lists now.
I made a form with a text field and a submit button with an action that sends the data to a url:
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">this button submits this form</button>
</form>
Here's some border-related code and pics (padding, border, margin).
Well, I completed the first section of Free Code Camp! Woohoo! The next section (there are 17 sections in all) is "Responsive Design with Bootstrap."
This is neat, this link adds Bootstrap to your webpage, which makes your webpage responsive by automatically adjusting the HTML elements to screen widths:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> That's really neat. Nested all the HTML is a div with the class, "container-fluid."
<div class="container-fluid">
</div>
Like that. We added the "img-responsive" class to an image, and bootstrap made it automatically adjust to the viewport's size.
<img src="http://bit.ly/fcc-running-cats" class="img-responsive">
Like that. Adding the class "text-center" to an h2 element will center the element. I really like bootstrap. For buttons, we added the "btn," "btn-block," and "btn-primary" classes to allow Bootstrap to know the element is a button, should be a block element (as opposed to an inline-block element), and should be highlighted. Here's the code:
<button class="btn btn-block btn-primary">Like</button>
I'm enjoying this quite a bit. Today's been extremely productive. This is some more of the code we used:
<button class="btn btn-block btn-primary">Like</button>
<button class="btn btn-block btn-info">Info</button>
<button class="btn btn-block btn-danger">Delete</button>
I don't know why, but it would not allow me to enter type="button" in each button element. This is a grid that Bootstrap uses:
It's specifically for a medium sized screen, such as a laptop, there's different grids for smaller screens, for example. Okay, I'm getting sleepy, I've been working on coding all day, so I'm going to put the laptop away now, sleep, and get back to it tomorrow morning.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (768 pgs.)
In Progress: "Head First JavaScript," by Eric Freeman and Elisabeth Robson (on pg. 56)
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers (293 pgs., 89 chapters with 20 questions/problems per chapter, for a total of 1,780 coding questions/problems answered)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: Switched to FCC for superior online community and better updates/support.
Note: Switched to FCC for superior online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. HTML5 and CSS Complete
2. Responsive Design with Bootstrap On Part 9 of 31
3. jQuery
4. Basic JavaScript
5. Object Oriented and Functional Programming
6. Basic Algorithm Scripting
7. Basic Front End Development Projects
8. Intermediate Algorithm Scripting
9. Upper Intermediate Algorithm Scripting
10. Automated Testing and Debugging
11. Advanced Algorithm Scripting
12. AngularJS
13. Intermediate Front End Development Projects
14. Git
15. Node.js and Express.js
16. MongoDB
17. Full Stack JavaScript Projects
After the FCC work above (estimated to take 800 hours), there are 800 more hours of coding projects on behalf of non-profits, which, in addition to contributing to the common good, provide us an opportunity to expand our networks and build a robust portfolio.
Hours Spent Coding Today: 6
Total Hours Coding: 622
No comments:
Post a Comment