Skip to content
OverviewSolutions
19
Comments
19
Arif Faisal
@arifaisal123

All comments

  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Good effort!

    However, you can improve your solution as your image is not properly aligned. You may want to tinker with your height and gap property in your qr-code-box class and background-size (cover) property in your qr-code-design class.

    Marked as helpful
    0
  • kirans•30
    @kamsirichardSubmitted over 1 year ago

    I used the " flex-direction : column; " property in the media queries to obtain the desired layout when viewed from a mobile phone. It had a bit of a challenge with the Json file but I got through it. I would love some tips on how to achieve the faded bottom of the dark blue circle and some clarification on if I can achieve it with only CSS

    Results summary component using HTML and CSS.

    1
    Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    You can achieve the gradient/faded colors by using CSS gradient.

    .circle { background-image: linear-gradient(red, yellow); }

    The code above is just an example of linear gradient that you can use. Instead of red, yellow, you can use actual color values mentioned in the style guide of this challenge.

    0
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Why not? I have seen many submissions here where the users have taken their creativity to another level by using the designs from these challenges.

    However, for this particular qr challenge, in my opinion from a user perspective, the animation is seeming a bit off with the design.

    Marked as helpful
    1
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Good work! Flexbox is an important concept which you can use to center your div elements both vertically and horizontally.

    In your code, instead of hardcoded value like using margin to position the box_1 element, you can put this box_1 element inside a container div element.

    I have refactored your HTML as below:

    <div class="container"> <div class="container"> <div class="box_1"> <div class="image"><img src="./image-qr-code.png" alt="QR_code" class="QR_img"></div> <div class="content"> <h4>Improve your front-end skills by building projects</h4> <p>Scan the QR Code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p> </div> </div> </div>

    Now your box element is inside the container div element. After that, add the following style code in your style element.

    .container { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

    This code will ensure that all its child elements are centered horizontally and vertically. Finally I removed the hardcoded margin value from your box_1 class.

    Other ways of centering you can explore are "top bottom transform: translate" and "CSS grids system"

    0
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    That's a very good attempt! However, I have the following opinions on your submission that you can consider:

    • For semantics, it is considered a good practice to give the most important heading as <h1> element. Try to look if there are other important headings than <h1>76</h1>.
    • Generally, styles are better kept with external stylesheets which you've rightly done! Nonethless, in some of your text, you have used <b> to bold. It is a better practice to style it in your css file. Maybe, you want to add a <span> around the text. Semantically, <b> does not have any much importance, but if you want to style it using tags, you can use <strong> which semantically refers to something with strong importance.
    • Additionally, you may want to add something more meaningful in your alt, inside the <img> tag. As it will be read by screen readers, you can write as "reaction icon" instead of just icon.

    Happy Coding!

    0
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    A very good effort! However, you may want to check out different devices in the mobile responsive version (using chrome developer tools) as I found white padding/margin at the top where the purple section is not completely aligned.

    1
  • Aaryn•130
    @Aaryn-RobinsonSubmitted over 1 year ago

    The most difficult part of the project was implementing the right margins to replicate the frontendmentor.io layout. I spent a majority of my time incorporating margins.

    One area of my code I'm unsure on is the required padding and trying to implement the paths from Figma successfully without breaking my design. I am designing on Chromebook so there is some limitations.

    How have you guys implemented the solutions? and I am open to feedback from everyone so feel free to chime in on how i could've done better. Thank you!

    Order Summary Component

    1
    Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Good work. However, I have couple of opinions for you.

    • Instead of using just border-radius: 1rem for your image container, you can use border-top-left-radius and border-top-right-radius to make the bottom borders flat and close to the design layout.
    • You can use media-queries to make it mobile responsive. Currently, it is aligned to the right in the mobile version.
    Marked as helpful
    1
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Good effort, but there is seemingly a bug when I tried your website on mobile. If you give an invalid date, i.e. day as 40, then the error message is not properly aligned, it gets hidden on the left. You may use <div> to show those messages at the correct location, or can use margin-left.

    1
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Good job on completing the challenge! I am adding just a bug here to improve your code further. Currently whenever I input an invalid day (suppose 40), it prompts "must be a valid day", "must be a valid month", and "must be in the past" altogether instead of one. I think you may want to check your javascript logic here.

    Marked as helpful
    1
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Nice attempt on the rotating purple circle. However, I found couple of issues with the site that you can consider.

    • Currently, the calculator does not serve its purpose of giving your age once your input your day, month, and year. I didn't find any related js either, so I'm guessing the calculation functionality is not added to your site.

    • Secondly, when you given an invalid month, day, or year input, it just changes the border color to red, and does not show any message, i.e. "must be a valid month".

    0
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Amazing work, and clean code.

    Adding my two cents here - You can make code files more organized, by keeping css files in css directory, js files in js directory, or in dist/ distribution folder. Currently, there are multiple files with the same name scattered in both dist and root directory.

    As you have already mentioned, this is only a desktop version, I'm guessing that's why there isn't a mobile responsive version.

    Good Day!

    1
  • Arif Faisal•580
    @arifaisal123Posted over 1 year ago

    Overall a very good attempt. Perfectly responsive for mobile. However, you may want to look at my recommendations below:

    1. In the mobile version, the top-bottom padding between the "dates and purple circle" is a bit higher, in my opinion, which you can reduce for aesthetics.
    2. There may be javascript logic errors, as when i input 8 as day, 11 as month, 1991 as year, it says 8 as "must be a valid date".

    Good luck!

    Marked as helpful
    0