Skip to content
OverviewSolutions
5
Comments
15

Jewalikar-Nitin

@Jewalikar-Nitin210 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

Latest comments

  • Gracia Naimora Samosir•110
    @cia2003Submitted 11 days ago
    What are you most proud of, and what would you do differently next time?

    Nothing, I guess. For the next time, I want to try mobile-first workflow.

    What challenges did you encounter, and how did you overcome them?
    1. Clarity of my code

    I try to improve my code's clarity base on the latest feedback at previous project. I re-read the BEM Methodology Documentations.

    1. Define the aspect-ratio

    This is only a minor challenge and you can see the detail on my github.

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

    fm-product-review

    1
    Jewalikar-Nitin•210
    @Jewalikar-NitinPosted 11 days ago
    • Your design looking very good and same.
    • In above POC, since the image is main part of content, it must be in a content not in a background.
    • To change the image in responsive web you can use <picture> tag with srcset to change the image directly.(below example)
    <picture>
          <source srcset="images/image-product-mobile.jpg" media="(max-width: 40rem)">
          <img src="images/image-product-desktop.jpg" alt="product image">
</picture>
    Marked as helpful
    0
  • Jewalikar-Nitin•210
    @Jewalikar-NitinPosted 14 days ago

    Your design looks good and almost same. You can change the shadow to box-shadow: 0px 25px 25px 0px #0000000C; to make it look like exactly same. Use relative units em or rem instead of absolute units px.

    0
  • Jewalikar-Nitin•210
    @Jewalikar-NitinPosted 14 days ago

    Your design is good and looks almost same. You can give some padding-left to both <ul> and <ol> to achieve the indentation. Also you have used h2 tag directly without h1 which can cause the web accessibility issue, to avoid it use at least one level one tag (h1).

    1
  • Jewalikar-Nitin•210
    @Jewalikar-NitinPosted 15 days ago
    • Your design is very good . If you give border-radius: 10px; to the image and border-radius:20px; to card it will look more similar.
    • Also you have not used the any heading tags (ex. h1), which might cause web accessibilities issue so use headings tags in order h1>>>h6.
    • Change the title color to slate-900 which you'll find in Style-guide.md
    • Declare css variables in :root so you can use it easily multiple times (check below)
    :root {
  --White: hsl(0, 0%, 100%);
  --Slate-300: hsl(212, 45%, 89%);
  --Slate-500: hsl(216, 15%, 48%);
  --Slate-900: hsl(218, 44%, 22%);
}
    Marked as helpful
    0
  • Tyrone•60
    @xyon-devSubmitted 15 days ago
    What are you most proud of, and what would you do differently next time?

    it was simple

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

    none

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

    na

    Social links site

    1
    Jewalikar-Nitin•210
    @Jewalikar-NitinPosted 15 days ago
    • Your design looks good and almost same. However the :hover effect is missing.
    • On hover background of social media chips change to green and make the text color to gray.
    • There is no need to make different font-family font-weight wise, as whole page has only 1 font only add font-family property in body css it will get applied all over.
    • Also no need to apply font-weight to each li tag only apply to ul child element will inherits from parent element
    0
  • Jewalikar-Nitin•210
    @Jewalikar-NitinPosted 15 days ago

    Your design looks good, in your code you have used h3 tag which not a good practice we must follow the order h1>>>h6. Direct use of h3 can cause we accessibility issue, could you change it to h1 and change the font size the help of css also change the color to slate-900 to make design more similar.

    Marked as helpful
    0
View more comments