├── .gitignore ├── LICENSE ├── README.md ├── assets ├── jumbo.jpg └── lambda-black.png ├── design ├── Mobile.png ├── Tablet.png └── desktop.png ├── index.html └── style └── index.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 BloomTech 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sprint Challenge: User Interface and Git 2 | 3 | **Read these instructions carefully. Understand exactly what is expected _before_ starting this Sprint Challenge.** 4 | 5 | This challenge allows you to practice the concepts and techniques learned over the past week and apply them in a concrete project. This Sprint explored User Interface and Git. During this Sprint, you studied semantic HTML, CSS fundamentals, git, and responsive design. In your challenge this week, you will demonstrate proficiency by creating a fully responsive website that has some missing HTML elements as well as CSS specificity problems that need to be solved. 6 | 7 | This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days. 8 | 9 | You are not allowed to collaborate during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your TL if you need direction. Your work reflects your proficiency in user interface and your command of the concepts and techniques in semantic HTML, CSS fundamentals, git, and responsive design. 10 | 11 | > You have **three hours** to complete this challenge. Plan your time accordingly. 12 | 13 | 14 | ## Introduction 15 | 16 | In this challenge, you build a missing header (navigation and image) on the home page, update some CSS styling on the home page, and make your page responsive for mobile. You will be working with a pre-existing web page, allowing you to get a taste of what it is like to inherit code from someone else, as will regularly happen on the job. 17 | 18 | In meeting the minimum viable product (MVP) specifications listed below, your web page should look like the solution screen shots of the home page and mobile version. 19 | 20 | [Click here for home page example](https://tk-assets.lambdaschool.com/39a49225-8ac9-43da-aa90-514fd60ae99a_sprint-challenge-ui-home-example.png) 21 | 22 | [Click here for tablet example](design/Tablet.png) 23 | 24 | 25 | [Click here for mobile example](design/Mobile.png) 26 | 27 | ### Commits 28 | 29 | Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons) and your team lead. 30 | 31 | ## Self-Study Questions 32 | 33 | Demonstrate your understanding of this week's concepts by answering the following free-form questions. 34 | 35 | Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager 36 | 37 | 1. If you were to describe semantic HTML to the next cohort of students, what would you say? 38 | 39 | 2. What are the 4 areas of the box model? 40 | 41 | 3. While using flexbox, what axis does the following property work on: ```align-items: center```? 42 | 43 | 4. Explain why git is valuable to a team of developers. 44 | 45 | 5. Define mobile-first design in your own words. 46 | 47 | You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. 48 | 49 | ## Instructions 50 | 51 | ### Task 1: Project Set Up 52 | 53 | - [ ] Create a forked copy of this project 54 | - [ ] Add your team lead as collaborator on Github 55 | - [ ] Clone your OWN version of the repository (Not Lambda's by mistake!) 56 | - [ ] Create a new branch: git checkout -b ``. 57 | - [ ] Implement the project on your newly created `` branch, committing changes regularly 58 | - [ ] Push commits: git push origin `` 59 | 60 | ### Task 2: Minimum Viable Product 61 | 62 | Your finished project must include all of the following requirements: 63 | 64 | #### Home Page 65 | 66 | [Review the provided design files](/design). Notice the navigation and header images are missing in the starter code. 67 | 68 | * [ ] Build the HTML and CSS to create the missing navigation and header 69 | * [ ] Link the `About` navigation item to an about.html page (you'll also need to create `about.html`) 70 | * [ ] Make your design responsive such that it is accessible on mobile(500px)and matches the [mobile](design/Mobile.png) wireframe. 71 | * [ ] Add responsive breakpoints to your code by using media queries 72 | 73 | You will also notice there are 10 boxes on the home page that need background colors. Use this list below to correctly style each box: 74 | 75 | * [ ] box1: `teal` 76 | * [ ] box2: `gold` 77 | * [ ] box3: `cadetblue` 78 | * [ ] box4: `coral` 79 | * [ ] box5: `crimson` 80 | * [ ] box6: `forestgreen` 81 | * [ ] box7: `darkorchid` 82 | * [ ] box8: `hotpink` 83 | * [ ] box9: `indigo` 84 | * [ ] box10: `dodgerblue` 85 | 86 | In your solution, it is essential that you follow best practices and produce clean and professional results. Schedule time to review, refine, and assess your work and perform basic professional polishing including spell-checking and grammar-checking on your work. It is better to submit a challenge that meets MVP than one that attempts too much and does not. 87 | 88 | ### Task 3: Stretch Problems 89 | 90 | After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on the following optional goals: 91 | 92 | * [ ] Make your design responsive such that it is accessible on tablet(800 px) and matches the [tablet](design/Tablet.png) wireframe. 93 | * [ ] Build a page of your choosing from the navigation items. Come up with content and images that fit the theme. 94 | * [ ] Introduce CSS animations to your site. 95 | * [ ] Build a contact page and create a form with several inputs of your choosing 96 | 97 | ## Resources 98 | 99 | 📚[Best Practices for Responsive Design](https://www.browserstack.com/guide/responsive-design-breakpoints) 100 | 101 | 🤝[W3 Schools - Responsive Design](https://www.w3schools.com/html/html_responsive.asp) 102 | 103 | 👀 [Styling with HTML and CSS](https://www.w3schools.com/html/html_css.asp) 104 | 105 | ## Submission format 106 | 107 | Follow these steps for completing your project. 108 | 109 | - [ ] Submit a Pull-Request to merge Branch into master (student's Repo). **Please don't merge your own pull request** 110 | - [ ] Add your team lead as a reviewer on the pull-request 111 | - [ ] Your team lead will count the project as complete by merging the branch back into master 112 | -------------------------------------------------------------------------------- /assets/jumbo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/Sprint-Challenge--User-Interface/8a9653ea3e792b17903eafbe5bc3660902e17cfe/assets/jumbo.jpg -------------------------------------------------------------------------------- /assets/lambda-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/Sprint-Challenge--User-Interface/8a9653ea3e792b17903eafbe5bc3660902e17cfe/assets/lambda-black.png -------------------------------------------------------------------------------- /design/Mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/Sprint-Challenge--User-Interface/8a9653ea3e792b17903eafbe5bc3660902e17cfe/design/Mobile.png -------------------------------------------------------------------------------- /design/Tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/Sprint-Challenge--User-Interface/8a9653ea3e792b17903eafbe5bc3660902e17cfe/design/Tablet.png -------------------------------------------------------------------------------- /design/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloominstituteoftechnology/Sprint-Challenge--User-Interface/8a9653ea3e792b17903eafbe5bc3660902e17cfe/design/desktop.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sprint Challenge - Home 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |

