HTML Refresher

You'll be making an HTML page. If you need a quick refresher before you jump into coding, look back at the HTML video on elements and media

1. Create a file for the blog site.
2. How do you add a title to my file so that you can see the name on the browser tab?

Activity

Directions

Look at the image below and create this webpage using HTML

IMPORTANT Make sure to check your work in the browser as you write your code.

🐘 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.

Plan before you code!

• Take a few minutes to describe what you see and figure out what tags you'll likely need

The Mockup

The Resources

1. URL for image: https://imgur.com/NzdTHeo.png

   • NOTE: This image is large! You'll have to resize it using CSS later on

2. Don't worry about matching the colors/fonts exactly, but in case you do want to try:

   • The fonts were found on google fonts
   • Consider using a color picker to find the hex codes used in the mockup!
     • Macbooks come with an app called Digital Color Meter that you can use, or you can find a color picker online through google

3. For text to fill the paragraphs, there are a few ways to do this:

   • in your .html file type lorem and press tab to get some auto generated text by atom.
   • use a standard Lorem Ipsum generator
   • want more flavor? Choose one from this list
   • explore even more and practice your google-fu

4. 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.

Finished Outlining the HTML Early?

1. Do another mockup! We've provided a second mockup in the doggie directory.

   • View the mockup here
   • cd into the doggie directory and do your html layout mockup in the provided index.html file!
     • If you get to the css, make sure to use the provided main.css file as well
   • 🐘 Reminder: We provided all the images needed in the img folder, so you'll need to use relative pathing to get those into your index.html

2. Or, just move on to the hungry for more below

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 start styling the site to match the mockup as close as you can!