Skip to content
OverviewSolutions
5
Comments
5
DYLAN VILLARREAL TOSCANO
@dylanson25

All comments

  • Gabriel Ayres•30
    @gabrielayresdevSubmitted over 1 year ago

    How to deal when you have images with different sizes? In this problem, the greatest problem I had was to make my project design approach Figma's design. For example, Saturn has a lot of blank space, something that doesn't happen for other planets. Also, if the planet is too big, the margin I need will never be the same. For the image of the planets surface, for example, Uranus' surface image, depending on the screen width will be over the Revolution time div. So considering that, what are great practices that help dealing with this? Also, when should I use history API and when should I just replace content with js. In this project, I choosed to use history API, but I don't think it's the correct decision.

    Responsible webpage with the usage of history API.

    1
    DYLAN VILLARREAL TOSCANO•150
    @dylanson25Posted over 1 year ago

    Hi Gabriel, I like your solution. In fact, the animation with the numbers is great. Could you please explain it to me?

    Regarding your question about the surface, honestly, I set the same size for the surface image and the planet. I used vw and the rule of three with respect to the size in Figma.

    One point to improve is that the navbar toggler would be cool if it automatically closed the menu when I select a new planet.

    This is my solution, but I think that I can improve it after seeing your solution. https://planets-project.vercel.app/#

    1
  • DYLAN VILLARREAL TOSCANO•150
    @dylanson25Posted over 1 year ago

    Hi.

    I can see some things to improve in your solution.

    1. About the buttons, you could use pseudo-classes to add interactivity to your application, such as adding hover effects and background changes to indicate focus.
    2. The animation in the mobile navbar is too fast; you could consider changing the transition method to something like ease-in or ease-out. https://developer.mozilla.org/en-US/docs/Web/CSS/transition
    Marked as helpful
    0
  • DYLAN VILLARREAL TOSCANO•150
    @dylanson25Posted over 1 year ago

    Does the solution include semantic HTML?

    To define the container of notifications, consider using more semantic HTML like main, and use article to define notification items. It is also recommended to use a methodology to name CSS classes.

    Marked as helpful
    0
  • DYLAN VILLARREAL TOSCANO•150
    @dylanson25Posted over 1 year ago

    Why use height: 100vh? Have you tried using min-height: 100% instead? If you reduce the height of the window after using min-height, you can see how the layout adjusts accordingly.

    0
  • DYLAN VILLARREAL TOSCANO•150
    @dylanson25Posted over 1 year ago

    Remember, use classes to create reusable styles and reduce specificity.

    Specificity in CSS refers to how the browser decides which CSS rule to apply to an element when there are multiple rules that could apply. Specificity is based on the combination of selectors used in the CSS rules.

    In general, specificity is calculated by adding up the values assigned to each type of selector in the CSS rule. For example, an ID selector has a higher specificity than a class selector, and a tag selector has a lower specificity than any other type of selector.

    Here are some examples of how specificity is calculated in CSS:

    • p has a specificity of 1 (tag selector)
    • .class has a specificity of 10 (class selector)
    • #id has a specificity of 100 (ID selector)
    • p.class has a specificity of 11 (1 for the tag selector and 10 for the class selector)
    • #id .class has a specificity of 110 (100 for the ID selector and 10 for the class selector)

    When there are multiple CSS rules that could apply to an element, the rule with the highest specificity is used. If two or more rules have the same specificity, the rule that appears later in the CSS file is used.

    Understanding specificity in CSS is important for avoiding unexpected styling issues and ensuring that CSS rules are applied correctly to the desired elements.

    0