Cohort22 - Liubov Davidova, Maybellene Aung, Rong Jiang, Tatiana Snook #10
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "liveServer.settings.port": 5501 | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Plant Party Fansite</title> | ||
| <link rel="icon" href="assets/plant-icon.png" type="image/png"> | ||
| <link rel="stylesheet" href="style/style.css"> | ||
| <link rel="stylesheet" href="style/index.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Plant Party Fansite</h1> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a class="menu-link" href="#">Home</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="pages/care.html">Care</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="pages/facts.html">Facts</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="pages/gallery.html">Gallery</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <section> | ||
| <h2>🍀 Welcome to Plant Kingdom 🍀</h2> | ||
| <p> | ||
| Welcome to Plant Kingdom—a space to discover, care for, and appreciate the beauty and benefits of plants. Plants enrich our lives by purifying the air, enhancing our well-being, and bringing natural beauty into our homes and gardens. | ||
| </p> | ||
| <img src="assets/the_map_of_plants.jpg" alt="Trees" > | ||
|
There was a problem hiding this comment. Consider writing a more descriptive alt text to make your site more accessible. Maybe something like |
||
|
|
||
| <h3>🌱 About Plants 🌱</h3> | ||
|
There was a problem hiding this comment. I could also see lines 40-62 in a separate section tag. I don't think you need it here and it's not necessarily correct, but I thought I'd call it out to highlight how different people interpret what elements are needed on a page. |
||
| <p> Plants are essential to life on Earth. They provide oxygen, food, medicine, and habitats for countless species. Here’s a quick look at what makes plants so fascinating:</p> | ||
| <ul> | ||
|
|
||
| <li class="Photosynthesis"> | ||
| <p>🪴 Photosynthesis: Plants convert sunlight into energy, producing oxygen in the process.</p> | ||
| </li> | ||
| <li class="Diversity"> | ||
| <p> | ||
| 🪴 Diversity: From towering trees to tiny mosses, plants thrive in nearly every corner of the planet. | ||
| </p> | ||
| </li> | ||
| <li class="Indoor"> | ||
| <p> | ||
| 🪴 Indoor Benefits: Houseplants can filter toxins and bring peace to any space. | ||
| </p> | ||
| </li> | ||
| <li class="Reproduction"> | ||
| <p> | ||
| 🪴 Reproduction: Plants reproduce in various ways, from seeds to spores, ensuring their continued growth. | ||
| </p> | ||
| </li> | ||
| </ul> | ||
| </section> | ||
| </main> | ||
| <footer> | ||
| <p>🌺 Plant Party Fansite | Developed by Liubov, Maybellene, Rong and Tatiana 🌺</p> | ||
| <p>© 2024 Ada Developer Academy C22</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="/style/style.css"> | ||
| <link rel="stylesheet" href="/style/care.css"> | ||
| <title>Care</title> | ||
| <link rel="icon" href="../assets/plant-icon.png" type="image/icon"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Plant Party Fansite</h1> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a class="menu-link" href="../index.html">Home</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="#">Care</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="facts.html">Facts</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="gallery.html">Gallery</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <div class="intro"> | ||
| <div id="summary"> | ||
| <p> This is a quick guide on how to take care of your plants!</p> | ||
| </div> | ||
|
Comment on lines
+33
to
+35
There was a problem hiding this comment. Prefer a more semantic element like The docs for the section element say that the element "represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it". |
||
| <div id="table-of-contents"> | ||
|
There was a problem hiding this comment. Prefer using |
||
| <h2>Plant Care</h2> | ||
| <ol> | ||
| <li><a href="#Light">Light 🌞</a></li> | ||
| <li><a href="#Watering">Watering 💦</a></li> | ||
| <li><a href="#Soil">Soil and Potting 🪴</a></li> | ||
| <li><a href="#Temperature">Temperature and Humidity 🌡</a></li> | ||
| </ol> | ||
|
Comment on lines
+38
to
+43
There was a problem hiding this comment. Having links that link off to different parts of the page makes this part of your page feel like a navigation section. To add more structure to this page, I'd suggest adding a <nav>
<ol>
<li><a href="#Light">Light 🌞</a></li>
<li><a href="#Watering">Watering 💦</a></li>
<li><a href="#Soil">Soil and Potting 🪴</a></li>
<li><a href="#Temperature">Temperature and Humidity 🌡</a></li>
</ol>
</nav> |
||
| <h3>Other tips and tricks</h3> | ||
|
There was a problem hiding this comment. How does "Plant Care" and "Other tips and tricks" relate to each other? Is the latter supposed to be a subsection of the former? Or do they have the same significance in a hierarchy of headings? I ask because it feels like the two sections have the same significance and should both use |
||
| <ul> | ||
| <li><a href="#Troubleshooting">Troubleshooting common issues</a></li> | ||
| <li><a href="#Green_Thumb">Taking your Green Thumb up a notch!</a></li> | ||
| </ul> | ||
|
Comment on lines
+45
to
+48
There was a problem hiding this comment. Same comment as above, this also feels like a navigation section for intra-page navigation. Adding a |
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="content"> | ||
|
|
||
| <div id="Light"> | ||
|
There was a problem hiding this comment. The sections with id "Light", "Watering", "Soil", "Temperature", "Troubleshooting", and "Green Thumb" feel like distinct sections of a page. Prefer to replace all these non-semantic |
||
| <div class="text"> | ||
| <h3>Light 🌞</h3> | ||
| <p> Different plants thrive under different amounts of light so it's important to know how much your specific plant needs. Most indoor plants prefer indirect light.</p> | ||
| <ul> | ||
| <li><strong>Shade/Low light:</strong> Very little natural light; far from light sources</li> | ||
| <li><strong>Low Indirect Light:</strong> Light that's filtered or reflected; a dim room with a north-facing window or a spot far from a window</li> | ||
| <li><strong>Bright Indirect Light aka "Medium Light":</strong> A bright light source, but not in the direct path of the sun. Most common for house plants!</li> | ||
| <li><strong>Partial Sun:</strong> Direct sun, but not intense "peak" sun heat/light</li> | ||
| <li><strong>Full Sun:</strong> Direct, unfiltered sun for several hours a day. | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <img src="/assets/lighting_guide.jpg" alt="lighting guide" width="400" height="350"> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <div id="Watering"> | ||
| <div class="text"> | ||
| <h3>Watering💦</h3> | ||
| <p> | ||
| Identify your specific plant's watering needs. A rule of (green) thumb is that if the top inch of soil is dry, it's time to water! | ||
| Make sure your plants have proper drainage holes or else standing water can lead to root rot | ||
| </p> | ||
| </div> | ||
| <img src="/assets/watering_chart.jpg" alt="watering guide" height="500" width="350"> | ||
| </div> | ||
|
|
||
| <div id="Soil"> | ||
| <div class="text"> | ||
| <h3>Soil and Potting</h3> | ||
| <p> | ||
| <strong>Use the Right Soil:</strong> Most houseplants do well in a general-purpose potting mix. However, some plants like succulents or cacti need a fast-draining soil mix to prevent root rot. | ||
|
There was a problem hiding this comment. The Strong Importance element "indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type". It has semantic meaning and serves to draw attention to something. Therefore, it should not be used to apply bold styling. to make the text bold, apply styling with CSS. Consider each See docs here |
||
| <br> | ||
|
There was a problem hiding this comment. This comment applies to all the other line break elements in the project: We want to be pretty sparing with our use of the A primary reason to avoid |
||
| <strong>Repot when needed:</strong> When a plant outgrows its pot (you may see roots poking out of the drainage holes), it’s time to repot. Choose a pot about 1-2 inches wider than the current one. | ||
| </p> | ||
| </div> | ||
| <img src="/assets/repotting.jpeg" alt="repotting guide" height="400" width="350"> | ||
| </div> | ||
|
|
||
| <div id="Temperature"> | ||
| <div class="text"> | ||
| <h3>Temperature and Humidity</h3> | ||
| <p> | ||
| <strong>Ideal Temperature Range:</strong> Most houseplants thrive in temperatures between 65-75°F (18-24°C). Avoid placing them near heaters, air conditioners, or drafty windows. | ||
| <br> | ||
| <strong>Humidity Help:</strong> Many plants, especially tropical varieties, love humidity. Misting, using a humidifier, or grouping plants together can help maintain a higher humidity level. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <div id="Troubleshooting"> | ||
| <div class="text"> | ||
| <h3>Troubleshooting common issues</h3> | ||
| <ul> | ||
| <li>Yellowing Leaves: Often a sign of overwatering, nutrient deficiency, or low light.</li> | ||
| <li>Drooping Leaves: This can indicate underwatering or a lack of humidity</li> | ||
| <li>Brown Leaf Tips: Low humidity or too much direct sun might be the cause</li> | ||
| </ul> | ||
| </div> | ||
| <img src="/assets/yellow_leaves.jpg" alt="yellowing leaves" height="300" width="500"> | ||
| </div> | ||
|
|
||
| <div id="Green_Thumb"> | ||
| <h3>Level up your plant game</h3> | ||
|
|
||
| <ul> | ||
| <li> | ||
| Fertilize During Growing Seasons: Most plants benefit from a bit of plant food during the spring and summer. Use a balanced, water-soluble fertilizer once a month during this time | ||
| </li> | ||
| <li> | ||
| Skip Fertilizer in Fall and Winter: During cooler months, plants usually go dormant, so fertilizing isn’t necessary. | ||
| </li> | ||
| <li> | ||
| Regular Checkups: Look for signs of pests like tiny webs, holes in leaves, or sticky residue. Common pests include spider mites, aphids, and scale. | ||
| </li> | ||
| <li> | ||
| Natural Remedies: If you spot pests, try spraying the plant with a mix of water and mild soap or using neem oil, which is a natural insecticide. | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <p>🌺 Plant Party Fansite | Developed by Liubov, Maybellene, Rong and Tatiana 🌺</p> | ||
| <p>© 2024 Ada Developer Academy C22</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,9 +4,97 @@ | |
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="../style/style.css"> | ||
| <link rel="stylesheet" href="../style/facts.css"> | ||
| <title>Facts about plants </title> | ||
| <link rel="icon" href="../assets/plant-icon.png" type="image/png"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <h1>Plant Party Fansite</h1> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a class="menu-link" href="../index.html" target="_blank">Home</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="care.html" target="_blank">Care</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="#">Facts</a> | ||
| </li> | ||
| <li> | ||
| <a class="menu-link" href="gallery.html" target="_blank">Gallery</a> | ||
|
There was a problem hiding this comment. Do you mean for these nav links to open a new tab? The other 3 pages for don't set the target attribute like |
||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <section> | ||
|
There was a problem hiding this comment. I could also see this page having 3 different sections, instead of just 1. One |
||
| <h2>🌱 Funny facts about plants and not only 🌱</h2> | ||
| <img src="../assets/Plants.jpg" width="400" alt="Plants"/> | ||
| <p> | ||
|
There was a problem hiding this comment. I question whether the Paragraph element is the most appropriate element to use here because: "Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation". See docs here. Perhaps, it can be removed completely or replaced with a more semantic tag. |
||
| <h2>🍀 Facts 🍀</h2> | ||
| <ul> | ||
| <li> | ||
| 🪴 There are more than 300,000 plant species identified to date, and the list is constantly expanding. | ||
| </li> | ||
| <li> | ||
| 🍀 Around 70,000 plant species are being utilized for medicinal purposes. | ||
| </li> | ||
| <li> | ||
| 🪴 More than 20% of the world’s oxygen supply is produced by the Amazon Rainforest. | ||
| </li> | ||
| <li> | ||
| 🍀 More than 85% of plant life is found in the ocean. | ||
| </li> | ||
| <li> | ||
| 🪴 Chemicals released from freshly cut grass can be highly effective as a | ||
| stress reliever. | ||
| </li> | ||
| </ul> | ||
| <h2>🪴 Fun facts 🪴</h2> | ||
| <ul> | ||
| <li> | ||
| 🍀 Banana is actually an Arabic word for fingers. | ||
| </li> | ||
| <li> | ||
| 🪴 Bananas contain a natural chemical that makes people feel happy. | ||
| </li> | ||
| <li> | ||
| 🍀 Elephant grass found in Africa is named so because it can grow up | ||
| to 4.5 metres, which is high enough to hide an elephant in it. | ||
| </li> | ||
| <li> | ||
| 🪴 Oak trees do not produce acorns until they are 50 years old. | ||
| </li> | ||
| <li> | ||
| 🍀 Lightning is known to strike oak trees more than any other tree. | ||
| </li> | ||
| <li> | ||
| 🪴 The African tree, Baobab can store 1000 to 120,000 litres of water in its tree trunk. | ||
| </li> | ||
| <li> | ||
| 🍀 Bamboo is an extremely rapid growing plant. In fact, some bamboo varieties can grow almost | ||
| a meter (about 3.2 feet) in a single day. | ||
| </li> | ||
| <li> | ||
| 🪴 The world's tallest living tree is the coast redwood (Sequoia sempervirens), | ||
| which grows along the Pacific Coast of the United States, mainly in California. | ||
| </li> | ||
| <li> | ||
| 🍀The word pineapple comes from European explorers who thought the fruit combined the look of a pinecone with flesh similar to an apple. Pineapples are the only edible members of the bromeliad family. | ||
| </li> | ||
|
|
||
|
|
||
|
|
||
|
Comment on lines
+88
to
+90
There was a problem hiding this comment. Remove unnecessary blank lines |
||
| </ul> | ||
| </p> | ||
| </section> | ||
| </main> | ||
| <footer> | ||
| <p>🌺 Plant Party Fansite | Developed by Liubov, Maybellene, Rong and Tatiana 🌺</p> | ||
| <p>© 2024 Ada Developer Academy C22</p> | ||
| </footer> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 good that you remembered to move index.html to the project root.