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

Vadim

@hukvadimUkraine20 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

  • Blog preview card


    Vadim•20
    Submitted 10 months ago

    1 comment
  • QR code component


    Vadim•20
    Submitted 10 months ago

    1 comment

Latest comments

  • sunettom•50
    @sunettom
    Submitted 10 months ago

    blog-card-challenge

    1
    Vadim•20
    @hukvadim
    Posted 10 months ago
    1. Semantic HTML Strengths: The solution mostly uses semantic elements (button, p, div), but there are areas for improvement. Improvements: Consider using semantic HTML tags like article, header, footer, or section to better structure the content. Replace <div class="logo"> with a <figure> or <footer> if it represents the author section.
    <p> is appropriate for paragraphs, but avoid inline styles for accessibility and maintainability. 2. Accessibility Strengths: Language (lang="en") is correctly set. The viewport meta tag is present, which helps with responsiveness on mobile devices. Improvements: Add alt text to the images (img tag) for screen readers. The button should be more descriptive (e.g., <button aria-label="Learning Article">Learning</button>). Use relative font units like em or rem instead of absolute px values for better accessibility. Ensure color contrast is sufficient for readability (black text on a yellow background could be checked for contrast ratios). 3. Responsive Layout Strengths: The meta viewport tag helps with responsiveness. Flexible elements like p with controlled width (width:320px) help with managing layouts. Improvements: Ensure that the layout adapts well to different screen sizes, especially mobile. For example, use media queries in CSS to adjust the text size, button, and image placement for smaller screens. Avoid fixed widths like width: 320px for p elements, which can cause issues on smaller screens. Instead, use percentages or relative units (max-width: 100%). 4. Code Structure, Readability, and Reusability Strengths: The code is relatively clean and uses classes effectively. Improvements: Remove inline styles (like style="font-weight: 500; color:black;") and move them to the external CSS file for maintainability and reusability. Use more meaningful class names. For example, instead of bg-card, use something like card-background or card-container. Organize the CSS to follow the DRY principle (Don't Repeat Yourself) by grouping similar styles. Add comments where necessary to make the structure more understandable to other developers. 5. Design Consistency Strengths: The design seems visually appealing with consistent colors and spacing. Improvements: Ensure the final implementation follows the design exactly, especially on responsive breakpoints. Some spacing and size adjustments may be needed to maintain the design across screen sizes. Check font sizing for headers (<p style="font-weight:800; font-size:20px;">) and ensure it aligns with the design expectations. Overall, the solution uses a reasonable structure but could benefit from more semantic HTML, accessibility improvements, and better responsiveness across screen sizes. The code can also be refined for reusability and maintainability.
  • zee•380
    @zeenox-stack
    Submitted 10 months ago

    QR code project

    2
    Vadim•20
    @hukvadim
    Posted 10 months ago

    The styles are good, but for some reason the zoom is in the page and the card is smaller than it should be. I think the problem is in specifying the width and height of the body. If you remove the width and height from the body, everything should be fine.

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