Build a Fake Resume Page

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.

The assumption is that you have already completed the previous lesson and have a basic understanding of HTML and CSS. You should have a basic understanding of how to use the command line and git and you should try to do this without using the walkthrough.

Instructions for Submission

Complete this lab using your local machine.
Upon completion, paste the link to your GitHub Pages solution in my texts.

Getting Started with the Basics

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

Save and Commit your changes

Adding Content to the Resume Page

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

Save and Commit your changes

Styling the Resume Page

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

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

Save and Commit your changes

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

Save and Commit your changes

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.

Walkthrough if you need it

Here's a detailed step-by-step walkthrough on how to complete the Fake Resume Page assignment and submit it using GitHub and GitHub Pages instead of CodeSandbox.

Step 1: Set Up the Project Locally

Create a Local Project Folder
- Open your terminal or command prompt.
- Navigate to your desired location using cd path/to/your/directory.
- Run:
```
mkdir resume_page
cd resume_page
```
- This creates a new project folder and moves into it.
Initialize Git
- Inside the resume_page folder, initialize a Git repository:
```
git init
```
Create the Required Files
- Run:
```
touch index.html style.css projects.html
```
- This creates three empty files:
- index.html (main page)
- style.css (stylesheet)
- projects.html (projects page)

Step 2: Build the Resume Page (`index.html`)

Open index.html and add the following HTML boilerplate:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Grumpy Cat Resume</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <nav>
       <a href="index.html">Home</a>
       <a href="projects.html">Projects</a>
       <a href="https://linkedin.com" target="_blank">LinkedIn</a>
       <a href="https://facebook.com" target="_blank">Facebook</a>
       <a href="https://twitter.com" target="_blank">Twitter</a>
   </nav>

   <h1>Grumpy Cat</h1>
   <img src="https://upload.wikimedia.org/wikipedia/en/8/8b/Grumpy_Cat.jpg" alt="Grumpy Cat" width="200">

   <h3>Work Experience</h3>
   <ul>
       <li>CEO of Grumpy Inc.</li>
       <li>Social Media Influencer</li>
       <li>Professional Meme Star</li>
   </ul>
</body>
</html>

Save the file.

Step 3: Style the Page (`style.css`)

Open style.css and add:

body {
   font-family: Arial, sans-serif;
   text-align: center;
   background-color: #f4f4f4;
   padding: 20px;
}

h1 {
   color: #333;
   font-size: 2em;
}

nav {
   background-color: #333;
   padding: 10px;
}

nav a {
   color: white;
   text-decoration: none;
   margin: 0 10px;
}

img {
   border-radius: 50%;
   margin-top: 20px;
}

Save the file.

Step 4: Create the Projects Page (`projects.html`)

Open projects.html and add:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Grumpy Cat Projects</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <nav>
       <a href="index.html">Home</a>
       <a href="projects.html">Projects</a>
       <a href="https://linkedin.com" target="_blank">LinkedIn</a>
       <a href="https://facebook.com" target="_blank">Facebook</a>
       <a href="https://twitter.com" target="_blank">Twitter</a>
   </nav>

   <h2>Projects</h2>
   <ul>
       <li>Grumpy Cat Coffee Brand</li>
       <li>Grumpy Cat NFT Collection</li>
       <li>Grumpy Cat Movie</li>
   </ul>
</body>
</html>

Save the file.

Step 5: Push the Project to GitHub

Create a New GitHub Repository
- Go to GitHub and log in.
- Click on New Repository.
- Name it resume_page.
- Select Public and Initialize with a README (optional).
- Click Create Repository.

Link the Local Project to GitHub

In your terminal, run:

git remote add origin https://github.com/YOUR_GITHUB_USERNAME/resume_page.git

Add, Commit, and Push the Code

Run:

git add .
git commit -m "Initial commit - Fake Resume Page"
git push -u origin main

This pushes your code to GitHub.

Step 6: Deploy Using GitHub Pages

Enable GitHub Pages
- Go to your GitHub repository.
- Click Settings > Pages (in the sidebar).
- Under Branch, select main and click Save.
- Wait a few minutes until GitHub Pages provides a link.
Access the Live Page
- GitHub Pages will generate a URL like:
```
https://your-github-username.github.io/resume_page/
```
- This is your hosted resume page.

Step 7: Submit the Assignment

Copy the GitHub Pages link.
Share the link in the Slack thread as required.

Final Summary

✅ Set up a local project
✅ Built the resume and projects pages using HTML & CSS
✅ Styled the pages for better appearance
✅ Linked navigation between pages
✅ Pushed the project to GitHub
✅ Deployed with GitHub Pages
✅ Shared the live link for submission

Let me know if you need help with any step via text! 🚀

Build a Fake Resume Page

Objective

Instructions for Submission

Getting Started with the Basics

Save and Commit your changes

Adding Content to the Resume Page

Save and Commit your changes

Styling the Resume Page

Save and Commit your changes

Adding Navigation to the Resume Page

Save and Commit your changes

Key Takeaways:

Walkthrough if you need it

Step 1: Set Up the Project Locally

Step 2: Build the Resume Page (index.html)

Step 3: Style the Page (style.css)

Step 4: Create the Projects Page (projects.html)

Step 5: Push the Project to GitHub

Step 6: Deploy Using GitHub Pages

Step 7: Submit the Assignment

Final Summary

Step 2: Build the Resume Page (`index.html`)

Step 3: Style the Page (`style.css`)

Step 4: Create the Projects Page (`projects.html`)