@Javieer57
Submitted
I'm struggling with the accessibility theme for this project. Can you recommend resources about the topic? Thank you!
@KrzysztofLeczycki
@Javieer57
Submitted
I'm struggling with the accessibility theme for this project. Can you recommend resources about the topic? Thank you!
@KrzysztofLeczycki
Posted
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
@pablohpaiva22
Submitted
I have some difficulty make a responsive laytou with a slider.
@KrzysztofLeczycki
Posted
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
@kzaleskaa
Submitted
@KrzysztofLeczycki
Posted
Hey, your card divider sticks out from the box in narrower screens. Give it max-width property. Best wishes. ;)
Marked as helpful
@subhajitroycode
Submitted
@KrzysztofLeczycki
Posted
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
@zarkogolocorbin
Submitted
Hello everyone! Here is my solution Advice generator app. Any feedback or suggestions are welcome. Thank you!
@KrzysztofLeczycki
Posted
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
@developedBySwan
Submitted
Hello Coders,
This is first of my project use tailwind CSS. I hope I can get useful feedback from you guys.
Thanks for your time and happy coding buddy.
@KrzysztofLeczycki
Posted
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
@romzc
Submitted
Hello community, my solution for this challenge, I used div's to the get background shapes, if there is another way to do it, please let me know.
@KrzysztofLeczycki
Posted
Hi,
::before
and ::after
.Best wishes :).
Marked as helpful
When using Firefox it does not regenerate another advice but works fine on chrome, did someone had this issue ?
@KrzysztofLeczycki
Posted
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.
:)
@NickODxyz
Submitted
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
@KrzysztofLeczycki
Posted
Hey, Your solution looks very solid. Good job.
@DanoSvK
Submitted
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.
@KrzysztofLeczycki
Posted
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
@ilhanhakan-koc
Submitted
Any kind of tips are appreciated!
@KrzysztofLeczycki
Posted
Hi, I have few thoughts after seeing your solution:
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
@maruf1137
Submitted
@KrzysztofLeczycki
Posted
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.