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

Shanto Paul

@shantoopaulDhaka, Bangladesh130 points

Frontend Developer

I’m currently learning...

Next.js and TypeScript

Latest solutions

  • Mobile first newsletter signup form [HTML, CSS, JS]

    #accessibility#lighthouse

    Shanto Paul•130
    Submitted about 1 month ago

    I’d love to get feedback on my code performance—whether what I’ve done is correct or if there are any issues I might have missed. Specifically, I’m looking for feedback on things like code optimization, form validation, and accessibility.

    That said, I’m open to any suggestions for improvement :)


    1 comment
  • Article Preview Component (HTML, CSS, JS)

    #accessibility#lighthouse

    Shanto Paul•130
    Submitted about 1 month ago

    Nothing in particular. Any kind of feedback is appreciated :)


    1 comment
  • Frontend Mentor | Testimonials Grid Section

    #sass/scss#accessibility

    Shanto Paul•130
    Submitted 2 months ago

    1 comment
  • Frontend Mentor | Four card feature section

    #accessibility#sass/scss

    Shanto Paul•130
    Submitted 2 months ago

    1 comment
  • Responsive product preview card component without media queries

    #accessibility#sass/scss

    Shanto Paul•130
    Submitted 3 months ago

    Even though it was a SASS project, it felt like I was just writing regular CSS. Is my code correct? Are there any improvements I could make in the SASS part or anything else I might have overlooked?


    1 comment
  • Responsive Omelette Recipe Page

    #accessibility

    Shanto Paul•130
    Submitted 3 months ago

    Nothing in particular. Any kind of feedback is appreciated :)


    1 comment
View more solutions

Latest comments

  • tortiman•270
    @tortiman
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Responsive design

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

    Responsive design

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

    Problems with the images in content: url() don't show in github

    Responsive design and javascript

    #accessibility
    1
    Shanto Paul•130
    @shantoopaul
    Posted about 1 month ago

    Good work!

  • Mohamed Mohamoud Elmorsy•420
    @mohamed8eo
    Submitted 5 months ago

    \

    1
    Shanto Paul•130
    @shantoopaul
    Posted about 1 month ago

    Good job on the solution! The UI looks matches the design given. Here are a few suggestions for improvement:

    HTML

    • Semantic structure is good, but consider using <article> for the card content.
    • Social media icons could be wrapped in <ul> for better accessibility.
    <ul>
     <li>
      <a href="/">(icon svg/img)</a>
     </li>
    ...
    </ul>
    

    CSS

    • Consider using rem/em instead of px for better responsiveness.

    JavaScript

    • Missing toggle-off functionality (clicking again should hide social media).

    Aside from these points, the structure and overall implementation looks great.

    Happy Coding 😊

  • P
    Atif Iqbal•3,320
    @atif-dev
    Submitted 4 months ago

    Responsive Testimonial Grid Section

    #accessibility#lighthouse
    1
    Shanto Paul•130
    @shantoopaul
    Posted 2 months ago

    Great job! The UI looks accurate, and your code is clean and well-organized.

    Does the solution include semantic HTML?

    • Each page should have only one <h1> to represent the main topic of the page. Here’s a suggested structure:
    <h1 class="visually-hidden">Testimonials Grid Section</h1> /* Visually hidden main heading for accessibility */
    ...
    <h2 class="username">Daniel Clifford</h2>
    <span class="edu-level">Verified Graduate</span>
    ...
    <h3 class="testimonial-brief testimonial-brief-daniel">I received a job offer mid-course,...</h3>
    
    • You can use this visually hidden class snippet to ensure the <h1> is accessible but not visible.

    • Also, consider wrapping the testimonial content in a <blockquote> for better semantic structure:

    <blockquote>
    <p class="testimonial-long testimonial-long-daniel">I was an EMT for many years before I joined the bootcamp...</p>
    </blockquote>
    

    Aside from those few things, the structure and everything else looks great.

    Happy Coding 😊

  • Gabriel Nunes•10
    @Gabnns
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of having learned Sass and being able to apply a good part of its features in this project. In addition to reviewing some CSS display grid concepts and how to organize the elements. Next time I would like to add other events using js, such as a modal when clicking on each card.

    Responsive grid with Sass

    #accessibility#sass/scss
    1
    Shanto Paul•130
    @shantoopaul
    Posted 2 months ago

    Great job! The solution looks closer to the design. I like how you added shadows to the cards.

    The desktop version looks good, but the mobile version needs some work. Decreasing the font size and padding around the card for the mobile version will make it look better. Also, the design uses the default image sizes for icons, so you should remove the width and height attributes from them.

    Overall, it looks good to me 😊

  • P
    meghapai•80
    @meghapai
    Submitted 3 months ago

    Product Preview card using HTML and SASS/SCSS

    #sass/scss
    1
    Shanto Paul•130
    @shantoopaul
    Posted 3 months ago

    Great job! Your solution is very close to the given design. One thing I can say is if you center the article it will look even better. Keep up the great work!

  • william-leao•10
    @william-leao
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Consegui acertar o (responsivo) de forma correta. mudaria o formato das informações.

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

    para alinhar a imagem de fundo. consegui superar baixando uma imagem com os tamanhos (Largura x Altura) adequada

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

    Gostaria de ajuda na parte do CSS, nao consigo evoluir muito nos layout. Gostaria de deixar a imagem proncipal (prato de omelete) redonda, mas não consegui.

    Pagina de receitas - apenas HTML e CSS

    #accessibility#axios
    1
    Shanto Paul•130
    @shantoopaul
    Posted 3 months ago

    Good job! I like how you are trying to customize the design to your linking 😊.

    To make the image round you need to give the image equal height and width and a border-radius: 50%. Something like the code below-

    .omelete .imagem-omelete {
        width: 300px;
        height: 300px;
        object-fit: cover; /* to maintain the aspect-ratio of the image */
        border-radius: 50%;
    }
    
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