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

FrontEndExplorer-Temp

@FrontEndExplorer-Temp70 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

  • Product Preview Card Component


    FrontEndExplorer-Temp•70
    Submitted 3 months ago

    The most challenging part was ensuring the images loaded correctly across devices. By using srcset and sizes, I overcame this by specifying different image sizes for various screen widths, which optimized the page load time.


    1 comment
  • Responsive Recipe Page Using CSS Grid


    FrontEndExplorer-Temp•70
    Submitted 4 months ago

    1 comment
  • Responsive Social Links Profile Card - Frontend Mentor


    FrontEndExplorer-Temp•70
    Submitted 4 months ago

    1 comment
  • Blog Preview Card Using HTML & CSS

    #accessibility

    FrontEndExplorer-Temp•70
    Submitted 4 months ago

    1 comment
  • QR Code component using HTML, CSS.


    FrontEndExplorer-Temp•70
    Submitted 4 months ago

    Be specific when asking for feedback:- Highlight areas like:- Responsiveness: "Are there any issues in how the layout adapts to different screen sizes?" Design match: "Does the final result align well with the original design specification?"


    2 comments

Latest comments

  • Thiago de Oliveira Santos•130
    @smuhanerd
    Submitted 3 months ago

    Preview Card Using CSS

    1
    FrontEndExplorer-Temp•70
    @FrontEndExplorer-Temp
    Posted 3 months ago

    It needs to have an aligned center vertically.

    Marked as helpful
  • AqsaRani22•230
    @AqsaRani22
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    ALL IS GOOD

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

    ALL IS GOOD

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

    ALL IS GOOD

    simple Omelette recipe

    1
    FrontEndExplorer-Temp•70
    @FrontEndExplorer-Temp
    Posted 4 months ago

    You might consider adding additional padding to the top and bottom for better spacing. Increasing the font weight could enhance visibility and emphasis. Overall, though, it's a solid and well-executed design!

  • P
    Kyle Mulqueen•400
    @kmulqueen
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of creating a clean, accessible solution that maintains proper semantic HTML structure while achieving the desired visual design. Using appropriate HTML elements like unordered lists for the social links while styling away the bullet points helped me keep the code both semantically meaningful and visually appealing.

    For future projects, I would:

    • Start with a more detailed plan for my CSS organization
    • Implement a more structured naming convention like BEM from the beginning
    • Take more time to document my code as I go, rather than after completion
    What challenges did you encounter, and how did you overcome them?
    1. Styling links without losing accessibility: Initially, I struggled with removing the default styling of anchor tags while ensuring they remained accessible. I overcame this by researching best practices for accessible link styling, which led me to maintain proper focus states and hover effects.

    2. Creating consistent spacing across devices: Getting the spacing to look consistent on both mobile and desktop views required more adjustments than I initially expected. I solved this by adopting a more systematic approach to spacing with consistent CSS custom properties for margin and padding values.

    3. Maintaining semantic structure: I wanted to use a list for the social links, but didn't want the bullet points. Learning how to properly remove list styling while preserving the semantic structure helped me overcome this issue.

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

    I would appreciate feedback on:

    1. Accessibility: Are there any ways I could improve the accessibility of my social links? Is my current approach with unstyled but semantic lists and links following best practices?

    2. Responsive design: Does my solution maintain proper proportions across different screen sizes? Are there any breakpoints I should add or adjust?

    3. CSS organization: I tried to keep my CSS organized, but I wonder if there are better ways to structure it. Would a methodology like BEM have been beneficial for this project?

    4. Performance optimization: Are there any unnecessary CSS rules that could be removed or combined to improve loading performance?

    Social links profile using HTML & CSS

    1
    FrontEndExplorer-Temp•70
    @FrontEndExplorer-Temp
    Posted 4 months ago

    Your commitment to learning and improving shines through in this project. The attention to detail and effort you've put into responsive design and accessibility are truly commendable—great job!

  • Pravallika_M•20
    @PravallikaMyneni
    Submitted 4 months ago

    Card component with responsive design and hover event

    #accessibility
    1
    FrontEndExplorer-Temp•70
    @FrontEndExplorer-Temp
    Posted 4 months ago

    The overall design of the blog preview card is clean and visually appealing! The hover effects and box-shadow transitions add a nice interactive touch, and the use of CSS custom properties enhances maintainability.

    Suggestions for Improvement:

    Card Size: The current card looks great, but making it slightly larger could improve readability and give the content more breathing room. This adjustment could especially benefit users viewing on devices with higher resolutions.

    Responsiveness: Ensure the card design adapts perfectly across all screen sizes, particularly at smaller breakpoints. While the desktop and mobile widths are well-defined, testing for intermediate widths (like tablets) can enhance the user experience.

    Accessibility: Adding aria-labels or ensuring accessible focus states can improve usability for screen reader users and those navigating via keyboard.

    Design Variation: Consider experimenting with different layouts for the card to explore visual hierarchy, such as repositioning the image or author info to create a fresh perspective.

  • heydihenry•10
    @heydihenry
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Muchos conceptos los tenia claro y este desafió me ayudo a practicar un poco mas estos temas. Me gustaría organizar un poco mas el CSS

    QR code component using css

    2
    FrontEndExplorer-Temp•70
    @FrontEndExplorer-Temp
    Posted 4 months ago

    I’m proud of completing this project and deploying it successfully. I focused on using semantic HTML and ensuring accessibility, but I’d like feedback on improving responsiveness and optimizing CSS for better reusability. Let me know if there’s anything I could refine in terms of structure or design alignment.

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