Skip to content
OverviewSolutions
10
Comments
10

Michael Waaler

@10highGermany230 points

I particularly enjoy creating pixel-perfect pages from Figma designs with vanilla HTML and CSS. I've recently discovered BEM, which I find incredibly helpful with structuring HTML before applying any CSS. Currently, I'm enjoying improving my JavaScript skills.

I’m currently learning...

HTML, CSS, JavaScript, React, Parcel, BEM notation

Latest solutions

View more solutions

Latest comments

  • Michael Waaler•230
    @10highPosted about 2 years ago

    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).

    1
  • Michael Waaler•230
    @10highPosted over 2 years ago

    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.

    1
  • Michael Waaler•230
    @10highPosted over 2 years ago

    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.

    0
  • Michael Waaler•230
    @10highPosted over 2 years ago

    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
    0
  • Michael Waaler•230
    @10highPosted about 3 years ago

    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!

    0
  • Michael Waaler•230
    @10highPosted about 3 years ago

    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. :)

    0
View more comments