@sonmikrafftSubmitted 8 months ago
What are you most proud of, and what would you do differently next time?
Custom Checkboxes and Radio Buttons, Snackbar with Animation
Latest solutions
accessible form
#accessibility#animationPSubmitted 8 months agoIf you have any suggestions to make this form even more accessible I would love to hear it. After trying a lot out it made de code a bit messy in the HTML and CSS do you have tips to make it more organized?
HTML, CSS, Javascript, BEM naming convention
#bemPSubmitted 10 months agoI'm very curious if I implemented the BEM naming convention right. Do you have any feedback for improving the animation for the backers amount, progress bar and total backers. Is there a better way to organise my Javascript code so that I don't repeat too much code?
Latest comments
- P@Jolijn0101Posted 8 months ago
Hi Sonja, Congratulations on finishing this project. The form looks great. When I fill in the form with voice over on Mac then it doesn’t read out the e-mail address label. Maybe it has something to do with the for attribute in the label tag for the e-mail input. It has now a value for fname instead of email.
If you would like to make this form accessible with the keyboard then I must admit that the radio buttons, checkbox and submit button were skipped. They seem not to receive focus on them.
The error messages become visible but they weren’t read out by the screen reader. If you have interest in making those error messages more accessible maybe this video tutorial could be of a great help: https://www.youtube.com/watch?v=5lzAj1ahRSI
The Snackbar animation is awesome and I love the way you made custom radio and checkboxes only with scss.
I hope this feedback was useful even though you didn't specifically ask for it. I am currently doing the accessibility learning path and giving feedback to others is a mandatory part of it.
Marked as helpful0 - @mbd89Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
validation is maybe a bit complicated but it works i think :)
What challenges did you encounter, and how did you overcome them?am not sure the screen reader is working as it should; could you turn on voiceover and let me know what happens.? Thanks very much
What specific areas of your project would you like help with?screen reader
P@Jolijn0101Posted 8 months agoHi Makha, I had promised to look at your code. I didn’t forget it ;) I needed a long time to finish the challenge myself.
Your solution looks great. I opened it with Chrome and used voice over to check how accessible it was. The form is accessible with keyboard. It already read out de name and that it was required of the First Name, Last Name, Email Address, Query type and the checkbox. The message field was red only by the label name it gave not an indication that it was required.
After submitting without any text in de input fields it gave the necessary error messages but it is not read out by voice over. The same about the succes message. For people with sight it works fine for blind people there are points to improve. If your interested to do so.
I came across this video tutorial about making alert messages that could be read by a screen reader. This is the link to that video: https://www.youtube.com/watch?v=5lzAj1ahRSI
While testing your code I saw that the font-family of the text-area is different from the rest of the input fields. The font-family is set on the body in css but the text-area and input fields will ignore it…
I hope this feedback was useful and I wish you a lot of fun making other challenges on front-end mentor.
Marked as helpful0 - @0653JericoSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud that I was able to nearly copy the same design provided by Frontend Mentor though I had to use a lot of complicated and maybe unnecessary codes to attain it. I would make sure to study more to learn how to minimize my code.
What challenges did you encounter, and how did you overcome them?I had difficulty when my container's height keeps extending when the view is adjusted or scrolled down. I searched through the internet in order to find out what was wrong, I only read and read but nothing until I tried to experiment on it myself. Thanks to the answers from stack overflow which says its most likely the height property, I was able to accomplish it. From height: 51vh; to height: 100%;.
What specific areas of your project would you like help with?I would like help with the spacings and how to place good values in the margins, paddings, widths and heights. If possible, I would also like to learn how I could minimize my code by using only the necessary properties. I also want to understand how the min-width and max-width works in the media queries.
P@Jolijn0101Posted 9 months agoHi Jerico Jones B. Edic, Congratulations with finishing this project. You did a great job in coping the design. It has still some differences but that is difficult to copy if you have only the screenshot files.
Maybe the Pixel Perfect Pro extension for the Crome browser could make it a little more easy. In case you use Crome it can create an overlay of the screenshot design so you could easier copy the design with your code. You can find more info about that on this page: https://chromewebstore.google.com/detail/pixel-perfect-pro/nnhifpoojdlddpnhjbhiagddgckpmpfb?pli=1
You could use the min-width in cases were you need a minimum width and the element will grow further. The max-width is useful to set a maximum to the width of an element.
.container { width: 100%; min-width: 100px; max-width: 300px; }
In this example the .container will at least be 100px and not smaller. The .container will grow until it reaches the 300px. This could be written in one line using clamp:
.container { width: clamp(100px, 100%, 300px); }
I hope my feedback is useful ;)
Marked as helpful1 - @mbd89Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
when you press your tab key, then enter, press the tab key again then enter to make the question disappear.
What challenges did you encounter, and how did you overcome them?n/A
What specific areas of your project would you like help with?n/A
P@Jolijn0101Posted 9 months agoHi Makha, congratulations with finishing this project. The accordion goes easy open and closed by clicking on it and the icons are changing as well. For navigating the accordion with the keyboard is a bit more difficult. When I browse through it with the tab key it shows that only the icons could be used. If I hit enter they will open. Hitting enter again doen’t close the accordion. Maybe this article about making an Accordion Accessible could be of a great help: https://www.aditus.io/patterns/accordion/ I did this challenge as well. For inspiration how to make it more accessible you could find my solution here: https://www.frontendmentor.io/solutions/faq-accordion-accessibility-challenge-hc3kahC3K8
Marked as helpful0 - @mbd89Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
it looks great i think., i'd do the same thing
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?n/a
P@Jolijn0101Posted 9 months agoHi Makha, Your solution for the Interactive rating component looks awesome. Very handy how you make use of the :active selectors for the ratings when they are selected. It's easier than writing it in the javascript code.
1 - P@AchigyusSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am proud at how fast I was able to get the markup setup and style the websites. I'm also proud that I was able to use more responsive properties in my css such as
What challenges did you encounter, and how did you overcome them?inline-size,block-size, andmargin-block-end.My major challenge was trying to be semantically correct
What specific areas of your project would you like help with?I would like help with my html semantics and accessibility. Thanks
P@Jolijn0101Posted 9 months agoHi Achi Gyuse Achi, Your solution for Responsive Product preview card component looks amazing. If you would like to create more space between the letters of the perfume header you could use in css the property letter-spacing.
Is it possible to use semantic HTML in ReactJS? If so you could change the div with a class of container for a <main> tag and the div with a class of product_preview_card for a <article> as an example.
Frontendmentor has a learning path for accessibility. You can find it here: https://www.frontendmentor.io/articles/accessibility-learning-path-for-beginners-CEIN9c110q
Google has a good article about semantic HTML. You can find it here: https://web.dev/learn/html/semantic-html?continue=https://web.dev/learn/html#article-https://web.dev/learn/html/semantic-html
I hope this feedback was use full an I wish you lots of fun in coding your next project.
Marked as helpful0
