All comments

• 

  Fatima Abid• 110

  @fatemzh

  Submitted about 1 month ago

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

  I am most proud of how I successfully managed the visibility and display of elements across different screen sizes (desktop, tablet, phone) with a mobile first approach. This project has really helped me get comfortable with manipulating display and visibility properties to create a responsive design that adapts well to various devices. However, if I were to do this project again, I would explore more efficient ways to handle responsive design, possibly by using more advanced CSS techniques like CSS Grid or Flexbox combined with CSS media queries. This might help streamline the process and reduce the amount of conditional logic required for different screen sizes.

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

  One of the main challenges I encountered was juggling between what should be displayed or hidden depending on the format (desktop, tablet, phone). It was tricky to ensure that each element appeared as expected on each device without conflicting with the layout or user experience. I overcame this by carefully managing the display and visibility properties in my CSS and thoroughly testing the design on multiple devices to ensure everything worked smoothly. Although I feel there's a simpler way to achieve this, I'm satisfied with how this approach got me used to handling responsive elements.

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

  I'm having trouble understanding why, when I initially open the page in desktop mode, the image meant for mobile mode is sometimes displayed. However, when I refresh the page, the image disappears as it should. This behavior seems random—sometimes the image is there, and other times it isn't. I can't figure out what's causing this inconsistency. Also, I do hope that next time I will be able to finish the project faster by applying more efficient design techniques that I've learned from this experience. My goal is to continue improving my speed and efficiency in future projects.

  

  Newsletter Sign-up Form with Success Message

  1

  10

  

  P

  teempe• 590

  @teempe

  Posted about 1 month ago

  Your HTML code is well-structured, with effective use of semantic elements. You're clearly on the right track! I have a few suggestions that could help you further improve your skills.

  First, while your form is properly labeled, which aids accessibility, the id for the email input (email-address) and its corresponding label (for="email") don’t match—correcting this will ensure proper screen reader functionality.

  Consider using the <picture> element to provide alternative versions of images for different screen sizes, which enhances responsiveness (see MDN documentation).

  Also, re-evaluate the necessity of wrapping single images in <section> tags. Use <section> only when there’s a clear need for grouping content. For a single image, a <div> might suffice, or it may not need wrapping at all.

  Regarding styling, be cautious with font size changes in media queries, as too many variations can affect readability. A consistent scale is generally more user-friendly. Additionally, creating reusable classes, such as for buttons, can improve both maintenance and readability of your CSS.

  These are just a few areas to consider. Overall, you're doing great—keep up the good work!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Mario Christofell• 180

  @mariotbg11

  Submitted 5 months ago

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

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

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

  

  Article preview component solution

  1

  10

  

  P

  teempe• 590

  @teempe

  Posted 5 months ago

  Hi there,

  Great job on your solution! I really appreciate the effort you've put into crafting it. While reviewing, I noticed that the responsiveness could be enhanced to improve user experience across different devices. Keep up the fantastic work!

  Best regards :)

  0
• 

  Natalia De Jager• 10

  @NataliaDeJager

  Submitted about 1 year ago

  Hey there! Here's my solution to the challenge c:

  Is there a way to write the background-color in css that is written with HSLA, using the :root variables but also adding the given opacity to that color?

  Any help/feedback is appreciated!

  

  Interactive-rating-components challenge HTML CSS JS

  1

  60

  

  P

  teempe• 590

  @teempe

  Posted about 1 year ago

  Hi :) I do not think you could change alpha for once defined color. You can manipulate with custom values of opacity, but you need to define your variables as values passed to hsl() function. See example below.

  :root {
    --bg-color: 0, 0%, 0%;
    --opacity: 50%;
  }
  
  div {
    background-color: hsla(var(--bg-color), var(--opacity));
  }
  

  Hope it helps... a bit at least ;)

  Marked as helpful

  0
• 

  BryanCarlos• 80

  @BryanCarlos

  Submitted about 1 year ago

  That's my first project done all by myself using JS.

  It was really hard to do the JS script because everything I did before, I was just copying a code from YT. I always try do read the code a few times so I can explain easily to someone.

  If you have any suggestion how to improve my skill, feel free to comment!

  

  Interactive Rating Component

  1

  30

  

  P

  teempe• 590

  @teempe

  Posted about 1 year ago

  Hi, clever attempt to this challenge. You may try to use form instead of bunch of buttons, and then handle submit event on it. It could make html a bit cleaner. You may check my solution if it helps: https://github.com/teempe/frontend-mentor-interactive-rating-component Keep up coding :)

  1