Skip to content
OverviewSolutions
15
Comments
81
Hania B.
@techanthere

All comments

  • Hania B.•1,320
    @techantherePosted almost 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
    1
  • Hania B.•1,320
    @techantherePosted almost 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
    1
  • Hania B.•1,320
    @techantherePosted almost 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.

    0
  • Hania B.•1,320
    @techantherePosted almost 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.

    0
  • Hania B.•1,320
    @techantherePosted almost 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
    0
  • Aril Harlih•20
    @arilhrSubmitted almost 3 years ago

    Hope to get some advice, especially for the responsiveness part. Still a bit struggle for the responsiveness part. Thank you.

    Stats preview card challenge

    1
    Hania B.•1,320
    @techantherePosted almost 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
    0
  • Hania B.•1,320
    @techantherePosted almost 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
    1
  • bad_nuclear•140
    @badnuclearSubmitted almost 3 years ago

    Hello, I am a Korean who is trying the front-end challenge for the first time. As a result of the challenge, I implemented a page on the desktop, but I wonder how to implement the screen when viewed on mobile, and I don't know how to decorate the css of the footer, so I ask for feedback.

    html, css and javascript web pages(no moblie)

    2
    Hania B.•1,320
    @techantherePosted almost 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 :)

    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonSubmitted almost 3 years ago

    Hello guys, Well I tried to hit pixel perfect on this one. what are your opinions on this one? Please don't forget to like and comment. :)

    Responsive QR code component

    1
    Hania B.•1,320
    @techantherePosted almost 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
    0
  • Muralidhar•190
    @Muralidhar22Submitted almost 3 years ago

    Hi All, Completed this challenge by googling and referring others solutions to workaround and finish it. Any Suggestions to improve my solution will be appreciated

    Thanks in Advance.

    Time Tracking Dashboard Using HTML | CSS | JS

    1
    Hania B.•1,320
    @techantherePosted almost 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
    0
  • Hania B.•1,320
    @techantherePosted almost 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
    1
  • Hania B.•1,320
    @techantherePosted almost 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
    1