Skip to content
OverviewSolutions
31
Comments
8
P
hcm
@Hcmwebs

All comments

  • EliPinheiro•40
    @EliPinheiroSubmitted 6 months ago
    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
    hcm•505
    @HcmwebsPosted 6 months ago

    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

    0
  • hcm•505
    @HcmwebsPosted over 1 year ago

    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
    0
  • hcm•505
    @HcmwebsPosted over 1 year ago

    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
    1
  • diegodolu•40
    @diegodoluSubmitted over 1 year ago

    I found difficult to center the main div, I decided to use margin to center it vertically. I hope you can share another way to do it.

    Desing a qr code using flexbox

    2
    hcm•505
    @HcmwebsPosted over 1 year ago

    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
    0
  • hcm•505
    @HcmwebsPosted over 2 years ago

    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
    1
  • hcm•505
    @HcmwebsPosted over 2 years ago

    Great Job! I like the execution of your projects.

    1
  • hcm•505
    @HcmwebsPosted over 2 years ago

    Hi Pedro,

    Your solution leads me to VERCEL's login page. Would you please check and update the URL so that the project is visible in action? That way, one can be of more help to you if needed. Thanks

    0
  • Chamu•13,130
    @ChamuMutezvaSubmitted over 2 years ago

    Greetings to all. The journey continues with this exciting challenge. Navigating to the next page and moving focus to the top was something that i had to relearn from my previous projects - some of those things that you need to keep on doing before they stick in. There is still some adjustments that i have to do especially with the active states on the pricing page - the card has to move slightly to the top. It was easier if i had made the card active as an anchor element but the link button is a grandchild of the parent card. Your feedback is welcome.

    Photosnap website - using react and react-router v6

    3
    hcm•505
    @HcmwebsPosted over 2 years ago

    This looks awesome! Great work

    0