All comments

• 

  Tawakalt• 80

  @Tawakalt10

  Submitted over 1 year ago

  your feedback is appreciated

  

  Age Calculator

  1

  50

  

  SudodoSu• 210

  @SudodoSu

  Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on completing the challenge! 🎉

  I would recommend a few things:

  I recommend using a forEach loop to iterate over inputs for error handling. Additionally, adopting a mobile-first workflow for design ensures a seamless user experience on different devices.

  You can check out my solution for more info: Link

  I hope this helps. Happy coding😄

  Marked as helpful

  0
• 

  Richard• 140

  @RixCrafts

  Submitted over 1 year ago

  Unsolved problem

  For some reason in the mobile version the UI looks good but it gives the option for scrolling in both directions. I try to hide all the overflow of the elements but still can prevent the scrolling.

  Any advice??

  

  Usage of the design UI picture as a background for reference

  1

  50

  

  SudodoSu• 210

  @SudodoSu

  Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  To prevent scrolling on the body element, you can apply the CSS property overflow: hidden to it. This will ensure that the content within the body does not cause any scrolling behavior. By setting overflow to hidden, the scrollbar will be hidden, and users will not be able to scroll within the body.

  Here's the updated code snippet:

  body {
  overflow: hidden;
  }
  

  By adding this CSS rule to your stylesheet, you can effectively prevent scrolling on the body element and provide a seamless user experience without unnecessary scrollbars.

  You also left one closing </div> element at the bottom of the body.

  I hope this helps.

  Happy coding😄

  0
• 

  jeansy42• 330

  @jeansy42

  Submitted over 1 year ago

  -What do you think about the practices used in code writing?

  -Is there a better way to achieve a more optimized visual effect?

  -How do you think the different browser characteristics should be addressed to ensure proper functioning of the application across all of them?

  -Did I use excessive resources?

  -Was I redundant when working with CSS?

  

  Age calculator app with responsive design

  1

  40

  

  SudodoSu• 210

  @SudodoSu

  Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  I recommend using a text input field without inner spin button arrows and limiting it to accept only numeric input. This ensures a consistent user experience across browsers, including those that don't fully support the WebKit engine. You can check out my solution where I used this approach: Link

  I hope this helps. Happy coding😄

  Marked as helpful

  1
• 

  Dale Torres• 50

  @daletorres

  Submitted over 1 year ago

  On my first challenge, I only used <divs> in my HTML while in this challenge I tried using semantics such as <main>, <section>, etc. although I believe I could have used a different semantic for <section>?

  Also, I tried doing the mobile-first workflow unfortunately I was unable to stick to it and ended up doing the desktop version first again like how I did on my first challenge. Does anyone have any tips on their workflow regarding this?

  

  Responsive Product Preview using HTML and CSS

  2

  60

  

  SudodoSu• 210

  @SudodoSu

  Posted over 1 year ago

  Hello Coder! 👋

  Congratulations on successfully completing the challenge! 🎉

  To create a two-column layout using flexbox, I would recommend the following approach:

  • Create two boxes using the <div> element: one for the left column and another for the right column.

  <div class="left-box">
  </div>
  
  <div class="right-box">
  </div>
  

  • Replace the <div> element with a <main> element, which will serve as the main container for the layout.

  • Apply CSS styles to achieve the desired layout using flexbox. Here's an example:

  .container {
  display: flex;
  }
  
  .left-box {
  /* Styles for the left box */
  }
  
  .right-box {
  /* Styles for the right box */
  }
  

  By setting the display property of the container to flex, the child elements (left-box and right-box) will automatically arrange themselves in a row.

  I hope you find this explanation helpful. Happy coding! 😄

  Marked as helpful

  0
• 

  front-end963• 200

  @front-end963

  Submitted over 1 year ago

  

  single-price-grid-component

  1

  30

  

  SudodoSu• 210

  @SudodoSu

  Posted over 1 year ago

  Great job! I would highly recommend utilizing a grid system to enhance the flexibility of element manipulation and resolve the problem with the bottom-right box.

  To achieve this, you can create a new <div> element within the main container and place all the other elements inside it. Apply the CSS property display: grid; to this <div>, and define grid template areas to organize the layout effectively.

  Marked as helpful

  0