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

persanu13

@persanu13120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • next.js, json , react

    #next#react

    persanu13•120
    Submitted 9 months ago

    0 comments
  • grid


    persanu13•120
    Submitted 11 months ago

    1 comment
  • Grid, flex-box


    persanu13•120
    Submitted 11 months ago

    1 comment
  • scss


    persanu13•120
    Submitted 11 months ago

    1 comment
  • media query,ul li


    persanu13•120
    Submitted 11 months ago

    1 comment
  • hover effect and media screen


    persanu13•120
    Submitted 11 months ago

    2 comments
View more solutions

Latest comments

  • anthony•170
    @Codingtry123
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    learn how to use scale to make the website more responsively

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

    assign the space using grid template do the calculation carefully

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

    when should I using relative unit for the length of container?

    responsive testimony grid section using html and css

    2
    persanu13•120
    @persanu13
    Posted 11 months ago

    Strengths: The solution considers layout adjustments for smaller screens, which is beneficial for accessibility. Improvements: Alt text for images: Make sure every image tag, like <img>, has an appropriate alt attribute describing the content of the image. This is essential for screen readers. Color Contrast: Ensure that the color contrast between text and background is sufficient for users with visual impairments. You can use tools like the WebAIM Color Contrast Checker to verify this. Focus States: Ensure that all interactive elements (e.g., links, buttons) have visible focus states, helping keyboard users navigate your content.

  • archana-singh12•150
    @archana-singh12
    Submitted 11 months ago

    Four card feature section

    1
    persanu13•120
    @persanu13
    Posted 11 months ago

    Semantic HTML: Ensure that the HTML structure is semantic and meaningful. Accessibility: Improve color contrast and consider font scalability for better accessibility. Layout: The layout is responsive for smaller screens, but additional media queries might be needed for other sizes. Code Quality: Maintain consistent units, avoid redundant styles, and use classes for reusable styles. Design Consistency: Address any inconsistencies in styles, such as multiple box-shadow definitions.

    Marked as helpful
  • João Pedro•80
    @joaodev134
    Submitted 11 months ago

    Product preview card component main using Media Queries and Flexbox

    1
    persanu13•120
    @persanu13
    Posted 11 months ago

    Evaluation: Based on the provided CSS, it's challenging to fully assess semantic HTML without seeing the HTML structure. However, ensuring the HTML markup uses semantic elements (like <header>, <nav>, <main>, <article>, <footer>, etc.) is crucial for accessibility and SEO. Feedback: If the HTML follows semantic practices, that’s excellent. If not, consider using semantic tags to improve document structure and accessibility. For example, <main> and <article> are used correctly, but ensure that other elements like images and sections are wrapped in appropriate semantic tags.

  • Akinmuleya Oluwatobi•40
    @Tobai24
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the new things i have learnt working on this project.

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

    I would say styling the list and the table but it was a fun experience overall.

    Recipe page using HTML and CSS

    2
    persanu13•120
    @persanu13
    Posted 11 months ago

    Positive: "Good job including descriptive alt attributes for your images. This ensures that users with screen readers can understand the content." Improvement: "Consider improving keyboard navigability by ensuring all interactive elements, like buttons and links, are accessible via the keyboard. Also, adding aria-labels to your icons would improve accessibility."

  • Salva•290
    @salva-it
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am very happy to finish the third challenge

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

    I used CSS Variables in this project and it was an interesting challenge to manage the colors part of the design

    social-links-profile-main

    1
    persanu13•120
    @persanu13
    Posted 11 months ago

    Observation: The code is generally responsive, with a media query that adjusts the .container width for screens up to 375px. Suggestion: Consider using max-width: 100%; for the .container instead of width: auto; in the media query to ensure it adapts well to very narrow screens. Improvement: The height: 100vh; on body could cause issues on mobile devices where the address bar is considered part of the viewport. Consider using min-height: 100vh; instead, which is more reliable.

  • Abdelwahab•150
    @Abdelwahab121221
    Submitted 11 months ago

    Simple project

    1
    persanu13•120
    @persanu13
    Posted 11 months ago

    Strengths: If the solution uses elements like <header>, <nav>, <main>, <article>, <section>, <footer>, etc., it is likely semantically sound. These elements provide meaningful structure to the page, making it more understandable for browsers, screen readers, and other assistive technologies. Improvements: If non-semantic elements like <div> or <span> are used excessively, consider replacing them with more appropriate semantic elements. For example, instead of using <div> for a navigation bar, use <nav>.

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