Skip to content
OverviewSolutions
7
Comments
11
P
Deepa Subramanian
@sdkdeepa

All comments

  • P
    Deepa Subramanian•200
    @sdkdeepa
    1. 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
    2. Use "alt" for images to make it accessible
    3. The image is not responsive for mobile and the image overflows.

    Resources:

    • https://utopia.fyi/
    • https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
    1. For error message you can use css to display: none; using the class name.

    Good luck! you are in the right track.

  • P
    Deepa Subramanian•200
    @sdkdeepa
    1. semantic HTML
    2. some of the images are have blank alt text
    3. Layout looks good!
    4. Very well structured
    5. Solution matches the design

    Nice work!

  • P
    Deepa Subramanian•200
    @sdkdeepa

    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 helpful
  • Ohazulike Stanley•220
    @Gentlestan
    What 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.

    Testimonial Grid Project

    2
    P
    Deepa Subramanian•200
    @sdkdeepa

    Great effort! Could match the design

    1. Instead of <header> and <footer> for each testimonial, you could try just with <section>.
    2. The background does not not match the design [var(--light-grayish-blue)].
    3. The page is responsive however does not match the design
    4. The image bg-pattern-quotation.svg missing.
    5. Also verify the font weight and colors inside the footer and section.
    6. Check out - https://gridbyexample.com/patterns/

    Hope this help!

    Marked as helpful
  • Sara•160
    @saruuja
    What 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
    What challenges did you encounter, and how did you overcome them?

    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

    Testimonials Grid Section (CSS Grid)

    2
    P
    Deepa Subramanian•200
    @sdkdeepa

    The 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 helpful
  • P
    Deepa Subramanian•200
    @sdkdeepa

    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 👏!

  • P
    Mateoyy•90
    @Mateoyy
    What 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

    four-card-feature-section-master

    1
    P
    Deepa Subramanian•200
    @sdkdeepa

    Looks great on desktop. However, the header is not visible in mobile view. Make changes to the media query for smaller devices.

    Marked as helpful
  • P
    Deepa Subramanian•200
    @sdkdeepa

    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 body and card. I hope this is helpful. Good resource: https://web.dev/learn/design/responsive-images

  • Opeyemi Eniola•410
    @Enisco29
    What 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

    Responsive recipe page using HTML and CSS

    1
    P
    Deepa Subramanian•200
    @sdkdeepa

    Add 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.

  • P
    Deepa Subramanian•200
    @sdkdeepa

    Nice!

  • Luthfi•110
    @kankaGate
    What 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

    Blog Card css flex

    1
    P
    Deepa Subramanian•200
    @sdkdeepa

    Looks good! If you can change the text color for "HTML & CSS Foundations" it would exactly match the design spec. Nice job, though!