|
1 | 1 | # Previously: Fashion Blog |
2 | | - |
3 | | -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! |
4 | | - |
5 | | -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. |
6 | | - |
7 | | -You can view a [completed project](https://content.codecademy.com/courses/learn-html/elements-and-structure/fashion.html) and see how it compares to your work! |
8 | | - |
9 | | -If you get stuck during this project or would like to see an experienced developer work through it, click “Get Unstuck“ to see a project walkthrough video. |
10 | | - |
| 2 | +<h2>WEB DEVELOPMENT FOUNDATIONS</h2> |
| 3 | +<h2>Fashion Blog</h2> |
| 4 | +<h2>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!</h2> |
| 5 | +<p>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.</p> |
| 6 | +<p>You can view a completed project and see how it compares to your work!</p> |
| 7 | +<p>If you get stuck during this project or would like to see an experienced developer work through it, click “Get Unstuck“ to see a project walkthrough video.</p> |
| 8 | +<h2>Tasks</h2> |
11 | 9 | <ol> |
12 | | -<li>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.</li> |
13 | | -<li>Below the ``<html>`` opening tag, add a ``<head>`` element. Below the ``<head>`` element, add the ``<body>`` element.</li> |
14 | | -<li>Within the `<head>` tags, add a <title>` element. Title the website “Everyday with Isa”.</li> |
15 | | -<li> 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”.</li> |
16 | | -
|
| 10 | + <li> |
| 11 | + To start, add the <code><!DOCTYPE html></code> declaration as the very first line of code at the top of the <code>index.html</code> file. Add the <code><html></code> element below. |
| 12 | + </li> |
| 13 | + <li> |
| 14 | + Below the <code><html></code> opening tag, add a <code><head></code> element. Below the <code><head></code> element, add the <code><body></code> element. |
| 15 | + </li> |
| 16 | + <li> |
| 17 | + Within the <code><head></code> tags, add a <code><title></code> element. Title the website “Everyday with Isa”. |
| 18 | + </li> |
| 19 | + <li> |
| 20 | + Directly below the opening <code><body></code> tag, add an <code><h1></code> that says:<br> |
| 21 | + “An Insider’s Guide to NYFW”<br> |
| 22 | + Below that, add an <code><h2></code> that says:<br> |
| 23 | + “Getting Tickets & Picking the Shows”<br> |
| 24 | + Below that, add an <code><h2></code> that says:<br> |
| 25 | + “Dressing for the Shows” |
| 26 | + </li> |
| 27 | + <li> |
| 28 | + Here’s Isa’s first dispatch from Fashion Week! Let’s add a blog post. Between the <code><h1></code> and first <code><h2></code> tag, add a <code><p></code> tag that says:<br> |
| 29 | + “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!” |
| 30 | + </li> |
| 31 | + <li> |
| 32 | + Between the first and second <code><h2></code> tags, add another paragraph to the post using the <code><p></code> tag:<br> |
| 33 | + “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!” |
| 34 | + </li> |
| 35 | + <li> |
| 36 | + After the last <code><h2></code> tag, add a final paragraph that says:<br> |
| 37 | + “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.” |
| 38 | + </li> |
| 39 | + <li> |
| 40 | + Of course, this wouldn’t be a fashion blog without some images. Above each paragraph, add an <code><img></code> tag and set its src to be one of the following links:<br> |
| 41 | + - <code>https://content.codecademy.com/courses/learn-html/elements-and-structure/image-one.jpeg</code><br> |
| 42 | + - <code>https://content.codecademy.com/courses/learn-html/elements-and-structure/image-two.jpeg</code><br> |
| 43 | + - <code>https://content.codecademy.com/courses/learn-html/elements-and-structure/image-three.jpeg</code> |
| 44 | + </li> |
| 45 | + <li> |
| 46 | + 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 <code><img></code> tag with the following source:<br> |
| 47 | + - <code>https://content.codecademy.com/courses/learn-html/elements-and-structure/profile.jpg</code> |
| 48 | + </li> |
| 49 | + <li> |
| 50 | + Below the <code><img></code> tag, add an <code><h3></code> that says “by Isabelle Rodriguez | 1 day ago” |
| 51 | + </li> |
| 52 | + <li> |
| 53 | + 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 <code><h4></code> tag that says “Related Content”. Underneath that header tag, create an unordered list. |
| 54 | + </li> |
| 55 | + <li> |
| 56 | + The unordered list should have the following four items:<br> |
| 57 | + - “How To Style Boyfriend Jeans”<br> |
| 58 | + - “When Print Is Too Much”<br> |
| 59 | + - “The Overalls Trend”<br> |
| 60 | + - “Fall’s It Color: Blush” |
| 61 | + </li> |
| 62 | + <li> |
| 63 | + 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: <code>https://en.wikipedia.org/wiki/New_York_Fashion_Week</code>.<br> |
| 64 | + Make sure to include the <code>target="_blank"</code> attribute so that it opens in a new page. |
| 65 | + </li> |
| 66 | + <li> |
| 67 | + Isa wants to make sure that her friends can get in touch with her. At the bottom of your body, add a new <code><div></code> and set its <code>id='contact'</code>. Inside the <code><div></code>, create a new <code><p></code> tag and put the following contact information inside of it:<br> |
| 68 | + - email: [email protected] | phone: 917-555-1098 | address: 371 284th St, New York, NY, 10001 |
| 69 | + </li> |
| 70 | + <li> |
| 71 | + Inside the contact <code><div></code>, put <code><strong></code> opening and closing tags around “email”, “phone”, and “address”. |
| 72 | + </li> |
| 73 | + <li> |
| 74 | + Let’s make the profile picture a link to the contact section of the webpage. Find the profile <code><img></code> tag, and surround it by opening and closing <code><a></code> tags. In the <code><a></code> tag, set <code>href="#contact"</code>. |
| 75 | + </li> |
| 76 | + <li> |
| 77 | + Congrats! You’ve got the beginnings of a solid fashion blog. Feel free to make modifications and practice your HTML by adding more content. |
| 78 | + </li> |
| 79 | +</ol> |
17 | 80 |
|
| 81 | +<h1>NEW: Saraa's Bird Watching Blog</h1> |
| 82 | +<h2>WEB DEVELOPMENT FOUNDATIONS</h2> |
| 83 | +<h2>Bird Watching Blog</h2> |
| 84 | +<h2>Your friend Saraa is a passionate bird watcher, and she wants to build a new website to share her knowledge and experiences with fellow bird enthusiasts!</h2> |
| 85 | +<p>Use your HTML skills to create the underlying structure of the blog. Incorporate images, headings, paragraphs, and other HTML elements to make the blog visually appealing and informative.</p> |
| 86 | +<p>You can view a completed project and compare it with your own work!</p> |
| 87 | +<p>If you encounter any difficulties or would like to watch a project walkthrough video, click on "Get Unstuck" for guidance.</p> |
| 88 | +<h2>Tasks</h2> |
| 89 | +<ol> |
| 90 | + <li> |
| 91 | + Start by adding the <code><!DOCTYPE html></code> declaration as the very first line of code at the top of the <code>index.html</code> file. Then, add the <code><html></code> element below. |
| 92 | + </li> |
| 93 | + <li> |
| 94 | + Below the <code><html></code> opening tag, add a <code><head></code> element. After that, include the <code><body></code> element. |
| 95 | + </li> |
| 96 | + <li> |
| 97 | + Inside the <code><head></code> tags, add a <code><title></code> element and set the website title to "Everyday with Saraa". |
| 98 | + </li> |
| 99 | + <li> |
| 100 | + Directly below the opening <code><body></code> tag, insert an <code><h1></code> heading that says:<br> |
| 101 | + “An Insider’s Guide to Bird Watching”<br> |
| 102 | + After that, add an <code><h2></code> heading that says:<br> |
| 103 | + “Getting Started & Essential Gear”<br> |
| 104 | + Then, add another <code><h2></code> heading that says:<br> |
| 105 | + “Finding the Best Birding Spots” |
| 106 | + </li> |
| 107 | + <li> |
| 108 | + Insert a paragraph between the <code><h1></code> and the first <code><h2></code> tags using the <code><p></code> element:<br> |
| 109 | + “Saraa is a passionate bird watcher, and she wants to share her knowledge and experiences with fellow bird enthusiasts. Join her on an exciting journey as she explores the world of birds and shares tips and tricks to enhance your bird watching adventures.” |
| 110 | + </li> |
| 111 | + <li> |
| 112 | + Between the first and second <code><h2></code> tags, add another paragraph using the <code><p></code> element:<br> |
| 113 | + “If you're new to bird watching, it can be a bit overwhelming. But don't worry, Saraa has got you covered! In this blog post, she will provide you with all the essential information you need to get started, including the necessary gear and equipment.” |
| 114 | + </li> |
| 115 | + <li> |
| 116 | + After the last <code><h2></code> tag, add a final paragraph using the <code><p></code> element that says:<br> |
| 117 | + “One of the most exciting aspects of bird watching is discovering new birding spots. In this blog post, Saraa will share her favorite locations for bird watching and provide insights into the diverse species you can expect to encounter.” |
| 118 | + </li> |
| 119 | + <li> |
| 120 | + Of course, this wouldn't be a bird watching blog without some images. Above each paragraph, add an <code><img></code> tag and set its <code>src</code> attribute to one of the following image links:<br> |
| 121 | + - <code>https://aramb.aramservices.com/bird-watching-blog/imageone.jpeg</code><br> |
| 122 | + - <code>https://aramb.aramservices.com/bird-watching-blog/imagetwo.jpeg</code><br> |
| 123 | + - <code>https://aramb.aramservices.com/bird-watching-blog/imagethree.jpeg</code> |
| 124 | + </li> |
| 125 | + <li> |
| 126 | + Your first blog post is complete! Now let’s add an image of Saraa, so her readers get to know her. Below the opening <code><body></code> tag, add an <code><img></code> tag with the following <code>src</code> attribute:<br> |
| 127 | + - <code>https://aramb.aramservices.com/bird-watching-blog/avatar.png</code> |
| 128 | + </li> |
| 129 | + <li> |
| 130 | + Below the <code><img></code> tag, add an <code><h3></code> heading that says:<br> |
| 131 | + “by Saraa B. | 1 day ago” |
| 132 | + </li> |
| 133 | + <li> |
| 134 | + Saraa wants her readers to know that she has written more than one post. Let's create a list of related blog posts. Below the last paragraph, add an <code><h4></code> heading that says:<br> |
| 135 | + “Related Content”.<br> |
| 136 | + Underneath that heading, create an unordered list using the <code><ul></code> element. |
| 137 | + </li> |
| 138 | + <li> |
| 139 | + The unordered list should have the following four items as list elements using the <code><li></code> element:<br> |
| 140 | + - “How to Identify Common Birds”<br> |
| 141 | + - “Birding Gear Guide: Must-Have Essentials”<br> |
| 142 | + - “Exploring Bird Species: A Comprehensive Guide”<br> |
| 143 | + - “Best Birding Spots Around the World” |
| 144 | + </li> |
| 145 | + <li> |
| 146 | + Let's make the term 'bird watching' in the first paragraph a clickable link that opens in a new page. Wrap the term in an <code><a></code> anchor tag and set the <code>href</code> attribute to: <code>https://en.wikipedia.org/wiki/Bird_watching</code>. Don't forget to include the <code>target="_blank"</code> attribute to open the link in a new tab. |
| 147 | + </li> |
| 148 | + <li> |
| 149 | + Saraa wants to ensure her readers can easily get in touch with her. At the bottom of the body, add a new <code><div></code> element and set its <code>id='contact'</code>. Inside the <code><div></code>, create a new <code><p></code> element and include the following contact information:<br> |
| 150 | + - email: [email protected] | phone: 123-456-7890 | address: 123 Bird Street, Cityville, USA |
| 151 | + </li> |
| 152 | + <li> |
| 153 | + Inside the contact <code><div></code>, surround the terms “email”, “phone”, and “address” with <code><strong></code> opening and closing tags. |
| 154 | + </li> |
| 155 | + <li> |
| 156 | + Great job! Now save the file, open it in your web browser, and admire your bird watching blog. Feel free to add more content, images, or customize the layout further to make it your own. |
| 157 | + </li> |
18 | 158 | </ol> |
| 159 | +<p>Remember, the key to becoming a great web developer is practice. The more you build, the better you'll become. Happy coding!</p> |
0 commit comments