diff --git a/1. HTML/lab.md b/1. HTML/lab.md new file mode 100644 index 0000000..77cf28f --- /dev/null +++ b/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 diff --git a/1. HTML/student_labs/.gitkeep b/1. HTML/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/1. HTML/student_labs/README.md b/1. HTML/student_labs/README.md deleted file mode 100644 index d601678..0000000 --- a/1. HTML/student_labs/README.md +++ /dev/null @@ -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. diff --git a/1. HTML/student_labs/mockup.png b/1. HTML/student_labs/mockup.png deleted file mode 100644 index 4f6bbe0..0000000 Binary files a/1. HTML/student_labs/mockup.png and /dev/null differ diff --git a/10. SASS/lab.md b/10. SASS/lab.md new file mode 100644 index 0000000..66cdf3b --- /dev/null +++ b/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 diff --git a/10. SASS/student_labs/README.md b/10. SASS/student_labs/README.md deleted file mode 100644 index 7cb2410..0000000 --- a/10. SASS/student_labs/README.md +++ /dev/null @@ -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 diff --git a/11. Foundation/student_labs/README.md b/11. Foundation/lab.md similarity index 100% rename from 11. Foundation/student_labs/README.md rename to 11. Foundation/lab.md diff --git a/12. jQueryUI/student_labs/README.md b/12. jQueryUI/lab.md similarity index 100% rename from 12. jQueryUI/student_labs/README.md rename to 12. jQueryUI/lab.md diff --git a/2. CSS/lab.md b/2. CSS/lab.md new file mode 100644 index 0000000..0b8bc5f --- /dev/null +++ b/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. diff --git a/2. CSS/student_labs/.gitkeep b/2. CSS/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/2. CSS/student_labs/README.md b/2. CSS/student_labs/README.md deleted file mode 100644 index 5b2a52d..0000000 --- a/2. CSS/student_labs/README.md +++ /dev/null @@ -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. diff --git a/2. CSS/student_labs/mockup.png b/2. CSS/student_labs/mockup.png deleted file mode 100644 index 4f6bbe0..0000000 Binary files a/2. CSS/student_labs/mockup.png and /dev/null differ diff --git a/3. Layout/lab.md b/3. Layout/lab.md new file mode 100644 index 0000000..c41284a --- /dev/null +++ b/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 diff --git a/3. Layout/student_labs/.gitkeep b/3. Layout/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/3. Layout/student_labs/README.md b/3. Layout/student_labs/README.md deleted file mode 100644 index c96995f..0000000 --- a/3. Layout/student_labs/README.md +++ /dev/null @@ -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! diff --git a/3. Layout/student_labs/mockup.jpg b/3. Layout/student_labs/mockup.jpg deleted file mode 100644 index 9d81726..0000000 Binary files a/3. Layout/student_labs/mockup.jpg and /dev/null differ diff --git a/4. Advanced Inline Layout/lab.md b/4. Advanced Inline Layout/lab.md new file mode 100644 index 0000000..2450fce --- /dev/null +++ b/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`. diff --git a/4. Advanced Inline Layout/student_labs/.gitkeep b/4. Advanced Inline Layout/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/4. Advanced Inline Layout/student_labs/README.md b/4. Advanced Inline Layout/student_labs/README.md deleted file mode 100644 index f8400cf..0000000 --- a/4. Advanced Inline Layout/student_labs/README.md +++ /dev/null @@ -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! diff --git a/4. Advanced Inline Layout/student_labs/mockup.jpg b/4. Advanced Inline Layout/student_labs/mockup.jpg deleted file mode 100644 index 9d81726..0000000 Binary files a/4. Advanced Inline Layout/student_labs/mockup.jpg and /dev/null differ diff --git a/5. Responsive Design and Advanced Selectors/lab.md b/5. Responsive Design and Advanced Selectors/lab.md new file mode 100644 index 0000000..7c8eacd --- /dev/null +++ b/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. diff --git a/5. Responsive Design and Advanced Selectors/student_labs/.gitkeep b/5. Responsive Design and Advanced Selectors/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/5. Responsive Design and Advanced Selectors/student_labs/README.md b/5. Responsive Design and Advanced Selectors/student_labs/README.md deleted file mode 100644 index c9d45ff..0000000 --- a/5. Responsive Design and Advanced Selectors/student_labs/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Lab - -## Create These Mockups -1. ![Mockup](wireframe.jpg) diff --git a/5. Responsive Design and Advanced Selectors/student_labs/wireframe.jpg b/5. Responsive Design and Advanced Selectors/student_labs/wireframe.jpg deleted file mode 100644 index 1f2e479..0000000 Binary files a/5. Responsive Design and Advanced Selectors/student_labs/wireframe.jpg and /dev/null differ diff --git a/6. Fonts, Forms, and Pseudo Selectors/lab.md b/6. Fonts, Forms, and Pseudo Selectors/lab.md new file mode 100644 index 0000000..592ce09 --- /dev/null +++ b/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 diff --git a/6. Fonts, Forms, and Pseudo Selectors/student_labs/.gitkeep b/6. Fonts, Forms, and Pseudo Selectors/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/6. Fonts, Forms, and Pseudo Selectors/student_labs/README.md b/6. Fonts, Forms, and Pseudo Selectors/student_labs/README.md deleted file mode 100644 index 010eaea..0000000 --- a/6. Fonts, Forms, and Pseudo Selectors/student_labs/README.md +++ /dev/null @@ -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/) diff --git a/7. Motion, Transform, and Design/lab.md b/7. Motion, Transform, and Design/lab.md new file mode 100644 index 0000000..0f75a59 --- /dev/null +++ b/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? diff --git a/7. Motion, Transform, and Design/student_labs/.gitkeep b/7. Motion, Transform, and Design/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/7. Motion, Transform, and Design/student_labs/README.md b/7. Motion, Transform, and Design/student_labs/README.md deleted file mode 100644 index 4264ef4..0000000 --- a/7. Motion, Transform, and Design/student_labs/README.md +++ /dev/null @@ -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) diff --git a/8. Flex Boxes/lab.md b/8. Flex Boxes/lab.md new file mode 100644 index 0000000..c3da236 --- /dev/null +++ b/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 diff --git a/8. Flex Boxes/student_labs/.gitkeep b/8. Flex Boxes/student_labs/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/8. Flex Boxes/student_labs/README.md b/8. Flex Boxes/student_labs/README.md deleted file mode 100644 index bd64c23..0000000 --- a/8. Flex Boxes/student_labs/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Flex Boxes - -Try to beat this game: http://flexboxfroggy.com/ diff --git a/9. ES6/student_labs/CASTLE_BATTLE.md b/9. ES6/castle.md similarity index 100% rename from 9. ES6/student_labs/CASTLE_BATTLE.md rename to 9. ES6/castle.md diff --git a/9. ES6/student_labs/LANDSCAPER.md b/9. ES6/landscaper.md similarity index 80% rename from 9. ES6/student_labs/LANDSCAPER.md rename to 9. ES6/landscaper.md index 3f418f5..39122c3 100644 --- a/9. ES6/student_labs/LANDSCAPER.md +++ b/9. ES6/landscaper.md @@ -1,13 +1,4 @@ -# Landscaper Game - -**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 +# Landscaper! 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. -
Hungry for more? +## 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 - -