Skip to content
OverviewSolutions
10
Comments
7
Ahmed Nafrawy
@Ahmed-Nafrawy

All comments

  • AymaneOnline•330
    @AymaneOnlineSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm currently on the learning path of Frontend Mentor and this challenge is very good when it comes to learning CSS Grid.

    I've also used lighthouse and got 100/100 overall score.

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

    The actual challenge was to figure out how to set the values of grid-column and grid-row correctly, it took me a bit of time but after few adjustments everything was good.

    testimonials-grid-section-main

    1
    Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 20 days ago

    Does the solution include semantic HTML? Yes

    Is it accessible, and what improvements could be made? Yes. Great work, but i believe that you should work more on the visual apperance the testimonial paragraph. use the opacity on the least important thing to read, in this situation the quotes, so change it if you want and also change the font-size a bit more

    Does the layout look good on a range of screen sizes? Yes

    Is the code well-structured, readable, and reusable? Yes

    Does the solution differ considerably from the design? No alot

    0
  • Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 21 days ago

    Does the solution include semantic HTML? Yes Is it accessible, and what improvements could be made? it's good but i believe the width of the cards should be modified a bit and the cards should be centered inside the container Does the layout look good on a range of screen sizes? Yes Is the code well-structured, readable, and reusable? Yes Does the solution differ considerably from the design? No

    0
  • Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 24 days ago

    Does the solution include semantic HTML? Yes it does, and great work btw but i have two concerns

    1. You should remove the attribution div and replace it with the footer (it will be much more better)
    2. I noticed you used only the desktop provided product image while the challenge provided you with one for the mobile view and the other for the desktop

    and to achieve that, there is a great trick using either html or css

    1. Using HTML >>> you should allow the browser to choose the suited image with respect to the width available for the card. and to achieve that you should use the follwing code : <picture> <source class="desktop--img" media="(min-width: 624px)" srcset="./images/image-product-desktop.jpg" /> <img class="card--img" src="./images/image-product-mobile.jpg" alt="Perfume" /> </picture> and this will let the browser choose form the image you provided

    2. Using CSS : this way is not adding neither the images inside html, instead using css like this background-image: url(./images/image-product-mobile.jpg) and style it as you want and in the larger screens you should change it the same way and choose the one that fits the browser width.

    Is it accessible, and what improvements could be made? Yes

    Does the layout look good on a range of screen sizes? Yes, but i think it will be more visually appealing if the button is centered in the mobile view as you did in the desktop preview

    Is the code well-structured, readable, and reusable? Yes

    Does the solution differ considerably from the design? No, not that much, just a one thing or two.

    Marked as helpful
    2
  • Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 25 days ago

    Does the solution include semantic HTML? yes Is it accessible, and what improvements could be made? yes it is Does the layout look good on a range of screen sizes? yes it does Is the code well-structured, readable, and reusable? yes Does the solution differ considerably from the design? it's good but i believe you should work more on the white spaces and how the design looks

    0
  • Łukasz Gwarda•160
    @lgwardaSubmitted 30 days ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of my ability to integrate accessibility best practices into the project. Ensuring that the profile card is usable for all individuals, including those with disabilities, was a key focus. Additionally, I successfully implemented a responsive design that adapts seamlessly across different devices, showcasing my skills in creating user-friendly interfaces.

    Next time, I would like to explore adding more interactive elements using JavaScript to enhance user engagement and make the profile card more dynamic.

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

    • Challenge: Maintaining a consistent design throughout the project was challenging, especially when iterating on styles.

    • Solution: I created a style guide with defined variables for colors, fonts, and spacing, which helped me maintain consistency as I developed the project further. Regularly referencing this guide ensured I stayed on track.

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

    I’d appreciate feedback on my CSS media queries and any suggestions for improving the responsiveness of the layout. Are there any best practices or techniques I might be missing?

    I’m looking for feedback on how I’ve structured my CSS and HTML files. Are there any tips for improving organization and maintainability, particularly when it comes to naming conventions or file structure?

    Social links profile

    1
    Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 27 days ago

    Does the solution include semantic HTML? Yes

    Is it accessible, and what improvements could be made? Yes

    Does the layout look good on a range of screen sizes? Yes

    Is the code well-structured, readable, and reusable? Yes

    Does the solution differ considerably from the design? Yes

    0
  • Anahsqi•50
    @AnahsqiSubmitted 30 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully implementing a responsive design that adapts seamlessly from mobile to desktop views while maintaining accessibility standards. I effectively utilized CSS techniques, such as Flexbox and media queries, to ensure a user-friendly interface.Furthermore, I would incorporate more accessibility testing tools throughout the development phase to catch any issues earlier and ensure a more inclusive user experience.

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

    I struggled with consistent spacing and alignment across different screen sizes. I adopted a mobile-first approach and used media queries to address layout issues early in the process.

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

    I would like assistance with the following specific areas of my project:

    Advanced CSS Techniques: Guidance on incorporating more advanced CSS features, such as CSS Grid, to enhance layout flexibility and simplify styling.

    Accessibility Testing: Recommendations for tools or methods to improve accessibility testing throughout the development process to ensure compliance with WCAG standards.

    Performance Optimization: Tips on optimizing the performance of the project, particularly regarding loading times and overall user experience.

    User Experience Feedback: Suggestions for gathering user feedback to identify potential improvements in usability and design.

    Frontend Mentor - Blog preview card solution

    1
    Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 29 days ago

    Does the solution include semantic HTML?

    Yes it does

    Is it accessible, and what improvements could be made?

    Yes it is, i believe the spacing and the sizing should be improved a little to be more visually appealing

    Does the layout look good on a range of screen sizes?

    Yes i believe so

    Is the code well-structured, readable, and reusable?

    Yes it is

    Does the solution differ considerably from the design?

    No, no alot it is just the spacing

    0
  • Ahmed Nafrawy•150
    @Ahmed-NafrawyPosted 29 days ago

    It's a very good work and well done for the job

    first of, you used sementic html ofcoarse but i believe it will be alot better if you created a new CSS file and add the syles inside it to be more clean and to avoid frustration inside the code

    it is accessible yeah but i think it will be visually better if the background-color is applied to the whole body instead of creating a new div element

    and overall it is very good job

    0