Saphire C-19 Jen Tam, Edith Baltazar, Yulia S #37
Conversation
… for other pages.
Merge branch 'main' of https://github.com/ystartc/group-fansite
Merge branch 'main' of https://github.com/ystartc/group-fansite
Merge branch 'main' of https://github.com/ystartc/group-fansite
Merge branch 'main' of https://github.com/ystartc/group-fansite
Merge branch 'main' of https://github.com/ystartc/group-fansite
Merge branch 'main' of https://github.com/ystartc/group-fansite
Merge branch 'main' of https://github.com/ystartc/group-fansite
added banner to home and changed home button to img
Added image backround, allign text, changed font family
There was a problem hiding this comment.
Nice job on your site! It's very creative and playful!
I think it's a great idea to run the W3C validator and check that the HTML structure is valid. Most of my notes are about indentation, which I think might help you notice various issues with the HTML validity. This will apply in JSX inside of React, too, so hopefully these notes help with debugging!
It's also a good idea to think about accessibility beyond semantic HTML. Two things I highlighted there:
- Text Contrast (making sure the text is visible enough against its background
- Mobility issues (can a slower mouse user interact with moving elements?)
| <section class="topnav"> | ||
| <!-- Centered link --> | ||
|
|
||
| <nav class="topnav-centered"> | ||
| <button href="index.html"> | ||
| <img id="home" class="active" src="/images/EJY.jpg" /> | ||
| </button> | ||
| </nav> |
There was a problem hiding this comment.
[nit] It's a good idea to consistently indent siblings! That way you can tell whether things are nested without searching for closing tags.
<section class="topnav">
<!-- Centered link -->
<nav class="topnav-centered">
<button href="index.html">
<img id="home" class="active" src="/images/EJY.jpg" />
</button>
</nav>| <a href="us.html">About Us</a> | ||
| <form class="d-flex"> | ||
| <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> | ||
| <button class="btn btn-outline-success" type="submit">Search</button> | ||
| </form> |
There was a problem hiding this comment.
This example illustrates the indenting. As-is, I'm wondering where the </a> is at the end of the form. But the form isn't enclosed in the anchor! Try indenting like this:
<a href="us.html">About Us</a>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>| It typically consists of a tea base, milk or a non-dairy alternative, and tapioca pearls or other chewy toppings. | ||
| </h3> | ||
| </article> | ||
| <section id="backgroung-image"> |
There was a problem hiding this comment.
Great use of semantic tags throughout!
Another accessibility consideration is text contrast. Notice how little the text stands out against the background image in some places:
Think about some strategies you might use to increase the contrast between the text and the background image!
| <strong>Brown Sugar:</strong> Brown sugar boba is a trendy variation where the pearls are cooked in a rich brown sugar syrup. This gives them a caramel-like flavor and a chewy texture. | ||
| </li> | ||
| </ul> | ||
| <h3 id="boba-types"> |
There was a problem hiding this comment.
This h3 might be better off as a paragraph with different styling, since it doesn't seem to be the heading of a separate piece of content.
| </section> | ||
|
|
||
| <footer class="footer"> | ||
| <section> |
There was a problem hiding this comment.
[nit] Since this is all in the footer, and it's the only section in the footer, you probably don't need a section here.
|
|
||
| </style> | ||
| </head> | ||
| <body> |
There was a problem hiding this comment.
[nit] Only use one <body> per HTML file.
| </li> | ||
| </td></tr> | ||
| <tr><td> | ||
| <li> <img class="matcha-gif" src="https://media3.giphy.com/media/1yniKGdw6TiVk5s7pl/200w.gif?cid=82a1493bqhzpj78bl051sg2obv56q048fs5aeqz8278ouyew&ep=v1_gifs_related&rid=200w.gif&ct=s" alt="tb"></a> |
There was a problem hiding this comment.
Indenting will help detangle some of this:
</li>
</td>
</tr>
<tr>
<td>
<li>
<img class="matcha-gif" src="https://media3.giphy.com/media/1yniKGdw6TiVk5s7pl/200w.gif?cid=82a1493bqhzpj78bl051sg2obv56q048fs5aeqz8278ouyew&ep=v1_gifs_related&rid=200w.gif&ct=s" alt="tb">
</a>This may make you see a couple of things:
- There's an
libut no surroundingulfor it - There's a stray
</a>tag
| <nav class="dropdown"> | ||
| <button class="dropbtn">Gallery</button> | ||
| <nav class="dropdown-content"> | ||
| <a href="gallery.html">Boba Tea Gallery</a> | ||
| </nav> | ||
| </nav> |
There was a problem hiding this comment.
There's a lot of navs! I think you'd use nav instead of section up at the "Top navigation" comment.
| <img class=covers alt="" src="https://ameessavorydish.com/wp-content/uploads/2023/01/Matcha-milk-tea-post-7.jpg"> Matcha Milk Tea</a> | ||
| </li> | ||
| <li> | ||
| <a href = "https://www.amazon.com/Clean-Ruby-Crafting-Better-Rubyists-ebook/dp/B0825PGLR2/ref=sr_1_1?crid=3K622H88RR4KI&keywords=clean+ruby&qid=1684189598&s=digital-text&sprefix=clean+ruby%2Cdigital-text%2C293&sr=1-1"> |
There was a problem hiding this comment.
Your bubble tea images link to coding books on Amazon. 😄
There was a problem hiding this comment.
just checking if u pay attention 😅
There was a problem hiding this comment.
it be like that sometimes - never let them know your next move
| #about-me { | ||
| margin-top: -75px; | ||
| text-align: center; | ||
| background: -webkit-linear-gradient( #ffffcc, #FFB6C1); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| text-shadow: -1px 1px 2px #FFB6C1, | ||
| 1px 1px 2px #ffffcc, | ||
| 1px -1px 0 #ffffcc, | ||
| -1px -1px 0 #ffffcc; | ||
| /* padding: 50px; */ | ||
| } |
Group co-working project