Skip to content
OverviewSolutions
21
Comments
66
Prince Roy
@iprinceroyy

All comments

  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @Lizzietrust, I would recommend seeing my solution to get an idea to structure the folder and files so that you can have your image.

    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @sarvothamgowda, to avoid accessibility issues I would suggest some points here:

    1. Wrap the contents inside the main tag like this
    <body>
    <main> Your content.... </main>
</body>
    1. There should be one level heading h1, and if there's no requirement for the h1 element then set its font size to 0.
    • HTML
    <h1></h1>

    CSS

    h1{
font-size:0
}

    I hope it adds to your learning, happy coding :)

    Marked as helpful
    1
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Great work @Alex6pc, I would suggest some points here :

    1. Use kabeb-case for the class name.
    2. Wrap the contents inside the main tag
    <body>
<main>Your contents..</main>
</body
    1. Always use the relative unit rem.
    2. You can use CSS latest functions min(), max(), and clamp() for responsive fonts, margin, padding, and width.
    3. There should be the level one heading tag h1 if there's no requirement then set the font size to 0 to avoid accessibility issues.

    I hope it adds to your learning, happy coding :)

    Marked as helpful
    1
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Congrats @Manish-d-art, on completing this solution 👏 I would suggest some points here to center the component:-

    main{
min-height:100vh;
align-items: center;
}
remove container style block, it's unnecessary as justify-content of the main tag will handle it.

    After the updates, click on the generate screenshot button.

    • I hope it adds to your learning. Happy coding :)
    Marked as helpful
    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @elahemirzaee, you did excellent work. Congrats!

    You can prefer clamp property for h1 to make a responsive font for different devices & to match the design. You forgot to add the shadow property to the form element.

    Instead of using the main class, you can use the main tag to avoid accessibility issues.

    Hope it adds to your learning. Happy coding :)

    Marked as helpful
    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @vanjura, you did great work. I would suggest some points here:

    1. Hover state is not working. You should add some HTML markup & CSS rules for it. You can prefer my solution for reference.
    2. img tag must have alt attributes for the people with disabilities.
    3. Always use relative units instead of px for better scalability. 1rem = 16px

    I hope you find it helpful & it adds to your learning. Happy coding :)

    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @PriyankaArikatla1205, you did great work but you need to do some more stuff. So here are my points to be focused on

    1. Don't use id as a selector. It's a bad practice. Use class as a selector
    2. img tag must have alt attributes for the people with disabilities.
    3. Hover state is not working. You should add some HTML markup & CSS rules for it. You can prefer my solution for reference.
    4. Always use relative units instead of px for better scalability. 1rem = 16px

    I hope you find it helpful & it adds to your learning. Happy coding :)

    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    That's excellent work @Wtyka2504. I would suggest some points here:

    1. You can use modern CSS features like clamp, min, and max for fluid typography, width, and padding. These are really helpful as the font size of some text/padding changes on different devices. If you look design-preview, you will observe it a different font size is being used for different viewports. Reference clamp
    2. For designing websites, there is semantic HTML markup that you should follow it. You can prefer my solutions it has zero issues.
    3. Footer logo is invisible, you can use the filter property on the logo to change its color. I've done it.

    All others are perfect. I hope it adds to your learning. Happy coding :)

    Marked as helpful
    1
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @withmohitjoshi, excellent work. There are some quick fixes you need to work on

    1. body{background-color: var(--pale-blue); background-size: cover; }
    2. You can't use h2 just because it suits font size either you can use the p tag or use the heading tag successively from h1 to h6, not jump directly to h2. So, replace h2 with h1.

    I hope it adds to your learning. Happy Coding :)

    0
  • Eduard•90
    @EduardLucaciSubmitted over 2 years ago

    Grid

    1
    Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @EduardLucaci, Great work. You need to focus on some points here:

    1. Those avatar images with title, you can use figure & figcaption tag for that figcaption.
    2. Use the blockquote tag for quotes text.
    3. Use relative unit instead of px unit. 1rem = 16px.
    4. At least use level one heading, if there's no requirement h1 element then set its font size to 0 h1{font-size: 0; }.
    5. You should write a media query for the tablet as well, it's not perfect for iPad.

    I hope it adds to your learning. Happy coding :)

    0
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @yacineKahlerras, You did excellent work. I would suggest some points here:

    1. You can use modern CSS3 features like a clamp to make fuild-typography and min, and max for the responsive width.
    2. Wrap the contents in the main tag right after the body tag like this
    <body>
    <main>
       Your contents.....
    </main>
</body>

I hope it adds to your learning. Happy Coding :)
    Marked as helpful
    1
  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    Hey @hanzlasaadi, Great work. You need to focus on some points here:

    1. Don't use h1 multiple times, there can be only one h1 through the web page.
    2. Those avatar images with title, you can use figure & figcaption tag for that figcaption.
    3. Use the blockquote tag for quotes text.
    4. span is an inline tag, it can't be used as a block tag. Use div for the block.
    5. Increase the padding of the container to match with provided design. .container{padding: 5rem; }
    6. Use relative unit instead of px unit. 1rem = 16px.

    Hope it adds to your learning. Happy coding :)

    Marked as helpful
    1