Bienvenue

Latest comments

• 

  Samuel Sylvester•330

  @Sylvester009Submitted 12 months ago

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

  Nothing really, still solidifying my position as a newbie.

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

  None at all

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

  For this project, None

  

  Responsive preview card using flexbox

  2

  70
  

  Bienvenue•220

  @bienvenudevPosted 12 months ago

  Hello!

  Well done, here are some things I notice that you may need to change/add:

  • You should always have a main tag in your body
  • I'm getting some horizontal scrolling
  • Media queries must always be defined in rem or em not px
  • It's better for performance to link fonts in the html head instead of css imports
  • Font size must never ever be in px (https://fedmentor.dev/posts/font-size-px/)
  • Always include a full modern css reset at the start of the styles to provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)

  Additional resource:

  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

  I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

  Happy Coding!

  1
• 

  Omowunmi Kamiludeen•120

  @OmowunmikamilSubmitted 12 months ago

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

  I'm most proud to have finished this challenge, It was a challenging but amazing experience!

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

  working on the circle, individually styling the right div components, and making the page responsive.

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

  I believe there is a better solution to this problem. Could you please review the code and share your thoughts? Thank you.

  

  Results Summary Component

  2

  40
  

  Bienvenue•220

  @bienvenudevPosted 12 months ago

  Hello!

  Well done, here are some things to improve:

  • Try to make this responsive on all screen sizes.
  • Work mobile first when it comes to styling. Have dev tools open on the side and shrink the viewport narrow. Start from there. The default styles should always look good on mobile.
  • Include a modern CSS reset at the beginning of your styles to help normalize browser defaults and provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)
  • Use headings appropriately and in the correct order.
  • Do you mean to use em where you're using it? Em should be a very intentional choice when you specifically want a property to scale with that element's font size.
  • Media queries must always be defined in rem or em not px
  • It's better for performance to link fonts in the html head instead of css imports
  • Font size must never ever be in px (https://fedmentor.dev/posts/font-size-px/)

  Additional resources:

  • Kevin Powell's walkthrough: https://www.youtube.com/watch?v=KqFAs5d3Yl8
  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

  I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

  Happy Coding!

  Marked as helpful

  0
• 

  Apeksha shrestha•100

  @apii2Submitted 12 months ago

  

  Result summary component main

  1

  30
  

  Bienvenue•220

  @bienvenudevPosted 12 months ago

  Hello!

  Well done, here are some things to improve:

  • Try to make this responsive on all screen sizes.
  • Include a modern CSS reset at the beginning of your styles to help normalize browser defaults and provide a clean foundation for your project. (Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/)
  • This design has no header. Headers are for repeating content across a site not for page-specific content.
  • Your media query should be in rem or em not px.
  • Avoid setting font sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
  • For decorative images, alt should be blank.

  Additional resources:

  • Kevin Powell's walkthrough: https://www.youtube.com/watch?v=KqFAs5d3Yl8
  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

  I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

  Happy Coding!

  Marked as helpful

  1
• 

  Elsayed ELbauomy•530

  @elsayedelbauomySubmitted about 1 year ago

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

  my hard work

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

  prduct responsive project

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

  how i could change the imge to be responsive from html

  

  responsive product project card

  1

  50
  

  Bienvenue•220

  @bienvenudevPosted about 1 year ago

  Hello!

  Good job!

  Here are a few suggestions that might make things even better:

  • Please pay attention to units you choose to use (ex: lvh). Make sure you know why you chose them.
  • Em should be a very intentional choice when you specifically want a property to scale with that element's font size. Make sure you're using it intentionally here.
  • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
  • You don't have to put on a media query to change an image, instead you could use the picture tag in html and let the browser load the desired image. Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/
  • Avoid setting font-sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).

  Additional resources:

  • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

  I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

  Happy Coding!

  0
• 

  Mehrdad Kordi•40

  @DollarageSubmitted about 1 year ago

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

  I did the desktop design of the page very fast, but I got stuck on the responsive mobile part. I had to experiment with styles in order to make the page responsive.

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

  Setting styles for responsive mobile version was a bit challenging but I managed to make a mobile version.

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

  If you know some good study and practice material about responsive web design please introduce them to me. Thank you for reading this!

  

  HTML, CSS, Responsive design

  1

  30
  

  Bienvenue•220

  @bienvenudevPosted about 1 year ago

  Hello!

  Congrats.

  Here are a few suggestions that might make things even better:

  • You don't need to change the width of the body.
  • Try to make this responsive on all screen sizes
  • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
  • Avoid setting font-sizes in px, use rem instead.(https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
  • Instead of setting a fixed width on your main, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
  • Similar to width, avoid setting a fixed height on your main.This ensures the content can adjust to different content lengths.

  Additional resources:

  • Check out Grace's walkthrough: https://fedmentor.dev/posts/html-plan-product-preview/

  • Kevin Powell's Video on CSS Units: https://www.youtube.com/watch?v=N5wpD9Ov_To (please subscribe to his YT channel and check out his other videos) +

  • A free course on building responsive layouts (https://courses.kevinpowell.co/conquering-responsive-layouts)

  I hope these tips and resources are helpful! Feel free to connect and ask any questions you might have.

  Marked as helpful

  0
• 

  Vicki Davidson•10

  @Vicki-DeeSubmitted about 1 year ago

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

  That I've done my first challenge and it feels good taking that first step. Next challenge I'll plan it out a bit better now that I know how this process works.

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

  Refreshing myself with the coding I've learnt so far in my journey. Trust my instincts as well as use the resources out there.

  

  Desktop view solution using flexbox

  1

  60
  

  Bienvenue•220

  @bienvenudevPosted about 1 year ago

  Hi there!

  Good job.

  Here are a few suggestions that might make things even better:

  • The overflow issue is caused by changing the width of the body please remove the width on the body.
  • Including a modern CSS reset at the beginning of your styles can help normalize browser defaults and provide a clean foundation for your project. Check out this article: https://www.joshwcomeau.com/css/custom-css-reset/
  • Avoid setting font-sizes in px, use rem instead (https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#accessibility-considerations-5).
  • Instead of setting a fixed width on your card, consider using max-width in REM units. This allows the card to adapt to different screen sizes while maintaining its layout.
  • Similar to width, avoid setting a fixed height on your card. If you need extra space around the text, use padding instead. This ensures the content can adjust to different content lengths.

  I hope these tips are helpful! Feel free to ask any questions you might have.

  Marked as helpful

  0