Skip to content
OverviewSolutions
10
Comments
10
Michael Waaler
@10high

All comments

  • Michael Waaler•230
    @10high

    Hey Ruben - nice job. Yeah, position: absolute is valid here (in my humble opinion).

    I see you've used Astro. How are you liking it? And can I ask why you're using it, rather than vanilla HTML and CSS? (just curious).

  • Michael Waaler•230
    @10high

    Hey - I don't know React yet, so I can't comment on your code, but I found myself on Github and everything checked out :)

    Didn't see any issues! Well done.

  • Michael Waaler•230
    @10high

    Hey - it looks great. Good job.

    My only feedback would be that you're not using an semantic markup for accessibility. You've done pretty much all of it with <div> tags. Accessibility is important for people using, e.g., screenreaders, to navigate a page.

    Think about checking it out, because it's becoming increasingly important. Otherwise, great work.

  • Michael Waaler•230
    @10high

    Hi Edwin - nice job.

    The only thing I would comment on is that your media query on the <main> tag sets the size to be same between width 375px and 1440px. As you can see from the comparison above, this means the content remains the same size for both mobile and desktop and is therefore not responsive. Ideally, you want the smaller version to appear for mobile and the larger version to appear for desktop.

    Also: you use absolute positioning to center everything in the screen. A "better" approach is to make your <body> tag: min-height: 100vh; display: flex; justify-content: center; align-items: center;

    That will achieve the same effect, plus it would also center your footer, which is looking a little lost in the corner of the screen :)

    Marked as helpful
  • Michael Waaler•230
    @10high

    I fixed the errors created by the Font Awesome "fonts" for the social media icons by using the SVGs also available from Font Awesome and removing the JS script import from the top of the HTML file. (You can see it commented out in the index file.)

    I also added aria-labels to the SVGs nested inside links, which seems to have satisfied the lack of discernible text errors I had previously.

    Now no errors, yay!

  • Michael Waaler•230
    @10high

    Hm, the report has generated a bunch of errors, most of them seem to be from using Awesome Fonts for the social media icons. If anyone has any experience with this and how I can resolve them, please let me know.

    Thanks. :)

  • Michael Waaler•230
    @10high

    Hey there, your solution looks really good, but as you can see from the generated report, your code has a number of issues.

    I think it would be a good idea for you to start looking into accessibility, such as using semantic markup. Here's a good intro to the subject: https://www.w3schools.com/accessibility/

    Good luck and keep up the good work.

    Marked as helpful
  • Michael Waaler•230
    @10high

    I originally had the same problem. I solved it by making each card its own grid and using grid gap to space the segments. Looking back this was not the best way, but you can set the height on each grid row and then the cards will always be the same size.

    Good luck!

    Marked as helpful
  • Michael Waaler•230
    @10high

    To center your flexbox, you need to put it inside another flexbox and justify-content and align-items to center. You should set the min-height of your body to 100vh.

    Have a look at my solution to see how: https://www.frontendmentor.io/solutions/responsive-3column-card-html-and-css-7R3-nlUMp

    Hope that helps.

  • Michael Waaler•230
    @10high

    Sorry, I'm not good enough yet to offer feedback, but it looks so great. How do you (and others I've noticed) get the dimensions to match so well? I'm spending far too long comparing the images against my browser. I feel there's a method I don't understand yet. Any enlightenment? :)