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

Suzunatsu

@st0272Japan130 points

Coding HTML/CSS/Javascript, Astro(personal use)

Latest solutions

  • Interactive rating component solution

    #accessibility

    Suzunatsu•130
    Submitted 4 months ago

    1 comment
  • NFT preview card component solution


    Suzunatsu•130
    Submitted 4 months ago

    1 comment
  • Testimonials grid section solution


    Suzunatsu•130
    Submitted 4 months ago

    0 comments
  • Four card feature section solution


    Suzunatsu•130
    Submitted 5 months ago

    0 comments
  • Article preview component solution


    Suzunatsu•130
    Submitted 8 months ago

    1 comment
  • Recipe page solution


    Suzunatsu•130
    Submitted 9 months ago

    1 comment
View more solutions

Latest comments

  • Kevin Arizaga•650
    @kevin344k
    Submitted about 2 years ago

    responsive design using js with scss

    #accessibility#sass/scss
    1
    Suzunatsu•130
    @st0272
    Posted 4 months ago

    Your HTML/CSS and JavaScript code is generally well-written, but there are a few areas for improvement:

    1. The design appears smaller than specified in the design file.
    2. The background color of the rating buttons in their hover and selected states, as well as the text color of the submit button, differ from the design file.
    3. The submit button is clickable before the user selects a rating. This can negatively impact accessibility.

    With a little more attention to detail, your work could be even better. Keep up the great work!

  • P
    toshirokubota•1,340
    @toshirokubota
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    I applied BEM methodology on my style. This was my first time to use BEM and I am not certain if I did it correctly.

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

    I appreciate any feedbacks on the design and style. In particular, I would like to know if I used BEM properly.

    nft-preview-card-component

    2
    Suzunatsu•130
    @st0272
    Posted 4 months ago

    Your HTML and CSS are well-structured and follow good practices. However, I have a few suggestions to improve efficiency.

    1. Use <img> Instead of CSS background-image
      The .hero image is an important piece of content, so it's better to use an <img> tag rather than the CSS background-image property.

    2. Use <p> Instead of <h2>
      The .content__caption element represents a description of the item. A <p> tag is more appropriate than an <h2> tag in this case.

    3. Enhance Accessibility for Clickable Elements
      This card element has a hover effect, so it should contain an <a> tag within a <main> tag for better accessibility.

    4. Unnecessary Part
      The sentence "Challenge by..." is unnecessary. Remove it or place it outside the card element.

    I hope my advice will be helpful for your coding. Keep up the good work!

    Marked as helpful
  • Synne Storm•470
    @synnestorm
    Submitted 4 months ago
    What specific areas of your project would you like help with?

    Feedback is very appreciated!

    Testimonials Grid Section using HTML and CSS

    1
    Suzunatsu•130
    @st0272
    Posted 4 months ago

    Your code is generally good. However, using the root-relative size unit (rem) is more desirable.

  • Jose Beltran•100
    @jose-beltran
    Submitted 5 months ago

    Responsive landing page using css flex

    1
    Suzunatsu•130
    @st0272
    Posted 5 months ago

    Your code is generally well-structured, but several issues and areas for improvement in terms of semantics, accessibility, and organization. Below is my opinion for improvement.

    Use of <p> for titles

    The <p> tag is used for headings like "Reliable, efficient delivery" and "Powered by Technology", which should be in <h1> and <h2> respectively for better semantics.

    Missing alt attributes in images

    The <img> tags have an empty alt="", which is not good for accessibility.

    Improper nesting of divs

    The content-cards-two div is nested inside the .content-cards but is structured inconsistently. It appears that all .card elements should be direct children of .content-cards for better alignment and flexibility. Using grid to style this four-card layout is efficient.

    I hope my advice will be helpful for your coding. Keep up the good work!

  • Erkant•780
    @erntTt94
    Submitted 8 months ago
    What specific areas of your project would you like help with?

    Any feedback appricated...

    Article Preview Component

    1
    Suzunatsu•130
    @st0272
    Posted 8 months ago

    Your JavaScript(React) code is well-written, but there are several areas for improvement in the HTML and CSS:

    1. The design is larger than specified in the design file.
    2. It's preferable to use class instead of id for styling and structure.
    3. The desktop design is incomplete. Wrap the image and content items in <div class="card"> and use display: flex or display: grid to align the items properly.

    I hope my advice will be helpful for your coding. Keep up the good work!

  • andreshinostroza•30
    @andreshinostroza
    Submitted 9 months ago

    Responsive social links with css flex

    2
    Suzunatsu•130
    @st0272
    Posted 9 months ago

    Your code is well-structured, but there are several points for improvement:

    1. Accuracy of Sizes

    • Font sizes: Each font size is 1 or 2 pixels larger than the design file.
    • Margin: The margin size for the text "London, United Kingdom" is slightly wider than expected.

    2. Unnecessary CSS Styles

    • h1 and h2 class bg-c: The principal class already applies the same background-color: var(--Gray-800), making this redundant.
    • enlace class: The cursor: pointer style is unnecessary since it is the default behavior for anchor (<a>) tags.

    I think it could be even better with a little more attention to detail. Keep up the good work!

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