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

files

Browse Source
This commit is contained in:
Armen Vartan
2014-12-01 12:17:43 -05:00
parent 89e5a5f4b0
commit b9a8397f34
124 changed files with 2918 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front-end/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
front-end/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
front-end/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
front-end/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
front-end/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
front-end/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
front-end/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
front-end/3-left-hand-navigation/lefthand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 231 KiB

17
front-end/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
front-end/4-right-hand-navigation/righthand.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 245 KiB

22
front-end/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!!

18
front-end/6-css-challenge/README.md Normal file
View File

@ -0,0 +1,18 @@
## CSS Challenge
In this assignment, you will doing the css for a site. The HTML is already done for you, so don't touch it, unless you're adding the about link (instrutions below).
Included are pictures of what the site should look like. Here are a few things to help:
* the color of the background in nav is #444, as well as for the dashed border lines
* the background color for the footer is #222
* look up border radius. Can you make the picture a circle as well?
* You will need to use nth-child() in the css
* the footer should clear everything above it
* do all of your sizes in em or %
* make the about link in the header go to the about section (you can change the html here and only here)
**Why use em or %?** When you code your css using px, you're defining the exact amount of pixels for the size. This seems great, until you go a different size monitor. Using % says what percent of the screen to take up. Em defines the size based on the px definition in the document. By default, this is 16px. By using em, you can size everything in relation to each other, and not have to change 1 pixel every time you make a minor adjustment.
Check out the js document. Figure out what it's doing. See if you can explain it to a friend.
![top of page](top.png)
![bottom of page](bottom.png)

9
front-end/6-css-challenge/application.js Normal file
View File

@ -0,0 +1,9 @@
(function($, window, document) {
$(function(){
var lastParagraph = $('#about p:last-child()')
var aboutHeader = $('#about h2')
aboutHeader.on('click', function(event){
lastParagraph.toggle()
})
});
}(window.jQuery, window, document));

BIN
front-end/6-css-challenge/bottom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 KiB

38
front-end/6-css-challenge/index.html Normal file
View File

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="application.js"></script>
</head>
<body>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Links</li></a>
<a href="#"><li>Blog</li></a>
</ul>
</nav>
<div id="container">
<h2 id="home">WELCOME TO MY SITE</h2>
<img id="selfie" src="http://i.imgur.com/WW02WNJ.jpg"/>
<div id="about">
<h2>About me</h2>
<p>
Letterpress Cosby sweater skateboard cliche chia gentrify. Lo-fi sustainable distillery authentic, mixtape normcore hoodie farm-to-table Cosby sweater PBR chillwave bicycle rights brunch. Kitsch Kickstarter actually, viral mixtape sartorial master cleanse Cosby sweater shabby chic. Locavore chambray art party yr High Life authentic, biodiesel raw denim craft beer organic occupy. Vegan hoodie ennui sartorial Austin jean shorts. Hashtag Helvetica gluten-free single-origin coffee pop-up American Apparel. Trust fund Carles mlkshk, viral fingerstache chillwave disrupt.
</p>
<p>
Aesthetic Neutra art party plaid High Life food truck. American Apparel literally Vice High Life, Neutra vegan disrupt meh food truck swag gentrify semiotics. Williamsburg kitsch Etsy four loko brunch, hella Banksy vegan next level squid vinyl fingerstache Truffaut bicycle rights Portland. Jean shorts drinking vinegar slow-carb twee. Squid synth McSweeney's pour-over stumptown. Neutra chambray fingerstache, church-key tote bag ennui sriracha next level pug mixtape wayfarers letterpress meh semiotics roof party. Hashtag try-hard pug before they sold out.
</p>
<p>
Drinking vinegar Pitchfork Shoreditch banh mi farm-to-table. Farm-to-table gastropub readymade flannel, master cleanse selfies single-origin coffee street art seitan butcher Blue Bottle Neutra asymmetrical. Vinyl stumptown Helvetica deep v, literally Marfa Truffaut banjo shabby chic cliche PBR&B vegan Neutra tousled. PBR&B jean shorts chillwave, Helvetica VHS Portland meggings mustache. Fixie mlkshk narwhal bitters craft beer. Forage Bushwick literally, Kickstarter roof party photo booth meggings squid kogi sustainable Shoreditch kale chips gluten-free fap.
</p>
<p>
Vinyl small batch salvia pour-over beard, aesthetic lomo irony Intelligentsia freegan. You probably haven't heard of them plaid jean shorts, Williamsburg Wes Anderson photo booth cliche letterpress paleo Echo Park distillery locavore slow-carb seitan lomo. You probably haven't heard of them four loko tattooed photo booth. Scenester YOLO flannel, craft beer 8-bit vinyl mumblecore vegan before they sold out flexitarian ugh synth Tonx Odd Future butcher. Selvage try-hard Etsy fap brunch forage. Whatever ethical semiotics, squid Intelligentsia Banksy cred brunch tousled.
</p>
</div>
</div>
<footer>Thanks for visiting!</footer>
</body>
</html>

16
front-end/6-css-challenge/main.css Normal file
View File

@ -0,0 +1,16 @@
body {
font-size: 20px;
}
nav {
height: 60px;
}
#container {
padding: 90px 5%;
}
footer {
height: 30px;
padding: 10px;
}

BIN
front-end/6-css-challenge/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 697 KiB

9
front-end/7-hacker-news/README.md Normal file
View File

@ -0,0 +1,9 @@
Hacker News
===========
* Go to Y Combinator's [Hacker News](https://news.ycombinator.com/).
* Check out the source code. It is minified, which makes load time faster, but difficult to read. Add the HTML to index.html and CSS to main.css Deminify it. Depending on your text editor, it might do it for you.
* Read through the code, and compare it to what you see on the page. What is each thing doing?
* What do you think of the embedded CSS? Is this good practice?
* Check out the CSS file. Does it follow DRY (don't repeat yourself) priniciples?
* Pick something in the site that you found interesting. Be prepared to talk about it tomorrow morning.

0
front-end/7-hacker-news/index.html Normal file
View File

0
front-end/7-hacker-news/main.css Normal file
View File