Skip to content
OverviewSolutions
5
Comments
9
Ozzy-codes
@Ozzy-codes

All comments

  • Gakii•600
    @G-Gakii
    What are you most proud of, and what would you do differently next time?
    • I used React to build the website.
    • My website is 100% accessible -Ability to keep the background colour of the rating button when I make a selection, which I couldn't accomplish the first time I created the project using HTML, CSS, and Javascript
    What challenges did you encounter, and how did you overcome them?

    Utilising usestate

    What specific areas of your project would you like help with?

    I would greatly appreciate a blog, video, or other resource that thoroughly explains useState. Although I've learned about useState, I'm still having some difficulties understanding it fully."

    Accessible rating component with React

    #react
    2
    Ozzy-codes•130
    @Ozzy-codes

    Hi @G-Gakii!

    Congrats on completing this project.

    I forked your repo and made a pull request for how you may want to retain a background color on your circles! If you would like to see an alternative approach via radio buttons take a look at this repo from @llr3v0ll

    Marked as helpful
  • Idunnuoluwa D Fayemi•120
    @DavidFayemi
    What are you most proud of, and what would you do differently next time?

    First time doing form validation with JS, hopefully i'll be able to do it more professionally next time

    What challenges did you encounter, and how did you overcome them?

    Faced bare problems but i solved them somehow

    Responsive age calculator app with HTML5, CSS3 and JavaScript

    1
    Ozzy-codes•130
    @Ozzy-codes

    Hi @DavidFayemi,

    Congrats on completing the project!

    Quick suggestion, in mobile view add a position: relative to your button and you'll see the border of the horizontal line get behind the button.

    I also noticed that there is a logic bug in the app: A birthday of April 31st of 1991, doesn't exist and your app should respond with an error messages. I'll fork your repo and take a look at the logic when I get a chance, but feel free to take a look at my repo, specifically my validationFactory.js in the meantime.

    Happy Coding!

    Marked as helpful
  • Ozzy-codes•130
    @Ozzy-codes

    Hi Faybas

    Offering another option in addition to @Toheeb345 suggestion. Take a look at my forked repo for alternative. I've seen more than one take this approach @llr3v0ll & @beveroni

    TL:DR - Instead of using buttons for each score, create a group of radio buttons and utilize the pseudo class selector

    input:checked

    to update the page.

    Hope this helps!

  • Ozzy-codes•130
    @Ozzy-codes

    Hi Beveroni!

    Congrats on completing this project

    I noticed that the thank you card seemed to be a little cramped take a look at my forked repo for quick edit suggestions!

    I'd recommend that the font size of the score chosen take up a little bit more room to highlight its importance on the card component. Adding a bit more size and padding draws more of my attention as a user!

    Additionally, I'm curious to hear why your choice of the first line in your JS file:

    document.addEventListener('DOMContentLoaded', ...

    Happy coding,

    Ozzy

  • Ozzy-codes•130
    @Ozzy-codes

    Hi @llr3v0ll

    Congrats on completing this challenge!

    I wanted to bring to your attention that It appears the component doesn't quite fit in the 375px mobile view. Take a look at my forked repo for a quick suggestion!

    Also very interesting use of radio inputs to toggle classes, was that inspired from MDN? I wonder how this approach takes in the scope of accessibility, any experts that can weigh in? @visualdenniss

    Lastly, I did a little refactor of your JS, pulling out lines 12-14. I'm curious to hear what your objective was with utilizing the plm variable?

    best,

    Ozzy

  • Ozzy-codes•130
    @Ozzy-codes

    Hi Naresh Bhati!

    Congrats on completing this project!

    It appears that your component is not quite aligned to the center of the page. I suggest using flexbox to not only space out the itemized list of subjects but also on the body, and your main layout component to center your component on the viewport! Take a look at the PR in your GitHub to get you started! happy to work together on it if interested via GitHub. Including link to my fork here - GitHub repo - branch: flexbox_design

    I see you've also made use of rems in your styling, great work. I'd encourage you try to utilize the rem unit for most cases, take a look at this article that suggests why its a good idea. Why designers should move from px to rem...

  • Ozzy-codes•130
    @Ozzy-codes

    Hi ggsuha, Congrats on completing this project!

    Sharing some suggestions to consider!

    I forked your repo and sent over a PR to address the footer laying on top of your summary card when examining your site on mobile view (375px width). You can see a screenshot of the issue on the PR . Suggested code was written to retain your use of the grid property. Forked repo - branch: adjust_crowding_grid_solution

    TL:DR - I've moved properties set on main one level up onto body

    Sizing elements:

    I recently got some feedback on the use of px’s in sizing elements and accessibility considerations and wish to share the same with you! It's generally recommended to avoid using px for sizing elements which can affect website responsiveness and accessibility. Why designers should move from px to rem...

    Marked as helpful
  • Ozzy-codes•130
    @Ozzy-codes

    Hi C-a-s-t-e-l,

    Congrats on completing this project!

    Accessibility report flags

    Found some material on W3 School that may help to introduce landmarks. I also found a brief video of landmarks by a11y -101 that helps to understand its utility.

    Sizing elements

    I recently got some feedback on the use of px’s in sizing elements by @visualdenniss and wish to extend that advice to your code. Per ChatGPT -

    “It's generally recommended to avoid using pixels (px) for sizing elements that can affect website responsiveness and accessibility, such as font sizes, margins, and padding. However, there may be cases where pixels are appropriate, such as for images or fixed-width elements.

    The main issue with using pixels is that they are an absolute unit, meaning they do not scale proportionally with changes in screen size or font size. This can make it more difficult for users who rely on assistive technology or who have visual impairments to read and navigate the website.

    Relative units such as rem and em, on the other hand, are scalable and responsive to changes in font size, making them more accessible and responsive for all users. So while it may not be necessary to avoid using pixels altogether, it's generally best practice to use relative units whenever possible.”

    Another accessibility best practice

    On your <img> element - I recommend including in the alt=“” attribute, text describing your image. Note - I’d avoid capitalized text as screen readers typically read capitalized words by each individual letter e.g. QR CODE -> “Q-R C-O-D-E”.

    For more feedback, I would appreciate learning more about your design approach via a README. 😁

    Marked as helpful
  • Ozzy-codes•130
    @Ozzy-codes

    Hey Ty,

    Good work on another project finished!

    I noticed the HTML validation report flags, and found some material on MDN that may help to remedy the issue:

    “By default, many semantic elements in HTML have a role; for example, <input type="radio"> has the "radio" role. Non-semantic elements in HTML do not have a role; <div> and <span> without added semantics return null. The role attribute can provide semantics.”

    Nice use of rems in your sizing! I’m learning more about the relationship between accessibility and the use of rem/em’s. Appreciate the exposure to custom CSS properties, I haven’t seen that use yet.

    I’m really curious in seeing your design process in a readme.