Skip to content
OverviewSolutions
26
Comments
99

Mukwende

@mukwende2000Zambia1,370 points

Hello there my name is mukwende from zambia, am a self taught frontend developer. I have always been fascinated by computers and how they work. And so when i discovered i can build something from my pc, i decided to satisfy my curiosity by getting into programmming.

I’m currently learning...

I am currently learning react Js as my first framework and typescript.

Latest solutions

View more solutions

Latest comments

  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    Great solution, congratulations, as regards your question on accessibility, the entire app should be wrapped in a <main></main> tag not an article. I thing the word 'Perfume' should be the h1 and then the name of the perfume an h2. Lastly instead of hiding on picture on mobile and showing it on desktop using css, you can use the <picture></picture> tag, read about it, it is more concise.

    Marked as helpful
    1
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    Great solution, one thing i would encourage to learn more about heading level elements, you don't move from h1 to h3, so change all the h3s to h2s

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    you should wrap everything you want to be the default in a <Router></Router> components, everything outside of it is the changeable part....

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    I have not understood the second part of your question, but changing the css of a checkbox is a tricky one that may be difficult to explain, i will refer you to a youtube video of kyle from webdev simplified, that might help. https://youtu.be/YyLzwR-iXtI

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    You can use scoped css in react ot achieve styles unique to the component you want. You will have a 'Navbar.tsx' and then 'Navbar.module.scss'. And then in your component you import the styles like "import styles from './Navbar.module.scss'" you can call it whatever, the name styles is optional, you say "import classes from 'Navbar.module.scss'". To use the styles in your components you do it this way

    function Navbar() {
return (
<nav className={styles.nav}>contents</nav>
)
}

    the 'nav' in syles.nav refers to a class in your Navabar.module.scss, Which means you should have something like below in the file

    .nav {your style rules}

    so what ever class you have, you refer to it in the jsx by saying styles.the_name_of_the_class

    0
  • Mukwende•1,370
    @mukwende2000Posted over 1 year ago

    No a screen reader wouldn't be able to recognize that, you have a div which is a generic tag with no semantic meaning filled with spans which also generic tags with no semantic meaning

    Marked as helpful
    0
View more comments