@Belamana-HarshithaSubmitted 2 months ago
What specific areas of your project would you like help with?
I want help in the local storage method and the error while handling the email input
P
Deepa Subramanian
@sdkdeepaAll comments
- P@sdkdeepaPosted 2 months ago
- HTML is not semantic. Please use <main>, <section> etc to make it semantic. You can take a look at this : https://www.w3schools.com/html/html5_semantic_elements.asp
- Use "alt" for images to make it accessible
- The image is not responsive for mobile and the image overflows.
Resources:
- https://utopia.fyi/
- https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
- For error message you can use css to
display: none;using the class name.
Good luck! you are in the right track.
0 - @Soliha-AbdugafurovaSubmitted 7 months agoP@sdkdeepaPosted 2 months ago
- semantic HTML
- some of the images are have blank alt text
- Layout looks good!
- Very well structured
- Solution matches the design
Nice work!
0 - P@ericssonmuraSubmitted 3 months agoP@sdkdeepaPosted 3 months ago
Overall, great work! I loved how you used css for those numbers and great transitions too!
{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; color: var(--clr-slate-600); font-size: 16px; }Minor issue: alt descriptions are missing in couple of the images. Keep up the great work!
Marked as helpful0 - @GentlestanSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of how I was able to leverage the grid system to create a responsive layout for the testimonials. Through this project, I deepened my understanding of key grid properties like grid-template-columns, grid-column, grid-span, and how to rearrange or order grid items effectively. Additionally, I gained valuable insights into semantic HTML and using meaningful CSS class names, making the code both cleaner and more readable.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was determining the best way to organize the grid layout to ensure responsiveness. The initial arrangement didn’t look good on smaller screens, and it took some time to refine the layout so it displayed correctly across devices. I solved this by using media queries and experimenting with different grid settings to ensure that the layout adjusted as expected on larger screens. I also encountered some issues with aligning text and images, which I resolved by adjusting padding and margins.
Another challenge was ensuring that the project was properly structured in terms of semantic HTML. This was a learning curve, but I solved it by reviewing best practices for semantic elements and ensuring I used appropriate tags such as <header>, <section>, and <footer>.
What specific areas of your project would you like help with?Advanced Grid Techniques: I'd love to explore more advanced grid concepts, like creating more complex layouts and using grid areas for more intricate designs.
Accessibility: Mentorship on how to improve accessibility further, ensuring that this project can be fully usable for all users, especially those with disabilities.
P@sdkdeepaPosted 3 months agoGreat effort! Could match the design
- Instead of <header> and <footer> for each testimonial, you could try just with <section>.
- The background does not not match the design [var(--light-grayish-blue)].
- The page is responsive however does not match the design
- The image
bg-pattern-quotation.svgmissing. - Also verify the font weight and colors inside the footer and section.
- Check out - https://gridbyexample.com/patterns/
Hope this help!
Marked as helpful0 - @saruujaSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
- Taking the challenge and how I feel on the first day so far are very different,
- How I deal with CSS grids and how I now enjoy using responsive grid layouts,
- I'm just pushing to improve my skills
I haven't faced many challenges so far the latest CSS Grid course on wesbos.com website has helped me a lot
What specific areas of your project would you like help with?I will take any feedback as an opportunity to improve my code
P@sdkdeepaPosted 3 months agoThe page is responsive, however the cards are not in the same order as the design. The <p> color is black. The design has light gray color. Also, the bg-pattern-quotation.svg is not loading.
Refer to https://www.w3schools.com/cssref/pr_grid-template-columns.php https://www.w3schools.com/cssref/pr_grid-template-rows.php
You are almost there if you fix these. You got this!
Marked as helpful0 - @gauravk2203Submitted 3 months agoP@sdkdeepaPosted 3 months ago
Can you change the background color to match the design? Also, in a real world scenario, the styles are usually in a separate file.
Rest all looks good. Great job 👏!
0 - P@MateoyySubmitted 3 months agoWhat challenges did you encounter, and how did you overcome them?
Pierwszy raz używałem GRID, ale wydaje się to super narzędzie do dokładnego ustawiania elementów
P@sdkdeepaPosted 3 months agoLooks great on desktop. However, the header is not visible in mobile view. Make changes to the media query for smaller devices.
Marked as helpful0 - @PineappleUFOSubmitted 3 months agoP@sdkdeepaPosted 3 months ago
Semantic and accessible code. However, the layout does not match the design.
Please make changes to styling so that it could match the design.Try tweaking the
bodyandcard. I hope this is helpful. Good resource: https://web.dev/learn/design/responsive-images0 - @Enisco29Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the UI
What challenges did you encounter, and how did you overcome them?I had problem with the footer section
P@sdkdeepaPosted 3 months agoAdd some accessibility to img tag : https://help.siteimprove.com/support/solutions/articles/80000863904-accessibility-image-alt-text-best-practices
Almost matching to the design however, The colors of the ellipsis and bolded texts on the lists does not match. You need to read upon pseudo elements(mark and after) for styling those ellipsis and bolded texts on the lists. Once you figure out for preparation, it was be easy to for ingredients and instruction section. The real challenge in this project.
0 - @IambernySubmitted 3 months ago
- @kankaGateSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I can implement responsive design on code
What challenges did you encounter, and how did you overcome them?acomodate the mobile from desktop. learned media query
What specific areas of your project would you like help with?Please give sugestion on semantic HTML and more effective way on styling it
P@sdkdeepaPosted 3 months agoLooks good! If you can change the text color for "HTML & CSS Foundations" it would exactly match the design spec. Nice job, though!
0
