Check out what I've got so far! I'm pretty stoked!
Looks nice!
All right, so far so good. I've got to stack several images or blank backgrounds on top of each other now. All right, I've now stacked four images on top of each other so that the page scrolls down, and the image sizes up according to the viewport. The links in the upper right work already, they link to each section.
Note that with BootStrap, we must declare our CSS classes after the BootStrap styles.
I downloaded a BootStrap tutorial, it's 193 pages, I'm going through it. Here's where I'm at:
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand texttopname" href="#" id="brand">Adan Camacho | Web Dev</a>
</div>
<div class="collapse navbar-collapse"id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#homepic" class="texttop" id="Home">Home</a></li>
<li><a href="#aboutpic" class="texttop" id="About">About</a></li>
<li><a href="#portfoliopic" class="texttop" id="Portfolio">Portfolio</a></li>
<li><a href="#contactpic" class="texttop" id="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="homepic">
<div class="text-center">
<ul class="pagination">
<li><a href="#">Blogger</a></li>
<li><a href="#">FreeCodeCamp</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</div>
<div id="aboutpic">
page 2
</div>
<div id="portfoliopic">
page 3
</div>
<div id="contactpic">
page 3
</div>
</div>
</body>
And the CSS:
.navbar {
border-bottom: 1px solid #888888;
border-top: 1px solid #888888;
font-size: 14px;
}
.texttop {
color: #104DA1;
}
.texttop:hover {
color: #104DA1;
font-weight: bold;
}
#Home, #About, #Portfolio, #Contact {
color: #104DA1;
background: #F8F8F8;
}
#Home:hover, #About:hover, #Portfolio:hover, #Contact:hover {
/*background-color: #ECF4FF;*/
/*background-color: #EBD170;*/
background-color: #F8F8F8;
}
#brand {
color: #104DA1;
}
body{
margin: 0 auto;
}
#homepic {
background: url('http://i59.tinypic.com/10yqlbo.jpg') no-repeat 50% 50% ;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
left: 0px;
display: block;
}
#aboutpic {
background: url('http://i59.tinypic.com/10yqlbo.jpg') no-repeat 50% 50%;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 100%;
left: 0px;
display: block;
}
#portfoliopic {
background: url('http://i59.tinypic.com/10yqlbo.jpg') no-repeat 50% 50%;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 200%;
left: 0px;
display: block;
}
#contactpic {
background: url('http://i59.tinypic.com/10yqlbo.jpg') no-repeat 50% 50%;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
height: 100%;
width: 100%;
position: absolute;
top: 300%;
left: 0px;
display: block;
}
So that looks pretty cool.
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 the great online community and better updates/support.
Note: Switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. HTML5 and CSS Complete
2. Responsive Design with Bootstrap Complete
3. jQuery Complete
4. Basic JavaScript Complete
5. Object Oriented and Functional Programming Complete
6. Basic Algorithm Scripting Complete
7. Basic Front End Development Projects On 2 of 5
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: 662
No comments:
Post a Comment