Design comparison
Solution retrospective
Any suggestions an improvements are welcomed.Does anyone know to to get that pointy tip to the navigation menu div?
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
ANCHOR ELEMENT 🔴:
- The social
svg
icons like Facebook, and Twitter are must need to wrapped with<a>
element and we want to addaria-label
attribute for them which is way more important for social links in an<a>
tag can help provide more context to users with visual impairments who use assistive technologies such as screen readers to access your website.
- When a screen reader encounters an anchor tag with a social link, it may announce the link's text content, such as "Facebook" or "Twitter," by including an
aria-label
attribute that points to a nearby element containing a description of the link's purpose, you can provide more context and clarity to the user.
- By providing this additional information, you can help users with visual impairments to better understand the purpose and value of social links, and encourage them to engage with your content. This can ultimately improve the user experience on your website, and make it more accessible and inclusive for all users.
- Example:
<a href="#" aria-label="Facebook profile of Huddle"> <svg>Facebook Svg (For example)</svg> </a>
- If you have any questions or need further clarification, you can always check out
my submission
and/or feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @adityaphasuPosted over 1 year ago
Hello @manavss!
Before making the tip just a quick suggestion:
- Instead of using a
div
to contain all the links use aul
(unordered list) for it and wrap all the individual links withli
(list item).
Okay now moving on to the tip, we can make it using a
pseudo-element
::before
: Instead of using tailwind CSS to add styles to:before
we will make a class in yourindex.css
instead and just apply this class to theul
element (previouslydiv
). The reason we don't add these styles directly on theul
using tailwind classes is that these are quite a lot of classes and the list already has so many classes on it so if we were to add these ones on top of it it will make the element quite unreadable and unmanageable.Here's how we are going to do it:
- In your
index.css
make a@layer component
and inside it make a class name (call it whatever you like I'll give it aheader-list
class name for example) and here we add the classes to make it look like the tip. Like this:
@layer component { .header-list:before{ content: " "; width: 1.4375rem; border: 1.25rem solid #fff; border-color: transparent #fff #fff transparent; position: absolute; top: -1.5rem; right: 0; }
- You can add like this or if you prefer the tailwind classes then use
@apply
and you can add the CSS in tailwind fashion like this:
@layer component { .header-list:before{ content: " "; @apply w-[1.4375rem] // and so on.. } }
- After doing this you can add the
.header-list
(or whatever you have set as the classname) to theul
and you will have a pointy tip. - Make sure to add a media query to for the tip to disappear on larger screens.
I have used values according to myself so make sure to play around all those values for width, border, and top.
All in all great job on completing the challenge!
Good luck and happy coding!🙌🏻
Marked as helpful0 - Instead of using a
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord