Skip to content
OverviewSolutions
21
Comments
66
Prince Roy
@iprinceroyy

All comments

  • Prince Roy•1,210
    @iprinceroyy

    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.

  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

    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 :)

  • Prince Roy•1,210
    @iprinceroyy

    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 :)

  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

    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 :)

  • Eduard•90
    @EduardLucaci

    Grid

    1
    Prince Roy•1,210
    @iprinceroyy

    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 :)

  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

    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
  • Prince Roy•1,210
    @iprinceroyy

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

    1. Always use a separate CSS file to write CSS rules & then attach that file to HTML using the link tag. <link rel="stylesheet" href="css-filename" >
    2. correct CSS rule for box1 background to avoid that gap between border of the card & box .box1{ width: 100%; }.
    3. semantic HTML markup for the body to avoid accessibility issues
    <body>
     <main>
          Your content...
     </main>
</body>


I hope it adds to your learning, Happy Coding :)
  • Prince Roy•1,210
    @iprinceroyy

    hey @imadbg01, You need to focus on some here:

    1. You should use the font family which is provided in the style-guide.md file. First, you need to import that font link via CSS or HTML how to use google fonts.
    2. Don't use id as a selector. It's a bad practice.
    3. For handling validation, you can prefer my solution, It's simple & effective.
    4. CSS folder is not an asset, it's not a third-party folder; you created that. So it should be at the starting hierarchal level.

    You did really excellent work, keep it up! Hope it adds to your learning, Happy Coding :)

    Marked as helpful
  • Prince Roy•1,210
    @iprinceroyy

    Hey @Joseph-Benavides, great work.

    I would suggest some points here:

    1. Set the width & height of the avatar image to the same value to make it a perfect circle.
    2. Always use a relative unit rem, avoid px unit.

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

  • Prince Roy•1,210
    @iprinceroyy

    Hey @mosiahrs, you did excellent work. I would suggest some points here:

    1. Don't use id as a selector. Always use class as a selector.
    2. Follow mobile-first workflow. Though here it seems easy but on large websites it would be difficult to handle mobile viewpoint after desktop.
    3. Use kebab case for class name or id name.

    Hope it helps to your learning. Happy Coding :)

  • Prince Roy•1,210
    @iprinceroyy

    Hey @victorebegbuna, You did a good job. But this solution is not robust. I would suggest another approach which is easy:

    1. You should first create one main container for the four cards.
    2. Set the display property for the container to flex in mobile view. Like this .container{ display: flex; flex-direction: column; }
    3. For desktop view, use the @media query & change the display property. @media (min-width:992px){ .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } }

    You can see this approach in my solution. I've done it. I hope it adds to your learning, happing coding :)

    Marked as helpful
  • Prince Roy•1,210
    @iprinceroyy

    Hey @KayMohh. You need to focus on some key points here:-

    1. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    2. Decrease card size.

    Other than that all seem to be perfect. Hope it adds to your learning. Happy coding :)

    Marked as helpful