Skip to content
OverviewSolutions
14
Comments
14
Tel
@telsabate-hub

All comments

  • 6alactico•470
    @6alactico
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully validating each form element. However, next time, I will aim to reduce the code by validating all elements together.

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

    My major challenge was deciding how to validate each element while minimizing code repetition. I overcame this by grouping the text input fields for validation and validating the radio buttons and checkbox separately.

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

    All feedback is welcome.

    Contact Form

    #sass/scss
    1
    Tel•270
    @telsabate-hub

    Hi @6alactico! :)

    Again, I found your HTML code semantically correct since the Lighthouse reported 100% accessibility. I also found your JS code clean. So, good job on that.

    My only comment was about the pattern used for the first and last names because it does not allow two names. For example, the person's name is "Anna Mae Dela Cruz". That happened because the regex does not allow spaces in between the letters.

    Other than that, I think you did great overall in this project. The solution is also responsive to different screen sizes.

    Thank you and happy coding! :)

    Marked as helpful
  • Tel•270
    @telsabate-hub

    Hi @6alactico! You did great here! I thought the code is clean and the page has 100% accessibility according to Lighthouse report.

    Good job! Happy coding! :)

  • Tel•270
    @telsabate-hub

    Good job! Thank you and happy coding! :)

  • Tel•270
    @telsabate-hub

    Hi @NitiemaDev!

    You did a really great job here!! :)

    I like how well structured your code is. I cannot comment much about the React part because I don't know it yet. Hehe. The SCSS code is clean and I like that you used mixins for repeating styles.

    Maybe just a "nice-to-have" is an error message for invalid characters entered in the input fields or you could have used a number input to prevent entering non-numeric characters. :)

    Other than that, your implementation is really good!

    Thank you and happy coding! :)

  • Tel•270
    @telsabate-hub

    Hi Anh!

    You did really great here! I like how well-structured your SCSS code is. The page is also responsive so good job on that! :)

    Just a couple of suggestions for your JS.

    1. When calling the populateDOM(allValidData, targetId), you don't need to pass the allValidData since you have declared it as a global variable.

    2. You could have directly updated the innerHTML inside createContainer instead of having a separate function displayContainers.

    Also, I think you missed out on updating the text "Previous - " when changing timeframes.

    Overall, you still did a nice job here and you were able to complete this project!

    Happy coding! :)

    Marked as helpful
  • P
    Steven•180
    @stevensuna
    What are you most proud of, and what would you do differently next time?
    • Implemented an RFC 5322 compliant email validation system
    • Created an accessible form with proper ARIA attributes and error handling
    • Used CSS Grid for responsive layout switching between mobile and desktop views
    • Developed a modular SCSS architecture with proper separation of concerns
    • Implemented smooth transitions for success message display

    Newsletter sign-up form with success message

    #sass/scss
    1
    Tel•270
    @telsabate-hub

    Hi Steven!

    You did really great here! I like that there is a particular error message for empty email. :) Also, good job on making it responsive.

    Maybe the only issue I found is that the inputs are still tabbable when the "Thanks for subscribing" modal shows.

    Overall, I think your solution is very good.

    Thank you and happy coding! :)

  • Tel•270
    @telsabate-hub

    The solution is different from the supposed challenge.

  • Tel•270
    @telsabate-hub

    Good job on using CSS Grid!

    I think it would be better if you followed the font family provided. You may check the style-guide.md file as reference.

    I also noticed that you have some typo errors. Just a suggestion, you could copy-paste from the provided html file so that you won't have to type the texts and be prone to errors.

    Thank you and happy coding! :)

  • Tel•270
    @telsabate-hub

    Hi!

    This is really great!! I like how you structured your HTML and the naming of the elements' classes. I also like how you used the "&" symbol in SASS. Just a small suggestion, you could create partial sass files to organize your scss code blocks. For instance, you could put all variables inside a partial file called "_variables.scss" so it is easier to maintain.

    Also, the color of the smaller texts should be lighter, but maybe you intentionally did that.

    Overall, I think your solution is very good.

    Thank you!

  • Kairung Vangmanaw•260
    @VangmanawKairung
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I structured my code to be clean, semantic, and responsive, using tools like Flexbox, CSS Grid, and Sass effectively. Incorporating accessibility features like ARIA labels and ensuring responsive typography with clamp() were significant achievements. Next time, I would focus on further optimizing my workflow by experimenting with utility-first frameworks like Tailwind CSS and exploring advanced accessibility practices to make the design even more inclusive.

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

    One of the main challenges I faced was getting the element sizes and positions to closely match the design specifications. It required a lot of trial and error, particularly in fine-tuning padding, margins, and grid configurations. I overcame this by carefully analyzing the design, using developer tools for precise measurements, and leveraging CSS features like clamp() and mixins in Sass to achieve better responsiveness and alignment across screen sizes. This iterative process helped me improve my attention to detail and refine my layout skills.

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

    I would like help with further optimizing my layout and responsiveness, particularly in ensuring pixel-perfect alignment with the design across all screen sizes. Additionally, I’d appreciate guidance on improving the accessibility of my project, such as refining ARIA roles or handling focus states more effectively. Lastly, I’d love feedback on my Sass structure and mixins to see if there are ways to make my code even more modular and maintainable.

    Product preview card page using HTML and CSS (Sass)

    #sass/scss#accessibility
    1
    Tel•270
    @telsabate-hub

    Wow! This is really great!!! Just a small suggestion, you could create partial sass files to organize your scss code blocks. For instance, you could put all variables inside a partial file called "_variables.scss" so it is easier to maintain. Also, you may remove the type selectors in your code to lessen the value of the specificity.

    For example, you may put .product-category only instead of p.product-category.

    By the way, I love how clean your html file is and how your screenshot matches the design screenshot.

    Thank you so much and happy coding!! :)

  • Tushar Kaundal•220
    @TusharKaundal
    What are you most proud of, and what would you do differently next time?

    Was able to style and provide good design to nutrition table section after learing from different resources and applying it here to get better result just by using CSS property

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

    While going through development for this page came across nutrition article where table is to be formed so learned CSS property nth-child() and nth-last-child().Which helped me target/select the column/rows and did styling so looks good.

    Below are the code snippets used to provide style to nutrition article :

    
  
    Calories
    277kcal
  
  
    Carbs
    0g
  
  
    Protein
    20g
  
  
    Fat
    22g
  


    .nutrition-table {
  padding: 0px 32px;
  border-collapse: collapse;
}

