Front-end developer and Design (System) enthusiast. I love working with vanilla code (HTML/CSS/JavaScript) and enhance this experience using frameworks such as Astro, Vue and React. I write my coding solutions with the WCAG (Web Content Accessibility Guidelines) in mind, so anyone can enjoy it.
I’m currently learning...React and Shopify Liquid!
Latest solutions
Vue 3, Pinia, Astro, WCAG 2.2, Accessibility
#accessibility#astro#pinia#vue#sass/scssSubmitted over 1 year agoAstro, WCAG Accessibility, Theme Switcher, IntersectionObserver API
#accessibility#astro#sass/scss#tailwind-css#animationSubmitted over 2 years agoAstro, WCAG Accessibility, CSS Animations & Vanilla JavaScript
#accessibility#astro#fetch#sass/scss#animationSubmitted almost 3 years agoAstro, WCAG Accessibility, CSS Animations & Vanilla JavaScript
#accessibility#astro#bem#sass/scss#animationSubmitted about 3 years agoAstro, WCAG Accessibility, CSS Flexbox & CSS Animations
#accessibility#astro#bem#sass/scss#animationSubmitted over 3 years agoAstro, WCAG Accessibility, Sticky Navigation, Revealing Footer
#accessibility#astro#bem#sass/scss#animationSubmitted over 3 years ago
Latest comments
- @Haico-Paulussen@markteekman
Hey Haico! Love your use of Marvel quotes, big fan of Marvel myself 🙂 Don't know if it's possible with the API you've used, but it would be cool to see the person behind the quote e.g. "You took everything from me." - Wanda. Just an idea though.
To improve the accessibility and the usability of your solution a bit, consider using
cursor: pointer;
for when you're hovering over the randomization button.Great work Haico!
Marked as helpful - @legion40216@markteekman
Love how you've added that "Best of three" at the top of your solution Suleman! Really creative 😊 One tip would be to checkout the report Frontend Mentor generates for your solution, there's some really great tips on how to improve your HTML and accessibility.
Keep up the great work!
- @NohaFahmi@markteekman
I really like your solution as well Noha! Especially the way you animated how the house picks its icon 🙂 Keep up the great work!
- @hiddehulshof@markteekman
Hey Hidde,
Nice solution! It's really close to the original design :) Be sure to also check Frontend Mentors report, it contains really helpful information about accessibility and semantic HTML! In this case, adding an empty
alt=""
tag to your image and wrapping your content in a<main>
landmark should do the trick.Keep it up!
Marked as helpful - @Duyen-codes@markteekman
Hi Duyen,
Great solution! Love how you combined Grid en Flex to build this one out :) Be sure to also check Frontend Mentors report, it has some great tips to improve accessibility! For example, adding an empty
alt=""
tag to all your images should solve all the issues in this case.You could also improve the design a little by making 'daily', 'weekly' and 'monthly' into anchor links with an active and hover state :)
As for the data, I'll reference it here again so others might read it too: the JavaScript Fetch API can be very useful in this case. You'll need some JS to interact with the data, there are plenty of ways to do it, this is how I solved it.
Keep up the great work!
Marked as helpful - @nicktelindert@markteekman
Hi Nick,
Great first solution! Haico has already made some nice additions. Things I could think of (I took some of these from my comment at Haico's solution):
- When viewing the component on a small screen size the card overflows the viewport. This is because you've set a fixed
width: 302px
on the#card
element. Try to avoid setting it explicitly as much as possible. Settingmax-width: 302px
solves this. - Consider using classes instead of id's to style your HTML. It's lower in CSS specificity and a better practice for re-usability.
- Your anchor links aren't distinguished in this component. 'Equilibrium #3429' and 'Jules Wyvern' are links, but this is not visually notable. Consider adding an underline to them for accessibility purposes.
- Your attribution links have a color contrast ratio of 1.88. The minimum contrast ratio is 4.51, a nice one would be a ratio of 6.0. You could achieve this by using a white color and an underline for example.
- You can add
cursor: pointer
to your.overlay:hover
class to add that extra level of interaction taken from the design :)
Keep up the great work and happy coding!
- When viewing the component on a small screen size the card overflows the viewport. This is because you've set a fixed