Skip to content
OverviewSolutions
31
Comments
8
P

hcm

@HcmwebsNz505 points

Newbie professionally but have been working on Front-End Web Design & Development as a hobby for the last five years. I am taking it up a notch into a Full-Stack MERN developer. Taking it full-time now and loving it.

I’m currently learning...

I am currently learning MERN stack as I grow my Javascript/react knowledge.

Latest solutions

View more solutions

Latest comments

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

    I did not set this page to work on a small screen. So the next time I gonna do that for sure.

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

    Resize the page to a small one. I did not overcome this problem.

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

    Tips to manage the media query.

    Socil links

    1
    P
    hcm•505
    @Hcmwebs

    Hi,

    Great execution. In my opinion, the way you have set up, the project adapts perfectly to all the screens as it has a fixed width and a fixed height. However, fixed dimensions are the least recommended to use. I recommend max width and max height for up to certain max-width devices media queries

    Keep up

  • P
    hcm•505
    @Hcmwebs

    Hi, This is a good solution; however, I believe you can make it better by;

    1. To the body, I should remove the margins and set it to display grid or flexbox with flex-direction to the column.
    2. including landmarks. After the container, the next element should be NOT a div but a MAIN and t FOOTER for the attributions class. These should solve the landmark issues.

    I hope these pointers are helpful.

    Regard,

    Marked as helpful
  • P
    hcm•505
    @Hcmwebs

    Hi,

    This is good execution; however, I recommend using min-height: 100vh, display: grid, place- items: center instead of the margins. This will center the 'main' on any screen. You can also use flexbox instead of grid.

    I hope this is of help.

    Regards

    Marked as helpful
  • P
    hcm•505
    @Hcmwebs

    Hi Diego, Hola,

    It is an awesome solution, however, this is what I would improve: to the body, I would put a min-height:100vh; to center everything and no need to add the margin to the 'contenedor'. Also, I would recommend the using 'main' instead of a div with the class "contenedor", and 'footer' instead of div with the attributions class this solves your html validation report of landmarks. I hope this is of help.

    Great job. Regards,

    Marked as helpful
  • P
    hcm•505
    @Hcmwebs

    Hi Jared,

    Great Job! Your solution looks impressive.

    With regards to some pointers, of course, if this is ok with you,

    1. try to landmark the project. Use the HTML5 header, main, footer .... to clear the accessibility issue. Check out this explanation:

    https://dequeuniversity.com/rules/axe/4.3/landmark-one-main?application=axeAPI

    1. I would use the h1- h6 hierarchy for the heading, always in acceding order. Instead of starting with an h2, I would start with an h1, styling it as per the guidelines of the project.
    2. The heading and the author's name should have a focus state on hover as per the design.

    I hope you find these of assistance.

    If you require any assistance with the above pointer, please let me do not hesitate to contact me.

    Regards,

    Hcmwebs

    Marked as helpful
  • P
    hcm•505
    @Hcmwebs

    Great Job! I like the execution of your projects.

View more comments