KapteynUniverse

Latest comments

• 

  P

  Ender Çelik•130

  @EnderCelik0Submitted 10 days ago

  

  Dictionary Web App using React, React Query, TailwindCSS

  #react#tailwind-css#tanstack-query

  1

  30
  

  KapteynUniverse•2,900

  @KapteynUniversePosted 10 days ago

  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)

  0
• 

  KapteynUniverse•2,900

  @KapteynUniverseSubmitted 12 days ago

  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

  21
  

  KapteynUniverse•2,900

  @KapteynUniversePosted 12 days ago

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

  0
• 

  P

  Yasir Alakus•240

  @yasiralakusSubmitted 16 days ago

  

  NFT Preview Card Component {Pixel Perfect}

  #react

  1

  41
  

  KapteynUniverse•2,900

  @KapteynUniversePosted 15 days ago

  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

  0
• 

  Tereza-Seno•40

  @Tereza-SenoSubmitted 15 days ago

  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

  50
  

  KapteynUniverse•2,900

  @KapteynUniversePosted 15 days ago

  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

  0
• 

  P

  haru-kunyo•20

  @haru-kunyoSubmitted 25 days ago

  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

  10
  

  KapteynUniverse•2,900

  @KapteynUniversePosted 25 days ago

  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

  0
• 

  P

  Tsunami•40

  @marketa-kalSubmitted 29 days ago

  What are you most proud of, and what would you do differently next time?

  This is my first challenge here.

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

  I am not able to cope with the footer shifting left when the viewport width is under 320px.

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

  I’m quite frustrated with the footer shifting to the left when the viewport is narrower than 320px. So far, I haven’t found any solution other than changing the display property from flex to grid, which would allow me to control the layout more easily. However, I believe there must be a simpler solution.

  

  QR code component

  1

  10
  

  KapteynUniverse•2,900

  @KapteynUniversePosted 29 days ago

  Below 320px doesn't really matter but the problem is you used fixed width values on main and img, they are overflowing under that threshold

  Marked as helpful

  0