Skip to content
OverviewSolutions
31
Comments
41
Gautam Sarkar
@gautam32b7

All comments

  • Gautam Sarkar•850
    @gautam32b7

    Hey there!

    If you want to create a round image, always ensure that the width and height are the same dimensions with a border radius of 50%.

    img {
width: 100px
height: 100px
border-radius: 50%
}
  • Osama Bhaa•200
    @OsamaPhaaldawla
    What challenges did you encounter, and how did you overcome them?

    js validation was pretty dificult but i after i learn rugular expression it was simple to handle with

    Contact Form with client side validation

    #sass/scss#accessibility
    1
    Gautam Sarkar•850
    @gautam32b7

    You should put the background colour to the body element.

  • Gautam Sarkar•850
    @gautam32b7

    Hi there!

    I appreciate your effort in completing the challenge. Apply a spinner is creative. However, the image path is wrong. I suggest you put all the images in a folder called images. Also, explore the picture tag in HTML.

    Happy coding

    Marked as helpful
  • tucecifci•150
    @tucecifci
    What are you most proud of, and what would you do differently next time?

    Here are some potential improvements that could be made to the application:

    Styling: Add CSS to improve the visual appearance of the app. Loading Indicator: Display a loading indicator while the advice is being fetched. Error Messages: Show user-friendly error messages on the UI instead of just logging them to the console.

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

    Understanding the Fetch API: Challenge: As a beginner, understanding how to use the Fetch API to make network requests and handle responses was initially challenging.

    Handling Asynchronous Operations: Challenge: Working with asynchronous operations in JavaScript can be tricky, especially when dealing with promises and asynchronous functions.

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

    While the basic functionality of the Advice Generator app is working well, there are several areas where I could use some assistance to improve and enhance the project: User-Friendly Error Messages: Help Needed: Currently, errors are logged to the console. I would like to implement user-friendly error messages that are displayed on the UI when something goes wrong (e.g., network issues). Details: Guidance on best practices for error handling in JavaScript and how to display error messages in a way that does not disrupt the user experience would be beneficial.

    Advice Generator App

    1
    Gautam Sarkar•850
    @gautam32b7

    Hi there!

    I appreciate your effort in completing the challenge. However, I would suggest you study my solution.

    Github link: https://github.com/gautam3333/advice-generator

  • Akila•70
    @Akila1199
    What are you most proud of, and what would you do differently next time?

    I have used HTML, CSS and Bootstrap for this. I felt I could do this fewer styles and tags. Also I would like to write a l cleaner code next time.

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

    I have some difficulties while making the active state. I have referred some resource online and make it work. By this I have learned some new things.

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

    Do I need to change anything in my style of writing code? Any suggestion to write a cleaner code?

    Blog preview card using HTML and CSS

    #bootstrap
    1
    Gautam Sarkar•850
    @gautam32b7

    Hi there

    You could study my solution. Here is the link: GitHub

  • Gautam Sarkar•850
    @gautam32b7

    Hi Natalla

    Nice job. It is a good practice to add some line-height to a text. The line-height property specifies the height of a line. Negative values are not allowed.

    Example

    p {
    line-height: 1.5;
}
    Marked as helpful
  • CristianoAAA•30
    @CristianoAAA
    What are you most proud of, and what would you do differently next time?

    I'm proud of the i learned a lot in the process and next time i would try to google the things that i don't know.

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

    I had some trouble with the border-radius, but i google'd it and found out that i can set the border-radius to less than 4 corners

    3 column preview of cars made with flexbox

    2
    Gautam Sarkar•850
    @gautam32b7

    Hi there

    Nice job. I have reviewed your code and found you have written the wrong image path i.e <img src="images/icon-suvs.svg" alt="Ícone com um carro SUV"/>

    The correct way to write an image path is <img src="./images/icon-suvs.svg" alt="Ícone com um carro SUV"/>

    ./ means current location

    Marked as helpful
  • Ravi Bele•170
    @RaviBele
    What are you most proud of, and what would you do differently next time?

    In this project, I learned about how to use grid template areas to create a layout. Also learned about how to change grid layout just by changing areas in grid-template-area.

    Testimonials grid section solution using CSS Grid

    1
    Gautam Sarkar•850
    @gautam32b7

    Hi Ravi

    Nice job. It's a good practice to add some line-height to a text.

    Example

    p {
    line-height: 1.5;
}
  • Gautam Sarkar•850
    @gautam32b7

    Hi there

    Nice work. I have reviewed your code and found some mistakes.

    Correct approach

    <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
