All comments

• 

  Néstor•60

  @nesc11Submitted 9 months ago

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

  I think the way to approach the challenge is good, I mean that the mobile-first workflow helps a lot of in gradually adding just the necessary styles and preventing it from becoming a huge css file. For the next time I will try to declare more utilities classes because I think they are useful for larger projects.

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

  The naming of the classes for HTML tags is always a problem for me, because I feel like I need to return to HTML file a lot of times just to remember the names, so I just declared the names based of what I see on the card.

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

  I think that I need help on the images, because the document is always loading both, the desktop and the mobile images, I just declare a media query to display the desktop image and hide the mobile image on larger screens, but I don't think this is the right approach.

  

  Responsive product card component using CSS Grid and Flexbox

  2

  60
  

  MarieG41•210

  @MarieG41Posted 9 months ago

  Nice job your solution is almost identical to the design !!

  1
• 

  DayaA•100

  @AishaakinSubmitted 9 months ago

  1. How do i make the error-icon and warning text appear when wrong email is inputed despite still adding a JavaScript code for that.
  2. How do i make the email placeholder pink.
  3. The image length is not in full length, despite I added min-height to 100%.
  4. Why is my image and brand-icon not showing up.

  

  A Email Input Page

  1

  40
  

  MarieG41•210

  @MarieG41Posted 9 months ago

  .hero .hero-paragraph input::placeholder { color: var(--desaturated-red);}

  • You need to select your input and ::placeholder to modify the place holder.
  • Add an addEventListener on the btn make the image appear when the button is clicked error.style.display = 'block'; for the error icon for example.

  0