Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
12

Mark Teekman

@markteekmanNetherlands365 points

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/scss

    Mark Teekman•365
    Submitted over 1 year ago

    0 comments
  • Astro, WCAG Accessibility, Theme Switcher, IntersectionObserver API

    #accessibility#astro#sass/scss#tailwind-css#animation

    Mark Teekman•365
    Submitted over 2 years ago

    0 comments
  • Astro, WCAG Accessibility, CSS Animations & Vanilla JavaScript

    #accessibility#astro#fetch#sass/scss#animation

    Mark Teekman•365
    Submitted almost 3 years ago

    0 comments
  • Astro, WCAG Accessibility, CSS Animations & Vanilla JavaScript

    #accessibility#astro#bem#sass/scss#animation

    Mark Teekman•365
    Submitted about 3 years ago

    3 comments
  • Astro, WCAG Accessibility, CSS Flexbox & CSS Animations

    #accessibility#astro#bem#sass/scss#animation

    Mark Teekman•365
    Submitted over 3 years ago

    1 comment
  • Astro, WCAG Accessibility, Sticky Navigation, Revealing Footer

    #accessibility#astro#bem#sass/scss#animation

    Mark Teekman•365
    Submitted over 3 years ago

    0 comments
View more solutions

Latest comments

  • Haico Paulussen•170
    @Haico-Paulussen
    Submitted about 3 years ago

    Marvel quote generator with Marvel API and CSS Grid

    #accessibility
    2
    Mark Teekman•365
    @markteekman
    Posted about 3 years ago

    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
  • Suleman•750
    @legion40216
    Submitted over 3 years ago

    Flexbox and JS

    1
    Mark Teekman•365
    @markteekman
    Posted about 3 years ago

    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!

  • Noha M.•415
    @NohaFahmi
    Submitted about 3 years ago

    Rock, Paper, Scissors Game using React

    #react#sass/scss#redux
    1
    Mark Teekman•365
    @markteekman
    Posted about 3 years ago

    I really like your solution as well Noha! Especially the way you animated how the house picks its icon 🙂 Keep up the great work!

  • Hiddev•180
    @hiddehulshof
    Submitted over 3 years ago

    Order summary component

    1
    Mark Teekman•365
    @markteekman
    Posted over 3 years ago

    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 Nguyen•950
    @Duyen-codes
    Submitted over 3 years ago

    Time tracking dashboard using Grid

    4
    Mark Teekman•365
    @markteekman
    Posted over 3 years ago

    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
  • Nick te Lindert•30
    @nicktelindert
    Submitted over 3 years ago

    CSS grid

    2
    Mark Teekman•365
    @markteekman
    Posted over 3 years ago

    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. Setting max-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!

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub