Krzysztof

Latest comments

• 

  Javier Eufracio•300

  @Javieer57

  Submitted over 3 years ago

  

  Advice generator app | HTML, Bootstrap, JS

  #fetch#bootstrap

  1

  60
  

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  Hello, a good place to start is MDN resources. Kevin Powell's YT channel also covers some accessibility issues. I found there a solution to one of the accessibility errors in your project report. Each button should have descriptive text even only a graphic is visible in it. To deal with that you can implement that code:

  <button><span class="sr-only">some descriptive text</span></button>
  

  .sr-only{
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0); 
      white-space: nowrap;
      border: 0;
      clip: 0;
      background: white;
  }
  

  sr-class makes a text in the button hidden on display; however, screen readers have access to it.

  I hope it helped. :D Best wishes

  1

  Marked as helpful
• 

  Pablo Paiva•20

  @pablohpaiva22

  Submitted over 3 years ago

  

  Using CSS Flexbox e media queries

  1

  20
  

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  Hello, you have problems with the absolute positioning of the buttons. I suggest you wrap the image and the buttons in one container. I think it would be easier to position them correctly. Sample code will be like this:

  <div class="container" style="position: relative;">
     <img>
     <div class="btn" style="position: absolute">...</div>
  </div>
  

  Best wishes. ;)

  0

  Marked as helpful
• 

  Kasia Zaleska•200

  @kzaleskaa

  Submitted over 3 years ago

  

  Advice generator app

  1

  30
  

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  Hey, your card divider sticks out from the box in narrower screens. Give it max-width property. Best wishes. ;)

  0

  Marked as helpful
• 

  Subhajit Roy•210

  @subhajitroycode

  Submitted over 3 years ago

  

  Testimonials responsive page using CSS Grid

  #sass/scss

  2

  20
  

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  Hey,

  if you only want to practise styling features such as grid, flex, positioning etc., I think that you don't have to worry about accessibility too much. However, when you build a project which simulates a web page or a web app, you should follow good practices, including accessibility. Have in mind that your products can be used by people with eyesight issues.

  I am still a beginner in the accessibility field, but I am trying to improve my knowledge in each project.

  You could try using semantic HTML tags. For example, wrap your quotes in <article>. I am not sure if using <header> in each quote is good practice.

  I hope I helped a bit. Best wishes. :D

  1
• 

  Zarko•160

  @zarkogolocorbin

  Submitted over 3 years ago

  

  Advice generator app

  #react#axios

  1

  50
  

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  Hey, you could change the container width because it displays incorrectly on smaller screens. I suggest such code: width: ...px; max-width: ...%; then you can get rid of width settings in media queries. Besides, your app looks good. Best wishes. :D

  1
• 

  Swan-Yee-Tun•225

  @developedBySwan

  Submitted over 3 years ago

  

  Responsive web page with Tailwind CSS and vanilla JavaScript

  #tailwind-css

  1

  30
  

  Krzysztof•240

  @KrzysztofLeczycki

  Posted over 3 years ago

  Hey, your app doesn't work as it should because your async function repeatedly runs after 10s, and your button does nothing. Change or remove this setInterval(getAdvice, 10000); I also tried modifying eventListener and rewriting it into btn.onclick = getAdvice;. Best wishes. :D

  0