diff --git a/unit_01/w01d04/homework/CSS_Mockups/README.md b/unit_01/w01d04/homework/CSS_Mockups/README.md new file mode 100644 index 0000000..935a4a1 --- /dev/null +++ b/unit_01/w01d04/homework/CSS_Mockups/README.md @@ -0,0 +1,9 @@ +#Master your mockup + +![mockup picture with cat](http://www.oddities123.com/wp-content/uploads/2013/06/funny-twins-8.jpg) + +For today's lab you will find mockups of two websites. You are given the image files needed to create a mockup for each website. + +Decide on one website to re-create. + +Create your own html and css files and recreate a mockup as accurately as possible. diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-lifestyle.jpg b/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-lifestyle.jpg new file mode 100644 index 0000000..d7a4e5f Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-lifestyle.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-mens.jpg b/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-mens.jpg new file mode 100644 index 0000000..6d7f24e Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-mens.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-women.jpg b/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-women.jpg new file mode 100644 index 0000000..916ec62 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/cat-women.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/home-about.jpg b/unit_01/w01d04/homework/CSS_Mockups/supply/img/home-about.jpg new file mode 100644 index 0000000..5ce7f97 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/home-about.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/home-blog.jpg b/unit_01/w01d04/homework/CSS_Mockups/supply/img/home-blog.jpg new file mode 100644 index 0000000..17a2088 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/home-blog.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/logo.png b/unit_01/w01d04/homework/CSS_Mockups/supply/img/logo.png new file mode 100644 index 0000000..ab2d6e2 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/logo.png differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/img/main_boots.jpg b/unit_01/w01d04/homework/CSS_Mockups/supply/img/main_boots.jpg new file mode 100644 index 0000000..82ab1d3 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/img/main_boots.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/supply/mockup.png b/unit_01/w01d04/homework/CSS_Mockups/supply/mockup.png new file mode 100644 index 0000000..63aaf2e Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/supply/mockup.png differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/vssl/img/facetwit.png b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/facetwit.png new file mode 100644 index 0000000..535362b Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/facetwit.png differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/vssl/img/left.jpg b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/left.jpg new file mode 100644 index 0000000..5229929 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/left.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/vssl/img/middle.jpg b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/middle.jpg new file mode 100644 index 0000000..466b9be Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/middle.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/vssl/img/right.jpg b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/right.jpg new file mode 100644 index 0000000..056bcd9 Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/right.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/vssl/img/sailboat.jpg b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/sailboat.jpg new file mode 100644 index 0000000..214d49b Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/vssl/img/sailboat.jpg differ diff --git a/unit_01/w01d04/homework/CSS_Mockups/vssl/mockup.png b/unit_01/w01d04/homework/CSS_Mockups/vssl/mockup.png new file mode 100644 index 0000000..41137af Binary files /dev/null and b/unit_01/w01d04/homework/CSS_Mockups/vssl/mockup.png differ diff --git a/unit_01/w01d04/homework/CSS_Selector/CSS.md b/unit_01/w01d04/homework/CSS_Selector/CSS.md new file mode 100644 index 0000000..d14251c --- /dev/null +++ b/unit_01/w01d04/homework/CSS_Selector/CSS.md @@ -0,0 +1,96 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: CSS Selector Homework for w01d04
+Type: Homework
+Duration: "2:00"
+Creator:
+ Original creators: WDI-Archer
+ Adapted by: Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: CSS Selectors
+Prerequisites: CSS basics, CSS selectors
+ +--- +# Homework - CSS Selector Practice + +### Before you begin the assignment +Go to the following websites to: + +1. Read about [CSS Layout](http://learnlayout.com/) +2. Practice [CSS selections](http://flukeout.github.io/) + +Next, use the index.html and style.css in this folder to complete the assigment. + +### Navigation +1. Inside the nav element, delete the heading and replace it with 3 **li** tags in an unordered list. +- Within each list element, place an **a** and make the text inside of each **a** "Portfolio", "Bio", and "Contact", respectively. Set the **href** property on the **a** tag equal to "#". This will simply direct the link back to the same page. +- In your css file, underneath where you see the style for the **nav** (you want to keep all of your navigation styles in the same place), select only the **ul** tag that is inside of the **nav** and give it the following styles... + + ```css + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + ``` +- Select all **li** elements inside the **ul**, inside of the `nav` and make them float left. +- Select all of the a tags inside those **li** elements (so much nesting!) and give them the following styles + + ```css + display: block; + width: 120px; + height: 50px; + font-weight: bold; + color: #000; + background-color: transparent; + border: 2px solid grey; + margin: 25px 10px; + text-align: center; + padding: 10% 0; + text-decoration: none; + text-transform: uppercase; + ``` +**Commit 1**
+
+Write an appropriate commit message to reflect what's you've done to your files. +
+ +### Aligning Left and Right +1. Try floating all of your **nav li** elements to the right, then move them back to the left. +- Try giving only one of you **nav li** elements an ID of 'right' and then float just that one right. Remove the ID if you hate how this looks. +- Give your **nav** element a left margin so that it lines up with the blue boxes on the page, then set it back to 0. +- Find the aside in the CSS, erase its 'right' property and set its 'left' property to 0. +- How should you change the style on the large section so that it is flush with the right side? + +**Commit 2**
+
+Write an appropriate commit message to reflect what's you've done to your files. +
+ +### Layout +1. Locate the **p** tags in each of the small boxed and briefly write your answers to the following five questions in each, respectively +- What is the default display style of a **div** tag? +- What is the best way to horizontally center an element? +- What is the difference between padding and margin? +- What is the difference between fixed and absolute positioning? +- What is a 'clearfix'? +- Give all of your **p** tags a margin of 0px and give your boxes a top/bottom padding of 10px and a right/left padding of 5px, using CSS shorthand + +**Commit 3**
+
+Write an appropriate commit message to reflect what's you've done to your files. +
+ +### Change the Colors +Without adding any new IDs or classes, give each of your **p** tags a different font color from this [page](http://www.crockford.com/wrrrld/color.html). You will need to look up what first-child, last-child, and nth-child pseudo-classes are. +Set your header, aside, and footer position to 'fixed', add a margin-top of 150px to your aside and set your body height to 2000px. Scroll down and see what happens. + +**Commit 4**
+
+Write an appropriate commit message to reflect what's you've done to your files. +
+ +###Experiment! +Go to [http://www.cssdesk.com/](http://www.cssdesk.com/), copy and paste your CSS and HTML into the appropriate areas and try adding different colors, display properties, position properties, borders, etc to your elements. Try to make the layout completely unrecognizable. diff --git a/unit_01/w01d04/homework/CSS_Selector/index.html b/unit_01/w01d04/homework/CSS_Selector/index.html new file mode 100644 index 0000000..439c2bd --- /dev/null +++ b/unit_01/w01d04/homework/CSS_Selector/index.html @@ -0,0 +1,57 @@ + + + + + + Document + + + + +
+
+ +
+ + + +
+

content

+
+
+

+
+
+

+
+
+

+
+
+

+
+
+

+
+
+
+
+
+
+
+
+
+ + +
+ + + diff --git a/unit_01/w01d04/homework/CSS_Selector/style.css b/unit_01/w01d04/homework/CSS_Selector/style.css new file mode 100644 index 0000000..0a68d35 --- /dev/null +++ b/unit_01/w01d04/homework/CSS_Selector/style.css @@ -0,0 +1,209 @@ +*{ + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; +} + +body{ + margin: 0; + color: #111; + background-color: #A9B091; + font-family: helvetica; +} + +h1 { + margin:0; + color: white; +} + +.container{ + position: relative; +} + +header{ + position: fixed; + background-color: #111; +} + +nav{ + width: 80%; + height: 100px; + margin-left: 212px; +} + +nav ul { + background-color: #846863; +} + +nav { + width: 100%; + height: 100px; +} + +nav ul{ + margin: 0; +} + +nav h1 ul{ + /*Answer #3 here*/ +} + + +p{ + text-align: center; + margin: 0px; + padding-top: 10px; + padding-bottom: 10px; + padding-right: 5px; + padding-left: 5px; + +} + +nav h1 ul li:first-child{ + float: right; +} + +nav ul li { + +} + +nav{ + position:relative; + left: 0px; + width: 200px; +} + +header{ + width: 100%; +} + +aside{ + position: inherit; + right: 0px; + width: 200px; + height: 500px; + background-color: slategrey; + position: fixed; + left: 0px; + width: 200px; + height: 700px; + background-color: slategrey; + margin-top: 100px; + position: absolute; +} +p { + padding: 0px 10px + ; +} +section{ + margin-right: 0px; + height: 700px; + float: right; +} + +p { + margin: 0px; +} + +footer{ + left: 0; + height: 70px; + background-color: #846863; + width: 100%; +} + +.small-boxes{ + text-align: center; + padding: 10px 5px; + margin-top: 90px; +} + +.small-boxes .box:first-child p{ + color: tomato; +} + +.small-boxes .box:last-child p{ + color: chocolate; +} + +.small-boxes .box:nth-child(2) p{ + color: lime; +} + +.small-boxes .box:nth-child(3) p{ + color: orange; +} + +.small-boxes .box:nth-child(4) p{ + color: cornsilk; +} + +.box:first-child{ + color: #EACDBE; + text-align: left; + display: inline-block; + vertical-align: bottom; + height: 200px; + width: 200px; + background-color: #36413E; + margin-bottom: 5px; +} +.box:nth-child(2){ + color: #EADFBE; + text-align: left; + display: inline-block; + vertical-align: bottom; + height: 200px; + width: 200px; + background-color: #36413E; + margin-bottom: 5px; +} +.box:nth-child(3){ + color: #EADEBE; + text-align: left; + display: inline-block; + vertical-align: bottom; + height: 200px; + width: 200px; + background-color: #36413E; + margin-bottom: 5px; +} +.box:nth-child(4){ + color: #EAEEBE; + text-align: left; + display: inline-block; + vertical-align: bottom; + height: 200px; + width: 200px; + background-color: #36413E; + margin-bottom: 5px; +} +.box:last-child{ + color: #EACFBE; + text-align: left; + display: inline-block; + vertical-align: bottom; + height: 200px; + width: 200px; + background-color: #36413E; + margin-bottom: 5px; + padding: 10px 5px; +} + +.big-boxes{ + text-align: center +} + +.big-box{ + display: inline-block; + height:400px; + width: 506px; + background-color: #36413E; +} + +p { + margin: 0px; + padding: 10px 5px 10px 5px; +} diff --git a/unit_01/w01d04/homework/README.md b/unit_01/w01d04/homework/README.md new file mode 100644 index 0000000..c726fb2 --- /dev/null +++ b/unit_01/w01d04/homework/README.md @@ -0,0 +1,22 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: Homework for w01d04
+Type: Homework
+Duration: "3:00-4:00"
+Creator:
+ Original creators: WDI-Archer, WDI-Meeskeeks
+ Adapted by: Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: Javascript, CSS
+Prerequisites: Basic Javascript, CSS Selectors
+ +--- + + +1) Javascript Practice
+2) CSS Practice + +Follow the instructions for submitting your homework (step-by-step instructions are in the wiki). diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-lifestyle.jpg b/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-lifestyle.jpg new file mode 100644 index 0000000..d7a4e5f Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-lifestyle.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-mens.jpg b/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-mens.jpg new file mode 100644 index 0000000..6d7f24e Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-mens.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-women.jpg b/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-women.jpg new file mode 100644 index 0000000..916ec62 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/cat-women.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/home-about.jpg b/unit_01/w02d02/homework/CSS_Mockups/supply/img/home-about.jpg new file mode 100644 index 0000000..5ce7f97 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/home-about.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/home-blog.jpg b/unit_01/w02d02/homework/CSS_Mockups/supply/img/home-blog.jpg new file mode 100644 index 0000000..17a2088 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/home-blog.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/logo.png b/unit_01/w02d02/homework/CSS_Mockups/supply/img/logo.png new file mode 100644 index 0000000..ab2d6e2 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/logo.png differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/img/main_boots.jpg b/unit_01/w02d02/homework/CSS_Mockups/supply/img/main_boots.jpg new file mode 100644 index 0000000..82ab1d3 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/img/main_boots.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/supply/mockup.png b/unit_01/w02d02/homework/CSS_Mockups/supply/mockup.png new file mode 100644 index 0000000..63aaf2e Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/supply/mockup.png differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/vssl/img/facetwit.png b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/facetwit.png new file mode 100644 index 0000000..535362b Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/facetwit.png differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/vssl/img/left.jpg b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/left.jpg new file mode 100644 index 0000000..5229929 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/left.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/vssl/img/middle.jpg b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/middle.jpg new file mode 100644 index 0000000..466b9be Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/middle.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/vssl/img/right.jpg b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/right.jpg new file mode 100644 index 0000000..056bcd9 Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/right.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/vssl/img/sailboat.jpg b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/sailboat.jpg new file mode 100644 index 0000000..214d49b Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/vssl/img/sailboat.jpg differ diff --git a/unit_01/w02d02/homework/CSS_Mockups/vssl/mockup.png b/unit_01/w02d02/homework/CSS_Mockups/vssl/mockup.png new file mode 100644 index 0000000..41137af Binary files /dev/null and b/unit_01/w02d02/homework/CSS_Mockups/vssl/mockup.png differ diff --git a/unit_01/w02d02/homework/README.md b/unit_01/w02d02/homework/README.md new file mode 100644 index 0000000..4108698 --- /dev/null +++ b/unit_01/w02d02/homework/README.md @@ -0,0 +1,55 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: CSS Mockup Homework w02d02
+Type: Homework
+Duration: "2:00"
+Creator:
+ Original creators: WDI-Archer, WDI-Funke
+ Adapted by: Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: CSS, HTML
+Prerequisites: CSS, HTML
+ +--- + +# Homework - Master Your Mockup + +![mockup picture with cat](http://www.oddities123.com/wp-content/uploads/2013/06/funny-twins-8.jpg) + +For tonight's homework you have the option of doing one of two website mockups. We have provided the image files needed to create a mockup for each website, but you will need to create the `index.hml` file and the `style.css`. + +Decide whether you want to re-create `VSSL` or `Supply`. + +Do the following commits: + +**Commit 1**
+
+Once you have setup the basic structure in your HTML file, save it, add it, and commit it. The commit message should read:
+"Set up basic HTML file" +
+ +**Commit 2**
+
+Once you have created and saved your CSS file, add it and commit it. The commit message should read:
+"Created a CSS file" +
+ +**Commit 3**
+
+Once you have linked your CSS file to your HTML file (make sure to test it - change the background color of the page to ensure that it's properly linked), add it and commit it. Need a reminder on how to do this? Check out this link on how to [link an external style sheet] (http://www.w3schools.com/css/css_howto.asp). +The commit message should read:
+"The CSS file is successfully linked to the HTML file" +
+ +**Commit 4**
+
+Once you have the pictures displaying on your page (they don't have to be in the right place on the page, they just need to be on your page), take a screenshot, title it `mockup_with_pictures_pre_styling`. Save this to your homework folder. The commit message should read:
+"The images were loaded to the HTML, but not styled yet" +
+ +**Commit 5**
+
+Once you have successfully created the mockup (or once you're too tired to continue and need to go to bed), take a screenshot of your work and title it `mockup_with_styling`. Save this to your homework folder. Come up with your own appropriate commit message.
diff --git a/unit_01/w02d02/morning_exercise/README.md b/unit_01/w02d02/morning_exercise/README.md new file mode 100644 index 0000000..82cd3b0 --- /dev/null +++ b/unit_01/w02d02/morning_exercise/README.md @@ -0,0 +1,31 @@ +# W02D02 Morning Warmup +![Image of Caveman](http://s3.amazonaws.com/media.wbur.org/wordpress/11/files/2011/10/1017_palindrome.jpg) + +####Exercises 1: Find a value in a given array + - Write a function `searchArray` that takes an array and value as parameters and searches the array for the given value. If the value is in the array, return `true`, otherwise return '-1'. +```javascript +var nums = [1,2,3,4,5] +searchArray(nums, 3) => true +searchArray(nums, 6) => -1 +``` +Here is some starter code: +```javascript +var searchArray = function(array,value) { + +}; +``` + +#### Exercises 2: Determine whether a given string is a [palindrome](https://en.wikipedia.org/wiki/Palindrome) + +- Write a function `isPalindrome` that takes in a single parameter `str`, a string, and returns `true` if the string is a palindrome, and false otherwise. For example + +```javascript +isPalindrome('hello') => false +isPalindrome('hannah') => true +``` +Here is some starter code: +```javascript +var isPalindrome = function(str) { + +}; +```