Home » HTML Tutorial – Project 1: Fashion Blog

HTML Tutorial – Project 1: Fashion Blog

Your friend Isa is a budding fashion blogger, and she’s asked you to build her a new website, just in time for New York Fashion Week!

Use your new HTML knowledge to create the underlying structure of the blog. Make sure to include plenty of pictures, links, lists, and other HTML elements that you’ve learned so that her fans have plenty to read.

You can view the completed project and see how it compares to your work!

Tasks

To start, add the <!DOCTYPE html> declaration as the very first line of code at the top of the index.html file. Add the <html> element below.

Hint: Make sure you include both the opening and closing tags for the <html> element.

2. Below the <html> opening tag, add a <head> element. Below the <head> element, add the <body> element.

Hint: Make sure that the <body> follow the <head> and that both are within the opening and closing <html> tags.

3. Within the <head> tags, add a <title> element. Title the website “Everyday with Isa”.

Hint: Remember to nest your title in the <head> element.

4. Directly below the opening <body> tag, add an <h1> that says:

“An Insider’s Guide to NYFW”

Below that, add an <h2> that says:

“Getting Tickets & Picking the Shows”

Below that, add an <h2> that says:

“Dressing for the Shows”

5. Here’s Isa’s first dispatch from Fashion Week! Let’s add a blog post. Between the <h1> and first <h2> tag, add a <p> tag that says:

“NYFW can be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to give you an insider’s guide and make your first show a pleasurable experience. By taking my tips and tricks, and following your gut, you’ll have an unforgettable experience!”

Hint: Make sure to use two spaces to indent, so your code is readable.

6. Between the first and second <h2> tags, add another paragraph to the post using the <p> tag:

“If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or connected my first 2 years so I’m here to help you out. First, plan out which shows are most important to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the designers you want to see most. Lastly, purchase your tickets and get excited!”

7. After the last <h2> tag, add a final paragraph that says:

“Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it will show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen to express through their new lines. Also it’s important to wear shoes you’ll be comfortable in all day. Obviously you want to look good, but you’ll be on your feet all day long, so be prepared.”

8. Of course, this wouldn’t be a fashion blog without some images. Above each paragraph, add an <img> tag and set its src to be one of the following links:

https://content.codecademy.com/courses/learn-html/elements-and-structure/image-one.jpeg
https://content.codecademy.com/courses/learn-html/elements-and-structure/image-two.jpeg
https://content.codecademy.com/courses/learn-html/elements-and-structure/image-three.jpeg

Hint: The <img> tag is self-closing. It will look like this:

<img src="url" />

9. Your first blog post is complete! Now let’s add an image of Isa, so her readers get to know her. Below the opening body tag, add an <img> tag with the following source:

https://content.codecademy.com/courses/learn-html/elements-and-structure/profile.jpg

10. Below the <img> tag, add an <h3> that says “by Isabelle Rodriguez | 1 day ago”

11. Isa wants her readers to know that she’s written a lot more than one post. Let’s make a list of some related blog posts. Beneath the last paragraph, add a <h4> tag that says “Related Content”. Underneath that header tag, create an unordered list.

Hint: Use the <ul> tag to create an unordered list.

12. The unordered list should have the following four items:

  • “How To Style Boyfriend Jeans”
  • “When Print Is Too Much”
  • “The Overalls Trend”
  • “Fall’s It Color: Blush”

Hint: Use the <li> tag to create list items.

13. Let’s get Isa’s blog connected to the rest of the web! In the first paragraph, turn ‘NYFW’ into a link and have it go to: https://en.wikipedia.org/wiki/New_York_Fashion_Week.

Make sure to include the target="_blank" attribute so that it opens in a new page.

Hint: Remember to close the <a> tag after NYFW.

14. Isa wants to make sure that her friends can get in touch with her. At the bottom of your body, add a new <div> and set its id='contact'. Inside the <div>, create a new <p> tag and put the following contact information inside of it:

email: isa@fashionblog.com | phone: 917-555-1098 | address: 371 284th St, New York, NY, 10001

15. Inside the contact <div>, put <strong> opening and closing tags around “email”, “phone”, and “address”.

16. Let’s make the profile picture a link to the contact section of the webpage. Find the profile <img> tag, and surround it by opening and closing <a> tags. In the <a> tag, set href="#contact".

17. Congrats! You’ve got the beginnings of a solid fashion blog. Feel free to make modifications and practice your HTML by adding more content.

Shares
CrestaProject
%d bloggers like this: