Skip to content
OverviewSolutions
14
Comments
11
Gaurav Pratap Singh
@gauravsingh1281

All comments

  • Gaurav Pratap Singh•340
    @gauravsingh1281Posted 11 months ago

    Hey Kornkanok, Congratulations on completing this challenge 👏👏. I have some suggestions for you. Whenever you use any image on your site always try to add alternative text for the image in the alt tags sometimes images are not loading properly on the websites so the alternative text gives brief information to the user on what type of image is this.

    for example - if you use the image of a cat on the website for some error it is not visible to the user then the user can see the alternative text whatever you have written in the alt tag. Like this <img src="cat.jpg" alt="cat-image">

    Marked as helpful
    0
  • Elouka972•80
    @Elouka972Submitted over 1 year ago

    Hi,

    I didn't manage to place the circles correctly for the background, if you have any tips and advice to give me on this subject, I thank you in advance

    Profile card component

    2
    Gaurav Pratap Singh•340
    @gauravsingh1281Posted over 1 year ago

    Hey Elouka972, I have seen your code and I have a suggestion for you. Instead of doing this in your reset.css file for resetting CSS --

    html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

    You can use a universal selector like this

    *{
padding:0;
margin:0;
box-sizing:border-box:
}

    And in the style.css file, you can use rem instead of px, em, %.

    Marked as helpful
    0
  • Gaurav Pratap Singh•340
    @gauravsingh1281Posted almost 2 years ago

    Hey Seyda, Congratulations on completing this challenge 👏👏. I have some suggestions for you. I have noticed that your site has become unresponsive below 800px viewport, to solve this problem you can give width in px, em, rem instead of % to the div of class box i.e <div class="box"> and wrap both paragraphs of class first and second in a div and also give some margin/padding to align them in the center of QR image.

    You can also go through my solution - https://gauravsingh1281.github.io/QR-code-component/

    Marked as helpful
    0
  • Karen Lourenço•380
    @KarenMascarenhasLourencoSubmitted almost 2 years ago

    Is my code understandable?

    Did I use the semantic HTML tags correctly, should I add more or less?

    In what areas of my code can I improve on?

    All feedback is greatly appreciate. It helps me to improve as a frontend developer. Thanks!

    CSS flexbox

    4
    Gaurav Pratap Singh•340
    @gauravsingh1281Posted almost 2 years ago

    Hey Karen Lourenço, congratulations on completing this challenge 👏🎉.

    I have seen your code, and I want to give you some suggestions to improve your code. You didn't use the border-radius property and cursor pointer property on the hovering effect of the Equilibrium image, and hovering effect on the Equilibrium text and the avatar's name as mentioned in this challenge when a user hover this element there should be a hovering effect and cursor which make your website more interactive.

    Marked as helpful
    0
  • Anas Elmarzouqy•60
    @EpsilomeSubmitted almost 2 years ago

    I want to know what can I write in the alt tags because it's always some images that I don't think provide any help or useful information to readers.

    3-column-card using grid

    1
    Gaurav Pratap Singh•340
    @gauravsingh1281Posted almost 2 years ago

    Hey Anas Elmarzouqy

    You can write alternative text for the image in the alt tags sometimes images are not loading properly on the websites so the alternative text gives brief information to the user that what type of image is this.

    for example - you use the image of a cat on the website for some error it is not visible to the user then the user can see the alternative text whatever you have written in the alt tag. Like this <img src="cat.jpg" alt="cat-image">

    0
  • Gaurav Pratap Singh•340
    @gauravsingh1281Posted about 2 years ago

    Hii Chiemeka Okongwu, Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the hovering effect and cursor pointer property on Equilibrium image, Equilibrium text and on the avatar's name as mentioned in this challenge when a user hover this element there should be a hovering effect and cursor which make your website more interactive.

    Marked as helpful
    0
  • Facundo•40
    @1991facundoSubmitted about 2 years ago

    Hello team! hope you are doing fine.

    This is my 2nd challange i did for frontendmentor.io

    I have a couple questions.

    A) I couldnt make the border radius on the pictures as the example you sent me.

    B) i couldnt get the text in the same way you sent me

    C) im having issues to leave the card in the middle of the page. Same with the last challenge (the qr code one), i had to watch a youtube video and in one the guy was using the

    min-height: calc(100vh - 1px);

    and in the other one

    max-height: calc(100vh - 1px);

    Im really confused on how it works, do you have any tip to understand it?

    Thanks!!!

    Perfume responsive

    3
    Gaurav Pratap Singh•340
    @gauravsingh1281Posted about 2 years ago

    Hii Facundo , Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the cursor pointer property on the button element when a user hover the button there should be a cursor which make your website more interactive.

    The answer of your doubts are --

    A) for border-radius you have to give border radius to image like this

    for desktop design

    img {
    border-radius: 12px 0 0 12px;
}

    for Mobile design

    img {
    border-radius: 12px 12px 0 0;
}

    B) for text you have to give font-size in px and also give font-weight like this -

    for Heading

    h1 {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 700;
}

    For description

    .product, .desc, .style {
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-grayish-blue);
    font-size: 18px;
    font-weight: 500;
}

    For button to take full width of the container give 100% width and also give some padding like this

    button {
    width: 100%;
    font-size: 22px;
    padding: 15px;
}

    C) for Centering the card use CSS display Property and give min-height 100vh like this -

    body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    You can also go through my solution-

    Marked as helpful
    2
  • Nick•160
    @HarmoniaCodesSubmitted about 2 years ago

    I feel that I learned so much between the last challenge and this one! Any and all feedback is welcome.

    Product Page - Responsive CSS

    1
    Gaurav Pratap Singh•340
    @gauravsingh1281Posted about 2 years ago

    Hii Nick, Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the use hovering effect and cursor pointer property on the button element when a user hover the button there should be a hovering effect and cursor which make your website more interactive.

    Another thing i noticed that your site become unresponsive below 400px width, to solve this problem you can give width in px, em, rem instead of % to the div of class card i.e <div class="card container"> and also give some padding to the <div class="info-box six columns" >
    and for the pricing section wrap them in a another div and give a class of pricing-section and center them with a CSS display Flex Property like this --

    <div class="pricing-section">
<span class="new-price">$149.99</span>
<span class="old-price">$169.99</span>
</div>

.pricing-section {
    display: flex;
    justify-content: center;
    align-items: center;
}
    Marked as helpful
    1
  • Gaurav Pratap Singh•340
    @gauravsingh1281Posted about 2 years ago

    Hii Raul, Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the cursor pointer property on the button element when a user hover the button there should be a cursor which make your website more interactive.

    Marked as helpful
    0
  • Gaurav Pratap Singh•340
    @gauravsingh1281Posted about 2 years ago

    Hii Dominika, Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You only use hovering effect after width : 1440px you should apply this to all the orientation so that hovering effect work on all the devices.

    Marked as helpful
    1
  • Gaurav Pratap Singh•340
    @gauravsingh1281Posted about 2 years ago

    Hii , Instead of using form input type="radio" for rating section you can create 5 divs and position them with CSS display flex property.

    you can also go through my solution - https://gauravsingh1281.github.io/Frontend-Mentor-Interactive-rating-component/

    0