<link rel="stylesheet" href="style.css">

    To link an image

    <img class="img1" src="./images/image-colton.jpg" alt="Colton-img">

    Hope this is helpful

  • tucecifci•150
    @tucecifci
    What are you most proud of, and what would you do differently next time?

    I finished the project in less time than I anticipated, and I felt proud of myself for setting up a semantic HTML document.

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

    The background color was too close to the container color, adjusting the colors' codes took me some time, but then I realized I should leave it as it was, there seems to be an issue with my screen.

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

    I completed my project without needing help in any area, but of course, I'm not sure if it followed best practices.

    Social Links Profile- Main

    1
    Gautam Sarkar•850
    @gautam32b7

    Hi there!

    Great job! I reviewed your code and found some mistakes. A few tips:

    :root {
    --green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark-Grey: hsl(0, 0%, 12%);
    --Black: hsla(0, 0%, 8%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.06rem;
}

    Always put the reset at the top

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.06rem;
}


:root {
    --green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark-Grey: hsl(0, 0%, 12%);
    --Black: hsla(0, 0%, 8%);
}

    Proper way to structure the HTML links

      <div>GitHub</div>
      <div> Frontend Mentor
      </div>
      <div>LinkedIn</div>
      <div>Twitter</div>
      <div> Instagram
      </div>

<ul>
<li><a href="#">Frontend Mentor</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
  • Gautam Sarkar•850
    @gautam32b7

    Nice work. Give some top & bottom margins to the body.

  • Gautam Sarkar•850
    @gautam32b7

    Hi there 👋

    Great job! If you hover over the Learn more button you will notice the page jumps. Here is how you can fix it.

    .btn-1 {
  padding: 0.8em 1.38em;
  border: transparent;
  background-color: var(--color-2);
  /* transition: border 300ms, color 300ms, background-color 300ms; */
  /* cursor: pointer; */
  transition: all 0.3s ease;
}

.btn-1:hover {
  cursor: pointer;
  background-color: transparent;
  /* border: solid 1px var(--color-2); */
  outline: 1px solid var(--color-2);
  color: var(--color-2);
}

    Hope you find this helpful.

    Marked as helpful
  • Gautam Sarkar•850
    @gautam32b7

    Hi there

    Good job!

    A few tips:

    • Always apply line-height to a text. For example
    p {
    line-height: 1.6;
}
    • Make a separate file for the main.css file
    • Make a separate file for the media-queries.css file.
  • Phurba•130
    @Phurba-Sherpa
    What challenges did you encounter, and how did you overcome them?

    there was small gap between image and content in mobile design.

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

    responsive, minimal css

    Responsive product preview card

    #accessibility#bem
    1
    Gautam Sarkar•850
    @gautam32b7

    Hi there

    Nice work! There is an HTML element called <picture>. The use of the <picture> tag is in responsive web designing where we need to load the different images based on their viewport.

    Marked as helpful
  • George Kandelaki•650
    @GeorgeKandelaki
    What are you most proud of, and what would you do differently next time?

    I think I did good, therefore I dont't think I would have done anything differently next time.

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

    I didn't encounter any challanges.

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

    Other than that I have no questions, But Please Give me FeedBacks and tell me about my mistakes In the code. Also Tell me what can be written better in the code, So I can get better at coding and improve my skills. Thanks!

    Huddel landing page

    1
    Gautam Sarkar•850
    @gautam32b7

    Hi there

    Nice work! I have reviewed your code and found some mistakes. In HTML follow these steps while linking to external files.

    Google fonts
<link rel="icon" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/media-queries.css" />

    For this challenge use icons from FontAwesome. In the hover state change the mouse cursor to pointer.

    cursor: pointer;

    Hope this help 😀

    Marked as helpful
  • hilla•810
    @hilla10
    What are you most proud of, and what would you do differently next time?

    I proud my work and everything next time i will do better than this

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

    every thing is great and it's easy

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

    I think every thing is great but if you have any suggestion please leave a message!

    Responsive Four-Card-Feature-Section

    #accessibility#sass/scss
    1
    Gautam Sarkar•850
    @gautam32b7

    Nice work. Apply transform: scale(1.04) to each card while hovering.

    Marked as helpful
  • Devon Hughes•220
    @DevonHughesCodes
    What specific areas of your project would you like help with?

    Any feedback on the background image would be great, I had trouble with positioning when browser window is resized.

    Profile Card Solution

    2
    Gautam Sarkar•850
    @gautam32b7

    Nice work! Remove the background images from the HTML and paste these codes into the CSS file.

    
body {
  background-image: url('../images/bg-pattern-top.svg'), url('../images/bg-pattern-bottom.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
}
    Marked as helpful
  • Ravi Bele•170
    @RaviBele
    What specific areas of your project would you like help with?

    Font sizes and margins where I want to more work on, please help to add correct margin and padding according to given images

    Responsive Webpage for Product Preview Card

    1
    Gautam Sarkar•850
    @gautam32b7

    Hi there!

    Nice work! With time, you will gradually learn about margin and padding. I follow the guidance of a unit. Here it is:

    1px | 2px | 4px | 6px | 8px | 10px | 12px | 14px | 16px | 20px | 24px | 28px | 32px | 36px | 40px | 44px | 48px | 56px | 64px | 80px | 96px

    Marked as helpful