Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
15
Comments
77
Hania B.
@techanthere

All comments

  • Can Surer•80
    @cansurer-at
    Submitted over 3 years ago

    Order summary responsive

    3
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Congratulations on completing another challenge! Few things I will like to highlight for help, you are almost overusing the heights and widths and then those too with the viewport units which is not ideal for every container. You should rather set min-height:100vh; in the body selector, and that's all you need. Other than that I don't understand why are you using fixed widths and heights everywhere, like using height:70vh; inside for middle_div is redundant. Your solution is breaking on widths higher than 480px. I think you don't need to set any media queries for this solution. Just set some max-width on .main, some padding in body selector and you are good to go.

    For html structure, span is not required inside the button instead you can directly style button text. Span is mostly used for applying different styles to a small text within the same paragraph, heading or button if there is some text different from the whole text inside the button. You should use anchor tag <a> or button for "change" option and same holds for others like cancel etc.

    Hope it helps!

    Marked as helpful
  • Aayush Raj•120
    @Prabhat-kumar-1976
    Submitted over 3 years ago

    Unable to make completely correct but here it is.

    2
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Hmm.. your solution looks great! Just that your card is not aligned in center vertically. Set min-height:100vh instead of height in body selector, and remove overflow: hidden and you are good to go. In fact it's great to never use overflow: hidden unless really required. Setting min-height on body to 100 of the viewport height is also a good thing you will need in most of the solutions.

    Good luck for your future projects as well. Happy coding :)

    Marked as helpful
  • StrigZ•270
    @StrigZ
    Submitted over 3 years ago

    Four Card Feature Section with CSS3 and HTML5

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Your solution looks great!!! But wait h1 can be the main heading with text "Reliable, efficient delivery Powered by Technology" what do you say, I don't see a reason to make it h2 maybe.

    A little problem I am seeing after testing on smaller screens, a horizontal scrollbar starts showing under the width 375px and margins on right of cards starts decreasing, I couldn't understand from where did this come, can you please verify.

  • Jintax•20
    @Jintax1
    Submitted over 3 years ago

    Stats preview card component

    2
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    You should design mobile-first, where you first design for mobile screen size and then apply media queries for larger screens like this: @media only screen and (min-width: 768px) { code for this screen size}

    or apply large value for min-width like 1440px, which is the size of the screenshot you see above.

  • Jfkay531•40
    @Jfkay531
    Submitted over 3 years ago

    Order Summary Component with HTML/CSS

    2
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Hmm.. you should probably start using flexbox, this is the perfect little course on Flexbox for you. Hope this will help solve this challenge as well. Just in case you know about flexbox but not comfortable applying try this cheatsheet on flexbox. Here is the another one Flexbox Froggy for practice.

    I am sure they will help you apply those tiny changes required to make this design look good. Just apply flex box on the div with "plan" class (btw nav should not be used inside there ) and you are good to go.

    Marked as helpful
  • Aril Harlih•20
    @arilhr
    Submitted over 3 years ago

    Stats preview card challenge

    #sass/scss
    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    It looks great on larger screens. For smaller screens, it doesn't work. You should start mobile-first design, where you design for smaller screens first like you position all the boxes according to mobile design and then use media query @media only screen and (min-width: 768px) for large screen and then 1440px afterwards etc. Using max-width: 375px is unnecessary.

    Marked as helpful
  • Abdullah Farea•180
    @AbdullahFarea
    Submitted over 3 years ago

    Time Tracking Dashboard [HTML, SASS, JS]

    #sass/scss
    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Hey I liked your solution, especially it's so good responsive wise. I don't know if you are considering any suggestions but here it is, you need to make interactive elements either button or links and here the stats daily, weekly and monthly should be buttons. It makes it semantically sound as well when you are clicking on buttons.

    Marked as helpful
  • bad_nuclear•140
    @badnuclear
    Submitted over 3 years ago

    html, css and javascript web pages(no moblie)

    #contentful
    2
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Congratulations on completing your first challenge on FM, looks really nice! I think I should also recommend you to start with easy challenges first like 2 to 3 HTML and CSS only projects and then you are good to go. Especially after seeing this, I am sure you will learn a lot this way :)

  • Kamasah-Dickson•5,570
    @Kamasah-Dickson
    Submitted over 3 years ago

    Responsive QR code component

    #bem#sass/scss
    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    The solution looks perfect, great job with that.

    Just in case it's helpful I will suggest to not add the img in the background and instead use img tag in HTML, and that's because background image should be used when it is not playing any distinct role in the UI than only decorative content, while here it has primary goal to scan for url, so img tag with alt attribute should work.

    Marked as helpful
  • Muralidhar•190
    @Muralidhar22
    Submitted over 3 years ago

    Time Tracking Dashboard Using HTML | CSS | JS

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Congratulations on completing another challenge, it's looking great! I have looked into your code and have few suggestions:

    1. "Report for Jeremy Robson" should all be enclosed by a h1 and each title should be an h2.

    2. There must be a way to tell the user which button is active, i.e. daily, weekly or monthly stats, at the moment. You can use aria-expanded or aria-selected on button.

    3. Add some active and hover states on button to make them standout when any of them is selected, you can use aria-selected="true" on the button which is active and then apply the color using the selector like this [aria-selected=true]{ color: #fff; }

    4. I have tested your solution on smaller heights, you should add some vertical padding on the body as well.

    5. As it can be seen on the initial loading of page, the static data of 0hrs is shown, which doesn't really look nice, you can use a function to load the data on window.onload or something similar in Javascript and keep one button active on loading.

    6. Check the accessibility report and try to correct all the mistakes, it will really help you do things semantically well.

    Good luck!

    Marked as helpful
  • Prajwol Shrestha•190
    @Prajwol-Shrestha
    Submitted over 3 years ago

    Frontend Mentor - Social proof section solution

    2
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Hey really great job with the solution. Looks great, except for smaller heights the content gets covered, you should really use min-height:100vh; in body selector, add some padding there and remove min-height from mainContainer.

    Marked as helpful
  • Corvida Raven•680
    @SheGeeks
    Submitted over 3 years ago

    Responsive Time-tracking Dashboard

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Hey, great job! solution matches perfectly with the design.

    Just a few suggestions; for html, links are not good for this case as they are used for navigation to a different page, while buttons are perfect for use here. For img with empty alt, it will be great to add aria-hidden="true";, so screen readers ignore it. And hey add some color change for an active daily weekly or monthly stats, button to make it standout.

    Happy coding :)

    Marked as helpful
  • Xavi Alfaro•140
    @d3vcloud
    Submitted over 3 years ago

    Order summary component solution

    2
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Good job @d3vcloud! Here are the few suggestions for you:

    1. I have tested your solution, the card is not centered vertically in small heights and that's probably because you need to add some vertical padding in body. It's better to add min-height:100vh; in body
    2. No need to apply styling on both html, body { } instead use body selector only
    3. The card has no padding in smaller screens, try considering mobile-first design and resize card such that it works on smaller screen, don't need media queries, you can just add max-width instead of width here and some padding on the "container" div .

    Good luck!

    Marked as helpful
  • Stephanie•100
    @Sneflenie
    Submitted over 3 years ago

    QR code component | HTML & CSS

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Great work! the solution matches exactly to the design. Just a tiny bit for image, either you should add some text value for alt or if left empty it's always good to add aria-hidden=true for accessibility.

  • Dev Rathore•2,540
    @GitHub-dev12345
    Submitted over 3 years ago

    QR-code-component-challenge-hub

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Good job with this challenge. what are these hashtags for here 🤔

  • Kieran•80
    @kilelx
    Submitted over 3 years ago

    FAQ Accordion

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    @kilex great work on the solution! It will be good to add the footer tag instead of div for attribution. I have checked your solution, it's breaking on smaller heights and that's probably because you have added negative top value on image instead add transfom: translateY(value) or margin-bottom: negative value.

    Marked as helpful
  • pranav•120
    @PrAnAvViNaYaKjAdHaV
    Submitted over 3 years ago

    Responsive QR code component

    1
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    Hey, great job with the first solution, it looks perfect visually.

    Just a few things I will suggest to change in html structure. Use h1 instead of h4 and then you can change font-size for h1, you should use headings in order. And you don't really need to set explicit width and heights on ImageCenter class.

    A simple way can be first setting width on card like here the first div with class "center" takes some fixed width for the whole card size (no height required) and then when you set width: 100% on img inside it automatically fits the card width. You can apply vertical and horizontal padding on the div with class "ImageCenter" then.

    I will also suggest to use the rem units instead of px, they are more flexible and will be helpful in future projects as well.

    Happy Coding :)

    Marked as helpful
  • Aakash Verma•9,500
    @skyv26
    Submitted over 1 year ago

    QR Code Component [Mobile First + Vanilla CSS + Responsive]

    #accessibility
    6
    Hania B.•1,280
    @techanthere
    Posted over 3 years ago

    @skyv26 that's awesome! And here I am still planning to complete this cute looking challenge :) And hey just a little suggestion, footer text is flowing over the card, when the height is decreased, I think you don't really need to use position property for this solution, instead just stick with some padding and for the footer some margin.

    Marked as helpful
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

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