tr:nth-child(-n + 3) td {
  border-bottom: 2px solid var(--stone-150);
  padding-bottom: 12px;
}

tr:nth-last-child(-n + 3) td {
  padding-top: 12px;
}

tr td:nth-child(1) {
  padding-left: 32px;
}

### What specific areas of your project would you like help with?
how to make this design more responsive like section,typography changes with different viewport

    Responsive Recipe Main Page using CSS Flexbox

    #accessibility
    1
    Tel•270
    @telsabate-hub

    You're doing really great!!! Just a small suggestion, you could directly put the texts inside the li tags instead of wrapping them inside a p tag. Also, you could use the border-bottom properties to show the horizontal dividers instead of using the hr tags.

    By the way, I like how your design looks on screen sizes such as on iPad compared to what I did. So, I will try to apply what you did here.

    Thank you so much and happy coding!! :)

    Marked as helpful
  • Tel•270
    @telsabate-hub

    Good job! You did great! 👍

  • Tel•270
    @telsabate-hub

    Hi!

    You did really great in this project!!!

    Just some suggestion in case you missed out adding the shadow or wants to add it in the future, you may use the box-shadow property to do that.

    Thank you and enjoy coding!!!! :)

  • Tel•270
    @telsabate-hub

    Hi!

    You may use the "style-guide.md" file to get details about the font colors. :) I used that as guide and tried each values to compare the font colors.

    Thank you.

    Marked as helpful