Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
11
P
jeffgrahamcodes
@jeffgrahamcodes

All comments

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

    Because this exercise focus on HTML/CSSS, and I wanna jump to next lesson about react framework. So I need to input fake data to bypass

    Testing

    #react#next
    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 3 months ago

    Well played sir!

  • P
    gkilasonia•360
    @gkilasonia
    Submitted 6 months ago

    Meet landing page

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    The solution effectively uses semantic HTML elements such as <main>, <section>, and <footer>, providing a clear and meaningful structure to the page. This helps improve accessibility and makes the content more understandable for screen readers. However, using <header> for the top navigation and <article> for distinct content blocks, such as testimonials or features, could further enhance semantic clarity. Additionally, ensuring each image has meaningful alt text describing its content or purpose would improve accessibility for users relying on assistive technologies. The layout closely matches the design mockup and transitions well across various screen sizes. The use of CSS grid and flexbox ensures proper alignment and spacing, maintaining visual balance on both desktop and mobile views. However, tablet breakpoints could use additional attention to avoid awkward spacing or overly large elements. The hero section is particularly well-executed, but adding clear focus styles for buttons and links would enhance accessibility for keyboard and screen reader users. Structuring the CSS with reusable variables and adding comments to clarify sections could improve maintainability and readability. Overall, this is a strong and visually appealing implementation with minor opportunities for refinement. Great work!

    Marked as helpful
  • Jaca1x•120
    @Jaca7x
    Submitted 6 months ago

    Testimonials-grid-section

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    this solution demonstrates a strong use of semantic HTML, with well-organized <section> and <article> tags that structure the content logically. The headings are appropriately used, creating a clear hierarchy that enhances readability and accessibility. However, wrapping each testimonial in an <article> tag would further improve semantic clarity, as these are standalone pieces of content. Additionally, ensuring that all images include meaningful alt text would make the solution more accessible for screen readers.

    The layout closely matches the original design and performs well across different screen sizes. While CSS grid is a great choice for the testimonial cards, you might consider using flexbox to center the container holding the cards both vertically and horizontally. Overall, this is a well-executed project with minor opportunities for optimization. Great job!

    Marked as helpful
  • Nova•180
    @Soliha-Abdugafurova
    Submitted 9 months ago

    Responsive Saties with Css Grid

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    The solution effectively uses semantic HTML elements, such as <main> and <section>, to structure the content logically. The headings (<h1>, <h2>) are well-organized, creating a clear content hierarchy and improving the document’s navigability. However, wrapping each card in an <article> tag would provide additional semantic meaning, particularly as these sections represent standalone pieces of content. Adding a <header> or <footer> for attribution and overarching content could also enhance the page’s structure.

    The design closely matches the original mockup, with good attention to colors, typography, and spacing. The layout is responsive, adapting well across mobile and desktop screens. However, for improved accessibility, consider adding meaningful alt text to all images. For decorative images, alt="" can be used to ensure they are ignored by screen readers. The buttons or links on the cards could also benefit from clear focus states, enhancing usability for keyboard navigation. Overall, this is a strong solution with minor adjustments needed for accessibility and code semantics. Great job!

  • P
    Xay•240
    @xayrax88
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I would like to add more break points next time for different screen sizes since I just stuck to a smaller screen size of 375px, I would like to add tablet and laptop sized screens another time. I will come back and add those other features later as well as accesibility features.

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

    I had some sizing issues and had to go learn more in depth of the grid/row columns using the grid-template-area to further space out the boxes on the desktop version. I had some help looking up the resource online through MDN and chatGPT along the way had helped.

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

    I forgot to add the shadowing effect on each boxes as you'll notice the difference from mine and the original, I will go back and do that later but other than that, I am open to any feedback.

    responsive grid media query

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    This solution demonstrates a strong use of semantic HTML, with appropriate elements like <main> and <section> providing clear structure. The headings are well-organized, creating a logical content hierarchy that supports accessibility and readability. However, the solution could benefit from adding meaningful alt text to images to ensure screen readers can describe their purpose. For decorative images, using alt="" ensures they are ignored by assistive technologies, further enhancing accessibility. Additionally, wrapping individual card components in <article> tags could improve semantic clarity, as these sections represent standalone content.

    The layout is visually appealing and closely matches the design provided. It adapts well to different screen sizes, maintaining alignment and spacing across breakpoints. The CSS is generally well-structured, but adding more comments to clarify sections and consolidating shared styles into reusable variables could improve maintainability. Overall, this is a polished and well-executed solution with minor improvements needed for accessibility and code optimization. Great work!

    Marked as helpful
  • P
    Shawky Ahmed•370
    @QS3H
    Submitted 6 months ago

    Product preview card with flexbox and CSS grid

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    This solution demonstrates strong alignment with the design, with a clean and structured layout that adapts well across mobile and desktop screen sizes. The use of semantic HTML elements such as <article>, <picture>, and appropriate headings helps ensure content is well-organized and accessible. The CSS is well-structured, with effective use of flexbox for layout management and design tokens (e.g., variables for colors and typography) to improve maintainability. However, adding meaningful alt text to the product image would improve accessibility by providing context for screen readers. Additionally, the button could benefit from more defined focus and hover states to enhance interactivity for users navigating via keyboard or touch.

    The code could be further refined by grouping shared styles and adding more comments to clarify specific sections of the CSS. Overall, this is a well-executed solution that matches the design closely, with opportunities for small adjustments to enhance accessibility, interactivity, and scalability. Great work! 🚀

    Marked as helpful
  • Yamada MK•210
    @yamadaMk12
    Submitted 6 months ago

    recipe-page

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    This solution demonstrates strong use of semantic HTML, with appropriate elements like <article>, <section>, and <ul> contributing to a clear and structured layout. Headings are well-organized, creating a logical content hierarchy. However, adding meaningful alt text to the image in the <figure> element (e.g., “A plate of omelette with vegetables”) would improve accessibility for screen readers. Wrapping the main content in a <main> tag would further enhance semantic clarity, making it easier for assistive technologies to navigate the page. Additionally, tables could benefit from the use of <thead> and <tbody> to provide better structure and improve accessibility.

    The layout is visually appealing and responsive across different screen sizes, maintaining readability and alignment. The CSS appears organized, but adding more comments and centralizing reusable styles into variables (e.g., for colors, fonts, and spacing) could enhance maintainability. Overall, this is a well-executed solution with minor adjustments needed to refine accessibility and code reusability. Great job!

    Marked as helpful
  • Junior Godoy Ortega•130
    @JuniorGodoyOrtega
    Submitted 7 months ago

    Social Links Profile with Flexbox

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    Your solution demonstrates a solid foundation, with a clear effort to align the design closely with the original mockup. The layout is responsive and adapts well to different screen sizes, maintaining its structure and readability. The use of semantic HTML elements like <article> and <section> helps provide meaning to the content. However, to further enhance accessibility, adding descriptive alt text to images (e.g., “Portrait of Jessica Randall”) and ensuring buttons have clear aria-labels or descriptive text to explain their purpose would be valuable improvements. Additionally, implementing visible :focus styles for buttons can enhance usability for keyboard navigation.

    The CSS is organized and makes effective use of modern techniques like flexbox for alignment and responsiveness. However, consolidating repeated styles, such as those for buttons, into reusable classes would improve maintainability and reduce redundancy. Testing on ultra-small viewports (under 320px) could help refine spacing and padding for tighter layouts. The solution is very close to the original design, but slight adjustments to typography sizes and spacing could bring it even closer to pixel-perfect accuracy. Overall, this is a well-executed project with minor adjustments needed for accessibility and code optimization. Great job!

    Marked as helpful
  • Franco S.•20
    @FrancoSosaZ0206
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Although it took more time than I initially planned, I managed to start and end this project in just a day, for which I'm proud!

    I've also added a special anchor tag at the bottom of the challenge's page... Where will it take you? Don't worry, it's not a virus or anything malicious, it's actually a cool bonus I added to the project. You gotta check it out!

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

    I found it hard to CENTER. A. DIV. both vertically and horizontally. Luckily, I managed to get around it by doing some research on the internet. The display property really is a game changer.

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

    If you know some common mistakes or good practices I could benefit from, please do let me know!

    Social Links Profile | CUSTOMIZED!

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 6 months ago

    Your solution demonstrates strong use of semantic HTML, with well-structured elements like <article> and <section>, and proper use of headings for content hierarchy. The design closely matches the original mockup, with attention to typography, colors, and spacing, while hover and active states on buttons add interactivity. The layout is responsive and adapts well across various screen sizes, though slightly cramped spacing on very small viewports (under 320px) could be refined further with additional padding adjustments.

    To enhance accessibility, consider adding meaningful alt text to the profile image (e.g., “Portrait of Jessica Randall”) and aria-labels to buttons for screen reader clarity. Additionally, implementing clear :focus styles on buttons would improve keyboard navigation. The CSS is well-organized with custom properties, but adding comments and consolidating repeated styles for buttons into reusable classes would make it even more maintainable. Overall, this is a polished and thoughtfully executed solution with minor improvements needed to enhance accessibility and code reusability. Great work!

    Marked as helpful
  • Jair117•40
    @Jair117
    Submitted 7 months ago

    blog preview card with Flexbox

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 7 months ago

    Jair117’s solution demonstrates strong attention to detail, with effective use of semantic HTML, a clean layout, and well-organized CSS. The use of <section> and <article> tags provides clear structure, and flexbox ensures consistent alignment across different screen sizes. The design closely matches the Figma reference, with accurate spacing, colors, and typography. However, adding meaningful alt text to images, particularly the blog image and avatar, would improve accessibility. Additionally, wrapping the blog image in a <figure> tag could enhance semantic clarity.

    On smaller screens, the layout generally holds up well, but refining padding and margins for ultra-narrow viewports could further improve responsiveness. In the CSS, introducing more detailed comments and maintaining consistent naming conventions for class names would make the code even more readable and scalable. Lastly, focus styles on interactive elements (:focus-visible) could be more defined for better keyboard navigation. Overall, this is an impressive implementation with only minor adjustments needed to reach an even higher level of polish. Great work! 🚀

    Marked as helpful
  • FabioGoulart17•30
    @FabioGoulart17
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Fiquei feliz, em ter conseguido posicionar os elementos e deixar com o aspecto bem próximo do proposto neste desafio.

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

    Posicionamento é algo que deu um pouco de trabalho, mas com algumas pesquisas pela internet, foi possível solucionar.

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

    Apontamentos sobre técnicas de posicionamento, serão bem vindos.

    Utilizei apenas HTML, CSS, técnicas de flexbox e google fonts

    1
    P
    jeffgrahamcodes•260
    @jeffgrahamcodes
    Posted 7 months ago

    The solution demonstrates strong positioning techniques, particularly with the effective use of flexbox to center content and maintain a visually balanced layout across various screen sizes. The alignment of elements within the card, such as the QR code and text, is clean and precise, contributing to a polished and professional appearance. To make the design even more robust, slight adjustments to margins or padding could further enhance responsiveness on ultra-narrow screens. Overall, the positioning is thoughtfully implemented and works beautifully for both desktop and mobile views.

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

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