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

All comments

  • Tel•170
    @telsabate-hubPosted 1 day ago

    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! :)

    0
  • P
    Steven•180
    @stevensunaSubmitted 14 days ago
    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•170
    @telsabate-hubPosted 14 days ago

    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! :)

    0
  • Tel•170
    @telsabate-hubPosted about 1 month ago

    The solution is different from the supposed challenge.

    0
  • Tel•170
    @telsabate-hubPosted 2 months ago

    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! :)

    0
  • Tel•170
    @telsabate-hubPosted 3 months ago

    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!

    0
  • Kairung Vangmanaw•260
    @VangmanawKairungSubmitted 5 months ago
    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•170
    @telsabate-hubPosted 5 months ago

    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!! :)

    1
  • Tushar Kaundal•200
    @TusharKaundalSubmitted 6 months ago
    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•170
    @telsabate-hubPosted 6 months ago

    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
    0
  • Tel•170
    @telsabate-hubPosted 6 months ago

    Good job! You did great! 👍

    1
  • Tel•170
    @telsabate-hubPosted 7 months ago

    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!!!! :)

    0
  • Tel•170
    @telsabate-hubPosted 7 months ago

    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
    0