Ksenia• 1,350
@ksenius
Submitted
I hid the chat app and its focusable elements from screen readers with aria-hidden="true" and tabindex="-1". Should I have made it accessible?
P.S.: I hope the animations aren't annoying.
Magda Kokot
@magdakok
All comments
- Magda Kokot• 1,425
@magdakok
Posted
Ksenia, I must confess I'm a huge fan of your projects, your attention to details and hidden surprises like making the text input working. Are you already working in IT? :)
2 - Mateusz Pocztowski• 170
@mateusz-pocztowski
Submitted
Magda Kokot• 1,425@magdakok
Posted
Such a crazy evening! Another great solution with cool animation :)
1 - Yinon Hever• 835
@yinonhever
Submitted
Magda Kokot• 1,425@magdakok
Posted
Thank you! Just forked your solutution and will try to learn something.
I only came up with idea of gradient and coded it like this:
background-image: radial-gradient( 700px 700px ellipse, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100% );It was not the best solution though ;-) Yours is working just perfectly!
0 - Yinon Hever• 835
@yinonhever
Submitted
Magda Kokot• 1,425@magdakok
Posted
Wow! I'm really impressed both with animations and the gradient behind the winning symbol. I'll study your code thoroughly, cause you solved some issues I was not able to :)
0 - ljc• 20
@ljc-dev
Submitted
The style guide design are at 375px and 1440px so I tried to follow that. Is it mandatory? What about the sizes in between? Thx in advance!
Magda Kokot• 1,425@magdakok
Posted
Hello :) I think there's no rigid rules about the way you use the guide design, although it's satisfying when you upload your solution and the screenshot matches perfectly. You can find some Ksenia's solutions - they are all literally pixel-perfect. She mentioned that she uses PerfectPixel browser extension and it really helps. The way I recommend is to try code pixel-perfect mobile website, then you follow your heart when it comes to tablet size and at the end again pixel-perfect desktop :)
2 - Connor Z• 5,115
@zuolizhu
Submitted
Feedbacks are super welcome!
Almost pixel perfect 😆.
Magda Kokot• 1,425@magdakok
Posted
How cool is that! :D
1 @mahin-abdullah
Submitted
Any feedback will be appreciated! Thanks!
Magda Kokot• 1,425@magdakok
Posted
Hello! Very nice and responsive website :) I've found just a few, small things that can be improved:
- 'get started' buttons don't have the cursor:pointer property
- hoover doesn't work on the bottom 'get started' button when you hover just on the bottom part of it. I noticed it's obstructed by the footer container.
- you use only h1 and h4 tag - for accessibility reasons it's advised not to skip any headings' levels
You did a great job anyway, keep it up! :)
2- Mahesh Yadav• 1,220
@Mahesh-yadav
Submitted
any suggestions
Magda Kokot• 1,425@magdakok
Posted
Hey! :) All your challenges look very good! If you care about the final screenshot on this platform you can try using Pixel Perfect extension for your browser which will help you to code exactly same looking websites like on design jpgs :)
0 - Ramsay Sewell• 585
@ramsaysewell
Submitted
Any feedback would be greatly appreciated. Some help with making sure the "185GB LEFT" wraps in the box okay and doesn't go outside the white box would be great!
Magda Kokot• 1,425@magdakok
Posted
Well done Ramsay! :) I'd solve your problem by not defining the width of the
.tooltipclass and just add to span with class.gb:white-space: nowrap:)1 - Magda Kokot• 1,425
@magdakok
Submitted
Hello! It was by far the hardest and the most frustrating challenge. I encountered hundreds of issues. Some I managed to solve myself; some forced me to give up a few ideas I had. I'm happy the app is working but disappointed same time because I know what should work better.
Most significant/weirdest issues are:
- On live server website path looks great: localhost:3000/ for main page or localhost:3000/ESP for Spain and so on. After deploy the address got weird, and I have no idea what's wrong.
2 [SOLVED]. On the country page, buttons representing border countries are generated BUT I can't make them redirect to the relevant country. URL changes, but component not. I tried to wrap the component with withRouter but still nothing. I found one working way, but it was refreshing the whole website.
As always, I'd be really grateful for the feedback! :)
Magda Kokot• 1,425@magdakok
Posted
256 accessibility issues 🤦 I'll try to sort them out tomorrow :)
1 - Magda Kokot• 1,425
@magdakok
Submitted
Hello people! I have a problem with the mobile navbar. This time I'm using JavaScript to make it work and it almost does. The hamburger icon changes to "X" when menu is opened, also changes back to hamburger when clicked outside the menu or when menu item is clicked. Icon doesn't change to hamburger when you just want to exit by clicking it.
Heres the issue on GutHub: https://github.com/magdakok/Easybank/issues/27
Thank you in advance for any help :))
Magda Kokot• 1,425@magdakok
Posted
Wow, the screenshot looks very bad! How should I measure the design jpg file to get accurate numbers? File width is 1440px but Google Inspect tool shows that 1440px is way wider.
0
