@VCarames
Posted
👾 Hey there! 👋 Here are some suggestions to help improve your code: 👾
- For improved accessibility 📈 for your content, it is best practice to use
rem
for your property value. Whileem
is best formedia-queries
. Using these units gives users the ability to scale elements up and down, relative to a set value.
- To properly center your content to your page, you will want to add the following to your
Body
element (this method uses CSS Grid):
body {
min-height: 100vh;
display: grid;
place-content: center;
}
More Info:📚
- Implement a Mobile First approach 📱 > 🖥
With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.
More Info:📚
- Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
- The image’s
alt tag
description needs to be improved upon to better describe what it is. You will want to assume that you are describing the image to a someone.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- This component requires the use of two images 🎑 at different breakpoints. The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
More Info:📚
https://www.w3schools.com/html/html_images_picture.asp
- Do not capitalize "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
- The only heading in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a
paragraph
element.
- Currently, the old price (169.99) 🏷 is not being properly announced to screen readers. To fix this, you are going to wrap the the price in a
del
element and inside it you will add aspan
element with ansr-only class
that will state something like “The previous price was…” and use CSS to make it only visible to screen readers.
More Info:📚
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! 🎄🎁
Marked as helpful
@vcarames Thanks for the resources I will check them out and reach out in case I need clarification.
@vcarames Hey I got a question but is not related to this challenge. do you have slack?
@VCarames
Posted
@Lizz3108
Unfortunately, I don’t. What’s up?
@vcarames do you by any chance have any resources about how to turn an SVG map into an interactive one using CSS? I have been trying to find but most of them used a site that builds websites without coding.
@VCarames
Posted
@Lizz3108
With pure CSS, that might be tricky, depending on what features you want… you definitely need JS make it fully interactive.
What type of features do you want the map to have?
Here are some articles:
https://css-tricks.com/svg-map-rollovers/
https://betterprogramming.pub/creating-an-interactive-map-using-svg-and-css-94a688c11bd6
@vcarames
I want that when the user presses the map they get redirected to another section of the website.
By the way, I just tried out the article, and it works. I can hover over the city it changes colors. Thanks, man!!
@VCarames
Posted
@Lizz3108
Awesome!
I would apply the anchor
on the cities themselves, using the class
the cities have on them.