Also, if we upload a repository that contains a folder with a repository within it, GitHub will show it as two little black folders.
Cool. Here's some code I worked on today:
The index.html:
<!doctype html>
<html>
<head>
<title>Floats</title>
<link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
<div id="top-left">
<p class="box-text" id="text-one"><div></p>
<p class="box-text">position: fixed</p>
</div>
<h1 id="title">Parading</h1>
<p id="paragraph1">Suspendisse tortor leo, convallis quis eros non, gravida fermentum justo. Donec nisi elit, iaculis at fringilla placerat, placerat aliquet nisi. Donec a dolor mi. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>
<div id="middle-div">
<p class="box-text" id="text-three"><div></p>
<p class="box-text">position: relative</p>
<div id="middle-right-div">
<p class="box-text" id="text-two"><div></p>
<p class="box-text">position: relative</p>
</div>
</div>
<p id="paragraph2">Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>
</body>
</html>
And the CSS:
* {
box-sizing: border-box;
text-align: center;
}
/* Fill in your CSS Below */
body {
margin: 0 auto;
}
header {
background: #ccc;
padding: 20px;
margin-bottom: 20px;
color: #333;
}
section {
}
#left {
float: left;
width: 33.33%;
background: black;
color: white;
height: 50px;
padding-top: 16px;
}
#middle {
float: left;
width: 33.33%;
background: grey;
color: white;
height: 50px;
padding-top: 16px;
}
#right {
float: left;
width: 33.34%;
background: black;
color: white;
height: 50px;
padding-top: 16px;
}
#full {
padding-top: 100px;
}
#division {
width: 100%;
height: 50px;
padding-top: 16px;
background: lightblue;
margin-top: 70px;
}
aside {
float: left;
width: 33%;
margin-top: 65px;
background-color: white;
height: 200px;
margin-left: 30px;
}
footer {
margin-top: 160px;
background: grey;
height: 50px;
padding-top: 16px;
}
And another index file:
<!doctype html>
<html>
<head>
<title>Floats</title>
<link rel="stylesheet" type="text/css" href="positioning.css">
</head>
<body>
<div id="top-left">
<p class="box-text" id="text-one"><div></p>
<p class="box-text">position: fixed</p>
</div>
<h1 id="title">Parading</h1>
<p id="paragraph1">Suspendisse tortor leo, convallis quis eros non, gravida fermentum justo. Donec nisi elit, iaculis at fringilla placerat, placerat aliquet nisi. Donec a dolor mi. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>
<div id="middle-div">
<p class="box-text" id="text-three"><div></p>
<p class="box-text">position: relative</p>
<div id="middle-right-div">
<p class="box-text" id="text-two"><div></p>
<p class="box-text">position: relative</p>
</div>
</div>
<p id="paragraph2">Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum. Sed dignissim mauris vel dolor sollicitudin cursus. Etiam placerat enim ac metus luctus maximus. Cras erat ante, blandit ut massa nec, volutpat auctor metus. Nunc vitae dapibus augue. Nullam turpis orci, mollis viverra lorem a, consequat interdum nulla. Ut sagittis arcu sapien, quis malesuada eros semper vel. Sed eu sem sem. Aliquam justo ipsum, consequat et dolor non, vulputate pellentesque ipsum. Duis vel dolor volutpat, elementum justo sit amet, pharetra mi. Sed a mauris et risus maximus consectetur. Praesent id vehicula magna. Mauris laoreet ante lorem, gravida varius lectus volutpat eu. Duis varius hendrerit dolor eget bibendum.</p>
</body>
</html>
And some more CSS:
body {
max-width: 700px;
min-width: 700px;
}
#top-left {
height: 100px;
width: 150px;
background: lightgrey;
position: fixed;
z-index: 100;
}
#title {
font-size: 30px;
margin-left: 100px;
}
#paragraph1 {
margin-left: 100px;
}
#middle-div {
position: relative;
background: grey;
height: 200px;
width: 600px;
background: lightgrey;
margin-left: 100px;
}
#middle-right-div {
position: absolute;
top: 100px;
left: 475px;
height: 100px;
width: 150px;
background: grey;
}
#paragraph2 {
margin-top: 20px;
margin-left: 100px;
}
.box-text {
text-align: center;
}
#text-one, #text-two {
margin-top: 30px;
margin-bottom: -15px;
}
#text-three {
padding-top: 50px;
margin-bottom: -15px;
}
Basic stuff.
Today was super short, I attended class, and then I took most of the day off to just have some time alone with my thoughts.
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) In Progress
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
My Web Dev Portfolio: www.adamcamacho.com
CodePen Projects: http://codepen.io/Adancode/
Week 22-24: Final Project
My Web Dev Portfolio: www.adamcamacho.com
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: 3.5
Total Hours Coding: 1,203.5
No comments:
Post a Comment