Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive landing using display flex

@Ashutosh-Neupane

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Many are proud of the innovative solutions or creative ideas they’ve developed, whether in design, problem-solving, or unique approaches to challenges. Better planning and preparation can help avoid pitfalls and improve efficiency. This might include more thorough research or setting clearer goals.

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

Problem: The hover effect on the h1 inside the .card and the zoom effect on the .illustration-article might not be functioning as expected.

Possible Solutions:

Check Specificity: Ensure that the CSS selectors are specific enough and not being overridden by other styles. Verify CSS Linking: Confirm that the CSS file is correctly linked and loaded by the browser. Inspect with DevTools: Use browser developer tools to inspect the element and check if the styles are applied correctly.

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

I’d like help with optimizing the responsiveness and visual appeal of my project, ensuring smooth and effective hover and transition effects, and improving performance by optimizing images and refining code. Additionally, I need assistance with enhancing accessibility, ensuring cross-browser compatibility, and managing deployment to ensure a seamless and user-friendly experience.

Community feedback

P
Nico 330

@Nico243

Posted

Everything looks great and well put together!

Instead of using divs you might want to use the following that gave me more structure and helped me save time: (Semantic Elements)

<body> <main> <article> <header>
  </header>
  <section>
    <p></p>
    <p></p>
    <h1></h1>
    <p></p>
    <footer>
      
    </footer>
  </section>
</article>
</main>

It helps me with preperation planning and executation!

Good job

0

Please log in to post a comment

Log in with GitHub
Discord logo

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