{"action":"created","issue":{"url":"https://api.github.com/repos/AaronStPete/assignments/issues/4","repository_url":"https://api.github.com/repos/AaronStPete/assignments","labels_url":"https://api.github.com/repos/AaronStPete/assignments/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/AaronStPete/assignments/issues/4/comments","events_url":"https://api.github.com/repos/AaronStPete/assignments/issues/4/events","html_url":"https://github.com/AaronStPete/assignments/issues/4","id":303210112,"number":4,"title":"Week 1 Day 3 - Octocat - ","user":{"login":"mdewey","id":1793923,"avatar_url":"https://avatars2.githubusercontent.com/u/1793923?v=4","gravatar_id":"","url":"https://api.github.com/users/mdewey","html_url":"https://github.com/mdewey","followers_url":"https://api.github.com/users/mdewey/followers","following_url":"https://api.github.com/users/mdewey/following{/other_user}","gists_url":"https://api.github.com/users/mdewey/gists{/gist_id}","starred_url":"https://api.github.com/users/mdewey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdewey/subscriptions","organizations_url":"https://api.github.com/users/mdewey/orgs","repos_url":"https://api.github.com/users/mdewey/repos","events_url":"https://api.github.com/users/mdewey/events{/privacy}","received_events_url":"https://api.github.com/users/mdewey/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-03-07T18:29:04Z","updated_at":"2018-03-08T19:49:43Z","closed_at":"2018-03-07T22:55:16Z","author_association":"NONE","body":"# Octodex\r\n\r\nGitHub has a great mascot called OctoCat. OctoCat even has it's own gallery of variations, created by GitHub itself and fans, called [Octodex](https://octodex.github.com).\r\n\r\nUnfortunately, the Octodex is not responsive*! Today, your task is to recreate the layout of The Octodex as closely as possible, but make it responsive. You can use all the tools you have at your disposal to get the job done. Use your browser's Developer Tools to inspect their site to find the exact font sizes and padding amounts.\r\n\r\n![Octodex](https://tiy-learn-content.s3.amazonaws.com/ec8b2d13-octodex.png)\r\n\r\n\\* Well, _actually_ it uses javascript set the number of columns on page load, but we want to see interactive responsiveness when we resize our window!\r\n\r\n## Objectives\r\n\r\n- Build on your knowledge of HTML & CSS\r\n- Implement a responsive design with media queries\r\n- Implement, from scratch, a given design\r\n- Understand HTML/CSS Layout\r\n- Be able to place elements on a page where you want them.\r\n- Use flexbox techniques layout pages.\r\n\r\n## Requirements\r\n\r\n- You should strive to implement the design as close as possible, though, especially if you've never touch HTML or CSS before, this can be extraordinarily difficult, and will take a lot of practice and mileage.\r\n\r\n- **Note**: You should complete at least the tasks given for _explorer_ mode as listed below before turning in the assignment, as well as before attempting _adventure_ or _epic_ modes.\r\n\r\n### Explorer Mode\r\n\r\n- [x] Recreate the page as closely as you possibly can. Use the same fonts, sizes, and colors. Download some of your favorite - [ ] Octocat images to use in your page (12-16 or so). Your layout should be flexible, but doesn't need to _perfectly_ responsive. \r\n- [x] Use flexbox styles to layout the header and the Octocats (hint: checkout the `flex-wrap` property).\r\n\r\n## Adventure Mode\r\n\r\n- [ ] If you're feeling adventurous, use CSS _media queries_ to resize the Octocat containers to look great as a single full-width column on small screens, and a nice grid on bigger screens.\r\n\r\n### Setup\r\n\r\n- First, ensure you have the [`app-app` generator](https://github.com/tiy-tpa-fee/app-app) installed. We may have done this in class, *you only need to install `app-app` once* :\r\n\r\n  ```sh\r\n  npm install -g app-app\r\n  ```\r\n\r\n  Also, set up hub to use `HTTPS` rather than `SSH` for repositories:\r\n\r\n  ```sh\r\n  git config --global hub.protocol https\r\n  ```\r\n\r\n- Open your Terminal and create and change into the project's directory:\r\n\r\n  ```sh\r\n  mkdir -p ~/training/week-1/day-1/hello-world\r\n  cd ~/training/week-1/day-1/hello-world\r\n  ```\r\n\r\n- Run the generator to create a boilerplate project:\r\n\r\n  ```sh\r\n  app-app --alpha --vscode\r\n  ```\r\n\r\n  Answer \"Yes\" to the questions about GitHub.\r\n\r\n- Open the project folder in VS Code:\r\n\r\n  ```sh\r\n  code .\r\n  ```\r\n\r\n  Remember `.` is an alias for the current directory.\r\n\r\n- Using the file browser in your editor, open the file `public/index.html` and format your essay with HTML tags and place them into the document (remember all content goes _inside_ the `<body>` tags). Don't worry about the other files in the directory for now, we'll talk about those later, right now, we're mostly concerned with the two files in `public`; `index.html` and `screen.css`.\r\n\r\n## Turning In\r\n\r\nYour homework will be assigned to you via `issues` on your `assignments` repository. Once you are\r\n\r\nThese steps will be followed for almost every assignment going forward. Once you've completed at least _explorer_ mode and you're satisfied with your work, let's get it published. First let's get it up on GitHub.\r\n\r\n- First, let's add all our work to git, and ask it to commit it:\r\n\r\n  ```sh\r\n  git add .\r\n  git commit -m \"My first webpage\"\r\n  ```\r\n\r\n  Feel free to replace _\"My first webpage\"_ with a more meaningful message.\r\n\r\n- Push our local commits to GitHub:\r\n\r\n  ```sh\r\n  git push -u origin master\r\n  ```\r\n\r\n  The `-u` option tells git we want to making pushing the `master` branch to `origin` the default, so next time, we can just type `git push`.\r\n\r\n- Now that our source code is up on GitHub, let's publish our page to [Surge](https://surge.sh). The command to do this has already been setup for you:\r\n\r\n  ```sh\r\n  yarn deploy\r\n  ```\r\n\r\nOnce you are completely, go to the issue on our `assignments` repository, leave the link the repo of your work, and close the issue. I will not know you are down until you close the issue. \r\n\r\n\r\n##  Extra Material\r\n\r\nTo work on media queries, watch this video: \r\nhttps://www.youtube.com/watch?v=2KL-z9A56SQ"},"comment":{"url":"https://api.github.com/repos/AaronStPete/assignments/issues/comments/371603023","html_url":"https://github.com/AaronStPete/assignments/issues/4#issuecomment-371603023","issue_url":"https://api.github.com/repos/AaronStPete/assignments/issues/4","id":371603023,"user":{"login":"mdewey","id":1793923,"avatar_url":"https://avatars2.githubusercontent.com/u/1793923?v=4","gravatar_id":"","url":"https://api.github.com/users/mdewey","html_url":"https://github.com/mdewey","followers_url":"https://api.github.com/users/mdewey/followers","following_url":"https://api.github.com/users/mdewey/following{/other_user}","gists_url":"https://api.github.com/users/mdewey/gists{/gist_id}","starred_url":"https://api.github.com/users/mdewey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdewey/subscriptions","organizations_url":"https://api.github.com/users/mdewey/orgs","repos_url":"https://api.github.com/users/mdewey/repos","events_url":"https://api.github.com/users/mdewey/events{/privacy}","received_events_url":"https://api.github.com/users/mdewey/received_events","type":"User","site_admin":false},"created_at":"2018-03-08T19:49:43Z","updated_at":"2018-03-08T19:49:43Z","author_association":"NONE","body":"![Awesome Work!](https://media0.giphy.com/media/3ohhwMsgVMVCu2TKHS/200w_d.gif)"}}
{"actor":{"display_login":"mdewey"}}