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 card using Flexbox and Media query

@CarolinaCiolin

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

It was my first time using a media query and I got a satisfactory result.

Community feedback

@R3ygoski

Posted

Hallo again Carolina, congratulations on completing another project, it turned out very well.

I noticed here that you didn't use JS, this project requires JS to do the fetch and refetch of data to generate a new advice each time, so this leaves the project incomplete. But of course, it's fine to post JS projects without having done that part of the JS logic. However, I would like to suggest that you practice with challenges that only use HTML and CSS, as they are generally better for introducing this part of working with responsiveness. In particular, I recommend this one: Recipe page. If you choose to do it, a tip: start by making it mobile-first.

And a tip regarding the HTML: it is well-structured and semantic, but there is a part that ended up not being semantic, which is this <div class="advice-box">. The more semantic tag to use here would be <article>, because this <div> has self-explanatory and independent content.

Once again, congratulations on completing the project and making progress in your studies. Keep practicing and improving. If you have any questions, you know, just comment below and I will try to help as best as I can.

Marked as helpful

0

@CarolinaCiolin

Posted

Hi and thank you for your comment.

I am taking a course and I haven't gotten to the JS part yet, so the teachers advised us to complete this challenge using only HTML and CSS. I decided to upload the challenge here, but I didn't notice that the challenge requires JavaScript.

Regarding the article tag, I thought it had a different purpose, so I think I should learn more about it.

1

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