Skip to content
OverviewSolutions
31
Comments
41
Gautam Sarkar
@gautam32b7

All comments

  • Gautam Sarkar•850
    @gautam32b7Posted 3 months ago

    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%
}
    0
  • Gautam Sarkar•850
    @gautam32b7Posted 4 months ago

    You should put the background colour to the body element.

    0
  • Gautam Sarkar•850
    @gautam32b7Posted 4 months ago

    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
    0
  • tucecifci•150
    @tucecifciSubmitted 4 months ago
    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
    @gautam32b7Posted 4 months ago

    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

    0
  • Akila•70
    @Akila1199Submitted 6 months ago
    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

    1
    Gautam Sarkar•850
    @gautam32b7Posted 6 months ago

    Hi there

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

    0
  • Gautam Sarkar•850
    @gautam32b7Posted 7 months ago

    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
    1
  • CristianoAAA•30
    @CristianoAAASubmitted 8 months ago
    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
    @gautam32b7Posted 8 months ago

    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
    2
  • Ravi Bele•170
    @RaviBeleSubmitted 8 months ago
    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
    @gautam32b7Posted 8 months ago

    Hi Ravi

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

    Example

    p {
    line-height: 1.5;
}
    0
  • Gautam Sarkar•850
    @gautam32b7Posted 8 months ago

    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:[email protected]&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

    0
  • tucecifci•150
    @tucecifciSubmitted 8 months ago
    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
    @gautam32b7Posted 8 months ago

    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>
    0
  • Gautam Sarkar•850
    @gautam32b7Posted 8 months ago

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

    0
  • Gautam Sarkar•850
    @gautam32b7Posted 8 months ago

    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
    0