Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
P

Hana

@Hanka8
Czech Republic
280Points

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

  • Desktop design screenshot for the Fylo data storage component coding challenge

    Responsive page using Flexbox

    • HTML
    • CSS
    0
    Hana280
    Submitted

    Hi! I had troubles placing the bubble exactly on the line of the second box on all devices. Any suggestions about better solution?

  • Desktop design screenshot for the Tip calculator app coding challenge

    Responsive page with Grid, Flexbox and Vanilla JS

    • HTML
    • CSS
    • JS
    0
    Hana280
    Submitted

    Hi FM community!

    I believe that my JS code can be simplified, but its my first project that contains more than a few lines. Therefore any suggestions are welcome ☺

  • Desktop design screenshot for the Intro component with sign-up form coding challenge

    Simple page with JS regex validation

    • HTML
    • CSS
    • JS
    0
    Hana280
    Submitted

    It seems ok at the end. Even so, any suggestions are welcome.

  • Desktop design screenshot for the Pod request access landing page coding challenge

    Responsive page, Flexbox, simple JS with regex for e-mail validation

    • HTML
    • CSS
    • JS
    0
    Hana280
    Submitted

    Hi! Do you have any suggestions how to apply filters to get a proper shade? Any other suggestions are welcome.

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    Simple page with Flexbox and Vanilla JS

    • HTML
    • CSS
    • JS
    0
    Hana280
    Submitted

    I dont understand the error in my HTML validations:

    ERROR Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

    Context:

    Any other suggestions are welcome ☺

  • Desktop design screenshot for the Article preview component coding challenge

    Simple component using Flexbox and Vanilla JS

    • HTML
    • CSS
    • JS
    0
    Hana280
    Submitted

    Hi FM community. The functioning was really chalenging for me. Especially overwriting something by clicking the button. At the end of the day I come to the visually good solution but I believe that there is a more elegant way of writing that code. Any suggestions are welcome!

Latest Comments

  • Solution screenshot
    • HTML
    • CSS

    NFT preview card component

    2
    P
    Hana280 | Posted 1 day agocommented on txosca's "NFT preview card component" solution

    Hi txosca.

    You provided a creative solution for hovering the image. However, I think its better solution to use pseudo-elements ::before and ::after. This way the hover effect will always appear over the image. You can check out my codepen to study ::before/::after here. Try adding the class for the div containing the image and use something like the code below.

    Also I dont think its a good idea to mix in-line and external css in one project. It creates a big mess.

    I hope this helps!

    .div-image {
      position: relative;
    }
    
    .div-image:hover::after {
      content:"";
      position: absolute;
      inset: 0;
      border-radius: 15px;
      background-color: hsla(178, 100%, 50%, 0.7);
    }
    
    .div-image:hover::before {
      content:"";
      position: absolute;
      inset: 0;
      background-image: url(images/icon-view.svg);
      background-repeat: no-repeat;
      background-position: center;
      z-index: 100;
    }
    
    0
  • Solution screenshot
    • HTML
    • CSS

    Stats preview card component

    2
    P
    Hana280 | Posted 1 day agocommented on leverh's "Stats preview card component" solution

    Hi leverh, nice job!

    You wrongly placed the end of the </div> in your html (you meant it under the attribution?) - I think its the root of your problems.

    I would place the attribution outside of the main section, and create a separate footer containing it. Then, you should remove "display: flex" and "align-items:center" from the body tag and place them in the .main tag. This way your footer will appear at the end at all screen-sizes and will be not affected by the flexbox.

    Also, you should remove .card {"margin-top: 18rem"} and .main {"height:100vh} from your media (this crops your content only on the height of mobile screen).

    Suggestions for accesibility:

    • instead of <section class="main>, use just <main> tag;

    Hope this helps!

    0
  • Solution screenshot
    • HTML
    • CSS

    Responsive QR Code

    3
    P
    Hana280 | Posted 1 day agocommented on Osama Ahmed's "QR code component" solution

    Hi Osama, nice job!

    When you use "%" on width, the card will shrink on smaller screens. Instead, you can use "rem" - then the cards width will remain the same even on smaller screens, so you wont need any special media queries for responsiveness.

    Other suggestions:

    • use "rem" istead of "px" for "font-size", so the users can change it in their browsers - its considered a better habit for accesibility;

    • its better to use semantic elements instead of non-semantic, so you should use <main> instead of <div>;

    • headings should start at <h1> level, also the document should contain at least one level-one heading, so you should use <h1> instead of <h2>;

    Keep up the good work! ☺

    1
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Coming soon page with Form Validation

    1
    P
    Hana280 | Posted 1 day agocommented on Jimmy Baradit's "Base Apparel coming soon page" solution

    Hi Jimmy, nice job!

    My suggestions:

    • You can add multiple classes in "element.classList.add()" or "element.classList.remove()", so your JS code will be a little bit shorter;

    • when there is no text content in the <button> tag, you should add the "aria-label" to label the element or "aria-labelledby" referencing to some other element with accesible name;

    • there are no margins around the content in the design;

    Other than that your solution is great, keep up the good work!

    0
  • Solution screenshot
    • HTML
    • CSS

    QR Code component solution

    3
    P
    Hana280 | Posted 1 day agocommented on Tommaso van Gelderen's "QR code component" solution

    Hi Tomasso, nice job!

    The main difference between ids and classes is that id can be used only on one element, while classes can be use for one ore more elements. The second thing is that ids are more specific, so they take precedence in your css. Generally classes are more common, because you can reuse them on other elements in greater projects.

    Other suggestions:

    • you should prefer semantic elements against non-semantic, so use <main> instead of <div>;

    • the document should have at least one <h1> landmark, so use <h1> on the heading instead of <p>;

    • the shadow around the card appears to be a little bit lighter than your solution, also the heading has a greater "font-weight"

    Keep up the good work!

    0