DEV Community

Suhani Shaikh
Suhani Shaikh

Posted on

4 3 4 4 3

frontend challenge complete

What I Built

I created a clean and neat winter-themed design by styling an HTML page using CSS. The goal was to enhance the page’s appearance while keeping it visually appealing, responsive, and well-organized. By applying modern CSS techniques, I made sure the page looks polished and cohesive, perfectly capturing the essence of the winter season.

Demo

You can view the live project here

Journey

What I Learned

  1. CSS Best Practices

    • How to structure reusable and modular CSS styles while avoiding redundancy.
    • Experimented with modern design techniques like gradients, hover effects, and responsive layouts.
  2. Semantic HTML

    • Improved semantic structure using appropriate tags to ensure accessibility and maintain SEO-friendly markup.
  3. Responsive Design

    • Learned how to use media queries effectively to make the page adapt beautifully to different screen sizes.
  4. User Experience

    • Focused on improving readability with appropriate font sizes, color contrasts, and line spacing to enhance UX.

Challenges

  • Debugging overlapping elements in smaller screen sizes.
  • Optimizing the design for both aesthetics and performance.

Proud Achievements

  • The final design blends aesthetics and functionality while being lightweight and accessible.
  • Successfully implemented a card-style grid layout with hover effects that make the design dynamic.

What’s Next

  • Explore JavaScript-based animations or transitions to add interactivity.
  • Get feedback from peers and incorporate improvements based on user experience.
  • Build more such themed projects to expand my creative and technical skills.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more