Skip to content
OverviewSolutions
26
Comments
171

KapteynUniverse

@KapteynUniverse2,900 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Browser Extensions Manager UI

    #accessibility#react#tailwind-css#typescript#vite
    KapteynUniverse•2,900
    Submitted 30 days ago

    Any feedback is appreciated. Is there a way to change only the text color of the logo SVG, or is the dark mode logo missing? Also, is there a better way to fetch data, toggle states, and handle dark mode?

    5 comments

  • Product List w/ Cart

    #accessibility#react#vite#typescript
    KapteynUniverse•2,900
    Submitted about 1 month ago

    Any feedback is appreciated. I’m not sure about my aria-live and description list usage.

    1 comment

  • Real-time and partly CRUD interactive comment section

    #accessibility#react#tailwind-css#firebase
    KapteynUniverse•2,900
    Submitted 5 months ago

    I wrote my answers in the comments, but again, any feedback is appreciated.

    3 comments

  • Sign-Up Form

    #accessibility
    KapteynUniverse•2,900
    Submitted 5 months ago

    Any feedback is appreciated. Probably white texts on the light red background also has bad contrast but i can't see that on the dev tools.

    1 comment

  • Space tourism with some custom animations + framer motion

    #accessibility#framer-motion#react#react-router#tailwind-css
    KapteynUniverse•2,900
    Submitted 5 months ago

    Any feedback is appreciated.

    I feel like there is a way to create a reusable component for all pages to avoid redundancy, but I couldn’t manage it due to differences in order and styling.

    I wasn’t sure whether to use the or tag for the numbers on different pages. Since screen reader users will already know what page they’re on, I went with .

    I am very beginner to the React. Is the folder structure good?

    1 comment

  • Sunnyside Landing Page

    #accessibility#animation
    KapteynUniverse•2,900
    Submitted 5 months ago

    I tried using the tag for the modal in the final stage, but it caused styling issues that i couldn't fix, so i switched back.

    Any feedback is appreciated. Please tell me anything to improve or if i missed something.

    2 comments
View more solutions

