A Blog Mockup

HTML Refresher

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

1. Git clone this repo: $ git clone https://github.com/wdi-sg/blog-mockup.git
2. cd into the directory in yur command line
3. Create an index.html and style.css file in this directory and open them in the browser to begin

Directions

Look at the image below and create this webpage using HTML and CSS.

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 # as the value of href 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.