Skip to content
OverviewSolutions
26
Comments
99
Mukwende
@mukwende2000

All 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 almost 2 years 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 almost 2 years 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 almost 2 years 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 almost 2 years 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
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    But tailwind is not the only css framework out there so you can still use something that you will find you love, like @Steve said above..

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    Yes it makes the code look dirty but that is the disadvantage, however the advantages outweigh them, you prefer regular css because these are small project, when you begin working large stuff, css will become so complex that you will understand why there are frameworks in the first place. That is why frameworks are not for small projects, regular css and js is just enough for these, the benefits of frameworks show when you begin doing some real world stuff.

    Marked as helpful
    1
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    I will encourage you to go find a tutorial on how to build a responsive menu with html css and javascript as that is too much to explain in a text

    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    Make sure you link the right repo, but i have seen the right one, one thing you should do firstly is to wrap the entire app in a main tag, this is the tag that tells that this is the main content of the page, as for the headings, try to think of them as headings in the real world, heading are just titles that summarise the content of a certain section, so the text "You result" is definitely a heading, but the number 76 is not, so correct it. Every page should have a h1 heading level element, you don't just start with h4, it has to follow the hieriachy, when ever you see anything that can be a heading, you must look above and check if there is already one, if so what level is it, if the last was an h1 then the next should be h2, if it was h2 then the next should be either h2 or below, you don't randomly put them. One thing that might confuse you is the font size, always know that the structure of html has nothing to do with styling, so you can have an h1 and give it a small font size just like in this challenge.

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    You have linked the wrong github repo, its linking to the qr code component

    1
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    You use flex when you want to create a layout where two items are side by side like the layout in this challenge, another alternative is to use grid, its personal preference which one you choose in my opinion. em is fine for margin and padding yes. Although it may behave strangely if you don't understand how it works, so i suggest you really delve deep into learning about it otherwise using rem is good enough.

    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    Hello, you did well, here are a few things i noticed, first when you remove all from the cart, it takes you to the homepage, not sure why you did that but don't thing that is an appropriate behaviours, secondly, the number to display besides the is the number of items in the cart, as in if you have a headphone and a speaker, you have two in the, even if the the amount of the headphone is more than. So if you have one mark ii headphone with an amount of 3, that is still one item in the cart not 3. The other thing is on the modal that appears when you continue and pay. The but that says "and 1 other item" should be clickable and reveal the rest of the items. Those are a few notes i made. Hope you find helpful and improve on.

    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    Having something like this

    <form>
some inputs
</form>

<form>
some other inputs
</form>

    Makes this two forms regardless of any state, and each form has it own onSubmit event, forms have everything to do with html and nothing to do with react, so you should never compromise html structure because of any framework. As for routing, it is for navigating between pages and not for dividing forms. That was what i meant. Happy Coding.... Have an amazing day.

    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    Change the div with the class button into a real button element, it should not be a div, and give it a width of 100%

    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    To make it two to the left and two to the right, do it this way, wrap the the two element in div tags and the give the parent div a flex

    <div class="reaction section">
<div class="left">
<img >
<h3>Reaction</h3>
</div>
<div class="right">
<p>80</p>
<p>100</p>
<div>
</div>
</div>

.left, .right { display: flex}
    Marked as helpful
    0
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    Hello, this is my honest feedback, first react router was not needed for this project as the different part of the form are not routes, by splitting the form part into routes, you have just made each part a different no wonder you have form on every route. This is one form and when submitted should submit all the data as one group of data from one form, but as it is, the way you have structured this mean each part is its own form.

    Marked as helpful
    4
  • Mukwende•1,370
    @mukwende2000Posted almost 2 years ago

    okay first were you able to implement the menu for the mobile, i mean being able to change the look for the mobile site? Basically, you should hide the menu on mobile screens by giving it a class of hidden

    .hidden {display:  none}

    make sure you add the class on the menu in the html.

    And then in your js, add a click listener on the hamburger icon, when you click, remove the the class

    hamburger.addEventListener('click', () => {
if(menu.classList.contains('hidden') {
menu.classList.remove('hidden')
} else {
menu.classList.add('hidden')
}

}
    Marked as helpful
    1