Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
28
Comments
21
Sean Gray
@seangray-dev

All comments

  • Adriano•42,890
    @AdrianoEscarabote
    Submitted over 2 years ago

    Audiophile ecommerce website w/ NextJs, Typescript, Styled-Components

    #next#redux#styled-components#typescript#axios
    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Nice work bro! I'm currently working on this one myself with Vite.

    I love the hover effects you added as well as the loading page that was a nice touch 👏

    Some small details I think could help to look into some layout issues when adjusting screen sizes for example one was on the homepage zx-9 speaker.

    Otherwise I really enjoyed this, good work!

    Marked as helpful
  • Hanzala Bhutto•260
    @hanzala-bhutto
    Submitted over 2 years ago

    Responsive Design For NFT Card Component (HTML & CSS) Using FlexBox

    3
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Hanzala,

    Similarly to a previous comment. Here is some of my CSS for this challenge:

    • Setting the parent element to position relative:
    .card-top {
        border-radius: 15px;
        overflow: hidden;
        position: relative;
    }
    
    
    .card-top img {
        width: 100%;
        display: block;
    }
    
    • And then the overlay image to take up the entire space of it's parent element while hiding it:
    .img-overlay {
        position: absolute;
        left: 0; 
        top: 0; 
        height: 100%;
        width: 100%;
        background-color: hsla(178, 100%, 50%, 0.3);
        display: none;
    }
    
    .img-overlay img {
        position: absolute;
        width: 50px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    • And then to show it upon hovering:
    .card-top:hover .img-overlay {
        display: block;
    }
    

    Hopefully this helps. Keep it up! 😁

    Marked as helpful
  • Emir Batıkan Uçar•560
    @Batikann
    Submitted over 2 years ago

    Pricing Component

    #tailwind-css
    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Emir, a fellow TailWind user! Nice job on completing this challenge! I have a couple suggestions for you:

    • It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
    • Instead you can use JS to dynamically update the contents of existing HTML.
    • You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.

    Here is the JS code I wrote for my solution to this challenge for reference:

    const toggle = document.getElementById('toggle');
    const package = document.getElementById('package'); 
    
    toggle.addEventListener('change', on => {
        package.classList.toggle('show-monthly');
    });
    

    As for your cards increasing in size after you toggle...It seems you didn't set the appropriate utility classes using TailWind. I believe you can use max-w-[value] to achieve what you are looking for. Instead you are using max-[value] on the cards.

    Hope this helps! Keep up the work! 😁

    Marked as helpful
  • Jary Cruz•800
    @JaryCruz
    Submitted over 2 years ago

    Responsive Pricing Component with Toggle

    #accessibility#bem#animation
    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Jary, nice job on completing this challenge! I have a couple suggestions for you:

    • It is often best practice not to inject HTML using JS. This is because this method can cause security, accessibility, maintenance and performance issues.
    • Instead you can use JS to dynamically update the contents of existing HTML.
    • You can rely on your CSS to do as much as you can for you first and whatever you can't you can rely on JS.

    Here is the JS code I wrote for my solution to this challenge for reference:

    const toggle = document.getElementById('toggle');
    const package = document.getElementById('package'); 
    
    toggle.addEventListener('change', on => {
        package.classList.toggle('show-monthly');
    });
    

    Hope this helps! Keep up the work! 😁

    Marked as helpful
  • Ralph•190
    @delacruzralph
    Submitted over 2 years ago

    NFT preview card component

    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Ralph! Nice job on this.

    Here are some tips for your question:

    The em unit em are relative to their parent’s font size When used on anything else other than font-size it’s relative to the font-size of it’s own element font-sizes is an inherited property, so if you don’t declare it anywhere, it’s getting it from the body (or the default which is normally 16px) The problem with em: when we use em for font-size of an element, it can create a cascading effect.

    The rem unit The rem unit is short for Root Em That means it’s always relative to the ‘root’ of our document The root of an HTML page is always the HTML element

    How to decide which unit to use?

    Pixels used to cause a lot of problems, as they were a fixed unit (1 dot on the screen) Now it follows the reference pixel.

    General rule of thumb (not hard and fast rules) :

    • Font-size = rem
    • Padding and Margin = em
    • Widths = em or percentage

    Hopefully you find this helpful! Happy coding, keep it up 😁

    Marked as helpful
  • Markhadi•130
    @mrkhd-webDev
    Submitted over 2 years ago

    Article preview component

    #sass/scss
    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Markhadi! Nice job on this, I recently completed this one too!

    I have a couple suggestions that could help with this challenge. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:

    • the author of the article if we wanted to see more articles by this author.
    • the article title as it would probably link to the full read of what it belongs to

    I would wrap the article title's h1 element with: <a href="#"><h1>Article Title</h1></a>

    The same would apply to the author of the article. Maybe check out my solution for some ideas.

    Hope this helps! Keep it up and happy coding 😁

    Marked as helpful
  • CY Chan•290
    @CYCHAN00
    Submitted over 2 years ago

    Article preview component

    #react#tailwind-css#next
    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey CY Chan! Nice job on this, I recently completed this one too!

    I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:

    • the author of the article if we wanted to see more articles by this author.
    • the article title as it would probably link to the full read of what it belongs to the share button
    • I would wrap the article title's h1 element with: <a href="#"><h1>Article Title</h1></a>

    and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:

    a {
    transition: all .3s ease;  
    }
    a:hover, a:focus {
    cursor: pointer; 
    color: (add new color that matches design or see specs); 
    }
    

    Maybe check out my solution for some ideas.

    Hope this helps! Keep it up and happy coding 😁

  • Jason Bingham•20
    @jbingham223
    Submitted over 2 years ago

    Simple flex-based solution.

    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Jason! 😁

    Nice job on the project it looks good! One suggestion with writing your CSS and HTML is to use classes instead of ID's. You can check out this to learn a little bit more about the two and when to use one over the other:

    https://css-tricks.com/the-difference-between-id-and-class/

    Your site is live on github pages so you did it correctly. In terms of best practices many believe using the command line for git and github as most companies will require that you do and is a fundamental skill as a developer. I found this video that may be useful to you:

    https://www.youtube.com/watch?v=qMck70tLDuo

    Also one last thing you can check out is the article Matt Studdert (creator of FME) wrote about how to get the most of this platform!:

    https://medium.com/frontend-mentor/how-to-get-the-most-out-of-frontend-mentor-bdd6fdc25cb8

    Hope you found this useful! Happy coding 🫡

    Marked as helpful
  • novadior1k•100
    @Novadior1k
    Submitted over 2 years ago

    Stats of A Business | HTML CSS

    3
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey novadior1k,

    Nice job other than missing that image haha! You could do so by simply adding the element into your element and link to it within your files. <img src="./"></img>

    Hope this helps! Happy coding 👍😁

    Marked as helpful
  • Siddharth•230
    @siddharth-1407
    Submitted over 2 years ago

    Article preview component Solution

    #sass/scss#accessibility
    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Siddharth! Nice job on this, I recently completed this one too!

    I have a couple suggestions that could help with this challenge. It's hard to see what parts of this design is interactive. I try to think of the bigger picture, what would this component belong to? In this case a larger site that would have multiple of these components. Some of the elements in this design that would be interactive would be:

    • the author of the article if we wanted to see more articles by this author.
    • the article title as it would probably link to the full read of what it belongs to
    • the share button

    I would wrap the article title's h1 element with: <a href="#"><h1>Article Title</h1></a>

    and the same would apply to the author of the article. I would also add hover and focus effects to make it obvious to the user that it's clickable and that we can interact with it. For that we could do something like this and add a transition as well:

    a {
    transition: all .3s ease;  
    }
    a:hover, a:focus {
    cursor: pointer; 
    color: (add new color that matches design or see specs); 
    }
    

    Maybe check out my solution for some ideas.

    Hope this helps! Keep it up and happy coding 😁

    Marked as helpful
  • Cris Augusto•160
    @Cristhyam-Augusto
    Submitted over 2 years ago

    Interactive card to rate made with html, css, JS and lots of LOVE

    3
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Cristhyam,

    I like your solution, the design is looking pretty good! I have a suggestion to improve this challenge though:

    A better way to build this challenge is to create a Form and inside of it, the “rating buttons” should be built using an Input Radio and it should have a Label Element attached to it for accessibility. Since you used an ordered list, I was able to select multiple ratings to submit.

    Hope you found this useful! Happy coding! 😁

    Marked as helpful
  • Renee Smith•190
    @RSmith484
    Submitted over 2 years ago

    3-column preview card component

    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Renee, I came up with a solution for your question. You could add this to each of your columns:

    column-1, column-2, column-3 {
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    }
    

    You could also add a helper class to each of the divs instead of having to repeat yourself.

    Hope this helps! Keep it up! 👍😁

  • syybiecoder•200
    @syybiekarim
    Submitted over 2 years ago

    responsive Profile card component

    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey there, nice job on this challenge. I got a couple suggestions that may help 😁.

    • To answer your first question you could try something like this on your profile pic:
    #profile-pic {
        border: 5px solid white;
    }
    
    • You can add multiple background images by separating them with a comma, and same with the positioning.
    body {
    background-image: url(...), url(...); 
    background-position: top left, bottom right; 
    }
    
    • By default heading elements come with a default margin property to them. I personally reset a lot of my CSS, which you can check this here to avoid this issue in the future: https://gist.github.com/Asjas/4b0736108d56197fce0ec9068145b421

    • Instead of using the hr tag you could use a border top or bottom to one of the other elements.

    section#second-section {
    border-top: 1px solid hsl(0, 0%, 59%);
    }
    

    Hope this helps! Keep it up and good luck 😁

    Marked as helpful
  • Rachel Johnson•510
    @rachelktyjohnson
    Submitted over 2 years ago

    Single Price Grid Component

    #sass/scss
    1
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Rachel,

    I like the solution to your design! The only thing I would suggest is to make the "Sign-Up" button more obvious that it's clickable and that its an interactive element by adding pseudo element selectors when hovering or focused on it. The button should also redirect users somewhere so we could use a <a class= "btn-sign-up" href="#">Sign-Up</a> instead by also giving it a class for us to select it. Here is some code you could also add:

    .btn-sign-up {
    cursor: pointer; 
    transition: all .3s ease; 
    }
    
    .btn-sign-up:hover,
    .btn-sign-up:focus {
    background-color: white;
    color: hsl(71deg, 73%, 54%);
    }
    
    Hope this helps! Keep it up 😁
    
  • Ammar yasser•30
    @Ammar0Yasser
    Submitted over 2 years ago

    Interactive rating component

    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Looks good! One small suggestion is to increase the line-height on your paragraph text. It can be difficult to read if the text is too bunched up together, and can cause eye strain. To give it some more breathing room you can try something like this:

    line-height: 1.5; 
    

    I hope this helps! Keep it up! 😁😁

    Marked as helpful
  • Alana Caporale•150
    @alanacapcreates
    Submitted over 2 years ago

    Huddle Landing Page using HTML + CSS

    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Alana!

    Looks good! 👍 One thing you may not have noticed is your background image does not cover the entire screen at larger screen sizes. To fix this you can simply change the background size from contain to cover: background-size: cover;

    To try and fix the spacing on your grid layout I did a couple things:

    main {
    max-width: 1200px;
    margin: 0 auto;
    }
    

    By default grid containers will utilize the maximum space provided, so by applying a max-width we are saying this grid container cannot exceed the set value you applied. And then using margin: 0 auto to center the grid again. Thus decreasing the spacing you had between the two columns.

    Hope this helps!

  • Rupom•230
    @mohrajul-rupom
    Submitted over 2 years ago

    3 COLUMN PREVIEW CARD COMPONENT HTML CSS

    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Rupom! Looks great, only thing missing from this is to vertically center that box. An easy fix for this on this challenge you could add this to your body element

    body {
    min-height: 100vh;
    }
    

    Also add a cursor pointer & hover + focus transition effect on the 'Learn More' buttons. You could do this:

    button {
    cursor: pointer; 
    transition: all .3s ease;
    }
    

    Hope this helps, keep it up!

  • Marcos•40
    @Toxgem
    Submitted over 2 years ago

    Interactive Rating Component Vainilla JS

    #accessibility
    2
    Sean Gray•690
    @seangray-dev
    Posted over 2 years ago

    Hey Marcos! Looks pretty good

    A better way to build this is to create a Form element and inside of it, the “rating buttons”would be built using Radio Input elements with Label Elements attached to it.

    After submitting the illustration margin collapses with your rating div. You could try this instead:

    .thanks {
    display: flex;
    flex-direction: column;
    } 
    

    Hope this helps! Keep it up

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

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