Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 1 year ago

Blog Preview

VANI MITTAL•160
@vanimittal1304
A solution to the Testimonials grid section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I'm proud of how far I've come in understanding and applying CSS. Each project I work on helps me improve my skills, and seeing tangible progress is rewarding. Next time, I would aim to plan my projects more thoroughly from the outset, considering potential challenges and solutions in advance. This proactive approach would likely lead to smoother development processes and more polished final products.

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

Encountering challenges in web development is common, and overcoming them often involves a combination of research, experimentation, and persistence.

Making Grid: Grid layouts can be tricky to implement, especially when dealing with complex structures. To overcome this challenge, I first ensured a clear understanding of CSS grid properties and how they interact. Then, I broke down the layout into smaller components and tackled them one at a time, testing and adjusting as needed until achieving the desired grid structure. Media Queries: Media queries are essential for creating responsive designs that adapt to different screen sizes. To overcome difficulties with media queries, I referenced documentation and tutorials to understand the syntax and usage effectively. I experimented with various breakpoints and tested the layout across different devices to ensure responsiveness. Background Design of First Div: Implementing a background design, especially with opacity, requires careful consideration of CSS properties. To address this challenge, I experimented with background colors, gradients, and opacity settings to achieve the desired effect. I also adjusted z-index values to ensure proper layering of elements. Unsolved Challenges: Some challenges may require further research or troubleshooting. If the background design and media queries are still unresolved, I would revisit the CSS code, double-checking syntax and property values. Additionally, seeking assistance from online communities or forums can provide valuable insights and solutions from experienced developers.

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

For assistance with the media query section of your project, please provide more specific details about the issues you're encountering or the changes you'd like to make. Are you having trouble with the syntax, the responsiveness of elements, or achieving a specific layout at different screen sizes? Providing more context will help me offer targeted guidance or solutions.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on VANI MITTAL's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.