Grumpy Cat Resume & Github Practice & Loops!

Learning Objectives

  • HTML/CSS
  • Getting comfortable with GitHub

Prerequisites

  • HTML/CSS
  • JavaScript
  • Github

Git & Github - Getting Started

Git & Github - Questions

Refer back to the notes from today and/or use the internet and google-fu to find the answers to the questions below:

Answer the following questions

  1. What are the two different ways to create a git repository?
  2. What command do you use to setup a git repository inside of your folder?
  3. What command do you use to ask git to start tracking a file?
  4. What command do you use to ask git to attach a message to your tracked files?
  5. What command do you use to move your work up to github.com?

HTML & CSS Videos

You should have covered all of this information during Fundamentals, but if you feel like you need a refresher on some of the basics of HTML and CSS, you can watch the following videos! If you don't need a refresher, feel free to skip this section.

  1. HTML Intro (tags, content, attributes, semantic HTML)
  2. HTML Elements (headers, navigation, lists, sections, etc.) and Media (images, audio, videos)
  3. CSS Intro (including css files in HTML, elements)
  4. CSS Basics (colors, background, font properties)

Fake Resume Page

Grumpy cat is looking for a new job! Using what you know about HTML and CSS, help him by creating a resume website for him. (Note: You don't need to know 'real information' about Grumpy Cat -- just make things up!)

This is what he wants you to include and do for his resume:

  • have an index.html file
  • have an main.css file that is linked to the index.html file
  • have HTML boilerplate code for index.html
  • Include:
    • at least one header
    • navigation (these can be dummy links that don't go anywhere yet)
    • at least one list
    • change the font color in at least one place
    • change the background in at least one place
    • change the font in at least one place

Fake Resume Page - Getting Started

You're going to be creating a real webpage for Grumpy Cat, so we can't just keep the code on our computer. For this exercise, we'll be using Git and Github to track and host our code.

  1. Create a new git repo called resume-page either from the command line or from https://git.generalassemb.ly/new - it's your choice!
  2. Change directories to resume_page (remember to clone the repo down first if you created it on github)
  3. From inside this directory, create two files: index.html and style.css.
  4. Open the directory in your text editor and add the HTML boilerplate to your index.html.
    • HINT: There's a shortcut to quickly create an HTML boilerplate.
  5. Link your css file and add a temporary background color to help ensure it's linked properly
  6. Create a heading level-one tag with the name: Grumpy Cat.
  7. Open the index.html in your browser by running open index.html in your terminal to confirm that everything is set up properly. You should see your heading on a colored background.

:red_circle: Commit your work!
Your commit message should read something like:
"resume index.html file is setup"

Fake Resume Page - Adding Content

  1. Insert a professional image of Grumpy Cat ('img' tag), it should be placed right after your 'h1' tags
  2. Insert an unordered list of his past three work positions ('ul' tag)
  3. Create links for LinkedIn and Facebook/Twitter pages ('a' tag). You can set this to a dummy link
  4. Use level-three heading tags to create headings before the work positions and before the links

:red_circle: Commit your work!
Your commit message should read something like:
"added initial content for resume site"

Fake Resume Page - Adding Style

Add some style to your site and feel free to style it however you want! Here are some ideas:

  1. Center your "h1" tag
  2. Change the font of your "h1" tag
  3. Change the color of the font of your "h3" tag
  4. Add some space on the body of your application to make your site look more appealing.

:red_circle: Commit your work!
Your commit message should read something like:
"added styling for resume site"

Fake Resume Page - Adding Navigation

  1. Create a nav bar with the links to LinkedIn, Twitter (whichever links you had created earlier); Remove the links section that you had created earlier in the homework
  2. In the nav bar, also create a link to the 'index.html' page (maybe give it a name of Home Page in the bar), and a link to a file called "projects.html" (maybe call this Projects in the bar)
  3. Create another html file in this folder called 'projects.html'
  4. Copy the contents of the nav bar and information from the 'head' tag of your index.html file and paste it into your projects.html file<
  5. Inside projects.html, create a level-two heading and add the text Projects
  6. Check to make sure that your links work! When you click on "Projects" in your nav bar, does it open the projects.html document?
  7. In projects.html, add three projects that Grumpy Cat has worked on. To do this simply, you can use an ordered list. If you're up for a little more of a challenge, create three columns: each column should contain the title and a description of their three most recent, successful projects

:red_circle: Commit your work!
Your commit message should read something like:
"added project.html page and content - finished resume"

Loops - Getting Started

Now, let's get in a little bit of JavaScript practice. Specifically, more loops!

  1. Close your Resume Page project and cd out of the resume-page directory
  2. Create a new file called loops.js and open it up in your code editor

Pick five to tackle.

  1. Create a loop that logs the numbers from 0-99 (ascending)
  2. Create a loop that logs the numbers from 99-0 (descending)
  3. Create a loop that logs the EVEN numbers from 0-98 (ascending)
  4. Create a loop that logs the EVEN numbers from 98-0 (descending)
  5. Create a loop that logs the ODD numbers from 0-99 (ascending)
  6. Create a loop that logs the ODD numbers from 99-0 (descending)
  7. Create a loop that logs the numbers from 49-72 (ascending)
  8. Create a loop that logs the numbers from 81-26 (descending)
  9. Create a loop that logs the numbers from 3-90 that are multiples of 3 (ascending)

Hungry for More?

More for Git

  • Check out this tutorial that includes videos about using git and some challenges for you to tackle.

More for grump cat's site:

  1. Insert a video of grumpy cat's work or his favorite YouTube video ('iframe' tag)

  2. Add a level-three heading above his video with a title for the section

  3. Insert a table with his contact info (table tag)

  4. Add a level-three heading above his contact info with a title for the section

  5. Give the image a 1px black border

  6. Give the body of the page a thicker border than the picture but only on the top and bottom of the page

  7. Using HTML, insert a short blurb or biography with "p" tags

  8. Using HTML, insert a short description above your "p" tag; use an "h3" tag

  9. Make his name uppercase using CSS

  10. Insert another image of grumpy cat, or an image of one of his projects, but make it round

  11. Insert a button on both pages that links to opening an email to his email address

  12. Style the navigation bar

More for Loops

  • Go back and finish all the loop problems!
  • Go back and tackle the loop problems with a different kind of loop! (for, while)

Copyright © General Assembly 2022

Created by DanielJS