Skip to content
OverviewSolutions
5
Comments
6
ABDULRAZZAK ALSSSOUKI
@Abdalrzakalsouki

All comments

  • Thabisoā€¢270
    @SefalaThabisoSubmitted almost 2 years ago

    My fourth challenge and I'm already burnt out. It could because I'm working alone and I'm not used to it. To those who work alone as freelancers how do you do it? I find it a little bit depressing. I'm more used to learning in school environment with other learners U+1F62D

    nft-preview-card-component-main

    3
    ABDULRAZZAK ALSSSOUKIā€¢180
    @AbdalrzakalsoukiPosted almost 2 years ago

    Hello Thabiso!

    Coding can be frustrating sometimes, we all been there, what I advice you is to get some reset each time, plus look, you did a great job in the challenge

    For the social part, you can code with some people in regular events and clubs if you prefer that way

    Try to enjoy with it as you can and take it easily, step by step

    Marked as helpful
    1
  • Gabrielaā€¢180
    @PaulaR-05Submitted almost 2 years ago

    Here is my solution to the NFT preview card component solution āœØ I still find it challenging to understand all the best practices for CSS/HTML, so ...any tips for it?

    šŸ˜Š Happy to hear any feedback and advice. Thanks!

    NFT preview card component

    2
    ABDULRAZZAK ALSSSOUKIā€¢180
    @AbdalrzakalsoukiPosted almost 2 years ago

    Hello, that is look great

    here some suggestions:

    • Accessibility:
    1. Heading should only increase by one, means you go from h3 to h4, not h3 to h5, this is important for SEO
    • HTML validations:
    1. use heading with article
    • General:
    1. importing the fonts in CSS is not really good for performance, unless you need a lot of customization, better to include it in HTML head
    2. this is optional but you can use some variables with CSS, it make modifying much easier
    3. do not put the custom CSS before Google fonts, this will reduce the performance
    4. you can minimize the code for better performance
    5. use a meta description

    hope this is helpful, all luck

    Marked as helpful
    2
  • ABDULRAZZAK ALSSSOUKIā€¢180
    @AbdalrzakalsoukiPosted almost 2 years ago

    Hello, good work!

    here are some suggestions:

    • You may forget to include background images, you can find them in the image folder, one for mobile and other for desktop
    • Use landmarks like <main> with sections
    • Use level-one heading, mean you can not use h2, h3, etc before h1
    • Make sure to include the right URL for your GitHub repository, I could not find it when I followed the link

    All luck!

    Marked as helpful
    1
  • ABDULRAZZAK ALSSSOUKIā€¢180
    @AbdalrzakalsoukiPosted almost 2 years ago

    Hello, good work!

    here are some points to improve:

    • use a main landmark: <main> and you can use <section>, <footer>, <header>, etc (this can solve all the accessibility errors)
    • use a meta description
    • make a specific width and height for all images
    • Solve background and foreground colours sufficient contrast ratio problem by small modfiying for colors All luck!
    0
  • ABDULRAZZAK ALSSSOUKIā€¢180
    @AbdalrzakalsoukiPosted almost 2 years ago

    Hello, great solution šŸŽ‰!

    however, there are some small errors that can be fixed easily

    • use alt attributes with images, <img alt="something" />
    • use level-one heading: means you can not use h2 before h1
    • I saw that you used React and Vite, you can include that in the tags
    • you can include meta description for SEO
    • specifying the width and heights for images
    • you can make the performance better by minimize the code
    • this is optional, since you used a framework, you can go with enabling PWA

    Hope that is helpful, all luck!

    Marked as helpful
    1
  • ABDULRAZZAK ALSSSOUKIā€¢180
    @AbdalrzakalsoukiPosted almost 2 years ago

    Hello there, here some personal suggestions:

    • For the UI:
    1. Use linear gradient with colours
    2. If you want you can make some effective (hover for example)
    • For SEO:
    1. Add meta tag for description on your HTML
    • Solve level-one heading:
    1. try to solve this problem, generally it happens if you use h2 for example before h1, always h1 should come first

    Hopefully this will be helpful for you, all luck!

    Marked as helpful
    1