Skip to content
OverviewSolutions
11
Comments
5
Channah Miryam
@Channah-Miryam

All comments

  • Channah Miryam•190
    @Channah-MiryamPosted about 2 years ago

    Hello!

    Congratulations on completing the challenge!

    You would need to use semantic HTML to pass the accessibility tests. In this case, you need to wrap all your main content in:

    <main> </main>

    You could also ensure the website scales gracefully when the user uses 200% zoom or 400% zoom. This would help users with vision problems navigate your projects.

    A list you may use to improve the accessibility of your websites is this one: https://www.a11yproject.com/checklist/

    Good luck!

    Marked as helpful
    0
  • Philipp•190
    @hermi72Submitted about 2 years ago

    I struggled to fix the response issue. I built it responsive for mobile devices, but if I shrink it on a desktop, it is not responsive and doesn't look well.

    I'm open to recommendations of any kind!

    3 Column Preview Component

    1
    Channah Miryam•190
    @Channah-MiryamPosted about 2 years ago

    Hello,

    you could start by creating the mobile version. Mobile first is always recommended.

    Then you can use media queries (@media screen and (min-width: 1440px){}) and flexbox or CSS grid to switch directions. You can check how I have done it here: https://github.com/Channah-Miryam/FEM---four-card-feature-section/blob/master/styles.css.

    Hope this helps. Kind regards

    0
  • ro_andrade•80
    @ro-andradeSubmitted about 2 years ago

    Hello there!

    Another challenge completed, with less headaches this time! Only trouble that this one gave me was the image color change. Used the filter: hue-rotate() property but it didn't work. The "filter" was nesting the images with reduced opacity inside a div with the color needed in the background.

    As always, thank you for your time and feedback!

    Stats Card Challenge with image "filtering" and display: flex.

    1
    Channah Miryam•190
    @Channah-MiryamPosted about 2 years ago

    Hello,

    it is a nice end result.

    Some thoughts you might find useful: *** you may find it useful to use BEM. It looks like it might suit your coding style. ***you may use an external HTML validator before you submit the challenges, such as the Nu Html Checker - https://validator.w3.org/nu/ *** your project displays nicely on most screens. For tablets, you may wish to use the mobile version instead of the desktop version. You can use the Responsively app to check how your product looks on a variety of screens. In contrast to google developer tools, you will be able to get an overview of a wide variety of screens organised on a flex grid.

    Obviously, these are minor recommendations since your work is already good.

    Kind regards

    Marked as helpful
    0
  • Channah Miryam•190
    @Channah-MiryamPosted about 2 years ago

    Hello,

    nice work.

    You could use the Responsively app (it's free) to see how your project displays on different devices. I checked it for you, and it looks good! On more giant screens though, you may wish to centre your project in the middle of the screen.

    You could also include a footer with the front-end mentor attribution, your name and a link to your GitHub account. When you share your project out of this community, employers will be able to view your GitHub account and contact you.

    Keep up the good work!

    Marked as helpful
    1
  • Channah Miryam•190
    @Channah-MiryamPosted about 4 years ago

    hm maybe something wrong with vercel? It took me multiple tries to manage to deploy the project successfully.

    0