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.
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 favorites
[x] Use some 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 CSS media queries to resize the Octocat containers to look great as the screen changes size. Even though the site has 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
[ ] For the responsiveness of your cats, if you used flexbox for explorer mode, now use css grids, if you grids, now use flexbox.
Epic Mode
[ ] Go back to a 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.
Evan-Gilbert-1212
commented
4 years ago
Octodex
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
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
Adventure Mode
Epic Mode
Additional Resources