Skip to content
OverviewSolutions
43
Comments
8
Talika Bajaj
@Talika-Bajaj

All comments

  • Xay•20
    @xayrax88Submitted 4 months ago
    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•650
    @Talika-BajajPosted 4 months ago

    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
    1
  • Talika Bajaj•650
    @Talika-BajajPosted 6 months ago

    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
    0
  • mvassari73•80
    @mvassari73Submitted 7 months ago
    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•650
    @Talika-BajajPosted 7 months ago

    Good work !

    0
  • Talika Bajaj•650
    @Talika-BajajPosted 7 months ago

    Your solution looks exact like the challenge. Congratulation s

    0
  • Leonardo Mendes•70
    @ChoconaldoSubmitted 8 months ago
    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•650
    @Talika-BajajPosted 8 months ago

    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.

    0
  • mik•20
    @MichaElL0Submitted 8 months ago
    What specific areas of your project would you like help with?

    Using flexbox properly

    Page made with Flexbox

    1
    Talika Bajaj•650
    @Talika-BajajPosted 8 months ago

    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
    0
  • PYXHD•270
    @PYXHDSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy to notice my progress. This exercise seemed rather simple to me, I performed it in 1 hour and without any particular difficulty.

    My solution

    1
    Talika Bajaj•650
    @Talika-BajajPosted 8 months ago

    Hi, Congratulations your blog preview card is similar to the designated card and is responsive as well. However, I suggest, that the font-size of the text should be even as it will make the text more presentable and aligned.

    Marked as helpful
    0
  • amina-refik•80
    @amina-refikSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    learning how to use git commands.

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

    The font size specified in the style guide didn't align properly with the image provided in design-desktop.jpg, so I had to make adjustments accordingly while using the image as a background.

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

    is my web app considered responsive?

    a simple centered web card

    1
    Talika Bajaj•650
    @Talika-BajajPosted 8 months ago

    Hi, Your QR-Code Component is near perfect, however i suggest, you should set the color of the text in second line to the specified color provided in the style-guide.md then your component will look similar to the design. Also, your component is responsive and can be viewed across all devices. Good Luck !

    1