mdewey commented 6 years ago

Octodex

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.

Octodex

* 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

[ ] 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.
[ ] 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.

Setup

First, ensure you have the app-app generator installed. We may have done this in class, you only need to install app-app once :
```
npm install -g app-app
```
Also, set up hub to use HTTPS rather than SSH for repositories:
```
git config --global hub.protocol https
```

Open your Terminal and create and change into the project's directory:

mkdir -p ~/training/week-1/day-1/hello-world
cd ~/training/week-1/day-1/hello-world

Run the generator to create a boilerplate project:
```
app-app --alpha --vscode
```
Answer "Yes" to the questions about GitHub.
Open the project folder in VS Code:
```
code .
```
Remember . is an alias for the current directory.
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.

Turning In

Your homework will be assigned to you via issues on your assignments repository. Once you are

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

First, let's add all our work to git, and ask it to commit it:
```
git add .
git commit -m "My first webpage"
```
Feel free to replace "My first webpage" with a more meaningful message.
Push our local commits to GitHub:
```
git push -u origin master
```
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.
Now that our source code is up on GitHub, let's publish our page to Surge. The command to do this has already been setup for you:
```
yarn deploy
```

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

Extra Material

To work on media queries, watch this video: https://www.youtube.com/watch?v=2KL-z9A56SQ

agustus9 commented 6 years ago

My surge did not use the updated files, so I linked the github. This is the surge link to the un-updated portion. http://hello-world.amack.surge.sh

https://github.com/agustus9/octodex

mdewey commented 6 years ago

Watch the formatting on the code. Be sure to keep you code clean

mdewey commented 6 years ago

Awesome Work!

agustus9 / assignments

Week 1 Day 3 - Octocat - #3

Octodex

Objectives

Requirements

Explorer Mode

Adventure Mode

Setup

Turning In

Extra Material