commit c615b556b621e23814c4b1a3a5a134f9720d20bf Author: william Date: Mon Jul 20 09:38:18 2015 -0400 week5 day1 diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/exercises/1-basic-layout/README.md b/exercises/1-basic-layout/README.md new file mode 100644 index 0000000..165c98b --- /dev/null +++ b/exercises/1-basic-layout/README.md @@ -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 `

` 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 `

` 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? \ No newline at end of file diff --git a/exercises/1-basic-layout/day1.css b/exercises/1-basic-layout/day1.css new file mode 100644 index 0000000..2196013 --- /dev/null +++ b/exercises/1-basic-layout/day1.css @@ -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%; + +} \ No newline at end of file diff --git a/exercises/1-basic-layout/day1.html b/exercises/1-basic-layout/day1.html new file mode 100644 index 0000000..6d62b04 --- /dev/null +++ b/exercises/1-basic-layout/day1.html @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/exercises/2-upgraded-layout/README.md b/exercises/2-upgraded-layout/README.md new file mode 100644 index 0000000..5d4e89e --- /dev/null +++ b/exercises/2-upgraded-layout/README.md @@ -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. \ No newline at end of file diff --git a/exercises/2-upgraded-layout/questions.md b/exercises/2-upgraded-layout/questions.md new file mode 100644 index 0000000..024b196 --- /dev/null +++ b/exercises/2-upgraded-layout/questions.md @@ -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? + + + + 2. What does reset.css do? Why would we want to add this file? Where exactly did you add it in your HTML file? + + + + 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 + + + + 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. + + + + 5. Why can't you tweak the color of the text "The most important things are not things"? Please explain. + + + + 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? + + diff --git a/exercises/2-upgraded-layout/reset.css b/exercises/2-upgraded-layout/reset.css new file mode 100644 index 0000000..af5d7e5 --- /dev/null +++ b/exercises/2-upgraded-layout/reset.css @@ -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; +} \ No newline at end of file diff --git a/exercises/3-left-hand-navigation/README.md b/exercises/3-left-hand-navigation/README.md new file mode 100644 index 0000000..56c23ea --- /dev/null +++ b/exercises/3-left-hand-navigation/README.md @@ -0,0 +1,17 @@ +Left Hand Navigation +===================== + +Using this screenshot as a guide, create a left hand navigation template. + +

+ +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/). \ No newline at end of file diff --git a/exercises/4-right-hand-navigation/righthand.png b/exercises/4-right-hand-navigation/righthand.png new file mode 100644 index 0000000..8bc5170 Binary files /dev/null and b/exercises/4-right-hand-navigation/righthand.png differ diff --git a/exercises/5-stack-overflow-drop-down/README.md b/exercises/5-stack-overflow-drop-down/README.md new file mode 100644 index 0000000..36fa494 --- /dev/null +++ b/exercises/5-stack-overflow-drop-down/README.md @@ -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!!