Skip to content
OverviewSolutions
9
Comments
6
Daniel Barda
@daniel-barda

All comments

  • Moa Davou•310
    @moadavouSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm very proud of the progress I've made in learning Git and GitHub. I didn't even know Git existed a few days ago. These tools are very useful, and I'm looking forward to developing my skills with them.

    I'll make sure to use responsive instead of absolute link paths next time so I don't have to redo it.

    What challenges did you encounter, and how did you overcome them?

    I didn't know why my image wasn't showing up on GitHub pages, the Frontend Mentor Discord Community helped me out (I was using absolute link paths).

    What specific areas of your project would you like help with?

    Since I'm still a beginner, I would greatly appreciate it if someone could skim through my code and look for improvements related to accessibility and best practices. I want to ensure that I write as good of a code as possible.

    QR code component

    2
    Daniel Barda•240
    @daniel-bardaPosted 7 months ago

    Hi, good job,

    Since this is a fairly small project, there isn't too much to see in terms of code.

    But I would recommend changing a few things in terms of best practices.

    1). You used height: 100vh instead of vh, and I recommend using dvh.

    There are various reasons why dvh should be used, but the main reason is that certain devices show a different result than we expect.

    2). You used REM, well done. But why not use it in this case as well?

      max-width: 320px;
  min-height: 500px;

    It is no problem using px for small values, but since these are quite large, I recommend using rem for various reasons.

    It is very important to remember px does not respect the user's browser font size.

    (Optional) - When working with rem, I recommend that you work with a trick called the 62.5% Font Size Trick. It can be very helpful and simplify our values.

    3). I'm not sure about the footer. Why did you add a div in the footer? There is no need for it.

    You can delete the div, put the content directly in the footer, and apply the "attribution" class to it.

    I am attaching some articles that may be helpful.

    1.) Explanation of dvh vs vh.

    If you are curious like me you can dive deep into the latest CSS viewport units.

    There is also a very detailed explanation of the behavior of vh and dvh.

    2.) dive deep into the latest CSS viewport units.

    3.) 62.5% Font Size Trick

    I hope this was helpful. Wishing you all the best.

    Marked as helpful
    1
  • Krishan Leong•50
    @krishanleongSubmitted 11 months ago

    I finally think I understand how width work with containers.

    HTML CSS

    1
    Daniel Barda•240
    @daniel-bardaPosted 11 months ago

    Good job. 🙂

    Only in a container, note that you use width: 600px.

    It would be best if you changed it to max-width: 600px.

    In addition to everything in class, subwhy you wrote flex: row; There is no such property.

    I guess you might mean the flex-direction: row.

    I am attaching 3 articles that may help you.

    max-width - article 1

    max-width - article 2

    flex-direction

    Marked as helpful
    0
  • Daniel Barda•240
    @daniel-bardaPosted 11 months ago

    Hi,

    The design is not displayed correctly, and this is because you specified the path incorrectly.

    "/Users/fabiennehalloin/Desktop/HTML Challenges/product-preview-card-component-main/stylesproduct.css"

    The correct path should be stylesproduct.css.

    In addition, please note that you are also using an incorrect path for the icon.

    Also, make sure you have uploaded the images to your specific project on GitHub.

    Since you have yet to do so, users cannot load the images on the website.

    Good Luck with That ! 😊

    0
  • Naglaa Raslan•580
    @codeAndcocoaSubmitted 11 months ago

    Is there anything you think is missing in my solution? Does my solution look good on both desktop / mobile screens?

    p.s: if you open my live URL and find no colors, please wait for a minute or two and refresh the page

    thanks in advance :)

    responsive product card created using css +html

    1
    Daniel Barda•240
    @daniel-bardaPosted 11 months ago

    Hi,

    I haven't checked on mobile, but on desktop, the layout is not displayed correctly because you forgot to set grid-template-columns in .product-box-grid.

    Additionally, I highly recommend avoiding the use of pixels (px).

    This is because pixels do not respect the user's browser font size.

    I suggest always using rem instead.

    Furthermore, I'm attaching an article that could be very helpful for your future projects.

    Good luck moving forward! 😊

    Pixels vs. Relative Units

    62.5% Font Size Trick

    Marked as helpful
    0
  • Daniel Barda•240
    @daniel-bardaPosted 11 months ago

    Good job 😊.

    I recommend using guard clauses in case the user doesn't enter anything in the email input.

    Guard Clause

      function handleSubmit(e) {
    e.preventDefault();
    if (!emailInput) return setIsValidEmail(false);
    setShowSuccessModal(true);
  }
    Marked as helpful
    1
  • Daniel Barda•240
    @daniel-bardaPosted about 1 year ago

    Hey, Nice job.

    But note that at about 738px, your design breaks.

    You can fix this with another Media query .

    Alternatively, you can use minmax and auto-fit And thus save you the Media queries.

    I leave it to you for reference

    https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/

    I hope this will be helpful for you. 😊

    Marked as helpful
    0