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
Log in with GitHub
OverviewSolutions15Comments84

All comments

  • Hania B.• 1,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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

    @arilhr

    Submitted

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

    Stats preview card challenge

    #sass/scss

    1

    Hania B.• 1,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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

    @badnuclear

    Submitted

    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)

    #contentful

    2

    Hania B.• 1,360

    @techanthere

    Posted

    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,610

    @Kamasah-Dickson

    Submitted

    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

    #bem#sass/scss

    1

    Hania B.• 1,360

    @techanthere

    Posted

    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

    @Muralidhar22

    Submitted

    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,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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,360

    @techanthere

    Posted

    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
  • Hania B.• 1,360

    @techanthere

    Posted

    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

    0
  • Hania B.• 1,360

    @techanthere

    Posted

    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.

    1
  • Dev Rathore• 2,600

    @GitHub-dev12345

    Submitted

    This challenge Completed Using CSS Flex-Box & HTML5 Structure. this barcode card challenge very easy and knowledgeable .

    #100DaysOfCode #WebDevelopment #HTML5 & CSS3

    QR-code-component-challenge-hub

    1

    Hania B.• 1,360

    @techanthere

    Posted

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

    0
  • Kieran• 80

    @kilelx

    Submitted

    This is my first submission. Any constructive feedback to improve my code would be really appreciated! :)

    FAQ Accordion

    1

    Hania B.• 1,360

    @techanthere

    Posted

    @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

    1
  • pranav• 120

    @PrAnAvViNaYaKjAdHaV

    Submitted

    plz give your feedback, just your simple feedback can help me a lot 🙂🙂🙂🙂🙂

    Responsive QR code component

    1

    Hania B.• 1,360

    @techanthere

    Posted

    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

    1
  • Hania B.• 1,360

    @techanthere

    Posted

    @ccreusat finally some cool work to see on this challenge! Great Job 👍

    Marked as helpful

    1
  • Hania B.• 1,360

    @techanthere

    Posted

    @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

    1
  • DanielK• 440

    @DanK1368

    Submitted

    Hi guys. It has been a while since Ive done a challenge.

    First things first..

    Can someone help to actually display my page. I get the 404 error. I used SASS partials for this one with Parcel. Parcel created a dist folder for me which I understand is the one that is suppose to be used for final production. However, when I use the url from github pages it displays the error.

    Now regarding this challenge...

    I used SASS partials for the first time to practice making a better file structure using the 7-1 pattern. Not sure if I over-complicated things for this challenge. But Im wondering if you guys can have a look if I am structuring it right. I feel like I am not haha :)

    Also, if you notice that on the desktop version the text "Mechanical Wireless" header is suppose to be inline with the images. It is not. How can I get that component to be in line with the images using Grid? I ran into a few issues with that as I was transitioning to bigger screens and wanted to modify the layout. Because some of my components were in divs that had their own grid system. So another question I have is, how do I move a component that is part of another grid system out of it, like that header? Or is it better to structure my html differently so it makes it easier to move things around later on.

    Appreciate all the help, and hopefully someone can tell me how to get my site to actually work haha :)

    Typemaster Pre-Launch Landing page with SASS partials

    #sass/scss

    2

    Hania B.• 1,360

    @techanthere

    Posted

    I think you should reconfigure the pages settings for the repository, probably pointing to the root folder, choose the other folder instead.

    0
  • Aneta• 180

    @anetaanette

    Submitted

    Hi everyone! As soon as I saw this challenge I wanted to so it asap because it looked like a newbie level and it was definitely easier than the other ones. It took me around 40 minutes to complete it together with the screenshots, readme etc. I have one question tho. How do you make the footer 'float' to the bottom and center? Please let me know what else I could improve. Thanks and happy coding! Aneta

    QR code component

    #sass/scss#accessibility

    3

    Hania B.• 1,360

    @techanthere

    Posted

    Nice effort @anetaanette, keep it up. I think you should just put some margin-top on attribution class. I will really recommend not to use the class selectors this way, instead you can simply put the name of the element or better to use classes and then select that same class only for styling. Like for instance, instead of using body > main, use main, replace body > main > img with img selector only. Putting higher specificity is not a good choice unless really required.

    Marked as helpful

    0
  • Hania B.• 1,360

    @techanthere

    Posted

    Hey @XNWayne, since it's your first solution nice efforts put in, good job. Few problems which I found worth mentioning are:

    1. You are using id on all the elements for referring to in CSS. I know you will think but I need only one unique item so why not? But in real life projects, the id is used only when we need some Javascript to manipulate that element while classes are used all the time for styling. And the benefit is that through the use of classes, your code will become reusable.
    2. Since the icons can be treated only as the decorative content and you have set the alt empty as well, use aria-hidden="true" along with it so screen readers ignore these icons. This is a good practice for accessibility.
    3. You have not used a level 1 heading which is not required in design as well. But there should always be a h1 heading in the page and you can add an h1 tag with some contextual information about the page like you can say "Our cars features" etc. and then use sr-only class on that. You can also google for more on this...
    4. Your cards don't seem to be in the center, set min-height:100vh in body and some vertical and horizontal padding so the content is centered.
    5. The text "Learn More" should be enclosed by an anchor tag (a) instead of button, because this is more likely to result in a navigation to another page.
    6. And last thing is; never use px, instead em or rem units and they will scale the content automatically, I will prefer the rem units though.

    Good luck!

    Marked as helpful

    0
  • Hania B.• 1,360

    @techanthere

    Posted

    Hey, welcome to frontend mentor!

    If you are using github pages, then you should visit the github repository and then the settings option for repository which has this solution. In settings, visit the Pages tab on the left and then choose the correct path, if you set root in pages then you should copy the index.html file in the directory where the readme.md file is placed. I will suggest to move all the files in stats-preview-card-component-main to the root of repository. This should solve the problem. And then you can ask for feedback once the live site is visible to us.

    Good luck :)

    0
  • Hania B.• 1,360

    @techanthere

    Posted

    The problem happening because you have said explicit height of 18rem on all the cards which is not required. Some other points:

    • The height values of 100% are not required, height will fit the content by default. In fact explicit value of height for div is not required at all.
    • Level 1 heading (h1) should be used only once because it is used for the whole content like Join our community is the only one that fits the rule. Replace the h1 with h2 while keeping the same styling
    • Instead of setting margin-top and margin-bottom value on the container class, use padding on body which will align the content in the center both vertically and horizontally.
    • Also remove the height from the anchor tag and instead set padding for vertical and horizontal alignment.
    • The div with class answer-container should be an unordered list (ul) while p tag will be replaced by li tags which is logically correct and follows the semantics approach.

    Good luck!

    Marked as helpful

    0