Code Monkey home page Code Monkey logo

u1_lab_fake_resume's Introduction

Fake Resume

Overview

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!)

Getting Started

  • Fork and clone this repository
  • cd into the directory on your local machine
  • Create an index.html and main.css file and make sure they are linked together
  • Once these files are created and linked, run open index.html to open the website in your browser and cmd + option + i (MacOS) or ctrl + shift + i (Windows/Linux) to open your dev tools

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
    • HINT: in your index.html file type html or ! and press tab. A few basic HTML tags should populate your file, including head and body
  • 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

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

๐Ÿ”ด Commit your work!
Your commit message should read something like:
"added initial content for resume site"

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.

๐Ÿ”ด Commit your work!
Your commit message should read something like:
"added styling for resume site"

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

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


Bonus

  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

u1_lab_fake_resume's People

Contributors

ben-manning avatar anpato avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.