Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
11
Comments
12

Maximilian Dybvik

@RegexRiddlerNorway200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Time Tracking Dashboard

    #sass/scss

    Maximilian Dybvik•200
    Submitted about 1 year ago

    Semantics, readability and accessibility


    1 comment
  • Newsletter Sign-Up

    #sass/scss

    Maximilian Dybvik•200
    Submitted about 1 year ago

    Any feedback is appreciated 😁

    I added "autocomplete="email" autofocus" to my input field and I am not sure if this is bad practice, both for security reasons and for accessibility.

    Secondly, whenever you type in an invalid email and try to submit, the button state gets "stuck" as active or focused, and I dont know how to prevent this.


    1 comment
  • Article Preview Component

    #sass/scss

    Maximilian Dybvik•200
    Submitted about 1 year ago

    Semantics, accessibility, readability.


    1 comment
  • Meet Landing Page

    #sass/scss

    Maximilian Dybvik•200
    Submitted about 1 year ago

    Any feedback is appreciated :)


    1 comment
  • Testimonials Grid Section


    Maximilian Dybvik•200
    Submitted about 1 year ago

    Any feedback is appreciated :)


    2 comments
  • Four card feature section


    Maximilian Dybvik•200
    Submitted about 1 year ago

    Any feedback is much appreciated :)


    1 comment
View more solutions

Latest comments

  • Murilo Matt•200
    @MuliroMatt
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that used fetch() and async await.

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

    It was challenging to make possible selecting a timeframe and displaying the appropriate information.

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

    I'm up to any suggestions.

    Time Tracking Dashboard using JS and SASS

    #sass/scss
    1
    Maximilian Dybvik•200
    @RegexRiddler
    Posted about 1 year ago

    Great job on your submission!

    I have one suggestion for a minor issue. When you look at your report card your bottom raduises have a very thin line from the parent div. To get rid of this just increase the bottom radius on the ".report__card__back" they will go away.

  • Fialko91•30
    @Fialko91
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    would use more modern technologies

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

    lack of a layout, everything had to be done similar, but not exactly

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

    not in any

    Responsive landing page using grid/flex

    2
    Maximilian Dybvik•200
    @RegexRiddler
    Posted about 1 year ago

    Good job on completing the challenge 😁🎉

    I have a suggestion and a recommendation for you!

    • When a user has typed a valid email and the success "page" is displayed, try reflecting the user input email in the body text instead of the statically typed one.
    • And when a user inputs its own email there is really no reason to show the user input as an a tag with an href since the user is not going to email themselves.
    <p class="popup-description"> A confirmation email has been sent to 
      <a type="email" href="mailto:ash@loremcompany.com">ash@loremcompany.com. 
      </a> Please open it and click the button inside to confirm your subscription. 
    </p>
    

    Could be something like this:

    // index.js
    const formInput = document.querySelector('.form-input');
    const userEmail = document.querySelector('#user-email');
    
    function validateForm() {
      // If input passes validation, set userEmail to the value of formInput
      userEmail.innerHTML  = formInput.value;
      ...
    }
    
    // index.html
    <p class="popup-description"> A confirmation email has been sent to 
      <span id="user-email"></span>. Please open it and click the button inside to 
      confirm your subscription. 
    </p>
    

    Here is my submission, and my GitHub repo if you feel like comparing code.

  • mrriyas•60
    @mrriyas
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Still, I am not able to create share details perfectly

    Article-Preview

    1
    Maximilian Dybvik•200
    @RegexRiddler
    Posted about 1 year ago

    Good work completing this challenge! 😁

    The reason you are having trouble with your social media sharing menu is because you have nested it inside the wrapper for the author information.

    This is your code.

    // Author information wrapper
    <div class="profileBox">
        <div id="profileImg">...</div>
        <div id="profileContent">...</div>
        <div id="shareIcon">...</div>
    
        // Social media sharing menu
        <div class="notification">
            <span>SHARE</span>
            <img src="./images/icon-facebook.svg"/>
            <img src="./images/icon-twitter.svg" alt="">
            <img src="./images/icon-pinterest.svg"/>
        </div>
    </div>
    

    What I suggest you do instead is to move the "notification" div outside of the "profileBox" div, directly below it and use CSS position attribute to properly place the element.

    Like this.

    // Author information wrapper
    <div class="profileBox">
        <div id="profileImg">...</div>
        <div id="profileContent">...</div>
        <div id="shareIcon">...</div>
    </div>
    
    // Social media sharing menu
    <div class="notification">...</div>
    

    Here is my submission, and my GitHub repo if you feel like comparing code.

  • Nathan Bailey•190
    @tatsuya98
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    nothing really

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

    none that i could think off

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

    is there a better way for me to have done the semantic html

    is it responsive enough for mobile, if not what changes can i make

    product page using grid and flexbox

    1
    Maximilian Dybvik•200
    @RegexRiddler
    Posted about 1 year ago

    Great job completing this challenge! 😁🙌

    • I have a few comments regarding your layout.
    1. I suggest you add a little more padding to the left side of the text.
    2. On mobile try to center your content vertically and add a little space around the card.
    3. Right now you only use the desktop size image for your product photo. Try loading only the smaller image on mobile device and the larger image for desktops.

    Suggested to me by @danielmrx-dev using the <picture> tag can help loading the correct image based on screen size, which is better for bandwidth and performance.

    This is your code.

    <div class="container">
        <img src="./images/image-product-desktop.jpg" alt="" class="img |" />
        .....
    </div>
    

    Here is suggestion on how to apply it.

    <div class="container">
        <picture class="product-image">
            <source media="(min-width: 632px)" srcset="./images/image-product-desktop.jpg">
                <img src="./images/image-product-mobile.jpg" alt="perfume bottle among green leaves">
        </picture>
        .....
    </div>
    

    Here is my submission, and my GitHub repo if you feel like comparing code.

    Marked as helpful
  • fnpassong•160
    @fnpassong
    Submitted over 1 year ago

    Sass - React

    1
    Maximilian Dybvik•200
    @RegexRiddler
    Posted about 1 year ago

    A blank canvas is a great place to start.

  • Felipe Barreiro•100
    @anyuba123
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    doing good

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

    location of items

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

    with grid

    grid

    2
    Maximilian Dybvik•200
    @RegexRiddler
    Posted about 1 year ago

    Great job completing this challenge! 😁🙌

    • I have a few comments for you regarding your grid.

    I like your implementation of named grid areas👍I might refactor my CSS to do the same as it's very readable and maintainable.

    1. There is no reason to statically set the height of each grid item because you are setting the position and span of each item in the grid. Removing the height property on the grid items will make your page look more like the design.

    2. The reason Patrick doesn't align properly on medium screen size, and why the testimonials aren't matching the design, is because you mistakenly made too many columns for both medium and large screen sizes.

    This is your code.

    @media (min-width: 481px) {
        .container {
            grid-template-areas:
            "daniel daniel jonathan kira"
            "jeanette patrick patrick kira";
        }
    }
    
    @media (min-width: 1440px) {
        .container {
            grid-template-areas:
            "daniel daniel daniel jonathan kira"
            "jeanette patrick patrick patrick kira";
        }
    }
    

    Here is a suggestion on how to fix it.

    @media (min-width: 481px) {
        .container {
            grid-template-areas:
            "daniel jonathan kira"
            "jeanette patrick kira";
        }
    }
    
    @media (min-width: 1440px) {
        .container {
            grid-template-areas:
            "daniel daniel jonathan kira"
            "jeanette patrick patrick kira";
        }
    }
    

    Here is my submission, and my GitHub repo if you feel like comparing code.

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