better labs

1. HTML/lab.md

@@ -0,0 +1,10 @@
+# Lab
+
+- Pick a site you really like (the more minimalist, the better)
+    - if you're unsure, check out
+        - https://www.awwwards.com/websites/minimal/
+        - https://foundation.zurb.com/templates.html (these are a easier)
+- Think about the content on the site and what tags it might use
+- Create an HTML doc containing as much of the site content as possible, with what tags you think work best for the given content
+- Open up your browser's dev tools and inspect the site's HTML, to see how they approached the content.
+    - This varies depending on browser/operating system, so ask if you're not sure how to do this

1. HTML/student_labs/README.md

@@ -1,13 +0,0 @@
-# Lab
-
-## Create HTML for this content
-1. ![Mockup](mockup.png)
-1. You do not have to style this yet.  Just come up with the tags and structure for the page.
-1. URL for image: http://blog.taxact.com/wp-content/uploads/Complete-Guide-to-Employee-Stock-Options-and-Tax-Reporting-Forms.jpg
-1. Links do not have to go anywhere.
-1. With each tag you create, `git add` the file, make a commit, and push it to origin
-
-## Stretch:
-
-1. Create an about.html which has similar content to this one.  Have the "About" link send you to about.html.  Have "Home" send you to the page you created in the "Create This Mockup" section.
-1. Use what you know about CSS from fundamentals to style this.

10. SASS/lab.md

@@ -0,0 +1,5 @@
+# Lab
+
+- Take all your old CSS and try to convert it to SASS as much as possible
+- Use variables to store px/em/rem values and colors
+- Use nesting so you don't have to write long selectors

10. SASS/student_labs/README.md

@@ -1,3 +0,0 @@
-# SASS Lab
-
-Real simple: go back to a CSS lab that you're most proud of and refactor it into SASS

2. CSS/lab.md

@@ -0,0 +1,4 @@
+# Lab
+
+- Go back and add colors (background and text) to your HTML doc from the last lab
+- Use your browser's dev tools to get the exact colors the original site uses.

2. CSS/student_labs/README.md

@@ -1,9 +0,0 @@
-# Lab
-
-## Create This Mockup
-1. ![Mockup](mockup.png)
-1. Using what you learned about CSS, style the HTML lab so it looks like the mockup.
-
-## Stretch:
-
-1. Create/style the About page mentioned in the Stretch section of the HTML lab.

3. Layout/lab.md

@@ -0,0 +1,5 @@
+# Lab
+
+- Continue with your website: add padding, margin, border to elements
+- If you have time, and it's necessary, add positioning
+- See what the original did with your browser's dev tools

3. Layout/student_labs/README.md

@@ -1,14 +0,0 @@
-# Lab
-
-## Create This Mockup
-1. ![Mockup](mockup.jpg)
-1. You do not have to use the exact photography in this mockup.  Feel free to find your own
-1. Do not worry about matching the fonts
-1. For the "GET IN TOUCH" section, do not worry about creating form elements for name, email, subject, message, send.  Just use standard elements that we've learned about (maybe divs?) and style them appropriately.
-1. You won't get it all done.  See how far you can get.
-
-## Stretch:
-
-1. Research form elements and add them in to match the mockup
-1. Research fonts and find something that matches closely to the mockup
-1. Finish the entire mockup!

4. Advanced Inline Layout/lab.md

@@ -0,0 +1,3 @@
+# Lab
+
+Continue with your site: try to substitute any `display:inline-block` with `display:inline-block; float:left`.

4. Advanced Inline Layout/student_labs/README.md

@@ -1,18 +0,0 @@
-# Lab
-
-## Create This Mockup With Only display:block; Elements
-
-![Mockup](mockup.jpg)
-
-1. **DO NOT USE** `display:inline-block;` **OR** `display:inline;` **AT ALL.  USE ONLY** `display:block;` **AND FLOATS.** Every element on the page must be have `display:block` assigned to it.
-1. Use `overflow:auto;` and `clear:left;`/`clear:right;`/`clear:both;` to clear any unnecessary floating problems.
-1. You do not have to use the exact photography in this mockup.  Feel free to find your own
-1. Do not worry about matching the fonts
-1. For the "GET IN TOUCH" section, do not worry about creating form elements for name, email, subject, message, send.  Just use standard elements that we've learned about (maybe divs?) and style them appropriately.
-1. You won't get it all done.  See how far you can get.
-
-## Stretch:
-
-1. Research form elements and add them in to match the mockup
-1. Research fonts and find something that matches closely to the mockup
-1. Finish the entire mockup!

