05 - 04 - Octodex

[aksnell]

GitHub has a great mascot called Octocat. Octocat even has its own gallery of variations, created by GitHub itself and fans, called Octodex.

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.

Objectives

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

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.

Explorer Mode

• [x] Use app-app with alpha and name your project Octodex
• [x] Recreate the page as closely as you possibly can. Use the same fonts, sizes, and colors. Use your browser's developers tool to determine the colors and fonts.
• [x] Select some Octocats to use on your page (12 to 16 or so). Your layout should be flexible but doesn't need to perfectly responsive.
  • Don't bother downloading details of the Octocat, we've [made a site]((https://sdg-octodex.herokuapp.com/) that will give you all the data you need.
• [x] Use CSS media queries to resize the Octocat containers to look great as the screen changes size. Even though the site has a desktop, laptop, tablet, and mobile display, for explorer mode only worry about desktop and mobile.
• [x] Deploy your site.
• TIP Reminder to breakdown the layout into smaller chunks that are easier to style

Adventure Mode

• [x] Add a tablet display to accommodate a tablet screen size
• [x] Add a laptop display to accommodate a tablet screen size.
• [x] For the responsiveness of your cats, if you used flexbox for explorer mode, now use grids, if you grids, now use flexbox.

Epic Mode

• [ ] Go back to one past homework and make it responsive.
• [ ] Use this API to make your website data-driven. HINT: fetch, javascript and document.createElement. This is a big jump, but I think you can handle it.

Additional Resources

• [x] Watch this video to work more with media queries

[aksnell]

https://github.com/aksnell/octodex

That was a substantial amount of learning, I actually really liked parts of the github style for organizing CSS once I started to grok it more.

Also, I have been making a concerted effort to not read the next mode before the first is done, so I did not see the Epic Mode giving the clearence to use Javascript to create the content. Apropros of nothing, I included the like 95% working python script I banged out to convert that JSON to HTML because there was no way in way I was going to write any of that by hand.

If I get some time in between work for the rest of the day I will learn how in the world to do this with raw javascript because I don't have the foggiest idea.

[aksnell]

Your homework 05 - 04 - Octodex was marked: Meets Expectations

“With LASERS”

[gstark]

Nice work. You only needed to include about 12 cats.

Part of the lesson, for most students, is to feel the effect of having to write duplicate HTML and get a "feel" for when we start repeating things and see the positive benefit of generating content from code. You, clearly, don't require that lesson... 😉