Week 01 - Day 4 - Octodex

[gstark]

GitHub has a great mascot called OctoCat. OctoCat even has it's own gallery of variations, created by GitHub itself and fans, called Octodex.

Unfortunately, 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.

* 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!

Objectives

• Build on your knowledge of HTML & CSS
• Implement a responsive design with media queries
• Implement, from scratch, a given design
• Understand HTML/CSS Layout
• Be able to place elements on a page where you want them.
• Use flexbox techniques layout pages.

Requirements

• 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.

• 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.

Explorer Mode

• [x] Recreate the page as closely as you possibly can. Use the same fonts, sizes, and colors. Download some of your favorite
• [x] Octocat images to use in your page (12-16 or so). Your layout should be flexible, but doesn't need to perfectly responsive.
• [x] Use flexbox styles to layout the header and the Octocats (hint: checkout the flex-wrap property).

Adventure Mode

• [ ] 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.
• [ ] watch this video to work more with media queries https://www.youtube.com/watch?v=2KL-z9A56SQ

Epic Mode

• [ ] Go back to your hobby website and update site to be mobile friendly and responsive.

Additional Resources

• Install the JSON Viewer Chrome Extension to make the List of Octocats nicer to read
• List of Octocats
• https://www.youtube.com/watch?v=2KL-z9A56SQ

[StPeteFrank]

Hi Gavin. Here is my link for Octodex Explorer Mode.

https://github.com/StPeteFrank/octodex/tree/master/public

[gstark]

Hi Frank, your URLs for turned in homework should look like this:

https://github.com/StPeteFrank/octodex

Thanks.

[gstark]

There is no @media usage here. Please update the assignment to change something visual in the display as the user changes the browser size.

[gstark]

Sorry, just realized that @media was adventure mode and you didn't say you had done adventure mode...

[gstark]

Your homework was marked: Meets Expectations

“Gavin Approved!” — via Jason L Perry