nitharios / mouse-be-gone

How good is your keyboard-fu?

Mouse Be Gone!

Levels

Level One

Level Two

Level Three

Purpose

To see how good you are without the mouse!

Rules

• No mouse/trackpad use!
• Keyboards only!
• Ordered lists should be done in order
• Unordered lists can be done in any order
• You may use Google for help but only if you use your keyboard
• You may use your mouse to resize and align your windows as needed

Hints

• There are cheat sheets online that cover text editor shortcuts

How To Play

1. fork this repo
2. copy the clone link

~ FROM THIS POINT ON YOU ARE NOT ALLOWED TO USE YOUR MOUSE ~

~ FROM THIS POINT ON YOU ARE NOT ALLOWED TO USE YOUR MOUSE ~

~ FROM THIS POINT ON YOU ARE NOT ALLOWED TO USE YOUR MOUSE ~

Don't forget to commit your work often!

1. Open your terminal
2. Change directory to the directory you want to clone to
3. Clone this repository
4. Open the project repository in your text editor
5. Complete each of the tasks below

Good luck!

Tasks

Level One (Let's Get It Started!)

Set Up

1. Create a new branch called omega
2. Checkout to a new branch called alpha
3. Check to see you have three branches
4. Run live-server

HTML

1. Find index.html
2. Move index.html to the root directory
3. Restart live-server

CSS

1. Find styles.css
2. Move styles.css to the css directory
3. Link styles.css to the project

Check Yourself

• make sure your webpage says Hello World!
• make sure your background-color is not white

I MESSED UP!!! WHAT DO I DO???

1. Commit your code
2. Checkout to master
3. Delete the alpha branch
4. From your master checkout to a new alpha branch

Level Two (Keep It Going!)

Set Up

1. Commit and push your code to GitHub
2. From the alpha branch create a new branch called beta
3. Run live-server if it's not already running

HTML

1. Change the title of the website
2. Create a div element with an id
3. Create a div element inside the first div with no id or class identifiers

CSS

• give the first div a different background-color
• give the second div a different background-color and a border

Javascript

1. Make a new folder called js
2. Copy the app.js into js
3. Link app.js to the project
4. Using ONLY Javascript inside of the second div add the phrase My name is [ENTER_YOUR_NAME_HERE]!

Bash

• smoke test your application

Check Yourself

• make sure you have 2 divs of different colors
• make sure your webpage console is logging Hello World!
• make sure the second div says your name

I MESSED UP!!! WHAT DO I DO???

1. Commit your code
2. Checkout to alpha
3. Delete the beta branch
4. From your alpha checkout to a new beta branch

Level Three (Final Round!)

Setup

1. Commit your code and push to GitHub
2. Checkout to the omega branch
3. Merge your beta branch into your omega branch
4. Run live-server if it's not already running

Javascript

1. make a new folder in js called app
2. create a file called index.js in the app folder
3. copy the contents of app.js into index.js (COMMAND LINE ONLY!)
4. replace the contents of app.js with the following: var app = require('./index');

Bash

1. Create a project folder outside of the Mouse Be Gone! folder
2. Copy all of the contents from the Mouse Be Gone! repo into the new repo using ONE line of code in your terminal

Check Yourself

• make sure app.js only has one line of code
• make sure your webpage console is logging Hello World
• make sure all of your background-color changes carried over from the original directory

I MESSED UP!!! WHAT DO I DO???

1. Commit your code
2. Checkout to master
3. Delete the omega branch
4. From your master branch checkout a new omega branch
5. Merge your beta branch into your omega branch

End

If you made it this far CONGRATULATIONS!!!

You are an awesome keyboard ninja!

Stretch Goals

1. In your project folder initialize a new git repo
2. Create a new repository on GitHub (you may need to use your mouse/trackpad)
3. Link the new git repo on your computer to your new GitHub repository