Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
27
Comments
10
P

Haydn Kerr

@haydnkerrNew York555 points

Hello there! I'm Haydn and I'm currently finishing up my studies at the University of Connecticut where I also work as a Frontend Developer. I've been using Frontend Developer throughout all stages of my developing journey and most recently have started filming tutorials for YouTube.

I’m currently learning...

Currently learning different JS frameworks to enhance my adaptability and skills. At the moment I'm focusing on React

Latest solutions

  • Responsive card with HTML elements created in Vanilla JS


    P
    Haydn Kerr•555
    Submitted over 1 year ago

    0 comments
  • Responsive Flex with Vanilla JS for game functionality


    P
    Haydn Kerr•555
    Submitted over 1 year ago

    1 comment
  • Flexbox layout with social media links

    #accessibility

    P
    Haydn Kerr•555
    Submitted over 1 year ago

    1 comment
  • Responsive Advice generator using Fetch API


    P
    Haydn Kerr•555
    Submitted over 1 year ago

    0 comments
  • Responsive Grid with Vanilla Javascript


    P
    Haydn Kerr•555
    Submitted over 1 year ago

    1 comment
  • Heavy DOM manipulation with JS with a computer opponent


    P
    Haydn Kerr•555
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • Mombinya Omboga Shem•170
    @MombinyaOmboga
    Submitted over 1 year ago

    Responsive qr component using HTML & CSS

    3
    P
    Haydn Kerr•555
    @haydnkerr
    Posted over 1 year ago

    Nice final design! Since the design calls for a card to be placed directly in the middle of the viewport a good way to do this one is to skip the .img-container and do all the positioning in the body tag. body { display: flex; justify-content: center; align-items: center; height: 100svh; width: 100% }

    this will place the QR card directly in the middle without having to do any further positioning on the .img-holder class

    Happy Coding!

  • Mcnafaha•240
    @TheMcnafaha
    Submitted over 1 year ago

    Todo, with drag & drop using Qwik and Tailwind

    #tailwind-css
    2
    P
    Haydn Kerr•555
    @haydnkerr
    Posted over 1 year ago

    Just so you're aware the preview site doesn't load properly to see the site

  • P
    Haydn Kerr•555
    @haydnkerr
    Submitted over 1 year ago

    Accordion Menu with no JS

    1
    P
    Haydn Kerr•555
    @haydnkerr
    Posted over 1 year ago

    For tutorials on some of these challenges check out my channel

    https://www.youtube.com/channel/UCpFe7-ADQpEgjnGJnQei8dA

  • İsmail ÇELEN•10
    @IsmailCLN
    Submitted over 1 year ago

    Card Preview Project Built with Basic HTML and CSS

    2
    P
    Haydn Kerr•555
    @haydnkerr
    Posted over 1 year ago

    Firstly you overall design is great and very close to the design file. the biggest problem I see you have is the width of the container changing with smaller screen sizes. Luckily for this challenge there is no need for a responsive design so I suggest changing the width of the main container to 100% and adding a max-width so it doesn't take up the whole page.

    Additionally if you want to use Margin: auto on the container I would add margin: 0 auto then add 100% height and width for the body so the container will sit in the center of the page

    happy coding

    Marked as helpful
  • Diego Castillo Furtunatti•80
    @Diego-CastilloF
    Submitted over 1 year ago

    Responsive lading page using flex-box

    1
    P
    Haydn Kerr•555
    @haydnkerr
    Posted over 1 year ago

    Nice design! in terms of cutting off the left side of the image you could use "Transform: translate(-50px)" in CSS. Just replace the pixels with whatever works for you. It won't effect the whole container just the positioning of the image

    Marked as helpful
  • zawseng13•80
    @zawseng13
    Submitted over 1 year ago

    Blog Preview Card component with HTML and CSS

    1
    P
    Haydn Kerr•555
    @haydnkerr
    Posted over 1 year ago

    Nice design! your code is well structured, readable and the final design is very similar to the example.

    One thing I did notice was the black border around the card that doesn't follow the border-radius. I suggest using "border: 1px solid black" instead of "outline" for the card. This will allow the border to follow the radius and not have that rectangle box.

    ***it seems the outline works on chrome browser. if you have a look on safari you will see what I'm talking about

    Marked as helpful
View more comments

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