Skip to content
OverviewSolutions
59
Comments
15
MichalTrubini
@MichalTrubini

All comments

  • MichalTrubini•1,220
    @MichalTrubini

    Hi everyone,

    Could someone please advise me regarding error "Attribute loading not allowed on element img at this point."?

    Is this because the validator is not yet configured to include lazy loading as proper syntax for img tag?

    Cheers

  • MichalTrubini•1,220
    @MichalTrubini

    Hi Paula,

    When it comes to functionality, there is a small bug: it is possible to input multiple decimal points.

    I like the transition effect between switching themes. I should include one myself. :-)

    Michal

  • MichalTrubini•1,220
    @MichalTrubini

    Hello there,

    Any ideas why the accessibility report says there is an error "Form elements must have labels"? I actually included a label for the input (set it to hidden though).

    Thanks

  • MichalTrubini•1,220
    @MichalTrubini

    Thank you Sachin for the feedback. This has been fixed. I will re-generate the screenshot once it is possible because at the moment I am getting message about internal server error when attempting to re-generate.

  • MichalTrubini•1,220
    @MichalTrubini

    Hello there,

    Thanks for the feedback. I don't know what's wrong but when I click on "Preview site", the layout looks the way it should (as per the design figma file). However, the screenshot of the site (generated above these comments) shows the hero image on the left with "Humanizing your insurance" missing. Because the layout is correct when you go to the actual site, right: 12% should not be necessary. Or maybe I misunderstood you?

    What I forgot to mention when writing my original post is that the gap between hero image and the section that follows is visible on mobile devices.

    Michal

  • MichalTrubini•1,220
    @MichalTrubini

    Hi Rohit,

    According to the reporting tool, there are some accessibility and HTML issues. Not sure if you know, but prior to submitting the solution you can check for HTML issues using an HTML validator:

    https://validator.w3.org/

    Furthermore, I noticed that your input email field allows submitting when nothing was entered by the user. You can fix this by specifying "required" e.g.

    <input type="email" id ="email" required>

    As per design specs, there should be also an error message displayed on error. This can be added using javascript (I don't think pure CSS can do that job even though the author of the challenge claims only HTML & CSS should be used?).

    Regards,

    Michal

    Marked as helpful
  • MichalTrubini•1,220
    @MichalTrubini

    Hello there,

    I suggest using this tool to change color of svg files. It works perfectly.

    https://codepen.io/sosuke/pen/Pjoqqp

    Marked as helpful
  • MichalTrubini•1,220
    @MichalTrubini

    Hi David,

    Instead of switching between "display:none/display:block", I set the opacity to 0 by default. When a user clicks on the button, the opacity is set to 1 with "transition: opacity 0.5s".

    ;-)

  • MichalTrubini•1,220
    @MichalTrubini

    Hey Mike,

    Thanks for the suggestion! Animation is now there.

  • MichalTrubini•1,220
    @MichalTrubini

    Hi Byron,

    This was a great suggestion. The answer was so simple: instead of height, use max-height!

    I had to add "line-height: 0" to the answer__body class and "line-height:1.8rem" to answer-visible for it to work. Also, added padding to animation so that there was no stutter.

    There is one small bug still which I need to figure out: slide-down is animated, but slide-up is not, even though I added the transition attribute to answer__body.

    Cheers!

  • MichalTrubini•1,220
    @MichalTrubini

    For some reason the stats do not update when value submitted. This worked in one of my previous versions of code. Need to check and re-submit...

  • MichalTrubini•1,220
    @MichalTrubini

    Hi everyone,

    Could I get feedback on using localStorage for this task? I have used it but is it a best practice? I mean, is it not resource-heavy or overkill to save the input from the user in such a way?

    Thanks

  • MichalTrubini•1,220
    @MichalTrubini

    Not sure what the best way is. I used css filter property.

    I used this tool to achieve the desired color.

    https://codepen.io/sosuke/pen/Pjoqqp

  • MichalTrubini•1,220
    @MichalTrubini

    Wow, thank you. Great feedback, much appreciated.

  • MichalTrubini•1,220
    @MichalTrubini

    Hi Tony,

    I am also a beginner so don't take my advice as the advice of an expert.

    Your site does not work on mobile. By the looks of it, first you completed the desktop version and then scaled down by using media queries with max-width. I would suggest starting from bottom-up, that is a mobile-first approach. Then, when scaling up, use media queries with min-width.

    Furthermore, move from px to rems, don't set widths to fixed numbers like 700px, unless it makes sense sense or is justified because you might end up with horizontal scrolling on mobile.

    Also, when using header tags it is a good practice not to jump from h1 to h4. Instead, I would use h1 --> h2.

    Hope this helps.

    Michal

    Marked as helpful