Latest comments

  • Jeff Hensley•80
    @jeff-hensley
    What are you most proud of, and what would you do differently next time?

    I'm quite proud that I was able to get everything working properly. Even added a little close button to go back to the original card.

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

    To be honest It was stupid but I put my JS file in the wrong folder in my directory and like a dumb dumb spent way to long trying to figure out why my JS wasn't working. I also struggled with the active states of the buttons in CSS but eventually got it kind of of to work on hover.

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

    I could not figure out how to keep the active states of the buttons until the submit. I want the buttons to stay orange until submit is used and then if another button is clicked before submit is clicked then the active state changes to that button.

    Responsive Rating card using basic JS

    1
    KapteynUniverse•2,900
    @KapteynUniverse

    You can create a class for the active state and assign it to the clicked button, but this should ideally be a form with radio buttons. With radio buttons, you can use the css :checked pseudo-class to style them in a simpler way.

  • KapteynUniverse•2,900
    @KapteynUniverse

    Merhaba Ender, good job.

    I recommend you to check semantic html elements. Don't know any good resource about this, but what you are doing has a name, "divitis"

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your div that contains nav with a header and the div that starts with keyboard input with a main would be good.

    Every input must have a label. Placeholder attribute should not be used as an alternative to a label.

    Also search input should be in a form, i think.

    You are mapping ul element in both verb and noun section, so creating lots of lists instead of 1 per section. Map list items inside ul instead.

    For color switcher a button would be a better option instead of an empty div. While writing it came to my mind, for font switcher option might be a good option too (ba dum tıss)

  • KapteynUniverse•2,900
    @KapteynUniverse
    What are you most proud of, and what would you do differently next time?

    My laziness got me again. I started the project but didn’t look at it for a couple of days. When I returned, it was hard to continue and make changes. Next time, I will try to build components with loading and error states, and fetch data from the start instead of just importing from json file.

    I also added a keyboard shortcut to the cart confirm button, so keyboard users don’t have to navigate through every dessert before accessing it.

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

    Any feedback is appreciated. I’m not sure about my aria-live and description list usage.

    Product List w/ Cart

    #accessibility#react#vite#typescript
    1
    KapteynUniverse•2,900
    @KapteynUniverse

    Interesting, cart has a max-height and background-color, shouldn't look like that

  • KapteynUniverse•2,900
    @KapteynUniverse

    Merhaba Yasir, seni yolun başında yakaladığıma sevindim demek isterdim :D ama 1.5 senedir freelance çalışıyormuşsun.

    Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your full page div or wrapping it with a main would be good.

    The WCAG criteria states that line-height should be at least 1.5. 1.2 is too small for those who are dyslexic, these lines are packed too closely together, making it harder to read.

    No need to use width: 100%; for a block element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

    Avoid using fixed values like width: 350px;, for better responsiveness use max-width with rem; max-width: 21.875rem; Also most of the times you don't need to set height.

    Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries. You can also use clamp function for better responsiveness/fluid typography.

    Do not skip heading levels.. Also you shouldn't use more than one h1 in one page.

    Those active states in design images means that elements are interactive. So they are either hyperlinks or buttons(might be inputs or other elements that i forgot too). For this challenge, i think all of them are hyperlinks.

    Also i saw li, summary { list-style: none;} in your css reset. You didn't use list here but for future i recommend you to check accessibility section of this page

  • Tereza-Seno•40
    @Tereza-Seno
    What are you most proud of, and what would you do differently next time?

    It seems like my result is very similar to the preview and I'm proud of it. I know that I use "old" techniques (for example px instead of rem/em ect.) But next time I will try to use them.

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

    My problem was that the QR code was not in the center. I mean.. It was at the center in a main cross but not in the center of the webpage. It was too high. I used a margin but it was not good solution. But then I relized that I can use min-height: 100vh; and min-width: 100vh; and that solved my problem. I hope it is the "right" way.

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

    I'm not sure about sizes. How do I figure out if I should use 300px or 350px? In this case.. I guesstimated it. Maybe I'm little bit dumb and there is a chance that I overlooked it in instructions. I'm not sure about it.

    QR code using HTML and CSS (flexbox)

    1
    KapteynUniverse•2,900
    @KapteynUniverse

    It doesn't have to be pixel perfect but this is a free+ challenge, figma file has everything you need. Also no need to use min-width: 100vh; A block-level element always takes up the full width available (stretches out to the left and right as far as it can). min-height: 100vh; with flex or grid is enough for centering.

    Marked as helpful
  • P
    haru-kunyo•20
    @haru-kunyo
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that I was able to create my first html,css challenge by taking a little help from mdn and css-tricks, next time I will try to complete it without any online help.

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

    I encounter the challenge of flex box property. When I made the body a flex and set justify-contents to center the 'attribution' div was in row with the card to i added flex-direction: column to make it go below the card but by doing so the justify-contents: center no longer worked, then i tried align-contents: center it still didn't work. Finally when i changed it to align-items: center the card was in the center of the screen.

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

    code 1:

    body{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    code 2:

    body{
    display: flex;
    flex-direction: column;
    align-content: center;
}

    code 3:

    body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

    I want to know why code 1 and code 2 were not able to center the body while code 3 does it.

    QR-code-compnent using CSS flex property

    1
    KapteynUniverse•2,900
    @KapteynUniverse

    When flex-direction is set to column, align-items: center; centers the content horizontally, and justify-content: center; centers it vertically. If flex-direction is row, it works the other way around.

    The problem you're facing is that the <body> element is only as tall as its content. That means you don't see the vertical centering visually but it works. To fix this, you need to set a height. Like you did here but instead of using margin-top, apply min-height: 100vh;.

    Also, avoid using percentage-based heights (especially with low values), as they often behave unpredictably.

    Marked as helpful
View more comments