Skip to content
OverviewSolutions
44
Comments
8

Talika Bajaj

@Talika-Bajaj670 points

I am an aspiring Frontend Developer, skilled in HTML, CSS, JavaScript, Tailwind CSS, and Sass. I am here to practice my skills and upskill myself. I am happy to learn here and work on myself with the help of feedback I'll get, which will make me a better developer.

I’m currently learning...

React JS

Latest solutions

View more solutions

Latest comments

  • P
    Xay•240
    @xayrax88
    What are you most proud of, and what would you do differently next time?

    This was a good review and practice. I had a fun time making this component, it seems self explanatory and was a great exercise. I would go back and implement the accessibility part, but didn't this time.

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

    I had trouble with creating the social links container part that had the triangle portion when toggling the social links on and off. I had to look up how to make a triangle or shape online which I reference from this source https://css-tricks.com/snippets/css/css-triangle/ This was a great resource to implement that for the social links part. Toggling the event listener for the JS button, took a little bit of trial and error but eventually got it.

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

    This was a great and fun mini exercise, although I did not make it accessibility user friendly or didn't implement any aria in the HTML part for screen readers and etc.,. No specific questions for here, I am always open to feedback.

    Article Preview Component

    2
    Talika Bajaj•670
    @Talika-Bajaj

    Hi

    Well done on completing this challenge. It looks similar to the original design. However I would like to suggest something regarding the image styles applied -

    Update the style of the drawers image and add width: 100% so that the image covers the whole area in the mobile design

    The style you have provided to the profile image is also applied to the share button image. .profile img { height: 50px; width: 50px; border-radius: 50%; }

    I suggest you should give the profile image a class or an id and directly access it so that the style is applied to that image only.

    Also on the share button, you should update the .share-icon class styles to these - border-radius: 50%; padding: 18px; border: none; cursor: pointer;

    And also update the .share-icon img style and set it to - height: 25px only.

    I hope all these style updations help you achieve the share button look similar to the design.

    Well Done. Keep it up!

    Marked as helpful
  • Talika Bajaj•670
    @Talika-Bajaj

    Your webpage looks quite similar to the design specified.

    However, I would like to suggest that you reduce the padding of the containers and increase the font weight of the heading in the containers

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

    hello

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

    hello

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

    hello

    flexbox

    1
    Talika Bajaj•670
    @Talika-Bajaj

    Good work !

  • Talika Bajaj•670
    @Talika-Bajaj

    Your solution looks exact like the challenge. Congratulation s

  • Leonardo Mendes•70
    @Choconaldo
    What are you most proud of, and what would you do differently next time?

    I care for the details, and the result is that it's very close to the original Figma design.

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

    Working on HTML tables is not as easy as I thought.

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

    Making it as close as pixel perfect as I can.

    Responsive Recipe page built using HTML & vanilla CSS

    1
    Talika Bajaj•670
    @Talika-Bajaj

    Hi @Choconaldo, Your project is very detail-oriented and looks similar to the design.

    I'd like to suggest something that will make it even better: You have set the image style as follows:

    .header-img { height: 171px; object-fit: cover; }

    However, I think if you set the height to 300px and remove the object-fit property the image would appear perfectly on the mobile design unlike how it is appearing now.

  • mik•20
    @MichaElL0
    What specific areas of your project would you like help with?

    Using flexbox properly

    Page made with Flexbox

    1
    Talika Bajaj•670
    @Talika-Bajaj

    Hi @MichaElL0,

    Your project looks great.

    I'd like to suggest a way to make it even better:

    • Giving margins when using Flexbox Layout isn't a good practice. Instead, you should try and use the gap property that will space your text evenly inside a container.
    .container {
     display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
    • Also, I suggest using the:root pseudo Class Selector to specify colors and then use them later in your code. For Example,
    :root {
    --Green: hsl(75, 94%, 57%);
    --White: hsl(0, 0%, 100%);
    --Grey: hsl(0, 0%, 20%);
    --Dark_Grey: hsl(0, 0%, 12%);
    --Off_Black: hsl(0, 0%, 8%);
}

    body {
    background-color: var(--Off_Black);
}

    It is really helpful and keeps you hassle free from copying colors again and again. To know more, you can read this article - :root pseudo-Class Selector

    Good Luck!

    Marked as helpful
View more comments