Skip to content
OverviewSolutions
21
Comments
66

Prince Roy

@iprinceroyyIndia1,210 points

fun fact: web apps are responsive, we make them unresponsive :P

I’m currently learning...

CSS, JavaScript, and React

Latest solutions

View more solutions

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

View more comments