Skip to content
OverviewSolutions
9
Comments
11

Gautam Sarkar

@gautam-32b7Varanasi, Uttar Pradesh240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Saima Ahmed Sial•1,220
    @saimasial-bit
    What are you most proud of, and what would you do differently next time?

    I am most proud that I successfully completed this challenge using only HTML and CSS. It helped me improve my understanding of structuring a webpage and styling it to match the given design. Next time, I would focus on making my code more efficient by using CSS flexbox/grid more effectively and ensuring better responsiveness for different screen sizes.

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

    One of the challenges I faced was aligning the elements perfectly according to the design. Initially, some sections were not positioned correctly, but I resolved this by carefully adjusting margins, paddings, and using flexbox. Another challenge was ensuring that the text and images were responsive. I overcame this by using relative units like percentages and rem instead of fixed pixel values.

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

    This project helped me strengthen my CSS skills, especially in layout techniques like grid and flexbox. I also learned the importance of attention to detail when recreating a design. Additionally, I realized how crucial it is to test the design on different screen sizes to ensure responsiveness.

    Social-Links-Profile | HTML & CSS

    2
    Gautam Sarkar•240
    @gautam-32b7

    Hi there!

    Your solution looks amazing. However, I would suggest you work on spacing and use an external CSS file instead of an internal CSS file.

    Happy coding!

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

    I'm proud that it looks like a decent webpage. I hope to learn how to create a responsive website soon, because right now it looks better on desktop than mobile.

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

    At first, none of the CSS styles I was creating was working. Turns out I forgot to link the style.css file to the index.html file.

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

    I don't know how to change the layout to remove the colored background and enlarge the photo on mobile view. I'm also not sure whether I should be using 'class' or 'id' on the HTML elements.

    First webpage using HTML and CSS

    2
    Gautam Sarkar•240
    @gautam-32b7

    Hi there!

    Your solution looks amazing. In CSS, both class and id are used as selectors to apply styles to HTML elements.

    class: Target multiple elements with the same styles.

    id: Target a single, unique element.

    I prefer the class selector for styling to keep CSS maintainable.

    I hope you find this helpful.

    Marked as helpful
  • Gautam Sarkar•240
    @gautam-32b7

    Hi there!

    Your solution looks amazing.

    .card:nth-child(1) .button:hover {
    color: var(--very-light-gray);
    border: 2px solid var(--very-light-gray);
    background-color: var(--bright-orange);
}

    Change to

    .card:nth-child(1) .button:hover {
    color: var(--very-light-gray);
    outline: 2px solid var(--very-light-gray);
    background-color: var(--bright-orange);
}

    Outline is a line outside of the element's border.

    I hope you find this helpful.

    Marked as helpful
  • Gautam Sarkar•240
    @gautam-32b7

    Hi there!

    Your solution looks amazing. However, there are a few mistakes.

    <ul class="profile__social-links">
    <li class="profile__social-link">GitHub</li>
</ul>

    Use anchor tag. The <a> tag defines a hyperlink, which links from one page to another.

    <ul class="profile__social-links">
    <li class="profile__social-link"><a href="#">GitHub</a></li>
</ul>

    Use rem over px. rem units are based on the document's root element (HTML) and are therefore more flexible and responsive than px units.

    html {
    font-size: 62.5%;
}

    I hope you find this helpful, and happy coding!

  • Gautam Sarkar•240
    @gautam-32b7

    Hi there!

    Your solution and coding style are amazing. However, I would suggest you separate the media query file. Separating media query files in CSS improves code organization, maintainability and performance.

    Happy coding!

  • Gautam Sarkar•240
    @gautam-32b7

    Hi there!

    Your solution looks amazing. I would suggest using rem over px.

    rem (Root EM) is relative to the root <html> font size, whereas px is an absolute unit.

    If the user changes their browser's default font size (e.g., from 16px to 20px), elements using rem will scale accordingly, while those using px will remain fixed.

    Happy coding!

    Marked as helpful
View more comments