Skip to content
OverviewSolutions
9
Comments
9
viethoang2307
@viethoang2307

All comments

  • zeegu•310
    @zeeguSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    ❤Things I've tried

    • Used json data to display it on the website
    • Made value changes depending on button click
    • Scored 99% on Google PageSpeed Insights
    • Considered web accessibility
    • Responsive for Mobile, Tablet, Desktop devices

    💪Things I should improve

    • Code refactoring : I should study more about reducing duplication when writing JavaScript🤣

    Responsive Time Tracking Dashboard using CSS grid & Javascript

    #accessibility#sass/scss#fetch
    1
    viethoang2307•110
    @viethoang2307Posted about 1 month ago

    Your code is so good.

    1
  • viethoang2307•110
    @viethoang2307Posted about 1 month ago

    your logic have some problems. If i click to button without filtering input, I can't reclick to input to rewrite.

    1
  • viethoang2307•110
    @viethoang2307Posted about 1 month ago

    I think you completed it well. You should add animation for active to make it more smooth

    0
  • viethoang2307•110
    @viethoang2307Posted 2 months ago

    The *, *::before, *::after rule is a good practice for resetting margins and paddings. However, consider adding box-sizing: inherit; to your html selector and box-sizing: border-box; to * to ensure predictable sizing.

    The class names like box1, box2, etc., could be more descriptive to reflect their purpose (e.g., .feature-box, .pricing-box).

    0
  • P
    Dallas•120
    @DasaruSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am happy with the way the responsiveness turned out. The images are wrapped in a picture tag and swapped out by the browser when the screen resizes rather than simply hiding one of the images. This prevents mobile users from using unnecessary data.

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

    I had difficulty trying to figure out how to swap out the images in an accessibility friendly manner. I needed to swap one image with the other without causing screen readers to relay the wrong information.

    Many problems can occur if not careful including:

    • Visible hidden images still showing up to screen readers.
    • Multiple alt tags leading to image redundancy.
    • Swapping images without causing unnecessary interruption.
    • Using the proper semantic tag layout.
    What specific areas of your project would you like help with?

    There are multiple areas I would like help with:

    • BEM (block-element-modifier)
    • Accessibility
    • CSS organization

    Product Preview Card Component

    #bem#accessibility
    1
    viethoang2307•110
    @viethoang2307Posted 2 months ago

    Your CSS is well-structured with sections for reset, variables, fonts, mobile, desktop, and footer styles. This improves readability. Using CSS variables is a great practice for maintaining consistency across your design. It appears you're following a mobile-first approach, which is a good practice for responsive design.

    0
  • Luis Gutierrez•40
    @luisgutierrez11Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I would like to continue practicing to improve in development

    Recipe page using HTML and CSS

    #accessibility#animation#react#sass/scss#jss
    1
    viethoang2307•110
    @viethoang2307Posted 2 months ago

    you should use the correct font in a style guide and have a correct alignment

    0
  • Zakir Mustafa•160
    @kmrzakirSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I was able to implement the responsive design in my Social Link Profile project. Using flexbox and media queries, I managed to ensure that the profile looks great on both desktop and mobile devices. I also successfully incorporated hover effects to improve the user experience and make the profile more interactive.

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

    Challenges: I struggled with setting the real dimension sizes for this project as there was no Figma design available, making it difficult to determine the exact width, height, and font sizes.

    Solution: I relied on responsive design principles using flexbox for layout, media queries for screen adjustments, and relative units like rem for scalable font sizes to create a flexible, adaptable design.

    I use the rem unit to make the text responsive

    #accessibility
    1
    viethoang2307•110
    @viethoang2307Posted 2 months ago

    Your img should be centered in the middle

    1
  • viethoang2307•110
    @viethoang2307Posted 2 months ago

    Title Styling: Issue: The title font weight is light, making it less prominent. Solution: Use a bolder font weight for the title ("HTML & CSS foundation") to make it stand out more, similar to the second card. This improves readability and draws more attention to the main content.

    0
  • Emmanuel Abiodun•10
    @Emax-commitsSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learnt how to make use of the object-fit attributes in css to scale an object to fill it's parent element, which i found difficult to achieve initially.

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

    How to make an image fit well in its parent element, while maintaining its aspect ration.

    A Responsive QR code component which include both desktop and mobile

    2
    viethoang2307•110
    @viethoang2307Posted 2 months ago

    . Semantic HTML: Check for the use of semantic elements: Ensure that the HTML uses elements like <header>, <footer>, <article>, <section>, <nav>, and others that clearly define the structure of the content. Improvements: If the solution uses divs or spans excessively where semantic elements would be more appropriate, suggest replacing them for clarity and accessibility. 2. Accessibility: Review the use of ARIA roles: Ensure that if ARIA roles are necessary, they are used correctly to enhance accessibility. Color contrast: Verify that text contrasts well with background colors. Tools like WebAIM's Contrast Checker can help here. Keyboard navigation: Test whether the website is fully navigable by keyboard (using Tab, Enter, and Esc keys) for users who cannot use a mouse. Alt text for images: Ensure that all images have meaningful alt attributes. If not, recommend adding descriptions that describe the image's function or content. Improvements: If focus states or skip navigation links are missing, suggest adding them for better usability.

    0