The Future

20 |

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

21 |
22 |
23 |

The Past

24 |

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

25 |
26 |
27 | 28 |
29 | 30 |

Why Did It Have To Be Boxes...

31 | 32 |
33 |
Box 1
34 |
Box 2
35 |
Box 3
36 |
Box 4
37 |
Box 5
38 |
Box 6
39 |
Box 7
40 |
Box 8
41 |
Box 9
42 |
Box 10
43 |
44 | 45 |
46 | 47 |
48 | 49 |
50 |

That's

51 |

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

52 |
53 |
54 |

No

55 |

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

56 |
57 |
58 |

Moon

59 |

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

60 |
61 | 62 |
63 | 64 | 73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /style/index.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | 50 | * { 51 | box-sizing: border-box; 52 | } 53 | 54 | html, body { 55 | height: 100%; 56 | font-family: 'Roboto', sans-serif; 57 | } 58 | 59 | h1, h2, h3, h4, h5 { 60 | font-size: 18px; 61 | margin-bottom: 15px; 62 | font-family: 'Rubik', sans-serif; 63 | } 64 | 65 | p { 66 | line-height: 1.4; 67 | } 68 | 69 | .container { 70 | width: 800px; 71 | margin: 0 auto; 72 | } 73 | 74 | .top-content { 75 | display: flex; 76 | flex-wrap: wrap; 77 | justify-content: space-evenly; 78 | margin-bottom: 20px; 79 | border-bottom: 1px dashed black; 80 | } 81 | 82 | .top-content .text-container { 83 | width: 48%; 84 | padding: 0 1%; 85 | padding-bottom: 20px; 86 | } 87 | 88 | .middle-content { 89 | margin-bottom: 20px; 90 | border-bottom: 1px dashed black; 91 | } 92 | 93 | .middle-content h2 { 94 | padding: 0 2%; 95 | margin-bottom: 0; 96 | } 97 | 98 | .middle-content .boxes { 99 | display: flex; 100 | flex-wrap: wrap; 101 | justify-content: space-evenly; 102 | } 103 | 104 | .middle-content .boxes .box { 105 | width: 12.5%; 106 | height: 100px; 107 | background: black; 108 | margin: 20px 2.5%; 109 | color: white; 110 | display: flex; 111 | align-items: center; 112 | justify-content: center; 113 | } 114 | 115 | .bottom-content { 116 | display: flex; 117 | margin: 0 2% 20px; 118 | justify-content: space-around; 119 | } 120 | 121 | .bottom-content .text-container { 122 | padding-right: 4%; 123 | } 124 | 125 | .bottom-content .text-container:last-child { 126 | padding-right: 0; 127 | } 128 | 129 | footer { 130 | width: 100%; 131 | background: black; 132 | } 133 | 134 | footer nav { 135 | width: 60%; 136 | display: flex; 137 | justify-content: space-between; 138 | align-items: center; 139 | padding: 20px 2%; 140 | font-size: 14px; 141 | } 142 | 143 | footer nav a { 144 | color: white; 145 | text-decoration: none; 146 | } --------------------------------------------------------------------------------