Title: HTML Mockup
Type: Morning Exercise
Course: wdi-cc
Competencies: HTML

HTML Refresher - Group Activity

Grumpy Cat

Let's use some common HTML tags to create a website for Grumpy Cat.

1. Inside your directory for today create a morning_exercise_html directory, with a cat.html file.
2. How do I make add the boilerplate needed for an HTML file?
3. How do I add a title to my file so that you can see the name on the browser tab?
4. How do I make a heading?
5. What tag should I used to add a paragraph about our client?
6. How can I add a picture of the cat? Here's the link that I want to use: https://quelchenonsapevi.it/wp-content/uploads/2016/06/0000-3.jpeg
7. How can I make a link to go to the cat's Twitter? Here's the link that the cat wants us to use: https://twitter.com/realgrumpycat?lang=en

Directions

Look at the image below and create this webpage using HTML (no styling yet). Write your code in an index.html file that is inside the morning_exercise_html folder.

IMPORTANT Make sure to check your work in the browser as you write your code. Save and reload. Save and reload. Save and reload. etc.

🐘 Reminder:
Using the command open index.html inside the terminal when you are inside the folder with your index.html file will open your application in your browser.

Commit Your Work

1. Get used to committing your work as you go!

🐘 Reminder:

• git init make your current directory a git repo (check that you're not in a git repo first)
• git add -A to add all of the files in your repo
• git commit -m "(some message)" to make a commit

The Mockup

The Resources

1. URL for image: http://blog.taxact.com/wp-content/uploads/Complete-Guide-to-Employee-Stock-Options-and-Tax-Reporting-Forms.jpg

2. For text to fill the paragraphs, use a Lorem Ipsum generator (this is just my favorite of many that you can use, including Bacon Ipsum and Hipster Ipsum).

3. The links that you create do not have to go anywhere, but you should be able to click on them.

🐘 Reminder:
Use a # to make a "dummy" link.

Hungry for More?

1. Create an about.html file which has similar content to the index.

2. Have the "About" link in the index.html file send you to about.html.

3. Have the "Home" link send you to the index.html page.

4. Add a style.css file, link it, and use what you know about CSS to start styling this website.