Skip to content
OverviewSolutions
7
Comments
3
Maciej Narejko
@MaciejNarejko

All comments

  • Maciej Narejko•180
    @MaciejNarejkoPosted about 1 year ago

    Hi there 👋

    Great job on completing the challenge, keep it up! 🚀

    Here are some suggestions to further improve your project:

    • In the stylesheet, correct the min-height value to be 100vh instead of 100hv, and update the font-size in the .texto class to be .9rem instead of .9rm.
    • It would be nice if you could center the elements to enhance the visual appeal of the layout; consider using flexboxfor example utilizing properties such as align-items and justify-content: center.
    • A great next step would be to add social media icons at the bottom, as indicated in the design.
    • Replace the two font importing links in the head section with a single link to streamline the HTML document.

    Keep up the good work! Happy coding 🙂

    0
  • Maciej Narejko•180
    @MaciejNarejkoPosted over 1 year ago

    Hello there 👋

    Here's the feedback:

    • When the user goes to at least the second step and then goes back to the first step, the "Go Back" button should be not available in the first step. Add a condition in the goBack() function to handle the case when currentPageNumber is 1.

    • After entering all fields incorrectly on the first page of the form, and then correctly filling in some of them, the error message for those correct fields does not disappear.

    • The background and foreground colors do not provide sufficient contrast ratio, which can strain the user's eyes. Consider adjusting the color scheme to ensure better readability and accessibility.

    • The document lacks a meta description tag <meta name="description">.

    • Remove unused code, such as the addOnLabels array: const addOnLabels = ["Online Service", "Larger Storage", "Customizable Profile"];

    • Replace occurrences of var with let or const for consistency. For example: let label = checkbox.parentNode;

    • Consider extracting reusable code into helper functions to improve modularity and readability.

    I hope I provided at least some useful feedback. Happy coding 🙂

    Marked as helpful
    1
  • Maciej Narejko•180
    @MaciejNarejkoPosted almost 2 years ago

    Hi there 👋

    Well done for completing this challenge!

    Your solution is pretty good, however I have a few suggestions:

    • to fix accessibility issue wrap <div class="attribution"> in a footer tag.
    • it would be nicer and more semantically replacing header <p> width <h1>
    • attribute width on .container Your solution works well if user has browser window size 1440px or 375px but in other cases, the website displays incorrectly. I would remove
    @media screen and (max-width: 375px) {
    .container {
        width: var(--mobile);
    }
}

    and width: var(--desktop); from .container to achieve the fastest satisfactory effect.

    You can read more about RWD, of course, if you need e.g. here. These are minor details so don't worry.

    Happy Coding!

    Marked as helpful
    0