{"action":"closed","issue":{"url":"https://api.github.com/repos/TIY-GVL-FEE-2015-August/assignments/issues/93","labels_url":"https://api.github.com/repos/TIY-GVL-FEE-2015-August/assignments/issues/93/labels{/name}","comments_url":"https://api.github.com/repos/TIY-GVL-FEE-2015-August/assignments/issues/93/comments","events_url":"https://api.github.com/repos/TIY-GVL-FEE-2015-August/assignments/issues/93/events","html_url":"https://github.com/TIY-GVL-FEE-2015-August/assignments/issues/93","id":104740962,"number":93,"title":"2.4-swamp-rabbit-cycling-Holly-Goen","user":{"login":"techgravy","id":4564404,"avatar_url":"https://avatars.githubusercontent.com/u/4564404?v=3","gravatar_id":"","url":"https://api.github.com/users/techgravy","html_url":"https://github.com/techgravy","followers_url":"https://api.github.com/users/techgravy/followers","following_url":"https://api.github.com/users/techgravy/following{/other_user}","gists_url":"https://api.github.com/users/techgravy/gists{/gist_id}","starred_url":"https://api.github.com/users/techgravy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/techgravy/subscriptions","organizations_url":"https://api.github.com/users/techgravy/orgs","repos_url":"https://api.github.com/users/techgravy/repos","events_url":"https://api.github.com/users/techgravy/events{/privacy}","received_events_url":"https://api.github.com/users/techgravy/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-09-03T17:09:39Z","updated_at":"2015-09-08T19:54:10Z","closed_at":"2015-09-08T19:54:10Z","body":"# Bike Shop - Mobile First Wireframe -> HTML\r\n\r\n## Description\r\nYou will be playing the part of a freelance developer hired by a local company to create a responsive site from a low-fidelity mockup they put together. You will be required to exercise some creativity, or work with others with established design skills, to develop a nice looking web presence for the fictional company.\r\n\r\n### Company Background\r\nSwamp Rabbit Cycling is the premier (fictional) cycling shop for the Greater\r\nGreenville area! We’ve been serving the area for over 25 years and are the\r\nnumber one source for all things bikes. We carry everything from mountain bike\r\nequipment to bike related clothing and safety gear. We are a family owned\r\nprivate business and take pride in our long standing tradition of providing the\r\nbest service in the area.\r\n\r\n### Scope and Purpose\r\nThe purpose of this project is to create an online presence to help promote our\r\nunique family owned business. We understand the need for an online presence to\r\nserve as a way for our customers to connect with us.\r\n\r\nWe also understand the need to keep up with current design trends to help\r\nmarket our business. We’ve currently been using the attached clipart to serve\r\nas our logo and realize how updating our look will help us grow.\r\n\r\n![](bike.png)\r\n\r\n### Single Page Website\r\nWhile we do have plans to expand our website, we’re currently needing something\r\nup and running as soon as possible. Here are some of the items we’ll need by\r\nnext week (also included in the wireframe):\r\n\r\n- Single page where users are able to get our address + contact information\r\n- Google Map of where we are located in Greenville\r\n\r\nBeing in a mobile driven age, we understand the importance of being mobile\r\nfriendly. We’ve created a second wireframe to display the mobile view of a\r\nwebsite. \r\n\r\n![](desktop-wireframe.png)\r\n![](mobile-wireframe.png)\r\n\r\n## Objectives\r\n\r\n### Learning Objectives\r\n\r\nAfter completing this assignment, you should…\r\n\r\n* Have solid understanding of HTML/CSS/SASS\r\n* Understand principles of RWD and be able to effectively execute a solid flow of content from desktop to mobile.\r\n* Be able to leverage developer tools to test on mobile devices.\r\n\r\n### Performance Objectives\r\n\r\nAfter completing this assignment, you be able to effectively use\r\n\r\n* From a low fidelity wireframe, you should be able to create an html prototype of said design.\r\n* @media queries\r\n* SASS\r\n* HTML\r\n* manually compile SASS => CSS\r\n\r\n\r\n## Details\r\n\r\n### Deliverables\r\n\r\n* A repo containing at least:\r\n  * `index.html`\r\n  * `scss/<sass files>.scss`\r\n  * `css/<css files>.css`\r\n\r\n## Normal Mode\r\n\r\n* Create a web page from the given wireframes, developing the styles mobile-first\r\n* The initial version can have the images in a single column on mobile, even though they eventually want an image slider.\r\n* SASS will be written and compiled to CSS\r\n\r\n### Tasks\r\n\r\n#### Required Reading\r\n  - [x] [Codecademy JavaScript](https://www.codecademy.com/tracks/javascript) (At least through \"Control Flow\", but hopefully the whole thing)\r\n\r\n#### Recommended Reading\r\n  - [The Sass Way - Choosing great variable names](http://thesassway.com/beginner/variable-naming)\r\n  - [The Sass Way - Nested selectors: the inception rule](http://thesassway.com/beginner/the-inception-rule)\r\n  - [The Sass Way - Sass control directives](http://thesassway.com/intermediate/if-for-each-while)\r\n  - [The Sass Way - Referencing parent selectors using the ampersand character](http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand)\r\n  - [The Sass Way - Modular CSS naming conventions](http://thesassway.com/advanced/modular-css-naming-conventions)\r\n  - [Intro to Neat — A Semantic Sass Grid](http://blog.teamtreehouse.com/introduction-neat-semantic-sass-grid)\r\n  - [What’s So Great About Bower?](https://css-tricks.com/whats-great-bower/)\r\n\r\n#### Getting Started\r\n  * [x] Create a new issue with tasks\r\n  * [x] Create a new repository\r\n  * [x] Create and commit `index.html` and `scss/main.scss`\r\n  * [x] Install Bourbon and Neat\r\n  * [x] Add structure using HTML\r\n  * [x] Add the layout styles for the largest components\r\n\r\n#### Mobile Size\r\n  * [x] Finish header for mobile\r\n  * [x] Finish body content for mobile\r\n  * [x] Finish images for mobile\r\n  * [x] Finish contact info and footer for mobile\r\n\r\n#### Desktop Size\r\n  * [x] Add desktop styles for header\r\n  * [x] Add desktop styles for body content\r\n  * [x] Add desktop styles for images\r\n  * [x] Add desktop styles for contact info and footer\r\n\r\n## Hard Mode\r\n- [ ] Create a new logo for Swamp Rabbit Cycling\r\n- [ ] Use the Flickr API to pull in the most recent and interesting public bike images.\r\n- [ ] On mobile, the image gallery should change into a swipeable interface.\r\n\r\n## Resources\r\n- [Bike images](https://unsplash.com/search?utf8=%E2%9C%93&keyword=bike&button=)\r\n- [JavaScript image slider](http://gilbitron.github.io/Ideal-Image-Slider/)"}}