So, when I left off a week ago, I was working on my portfolio page, and the problem I was having was how to center a set of buttons on a page, while also doing so as the viewport changes, and also, doing the same for every section of the page underneath the viewport (there are several sections underneath, all composed of a large background image at this point). I figured out how to create the sections of the page, without having a background image, in case I don't want a background image for the sections below the home page (just delete the background-related code in the CSS for each section of the website, as there will be no background, the containing divs are still there).
So, since I figured that out, I pretty much know almost everything I need to know to finish the project I'm doing...what I do want some clarification on is media queries and how they relate to BootStrap. As in, I could finish the page the way I used to, with media-queries, but since I'm now learning BootStrap, I'm curious as to where/how BootStrap affects or replaces media queries. So I'm going to go over a 193 pg. BootStrap PDF that I downloaded from the BootStrap site, so as to complete my page the BootStrap way, if it happens to be the better way to do so.
O.k., I've made a lot of progress today. As far as the BootStrap .pdf, I'm on page 51, so that's good. Also, here's what my site looks like so far (in CodePen):
Pretty cool, huh? I changed the color scheme, worked on the buttons, and inserted the icons for the links. Also, the links function.
So, the way the project works is there's a series of user stories that need to be completed. I've completed 3 of the 4 user stories, so that's great. The next user story, which I'll work on tomorrow, is to create a series of boxes which will hold images of the projects I've already completed. I'm looking forward to working on that.
O.k., I'm calling it a day. Here's my code so far:
<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 class="container-fluid">
<div id="homepic">
<br>
<button type="button" class="btn btn-default firstblockbutton"><img src="http://i59.tinypic.com/jaudyh.png" border="0" alt="Image and video hosting by TinyPic" class="imageSpacing"><a href="http://freecodecamp.com/adancode" id="link1" target='_blank'>freeCodeCamp</a></button>
<button type="button" class="btn btn-default blockbutton"><img src="http://i59.tinypic.com/2s68uav.png" border="0" alt="Image and video hosting by TinyPic" class="imageSpacing"><a href="http://adancode.blogspot.com/" id="link2" target='_blank'>Blogger</a></button>
<button type="button" class="btn btn-default blockbutton"><img src="http://i58.tinypic.com/10i77zb.png" border="0" alt="Image and video hosting by TinyPic" class="imageSpacing"><a href="http://github.com/Adancode" id="link3" target='_blank'>GitHub</a></button>
<button type="button" class="btn btn-default blockbutton"><img src="http://i60.tinypic.com/2ufqec5.jpg" border="0" alt="Image and video hosting by TinyPic" class="imageSpacing"><a href="http://twitter.com/Adancode" id="link4" target='_blank'>Twitter</a></button>
<button type="button" class="btn btn-default blockbutton"><img src="http://i62.tinypic.com/a4yjx4.png" border="0" alt="Image and video hosting by TinyPic" class="imageSpacing"><a href="http://www.linkedin.com/in/adancamacho" id="link5" target='_blank'>LinkedIn</a></button>
<button type="button" class="btn btn-default blockbutton"><img src="http://i60.tinypic.com/35k93ch.png" border="0" alt="Image and video hosting by TinyPic" class="imageSpacing"><a href="http://www.facebook.com/adan.camacho" id="link6" target='_blank'>Facebook</a></button>
</div>
<div class="container-fluid spacer"><h1>hello</h1></div>
<div id="aboutpic">page 2</div>
<div id="portfoliopic">page 3</div>
<div id="contactpic">
<br>
<br>
<br>
<h4>Contact:</h4>
<h4>adancamacho8@gmail.com</h4></div>
</div>
</body>
And here's the CSS:
.navbar {
border-bottom: 2px solid #512D0F;
border-top: 2px solid #512D0F;
font-size: 14px;
}
.spacer {
display: block;
background: white;
height: 100px;
color: red;
}
.texttop {
color: #512D0F;
}
.texttop:hover {
color: #512D0F;
font-weight: bold;
}
#Home, #About, #Portfolio, #Contact {
color: #512D0F;
background: #F8F8F8;
}
#Home:hover, #About:hover, #Portfolio:hover, #Contact:hover {
background-color: #F8F8F8;
}
#brand {
color: #512D0F;
}
body{
margin: 0 auto;
}
#link1, #link2, #link3, #link4, #link5, #link6 {
color: #512D0F;
}
.firstblockbutton {
display: block;
margin-left: 3%;
margin-right: auto;
margin-top: 130px;
border: 3px solid #512D0F;
width: 160px;
color: #512D0F;
}
.blockbutton {
margin-left: 3%;
margin-top: 6px;
display: block;
border: 3px solid #512D0F;
width: 160px;
color: #512D0F;
}
.blockbutton:hover {
border: 3px solid #512D0F;
color: #512D0F;
font-weight: bold;
}
.firstblockbutton:hover {
border: 3px solid #512D0F;
color: #512D0F;
font-weight: bold;
}
.imageSpacing {
margin-right: 10px;
}
#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-color: #DBAB76;
height: 100%;
width: 100%;
position: absolute;
top: 300%;
left: 0px;
display: block;
}
#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover {
text-decoration: none;
color: #512D0F;
}
#link1:link, #link2:link, #link3:link, #link4:link, #link5:link, #link6:link {
text-decoration: none;
}
I'll start back at this tomorrow.
Also, I noticed that FCC changed some things around. Here's how the curriculum looks now:
Notice that some new sections were inserted, including "Get Started with Free Code Camp" and "Gear up for Success." I went to those sections and went through them quickly, as they covered things I had already done. Also, notice how the intermediate problems are now before the basic front end projects. That means the folks at FCC want us to finish the intermediate problems before we go on to complete the front end projects. I like that, because the material from the first problems is still fresh in my mind.
Another thing to note is that there is now a Front End Web Developer Certificate. See it, number 12? That's new. There's also a Full Stack Web Developer Certificate, that's number 21. So now there's a total of 21 sections, whereas before there were 17. That said, sections 1 and 4 were very easily completed, and sections 12 and 21 are certificates...so really, there's still only 17 major sections, unless 12 and 21 require some kind of test. Either way, it'll be nice to get that certificate, so I've got some added incentive to reach that milestone.
I like the updates FCC made.
Life is good. :)
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: 8
Total Hours Coding: 670
No comments:
Post a Comment