Michał

Latest comments

• 

  P

  BartoszMokrzycki•240

  @BartoszMokrzyckiSubmitted 3 months ago

  What specific areas of your project would you like help with? Issue: Expiry Month Input Validation

  One specific challenge I faced during this project involved the expiry month (MM) input field. Instead of using a <select> dropdown for users to choose a month, I opted for a text <input> field to allow direct input. However, this introduced the following problem:

  • Challenge:
    I wanted to restrict the user from entering values greater than 12 in the MM field. While it was straightforward to validate the input after submission or update the value dynamically, I couldn't prevent the user from typing invalid values (e.g., 13, 25) directly into the field in real-time.

  • Impact:
    This limitation negatively affects the user experience (UX) since users might input incorrect values and only receive feedback after submission or when focusing out of the field. Ideally, the input should restrict invalid values as they are being typed.

  • Request for Help:
    If you have suggestions or know a better way to implement real-time validation for numeric input fields without relying on <select> elements, I’d appreciate your input! The goal is to maintain a seamless UX while ensuring valid inputs.

  

  Interactive card details form

  #tailwind-css

  1

  40
  

  P

  Michał•290

  @Michal-MajchrzakPosted 3 months ago

  Hey Bartosz 👋

  Great job on finishing the challenge.

  You could use max="12" and min="1" attributes on <input> element to prevent users to enter numbers larger than 12 and lower than 1.

  Happy Coding 😀

  Marked as helpful

  0
• 

  P

  orrest•110

  @orrestSubmitted 4 months ago

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

  I have a problem:

  It's better to have the margin after the "content" element or have the specific blank element, for example, div maybe, to space something?

  

  Recipe page

  #angular#pure-css

  1

  30
  

  P

  Michał•290

  @Michal-MajchrzakPosted 4 months ago

  Hey @orrest 👋

  Congrats on finished challenge.

  Definitely margin and padding are properties that should be used to space content - they are desinged for it. If you want to know the difference between those two I recommend reading about box-model.

  Happy Coding 😀

  Marked as helpful

  0
• 

  rankobinu•70

  @rankobinuSubmitted 4 months ago

  

  my first responsive project

  #sass/scss

  1

  30
  

  P

  Michał•290

  @Michal-MajchrzakPosted 4 months ago

  Hey rankobinu 👋

  Congrats 🎉 on finishing this challenge!

  You could make your header text more responsive witw clamp function and remove need for media query. Here you can find more informations : MDN clamp, Typography

  Good Job and Happy Coding 😄

  Marked as helpful

  0
• 

  Daniel Barda•240

  @daniel-bardaSubmitted almost 2 years ago

  

  Product preview card component - Responsive by using a grid

  #accessibility#bem#sass/scss#animation

  1

  40
  

  P

  Michał•290

  @Michal-MajchrzakPosted 4 months ago

  Hey Daniel 👋

  I like Your approach to layout changes by using Grids it is interesting idea and something that I would like to experiment with. 😄

  One thing I would suggest, to improve Your solution, would be to use picture element to change product image based on screen size.

  Have a nice day and Happy Coding 💻

  0
• 

  Shah Mohammad Mohibbullah Shovon•150

  @mohibbullahSh0vonSubmitted 6 months ago

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

  I am proud that in this challenge I have learned how to handle many types of style difference in a single page and keep the CSS style sheet as clean as possible.

  I would try to make different files for different classes/styles (Ex. general.css, utilities.css etc.)

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

  Implementing the difference of styles like color, font-weight, font-family, list bullet point styles etc. while keeping my CSS code clean were challenging for me.

  Most of the cases I have overcome them by making my own custom utility CSS classes and implementing them on desired html elements.

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

  In the first unordered list of this page , in the first list item the last word 'minutes' when it comes to mobile viewport goes to next line which is okay but it does not horizontally aligns with the first line.

  I need help to solve this problem.

  

  Responsive Recipe Page using CSS media query

  1

  10
  

  P

  Michał•290

  @Michal-MajchrzakPosted 6 months ago

  Hey Shah 👋, congrats on finishing the challenge i like your utility classes approach. 😀

  Regarding your unordered list problem. Text in li element is not aligned when it breaks to new line because of the ::before pseudo-element and position: relative. In relative position element is still part of document flow and space for it is still reserved even if visually it is in different location.

  When you change position from relative to absolute on li::before, the element will be removed from normal document flow and space for it wont be reserved ( which is causing misalignment ).

  .card-unordered-list-custom-style li::before{
    position: absolute;
    left: -1.4rem;
  }
  

  Now to set ::before next to li text ,we can add position: relative to li item itself.

  li {
   position: relative
  }
  

  Because of that change, now ::before will be positioned relative to li element which is closest positioned ancestor. If you want to read more on position this MDN documentation on position helped me to figure this out.

  Hope this was helpful, have a nice day and Happy Coding😀

  Marked as helpful

  0
• 

  Ramkumar B N•40

  @Ramkumar492Submitted 6 months ago

  

  Social Links Profile

  1

  30
  

  P

  Michał•290

  @Michal-MajchrzakPosted 6 months ago

  Hey Ramkumar 👋, your solution looks really good and faithful to the original design. Your CSS code is also well organized and readable.

  Keep up the good work 👍 and Happy coding 😀

  Marked as helpful

  0