Maulid Fajar• 10
@MaulidFajar
Submitted
Ahmed Nafrawy
@Ahmed-Nafrawy
All comments
- Ahmed Nafrawy• 70
@Ahmed-Nafrawy
Posted
Does the solution include semantic HTML? Yes it does, and great work btw but i have two concerns
- You should remove the attribution div and replace it with the footer (it will be much more better)
- 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
-
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 -
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.
2 - Tarun Kumar• 10
@tarunlkr6
Submitted
suggest me the better way of styling the different color of bullet points, spacing between them and attaching the font.
Ahmed Nafrawy• 70@Ahmed-Nafrawy
Posted
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• 60
@lgwarda
Submitted
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?
Ahmed Nafrawy• 70@Ahmed-Nafrawy
Posted
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
@Anahsqi
Submitted
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.
Ahmed Nafrawy• 70@Ahmed-Nafrawy
Posted
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 - MAALEJNour• 10
@MAALEJNour
Submitted
Ahmed Nafrawy• 70@Ahmed-Nafrawy
Posted
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
