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

Article preview component

@cas1092

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

i'm very proud of knowing i have the html/css part very controlled by now, adding java made me think a little bit more about the components on the design (now the button has more attributes) differently, i tried making all at once, creating all the styles and maybe, when working with javascript i should try going on parts, so i can get organized

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

the pop-up design, until now almost all my items/class/attributes had a relative position, this challenge requiered a absolute on the action, so that made me work extra hard. i went to the discord channel and to sleep and in the morning, with some distance, the solution was there (also match with the comments i got). maybe i should obssed too much when things aren't working

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

the javascript get me a little scared, in this case it wasn't that hard

Community feedback

@Gehad28

Posted

Nice work! Some comments:

  • You are displaying the card as flex, so you can use the property gap to make the gap between the rows equal: gap: 1rem;.

  • You also can center the card by giving the body a height height: 100vh; and align-content: center;. This will center the card vertically. Now give the card itself an auto margin and it will be centered horizontally!

Keep going! ☘️

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