Skip to content
Submitted 8 months ago

Testimonials section using grid

George Kandelaki•610
@GeorgeKandelaki
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of learning how to use grid and that compliting this challange.

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

I encounterd many challanges about grid. It was really hard to understand grid, I am still trying to understand grid better but for now it is really hard and also centering the content was one of the problems. This challange needed simple grid skills so I did it.

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

Other than that I have no questions, But Please Give me FeedBacks and suggestions. tell me about my mistakes In the code. Also what can be written better in the code, So I can get better at coding and improve my skills. Thanks!

Community feedback

  • Monika K•200
    @Monika-2509Posted 8 months ago

    Congratulations on achieving by finding the better solution despite facing challenges along the way! Your perseverance and dedication have led you to overcome obstacles and accomplish your goals.

    Aiming to become strong in CSS Grid:

    1. Understanding Grid Fundamentals: Learn about grid containers and grid items: Understand the basic structure of CSS Grid layouts where elements are placed inside a container that has been defined as a grid.
      • grasp the concept of rows and columns: Get familiar with the grid's row and column structure, and how elements are placed within these tracks.
      • Explore basic properties: Start with properties like display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row, etc., to define the grid structure and place items within it.

    2Mastering Grid Properties:

    • Dive into advanced properties: Learn about properties such as grid-template-areas, grid-gap, justify-items, align-items, justify-content, align-content, etc., to fine-tune the layout and alignment of grid items.
    • Understand flexible sizing: Explore units like fr (fractional unit) and minmax() for creating flexible layouts that adapt to various screen sizes.
    • Experiment with auto-placement: Utilize grid-auto-flow to control how items are automatically placed within the grid, either in rows or columns, and how they behave when the grid container size changes.

    3.Creating Responsive Layouts:

    • Practice responsive design: Learn how to create responsive layouts using media queries alongside CSS Grid. Use features like auto-fill, auto-fit, and minmax () to create grids that adapt to different screen sizes.
    • Explore nested grids: Understand how to nest grids within grids to create more complex layouts while maintaining flexibility and responsiveness.
    • Experiment with combining Grid and Flexbox: Understand the strengths of both layout systems and learn how to combine them effectively to build more versatile and intricate layouts.

    By focusing on these, you'll develop a strong foundation in CSS Grid concepts and be well-equipped to create a wide range of layouts efficiently and responsively. Remember to practice regularly, experiment with different properties and techniques.

    Marked as helpful
    1
    George Kandelaki•610
    @GeorgeKandelakiPosted 8 months ago

    @Monika-2509 Thanks for guiding me how to learn CSS grid. I am very thanful.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord