Skip to content
OverviewSolutions
5
Comments
13
Krzysztof
@KrzysztofLeczycki

All comments

  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 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

    Marked as helpful
    1
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 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. ;)

    Marked as helpful
    0
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

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

    Marked as helpful
    0
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 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
    @zarkogolocorbinSubmitted over 2 years ago

    Hello everyone! Here is my solution Advice generator app. Any feedback or suggestions are welcome. Thank you!

    Advice generator app

    1
    Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 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
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 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
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

    Hi,

    • your solution looks fine. I have a few thoughts: the whitespace between the chat illustration and the text could be more flexible on screens width lower than 700px or move the text below the illustration,
    • background shapes have different alignments in narrower screens. Play a bit with that. If you don't want to use divs to format these shapes, you can play around with the CSS pseudo-elements: ::before and ::after.

    Best wishes :).

    Marked as helpful
    0
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

    Hey, I have the same problem with firefox.

    Edit: Hey, try adding the next parameter to your GET request: {cache: "no-cache"} to solve caching problem in Firefox. I hope this should work. :)

    1
  • Nick OD•270
    @NickODxyzSubmitted over 2 years ago

    Hi all,

    I really enjoyed doing this one. I was expecting it to be really difficult to get my head around all the styling, but felt like it came pretty easy to me. Seems all the previous projects are paying off lol

    As always please leave any and all feedback.

    Thanks, Nick

    Chat App CSS Illustration | CSS Art

    2
    Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

    Hey, Your solution looks very solid. Good job.

    0
  • Daniel•160
    @DanoSvKSubmitted over 2 years ago

    I have been learning Grid layout for like 5 days. What do you think about my solution? Also, it tends to overflow and setting width and height is very tricky. How do you solve that? When I am trying to just make it higher or wider, flexbox stops working correctly.

    Responsive grid layout – Testimonials

    1
    Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

    Hi, The fIrst of all don't duplicate id atributes in your tags. Each id shall be unique. This code snippet: body {width: 90rem;} spoils your layout. Just remove it. By the way I think using percentage or view units for setting dimentions of the block elements is more comfortable than rem. You could use minmax function, auto-fit or more media queries to improve responsivness of your grid. Best wishes. :D

    2
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

    Hi, I have few thoughts after seeing your solution:

    • add whitespaces at the top an the bottom in main section,
    • correct paddings in artcles,
    • rebuild your grid layout in for screens wider than 800px. There is enough space for more columns in a row. :D Remember that one coulmn layout is by default.

    I'm not sure if using <h1> tag in each article is good practice. I would use <h2> instead and keep <h1> for the page main heading.

    Best wishes. :D

    Marked as helpful
    1
  • Krzysztof•240
    @KrzysztofLeczyckiPosted over 2 years ago

    Hi, the layout of your project looks good; however, you could add some hover effects to the button and make its background a bit wider. If you want reduce a bit the code in your style sheet needed to display quotation marks, I mean resign from after and before pseudoelements, you can change a bit the js file:

    adviceIText.innerHTML = `"${slip.advice}"`;

    I also suggest you change the readme file in your repo to make it more informative and clear. Best wishes.

    0