Skip to content
OverviewSolutions
8
Comments
6
P
cepoumian
@cepoumian

All comments

  • P
    cepoumian•160
    @cepoumian

    Hi Daniel. Good job. I few suggestions:

    • Set an event listener for "DOMContentLoaded" in your script. Check docs (https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)
    • Try modularizing your JS code and possibly leveraging web components instead of relying on a monolithic script.
    • Pay more attention to formatting and consistency, specially in CSS stylesheets.
    • Try to match text colors and sizes closer to the design, specially for the body copy, it looks lighter.
    • Make your image responsive. You can use the picture and source tags like this: <picture> <source srcset="/assets/images/illustration-sign-up-mobile.svg" media="(max-width: 697px)" /> <img src="/assets/images/illustration-sign-up-desktop.svg" alt="Illustration" class="bg-image" /> </picture>

    Kind regards and good luck!

  • P
    cepoumian•160
    @cepoumian

    Hi Faojul. Great job. The solution is faithful to the design and looks good at all resolutions. A few suggestions:

    • Consider paying more attention to code organization and formatting.
    • Try to make your code more modular.
    • Consider using web components.
    • Consider separating your css in layers.
  • P
    cepoumian•160
    @cepoumian

    Hi. Good job. A few suggestions:

    1. Be careful to match all headings' font families and sizes.
    2. You can add space between a list item's marker (bullet or number) and its text by adding padding-left to the list item.
  • P
    cepoumian•160
    @cepoumian

    Faithful to the design. Animations on buttons. Good CSS organization. Not many suggestions. Possibly, accessibility and html semantics could improve a bit. Very good job overall.

  • P
    cepoumian•160
    @cepoumian

    Hi Abelardo. Great job. Here are some recommendations:

    • Move your styles to a CSS file
    • Be more mindful of formatting
    • Take advantage of custom properties Congrats!
  • julen•10
    @Euskindar
    What are you most proud of, and what would you do differently next time?

    I am proud to have been able to complete this challenge in a short time, using some new tools and implementing new aesthetic elements that improve the design, understanding their use. I need to improve the organization of elements and better understand how to distribute them.

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

    The main challenge to overcome has been to revisit the basics and understand again how the elements are arranged on the page. I have been able to research and recall the knowledge that I had almost forgotten in my memory.

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

    I would like to perfect the basics. To understand, when looking at a page, the elements I will need and how to distribute them on the screen depending on the needs.

    Flex for displaying content. Gradient backgorunds.

    #accessibility#animation
    1
    P
    cepoumian•160
    @cepoumian

    Great job. You did considerable extra work that adds to the presentation of the component. Some suggestions:

    • leverage CSS layers to organize your stylesheet
    • consider using more custom properties
    • use logical properties (inline, block, etc.) instead of properties that would only work in horizontal-tb writing modes (e.g., margin-block-start instead of margin-top).