course-work/tellers-html
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

week5 day1

Browse Source
This commit is contained in:
William Mantly 2015-07-20 09:38:18 -04:00
commit c615b556b6
12 changed files with 224 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
README.md Normal file
View File

22
exercises/1-basic-layout/README.md Normal file
View File

@ -0,0 +1,22 @@
Basic Layout
=============
Using HTML and CSS, you are going to construct a skeleton for basic webpage.
Create a header positioned absolutely to the top of the page. Use HTML 5 semantics, the `<header>` tag.
Put a h1 tag inside that says something funny.
Make a navigation bar, also positioned absolutely, that is colored black. Use HTML5 semantics, the `<nav>` tag.
Add a list of links to the navigation bar, colored white. Make working links to any websites you want. Turn off the text decoration so it looks cool.
Create a content area of the page, with a 1em margin below the nav bar. It should be 90% of the page width.
See if you can make two columns inside, spaced evenly side by side
How about 3 columns inside?
Make a footer, positioned absolutely at the bottom of the page. Use HTML 5 Semantics.
Go into Dev tools and utilize the box model. Are your margins and spacing tight? What happens when you resize your window?

41
exercises/1-basic-layout/day1.css Normal file
View File

@ -0,0 +1,41 @@
header{
background-color: gray;
height: 5em;
width: 100%;
}
nav{
height: 2em;
background-color: red;
width: 100%;
}
.content{
height: 20em;
width: 80%;
background-color: blue;
margin: 0 auto;
}
.col{
width: 24%;
height: 100%;
float: left;
border-right: 1px solid black;
margin-right: .9%;
}
.col:nth-child(4){
border-right: none;
margin-right: none;
}
footer{
position: absolute;
bottom: 0;
height: 3em;
background-color: black;
width: 80%;
left: 10%;
}

8
exercises/1-basic-layout/day1.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="day1.css">
</head>
<body>
</body>
</html>

15
exercises/2-upgraded-layout/README.md Normal file
View File

@ -0,0 +1,15 @@
###Upgraded Layout
Move your files from the basic layout folder to this folder - use git to check the status, add and commit. Answer question 1 in questions.md
Link reset.css to your index.html and reload the page. Answer question 2 in questions.md.
Adjust your css to look the way you want again.
Make the link text and h1 text change when your mouse hovers over it. See the CSS resources.
Go to google.com/fonts and link a new font in your index.html. Change the font faces of your text to the new font.
Add some icons to your site using FontAwesome.io - download and check out the "Get Started" page.
Finish the questions in questions.md.

35
exercises/2-upgraded-layout/questions.md Normal file
View File

@ -0,0 +1,35 @@
####Question Time
1. What happened in Git when you moved files to a new folder? How did it view and handle this action in status? Did you try checking the status from both the root directory (/1-basic..) and the new one (/2-upgraded..)? What was different about them?
<!-- Your answer here -->
2. What does reset.css do? Why would we want to add this file? Where exactly did you add it in your HTML file?
<!-- Your answer here -->
3. Using Dev Tools, explain which tabs allow you to do the following:
1. Realtime editing of HTML and CSS
2. Javascript Debugging
3. Performance Optimization
<!-- Your answer here -->
4. Go to [http://www.postmachina.com/](http://www.postmachina.com/)
1. What is the current background color for the page? (Surprisingly, it's not just black!)
2. Tweak the background color to white.
3. Tweak the height of the side bar that contains the logo. Shrink it down to 85px.
4. Roll over the navigation links. When you hover over them, they dissapear. Let's change the hover color to black instead.
<!-- Your answer here -->
5. Why can't you tweak the color of the text "The most important things are not things"? Please explain.
<!-- Your answer here -->
6. Go to [http://www.seamless.com](Seamless)
1. What is the largest image on the site? What is the URL? How long does it take to load?
2. How did you figure this out?
<!-- Your answer here -->

47
exercises/2-upgraded-layout/reset.css Normal file
View File

@ -0,0 +1,47 @@
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

17
exercises/3-left-hand-navigation/README.md Normal file
View File

@ -0,0 +1,17 @@
Left Hand Navigation
=====================
Using this screenshot as a guide, create a left hand navigation template.
<img src = "http://i.imgur.com/fWlliQi.png">
You will need atleast the following block elements:
Container
Nav
Content / Aside
Footer
The footer should be fixed to the page, so it is present at all times no matter where you scroll.
Bonus points for using [Bacon Ipsum](http://baconipsum.com/).

BIN
exercises/3-left-hand-navigation/lefthand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

17
exercises/4-right-hand-navigation/README.md Normal file
View File

@ -0,0 +1,17 @@
Right Hand Navigation
=====================
Using this screenshot as a guide, create a right hand navigation template.
<img src = "http://i.imgur.com/E7H2iP1.png">
You will need atleast the following block elements:
Container
Nav
Content / Aside
Footer
The footer should be fixed to the page, so it is present at all times no matter where you scroll.
Bonus points for using [Bacon Ipsum](http://baconipsum.com/).

BIN
exercises/4-right-hand-navigation/righthand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

22
exercises/5-stack-overflow-drop-down/README.md Normal file
View File

@ -0,0 +1,22 @@
Dev Tools Stack Overflow
=========================
###Dev Tools DOM Mining
Go to this [Stack Overflow question](http://stackoverflow.com/questions/9953482/how-to-make-a-pure-css-based-dropdown-menu)
Write the answers to the following questions in questions.md:
1. What is the class and id of each button on the nav bar?
2. What is the class of the div that holds the question title?
3. What is the class of the first div inside the question div, that adds a bottom margin of 8em? How often does this div appear on the page?
4. What is the class of the sidebar?
5. Why might some of the ids for questions and answers have long seemingly random numbers inside?
###Bonus!
Follow the question and answer flow in the link, and build your own CSS drop down menu!!