Skip to content
OverviewSolutions
17
Comments
9
Hitesh Prajapati
@autistickyrios

All comments

  • Aldrin Cerezo•190
    @cerezoarSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I already updated this from my first try. That time I do encounter difficulties on my mark ups because of the many elements this challenge have. But slowly I get to practice a lot because of other challenges. That is why I am going back to previous challenge and improve them little by little.

    What challenges did you encounter, and how did you overcome them?
    • familiarity with HTML and CSS I have overcome them through studying, researching, and practicing to code here in frontend mentor.
    What specific areas of your project would you like help with?

    More on mobile responsiveness.

    HTML and CSS | Recipe Page Solution

    2
    Hitesh Prajapati•260
    @autistickyriosPosted 8 months ago

    Congratulations on completing the challenge! Pointing out some small mistakes in your code.

    1. The slight mistake of adding the quotation marks in your font-family at the h1 part in your css. The misplacement of the quotation mark is causing the code error of the font family not being applied to it.
    2. The font color of your project is all black, Its "Dark Charcoal" in the demo project.
    3. Maybe, add a little bit of spacing in the "Instructions" list. It looks so mixed up with each other.
    Marked as helpful
    0
  • kaoutar ouadih•800
    @kaoutar-ouadihSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of completing this challenge!

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

    I struggled with making the font size responsive without using media queries. I don't know which one to use rem, em, vh, vw.

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

    .

    Blog preview card

    2
    Hitesh Prajapati•260
    @autistickyriosPosted 8 months ago

    Congratulations on completing the project! You are doing great.

    1. This is a "One-Card" type of project which fits on a non scrolling page. Your website has a scroll right now. Try to avoid that for these type of single page projects which shouldn't have scroll bar. It can be done by adding display: flex; height: 100vh; width: auto; align-items: center; justify-content: center;

    to the parent element. Create that "parent" element right after the body tag and then start coding in it.

    1. Try to avoid giving fixed widths and heights to the cards like these unless its necessary.
    2. You missed to add active states CSS on hover on that "HTML & CSS foundations" thing.

    Small mistakes! All the best for your coding journey

    Marked as helpful
    0
  • Vitor Souza•240
    @souza-vitorSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I enjoyed doing this challenge. I was able to review a lot of things I had forgotten.

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

    I had a little difficulty centering the card and applying the display flex command correctly. I managed to solve the problem by reading some tutorials and looking at MDN Web Docs.

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

    Please feel free to give any feedback.

    social-links-profile

    1
    Hitesh Prajapati•260
    @autistickyriosPosted 8 months ago

    Well done.

    1
  • Hitesh Prajapati•260
    @autistickyriosPosted 8 months ago

    Looks perfect. Maybe try to add a bit of animations on hover over texts, that would make it look smooth instead of that sudden change in color. Can be done by adding transition: all 0.3s;

    0
  • Martin Bagnall•40
    @martinbagnallSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I would create better class names and try to use rems/ems instead of pixels.

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

    Maybe I shouldn't try to make it pixel perfect.

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

    Aria labels

    QR Code component solution

    1
    Hitesh Prajapati•260
    @autistickyriosPosted 8 months ago

    Well Done!

    0
  • Hitesh Prajapati•260
    @autistickyriosPosted about 1 year ago

    You forgot to link your css file correctly to the html file. I believe its the "/" before your "style.css" Try removing that slash and it should be fixed.

    0
  • Hitesh Prajapati•260
    @autistickyriosPosted about 1 year ago

    The font colors on your "Learn more" buttons don't match. Try to give all your "button" elements a class and style them individually. This will fix the the problem.

    Marked as helpful
    0
  • Hitesh Prajapati•260
    @autistickyriosPosted about 1 year ago

    The container isn't centered correctly. Instead of giving it a "margin-top" manually, you can center it in much easier way by using **display: flex; justify-content: center; align-items: center;** on the parent element. It will center all the child elements just like you used it on your container. You can use it on your "main" element

    The media queries needs some attention too. Its getting out of the screen around 750px width

    Marked as helpful
    0
  • Shree•10
    @Shree20010406Submitted about 1 year ago

    Hi my name is Shree(in short) i started practicing some JS projects like the basic one now i want to improve my JS and CSS skill

    Mainly i'm weak at building responsive sites i want to learn how to use media queries correctly, please show me a way to improve my JS and responsiveness skills

    QR code component using HTML and CSS

    2
    Hitesh Prajapati•260
    @autistickyriosPosted about 1 year ago

    First of all you should check your spacing around the content. The padding/margin around your QR Code is not the same on all four sides, the top side looks smaller than the other sides.

    You pushed up the footer content. Simple fix is to move that "Challenge by, Coded by" part below your QR Code part.

    The paragraph part of your text-paragraph section needs more padding around it. . And for media queries. Open your dev tools, switch to responsive mode and start lowering the width size, the moment you see your design getting broken, note that width size (in pixels) The best practice would be to use "em" on media queries, that is "XXpx divided by 16" (Example 400px/16 = 25em) set the media queries max-width to the value you get after dividing it and then starting breaking the design until it looks good to you. . All the best! lemme know if you have more confusions. (I am beginner too)

    1