Skip to content
OverviewSolutions
7
Comments
11
P

Deepa Subramanian

@sdkdeepaSan Francisco Bay Area200 points

Enjoy coding, full stack development, cloud technologies, content writing, painting and coffee!

Latest solutions

View more solutions

Latest comments

  • P
    Deepa Subramanian•200
    @sdkdeepaPosted 2 months ago
    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.

    0
  • P
    Deepa Subramanian•200
    @sdkdeepaPosted 2 months ago
    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!

    0
  • P
    Deepa Subramanian•200
    @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 helpful
    0
  • Ohazulike Stanley•220
    @GentlestanSubmitted 3 months ago
    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
    @sdkdeepaPosted 3 months ago

    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
    0
  • Sara•160
    @saruujaSubmitted 3 months ago
    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
    @sdkdeepaPosted 3 months ago

    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
    0
  • P
    Deepa Subramanian•200
    @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
View more comments