Skip to content
OverviewSolutions
31
Comments
20

Terence Zhang

@TerenceCLZhangNew Zealand590 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

HTML, CSS, JavaScript, Accessibility, React, Tailwind CSS, TypeScript, Redux

Latest solutions

View more solutions

Latest comments

  • Terence Zhang•590
    @TerenceCLZhang

    Good job on completing this challenge. To further enhance your code, consider the following suggestions:

    ➤ I would suggest using semantic HTML, such as using <header>, <main>, and <footer> for each respective section. This not only improves accessibility but also helps with SEO and overall code clarity.

    ➤ When using flex and you want spacing between elements, consider utilizing the gap property to manage spacing between elements. This is a more modern and maintainable solution compared to relying solely on margin, which you can still use selectively for more precise alignment.

    ➤ Improve the accuracy of email validation by using a regular expression like:

    ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

    This provides better validation than the browser's default and ensures proper format, including the presence of a top-level domain.

    ➤ Use JavaScript to display tailored error messages for a better user experience.

  • Lalalaloo•40
    @Lalalaloo
    What are you most proud of, and what would you do differently next time?

    I'm proud that i managed to finish this really quick, and that the design matches really well

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

    when i deployed the site, the images wouldn't show up, but it was a simple mistake. i forgot to put a period in front of './assets' thing.

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

    Any feedback would be helpful.

    Blog Preview Card

    1
    Terence Zhang•590
    @TerenceCLZhang

    Good job on completing this challenge. To further enhance your code, consider the following suggestions:

    • I would suggest using semantic HTML, such as wrapping the entire card with the <main> element. This not only improves accessibility but also helps with SEO and overall code clarity.

    • For the .container, since you're already using flex, consider utilizing the gap property to manage spacing between elements. This is a more modern and maintainable solution compared to relying solely on margin, which you can still use selectively for more precise alignment.

    • Use variables for your CSS such as --yellow: hsl(47, 88%, 63%); in the :root to improve maintainability.

    • Use a CSS reset to ensure consistency across browsers by removing default styling, giving you a cleaner foundation to build upon. I recommend this one by Josh Comeau.

    Overall, it looks pretty good. Keep up the good work!

    Marked as helpful
  • Utkarsh9571•640
    @Utkarsh9571
    What are you most proud of, and what would you do differently next time?

    With this now i learned to use transform and transition property, and to make a slide page appear and go.

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

    making the slide bar appear and go for mobile screens was not a problem, but for larger screen sizes to make it stay is a problem.

    although if you open the site on mobile and a pc it works good, but if you inspect it on pc you'll find that after making side bar appear and go when you enlarge the screen their is nothing on top, no option, so have to refresh and it works fine.

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

    take a look at the website and give suggestions.

    News homepage

    1
    Terence Zhang•590
    @TerenceCLZhang

    Great job on your solution! Your code is clean, and I appreciate your use of semantic HTML. The sliding animation for the menu icon and the attention to tablet responsiveness are nice touches.

    For improvements, consider adjusting the menu animation so that the screen overlay appears first, followed by the sliding in of the side-menu—this would make the interaction feel smoother and more intuitive. Additionally, it would be helpful to:

    • Display the navigation list starting from tablet screen sizes to improve usability on medium devices.

    • Use the <nav> element, rather than a generic <div> for menu, to better convey its semantic role and improve accessibility.

    Overall, it looks good!

  • Terence Zhang•590
    @TerenceCLZhang

    Great job on completing this challenge! To further enhance your solution, consider using semantic HTML elements such as <main> and <section> to improve accessibility and structure. Additionally, you could incorporate :hover effects, for example, on the card image and navigation links to enhance interactivity and improve user experience.

  • Terence Zhang•590
    @TerenceCLZhang

    Good job on completing this challenge! One suggestion: when using Flexbox, consider using the gap property instead of margin-bottom to create spacing between items. gap is more semantic, easier to manage, and avoids issues with unwanted spacing on the last element.

    Otherwise, everything looks good.

  • Terence Zhang•590
    @TerenceCLZhang

    Great job on completing this challenge — you've built a very good website! I especially liked the animations and extra details such as the password visibility toggle and the use of password requirements (as an extra step you could add some text to show the requirements before the user types it in).

    That said, there are a couple of areas where the user experience could be improved. Currently, the form only accepts Gmail addresses, which limits accessibility for users with other email providers like @outlook or @yahoo. A more flexible approach would be to use a regular expression (regex) to validate the general format of email addresses. For example, a regex like the following would work well:

    /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/.

    Another improvement would be to trigger input validation on the blur event — when the user shifts focus away from a field — rather than only on form submission. This allows users to receive feedback in real time and correct errors earlier in the process.

    Overall your project is really well put together!

    Marked as helpful
View more comments