Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions21Comments66

All comments

  • Prince Roy• 1,210

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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
  • Wtyka• 70

    @Wtyka2504

    Submitted

    I did it without figma, so it looks a little diffrent from the picture also I'm lazy :D

    Easybank landing page master

    #webpack#sass/scss

    1

    Prince Roy• 1,210

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @EduardLucaci

    Submitted

    Grid

    1

    Prince Roy• 1,210

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

    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

    @iprinceroyy

    Posted

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

    @iprinceroyy

    Posted

    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 :)
    0
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

    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

    1
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

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

    0
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

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

    2
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

    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

    1
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

    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

    0
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

    that's excellent work @junioradeola. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.

    Hope it adds to your learning. Happy coding :)

    Marked as helpful

    0
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

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

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.

    Hope it adds to your learning. Happy coding :)

    Marked as helpful

    0
  • itsTari• 140

    @itsTari

    Submitted

    qr code

    #angular#react#node

    1

    Prince Roy• 1,210

    @iprinceroyy

    Posted

    That's excellent work @itsTari. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    3. img tag must have an alt attribute.

    Hope it adds to your learning. Happy coding :)

    0
  • sushil540• 40

    @sushil540

    Submitted

    It took time to fulfill my satisfaction, but the outcome was fruitful. looking forward to update it's code so it look good on smaller screens, any correctness and feedbacks for making it responsive would be helpful. Thank You!.

    Profile card component

    1

    Prince Roy• 1,210

    @iprinceroyy

    Posted

    That's excellent work @sushil540. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    3. Id should be unique. You change the other id.
    4. Don't set the width & height of an image inline, do it in a stylesheet img{ width: height: } Hope it adds to your learning. Happy coding :)
    1
  • Prince Roy• 1,210

    @iprinceroyy

    Posted

    That's excellent work @Oyinalade. You need to focus on some key points here:-

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    3. change card width .card{width: 345px; }.
    4. Set the font of the document to 1rem which is equal to 16px body{ font-size: 1rem; }.

    Hope it adds to your learning. Happy coding :)

    Marked as helpful

    0
  • Oyasi Kelly Ogheneoghagha• 200

    @Oyasikelly

    Submitted

    I was having issues with the responsiveness of my previous challenge, but I tried to work on it. So I picked this challenge to work on. I need you to help me out with your observations. Let me know if I still need to work more on this, the responsiveness.

    QR code component HTML & CSS

    #accessibility#express

    2

    Prince Roy• 1,210

    @iprinceroyy

    Posted

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

    1. There should be one heading tag on a web page, if there is no heading element requirement, then set its font size to 0. HTML- <h1></h1> CSS- h1{ font-size: 0; }
    2. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.

    Hope it adds to your learning. Happy coding :)

    0