Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
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

  • Clock App with secret API key through serverless function

    #bem#fetch#parcel

    Michael Waaler•230
    Submitted over 2 years ago

    0 comments
  • Github API search app made with Parcel, future CSS syntax, BEM

    #bem#parcel

    Michael Waaler•230
    Submitted over 2 years ago

    1 comment
  • Pod Request - Responsive - JS form validation - BEM

    #bem#accessibility

    Michael Waaler•230
    Submitted almost 3 years ago

    0 comments
  • Interactive Rating (HTML, CSS, JS)


    Michael Waaler•230
    Submitted almost 3 years ago

    1 comment
  • Fylo Landing Page | Mobile First | HTML & CSS

    #accessibility

    Michael Waaler•230
    Submitted over 3 years ago

    2 comments
  • Testimonials | HTML CSS | Responsive

    #accessibility

    Michael Waaler•230
    Submitted over 3 years ago

    0 comments
View more solutions

Latest comments

  • Ruben•550
    @RubenSmn
    Submitted over 2 years ago

    NFT Card Preview Component

    1
    Michael Waaler•230
    @10high
    Posted over 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).

  • codezeloss•570
    @codezeloss
    Submitted almost 3 years ago

    Reactjs GitHub user search app

    #fetch#react
    2
    Michael Waaler•230
    @10high
    Posted almost 3 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.

  • Musa Magwaza•110
    @itsmusa
    Submitted almost 3 years ago

    3-column-preview-card-component

    #sass/scss
    2
    Michael Waaler•230
    @10high
    Posted almost 3 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.

  • Edwin Jonathan•90
    @Elektrokat
    Submitted almost 3 years ago

    responsive landing page with media queries and display with flexbox

    #accessibility
    1
    Michael Waaler•230
    @10high
    Posted almost 3 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
  • Michael Waaler•230
    @10high
    Submitted over 3 years ago

    Fylo Landing Page | Mobile First | HTML & CSS

    #accessibility
    2
    Michael Waaler•230
    @10high
    Posted over 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!

  • Michael Waaler•230
    @10high
    Submitted over 3 years ago

    Fylo Landing Page | Mobile First | HTML & CSS

    #accessibility
    2
    Michael Waaler•230
    @10high
    Posted over 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. :)

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub