Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
9
P

Sean Buckle

@seanbuckleUK 🇬🇧410 points

Front-End Developer | Crafting Seamless User Experiences | HTML, CSS, SASS/SCSS and JavaScript

I’m currently learning...

- TypeScript - React

Latest solutions

  • Age calculator with dark theme

    #bem#sass/scss#typescript

    P
    Sean Buckle•410
    Submitted over 1 year ago

    How could I improve the way in which I coded this?


    2 comments
  • Huddle Intro

    #bem#sass/scss

    P
    Sean Buckle•410
    Submitted over 1 year ago

    0 comments
  • Social Proof Section using CSS Grid & Flexbox

    #accessibility#bem#sass/scss

    P
    Sean Buckle•410
    Submitted over 1 year ago

    0 comments
  • Single price grid component using Flexbox

    #accessibility#bem#sass/scss

    P
    Sean Buckle•410
    Submitted over 1 year ago

    1 comment
  • Four card feature section using CSS Grid and Flexbox

    #accessibility#bem#sass/scss

    P
    Sean Buckle•410
    Submitted over 1 year ago

    1 comment
  • Recipe page using Container Query

    #accessibility#bem#sass/scss

    P
    Sean Buckle•410
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • Abdul Subhan•1,360
    @Esabdul
    Submitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I completed this project from start to finish, including solving merge conflicts and fixing deployment issues. Next time, I'll keep the folder structure clean from the beginning and double-check my file paths to avoid broken styles or images.

    What challenges did you encounter, and how did you overcome them?

    I faced issues with GitHub Pages not showing my CSS and images. The problem turned out to be incorrect file paths that started with slashes. I also had some Git merge conflicts,but I resolved them using GitHub Desktop and the terminal with guidance.

    What specific areas of your project would you like help with?

    I would appreciate feedback on how I structured my HTML and CSS. I'm especially interested in learning how to better organize small components and follow best practices for readability and maintainability.

    QR Code Component using Flexbox and Mobile-First Design

    1
    P
    Sean Buckle•410
    @seanbuckle
    Posted 26 days ago

    The project is very well put together.

    In terms of the HTML <div> tags, they should be avoided; instead, use more semantic ones such as <section>. Here is a Link.

    However, only use <div> if there is no other alternative.

    For the CSS, use relative units em rem rather than absolute px for fonts and widths, but also use logical properties like width to inline-size. For classes, keep them concise.

    • Link to Logical properties
    • Link to Relative vs absolute units
    • Link to px to rem converter

    Below is example CSS with slight improvements:

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    body {
      min-block-size: 100dvh;
      padding: 20px;
      display: grid;
      place-items: center;
      font: 400 0.938rem/normal san-serif;
      background-color: hsl(212, 45%, 89%);
    }
    
    img{
      max-inline-size: 100%;
      block-size: auto;
    }
    
    .qr-card {
      max-inline-size: 20rem;
      padding-inline: 16px;
      padding-block: 16px 24px;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      text-align: center;
      background-color: white;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
    }
    
    .qr-card__img {
      border-radius: 10px;
      margin-bottom: 9px;
    }
    
    .qr-card__body {
      padding-inline: 8px;
      color: hsl(220, 15%, 55%);
    }
    

    I used BEM for the classes, but it's not everyone's cup of tea.

    Happy coding!

    Marked as helpful
  • meddifera•20
    @meddifera
    Submitted 26 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of choosing the correct difficulty level this time so I can actually finish and submit the challenge.

    What challenges did you encounter, and how did you overcome them?

    The most challenging part would be to style the bullets in a different way than the text. The keyword to the solution is li::marker in CSS. The other part is the table at the end of the page. I hid the table borders and used <hr> and styled it with CSS.

    What specific areas of your project would you like help with?

    The project itself was ok. The git part was probably the hardest bit but I guess practice makes perfect. We just have to keep doing it and don't be afraid to look like a fool to your future self because that's probably the only person who's going to judge you that really matters. Be kind to yourself because you have to treat others like you treat yourself.

    Simple recipe page adhering to web content accessibility guidelines

    1
    P
    Sean Buckle•410
    @seanbuckle
    Posted 26 days ago

    For the table, hiding all the borders was the right way to go, but the <hr> is not needed instead, try something like:

    tr{
    /* Rest of code */
    border-bottom: 1px solid lightgray;
    }
    tr:last-child{
    border-bottom: 0px;
    }
    

    The tag selectors will need to be replaced with classes for the code above.

    Here is a reference link to Last child - MDN Web Docs

    This may help you a bit with git: https://docs.github.com/en/get-started/start-your-journey/hello-world

    Happy coding!

  • John-kjaer•10
    @John-kjaer
    Submitted 26 days ago
    What specific areas of your project would you like help with?

    Does it look about right? First project, so not aiming for 100%

    QR compontent, starter challenge

    2
    P
    Sean Buckle•410
    @seanbuckle
    Posted 26 days ago

    Looks good for a first project.

    A quick tip make it your own e.g. color scheme, other features etc.

    Happy coding!

  • P
    Paul•520
    @mayor-creator
    Submitted over 1 year ago

    FAQ accordion

    #sass/scss
    2
    P
    Sean Buckle•410
    @seanbuckle
    Posted over 1 year ago

    The design is well-implemented.

    I would recommend using the <details> and <summary> tags, as they come with all the functionality you're looking for.

    I can be built without JS using name="" attribute.

    no support for name="" on Firefox, fairly new feature.

    See link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

    Marked as helpful
  • Josh•140
    @RandomGuy20
    Submitted over 1 year ago

    Order Summary Component Solution

    1
    P
    Sean Buckle•410
    @seanbuckle
    Posted over 1 year ago

    Add . at the start to reference a folder/directory.

    Music Icon use the following:

    ./images/icon-music.svg
    

    For the background image two .. are needed, as it is not the same folder/directory, as the stylesheet.

    Background image use the following:

    ../images/pattern-background-desktop.svg
    
    Marked as helpful
  • João Paulo•70
    @JoaoPaul-S
    Submitted over 1 year ago

    Stats Card usando flex e grid

    1
    P
    Sean Buckle•410
    @seanbuckle
    Posted over 1 year ago

    In this particular example, colour saturation is not needed.

    I would recommend the following:

    • Remove the .overlay
    • Add background-color: var(-accent-color); to .workspace
    • Remove background-color and opacity from img
    • Add mix-blend-mode: multiply; to img

    Here is a link for mix blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

    Marked as helpful
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