SEIR Liberty Class: Build a Fake Resume Page on CodeSandbox

Objective

In this lesson, you will be creating a fake resume webpage for Grumpy Cat using HTML and CSS. By the end of this activity, you will understand how to create and style a basic webpage.

Instructions for Submission

  1. Complete this lab using CodeSandbox.
  2. Upon completion, paste the link to your CodeSandbox solution in the thread posted in the classroom channel on Slack.

Getting Started with the Basics

  1. Inside CodeSandbox, create a new project and name it resume_page.
  2. In this project, create two files: index.html and style.css.
  3. In index.html, add the HTML boilerplate code.
  4. Include an h1 tag with the text "Grumpy Cat".
  5. Preview your project in the browser to ensure setup is correct.

Give an emoji in slack on the message that says "Resume index.html file is set up".

Adding Content to the Resume Page

  1. Add an image of Grumpy Cat using the img tag. Place it below the h1 tag.
  2. Use an ul tag to list Grumpy Cat's past three work positions.
  3. Add dummy links for LinkedIn, Facebook, or Twitter using the a tag.
  4. Insert h3 headings before the list of work positions and the social media links.

Give an emoji in slack on the message that says "Added initial content for resume site".

Styling the Resume Page

Feel free to style your site as you wish. Some ideas:

  1. Center-align the h1 tag.
  2. Change the h1 font.
  3. Alter the h3 tag font color.
  4. Add margin or padding to the body for a polished look.

Give an emoji in slack on the message that says "Added styling for resume site".

Adding Navigation to the Resume Page

  1. Create a navigation bar (nav tag) containing the social media links.
  2. Remove the previous links you had below the ul tag.
  3. Add links in the navigation bar for Home Page and Projects.
  4. Create a new HTML file named projects.html.
  5. Copy the navigation and head information from index.html to projects.html.
  6. Inside projects.html, insert an h2 tag with the text "Projects".
  7. Confirm that the navigation links work correctly.
  8. List three projects Grumpy Cat has worked on, either as an ordered list or in a three-column layout.

Give an emoji in slack on the message that says "Added project.html page and content - finished resume".

Key Takeaways:

  • You've learned how to set up a basic webpage using HTML and CSS.
  • You've practiced adding content and styling elements.
  • Navigation bar creation and linking between multiple pages have been demonstrated.

Remember, all of this needs to be submitted via Slack by posting the link to your CodeSandbox solution in the classroom channel thread.