5. Responsive Design and Advanced Selectors/lab.md

@@ -0,0 +1,5 @@
+# Lab
+
+- Continue with your site: resize the original site.  What happens at various sizes?
+- Try to mimic that
+- As always, use your browser's dev tools to see what they did.

5. Responsive Design and Advanced Selectors/student_labs/README.md

@@ -1,4 +0,0 @@
-# Lab
-
-## Create These Mockups
-1. ![Mockup](wireframe.jpg)

6. Fonts, Forms, and Pseudo Selectors/lab.md

@@ -0,0 +1,9 @@
+# Lab
+
+- Add some fonts to your site
+- See if you can find a font that matches (somewhat closely) that of the original site's fonts
+- Get them from
+    - Google fonts
+    - Some other font site site (e.g. font squirrel, my fonts, etc)
+    - See if you can find and download or use the exact fonts that the website used
+        - you'll need to peek around in the original site's HTML to figure that out

6. Fonts, Forms, and Pseudo Selectors/student_labs/README.md

@@ -1,26 +0,0 @@
-# Fonts, Sprites, and Icon Fonts
-
-## Fonts
-Write some text in Google's "Rock Salt" font.
-
-## Sprites
-Use this sprite to create three icons: a smiley face, a frowny face, and a winking face.
-![Sprite](http://getspritexy.com/images/sample-sprite-getspritexy.png)
-
-## Icon Fonts
-Do the same thing that you did for sprites, but use an icon font from http://www.fontello.com/
-
-## Styling Forms
-Create the following elements.  Style their padding, border, and margin.  Change their font-family, color, and background color:
-
-1. text
-2. checkbox
-3. file
-4. password
-5. radio
-6. search
-7. submit
-8. button
-
-## Play selectors game
-[http://flukeout.github.io/](http://flukeout.github.io/)

7. Motion, Transform, and Design/lab.md

@@ -0,0 +1,6 @@
+# Lab
+
+- Are there any places in your site that could use motion?
+- Does the original site have any motion in it?
+    - if not, add some in places where you might like it
+        - maybe on hover, change a background color or text color slowly?

7. Motion, Transform, and Design/student_labs/README.md

@@ -1,7 +0,0 @@
-# Motion
-
-##Transitions
-Make a navigation that looks like [Huge's Nav](http://www.hugeinc.com/)
-
-##Animations
-Create make a div fly out at the screen like [this](https://www.youtube.com/watch?v=GaiZIulY4EU)

8. Flex Boxes/lab.md

@@ -0,0 +1,7 @@
+# Lab
+
+- Rip it all up!
+- Start again with just your HTML and reposition everything, using Flex Boxes
+- Don't try to adjust your old css file
+    - instead, keep it for later
+    - once you've positioned everything nicely, use it to copy and paste things like fonts, animations, colors, etc

8. Flex Boxes/student_labs/README.md

@@ -1,3 +0,0 @@
-# Flex Boxes
-
-Try to beat this game: http://flexboxfroggy.com/

9. ES6/landscaper.md

@@ -1,13 +1,4 @@
-# Landscaper Game
+# Landscaper!
-
-**TWO OPTIONS**
-
-1. Create a browser-based javascript app that simulates the following using `alert()` and `prompt()` to send messages to and get input from the user
-1. Create a terminal-based javascript app that simulates the following using `console.log()` and the [prompt-sync](https://www.npmjs.com/package/prompt-sync) package to get user input.
-
-Use as much ES6 as possible.
-
-## Game Flow
 
 1. You are starting a landscaping business, but all you have are your teeth.
 1. Using just your teeth, you can spend the day cutting lawns and make $1.  You can do this as much as you want.
@@ -21,10 +12,8 @@ Use as much ES6 as possible.
 1. Using the the team of starving students, you can spend the day cutting lawns and make $250.  You can do this as much as you want.
 1. You win the game when you have a team of starving students and $1000.  In this situation, send a message to the user telling them, they've won.
 
-<details><summary>Hungry for more?</summary>
+## Hungry for more?
 
 1. Add the ability to reset the game at any point so that you can play again
 1. Make it so that a user can have multiple tools, and money earned each day is increased appropriately (e.g. 2 scissors, and an old-timey push lawnmower means you earn $60/day )
 1. Once you've implemented multiple tools, make it so you can sell tools for half price
-
-</details>