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

Start with Python

Browse Source
This commit is contained in:
Kenneth Mendonca
2015-07-22 16:44:07 -04:00
parent 94031a251f
commit 57cb3981a0
100 changed files with 2085 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
3-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 application.js. 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
3-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
3-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
3-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
3-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
3-front-end/6-css-challenge/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 697 KiB