@sonmikrafftSubmitted 4 months ago
What are you most proud of, and what would you do differently next time?
Custom Checkboxes and Radio Buttons, Snackbar with Animation
P
Jolijn Rosendaal
@Jolijn0101All comments
- @Jolijn0101Posted 4 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 5 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
@Jolijn0101Posted 4 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 5 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.
@Jolijn0101Posted 5 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 5 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
@Jolijn0101Posted 5 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 7 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
@Jolijn0101Posted 5 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 - @AchigyusSubmitted 5 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
@Jolijn0101Posted 5 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 - @MismistySubmitted over 1 year ago
Hey follow coders, I would love if someone take a look at this solution. Please give any feedback, I always seem to have trouble with the media queries and this one is no different. Thanks
@Jolijn0101Posted over 1 year agoHi Kim, Congratulations for finishing this project🎉 I checked your code and saw that the images for the business logo's aren't in the images folder. That could be the reason why the logos aren't showing on the page. In your css file you declared different elements with the same property. You can if you want to chain them and giving the same property:
.snippets p, .access p, .work p { text-align: center; }It could save you time and a lot of code. Have you ever tried the mobile first approach? First making the mobile page and then scaling up with your media queries to iPad, laptop and desktop? This is an article about it: https://zellwk.com/blog/how-to-write-mobile-first-css/ Chrome dev tools has tools to view your site on different devices. It is very convenient. I hope my feedback helps you. If you have any questions feel free to ask them.
Marked as helpful0 - @colormethanhSubmitted over 1 year ago
I had a lot of fun building this project. Building smaller projects make me aware of how I organize my code (which is not very). Any tips on how to organize my code better is much appriciated!
@Jolijn0101Posted over 1 year agoHi @colormethanh, Congratulations on finishing this project🎉 Your product card looks very similar to the Design. I looked at your project and found a h1 tag on line 14 without any text in it. The code looks further clean to me. You can consider using semantic elements. More about that you can find in this article from google:https://web.dev/learn/html/semantic-html/
0 - @ElvislexSubmitted over 1 year ago
Open to correction and ideas for a nicer coding experience.
@Jolijn0101Posted over 1 year agoHi Elvis, congratulations on finishing this coding challenge 🎉. Your NFT preview card looks amazing! If you really want to improve it more then…
-
You can if you want change the width of the card at a screen width of 1024px. It looks a bit small compared to the card at other screen widths.
-
At a screen width of 425px the eye icon that appears while hovering over the image will come out of the center.
-
At some screen width’s the light blue overlay is slightly bigger than the img and that will show thin blue lines around the img. Maybe you could try to set the img and overlay in the same div and give it an overflow:hidden in css so they couldn’t have different sizes?
But that are really small things. Overall the card looks really good and I hope this feedback was helpful and was the kind you were seeking for.
Marked as helpful0 -
- @yagyesh-bobdeSubmitted over 1 year ago
It is hard for me to make it responsive. I feel I made it too customized to desktop devices. I would like to know the best practices for resposiveness in this project
@Jolijn0101Posted over 1 year agoHi Yagyesh Bobde, congratulations with finishing this project🎉
I saw in your code you already use media queries in your css and the card wil transform in to one column for mobile devices. That’s already a good start.
Do you know that google dev tools has options to view your website on multiple devices? That could make te task of making it responsive a little bit easier. Then you could see when your layout breaks and needs to be adjusted in your code. This is a link to an article about it: https://developer.chrome.com/docs/devtools/device-mode/
Kevin Powell has a great video about making layouts responsive. This is de link to his video: https://www.youtube.com/watch?v=VQraviuwbzU
Hopefully this feedback was helpful and great job making this card looking so great!
Marked as helpful1 - @tayblackkSubmitted almost 2 years ago
There were times when I had to refer back to MDN docs for clarification regarding grid and flexbox. I've been challenging myself to clean up my CSS so it is more legible for viewers.
Another challenge I faced within the project was the image. svg.. I could not figure it out and I began to get so tired that my problem-solving skills turned into frustration.
You will find this at the bottom of the css stylesheet.
/* Having trouble adding the .svg - Really not even sure what is going on - Probably too tired / / .btn[data-icon="shopping-cart"]::before { content: ""; background-image: url("images/icon-cart.svg"); background-color: #fff; width: 15px; height: 16px; } */
I should have been more patient and tried to solve the issue. Nonetheless, I will be back tomorrow for another challenge. This is the conclusion of my 4th week of self-taught html & css.
@Jolijn0101Posted almost 2 years agoHi Tayblackk, Your product card looks great. I Think you can make it yourself a lot easier to add the given svg icon as an image element like so:
<button class="btn"><img class="icon-cart" src="images/icon-cart.svg" alt="icon-cart" />to Cart</button>and then styling the element with css. Hopefully this will solve your problem with adding the icon cart and I wish you a lot of fun learning html and css with less frustration.Marked as helpful0 - @KingNelxSubmitted almost 2 years ago
This is mobile preview only. I'm a back end developer. I'm trying to learn solid no framework front end and this freaking hard but I enjoy it.
@Jolijn0101Posted almost 2 years agoHi KingNelxV2,
How clever to learn Frontend on your own. Maybe the site https://www.w3schools.com would come in handy. There you will find on overview of several code languages like HTML and CSS. On YouTube I watch the videos of Kevin Powell. He is good in explaining CSS. This is his channel: https://www.youtube.com/@KevinPowell
I noticed that you didn’t use the colors and fonts from the style guide yet. You can find them in the style-guide.md file. If you would like to know more about google fonts, This could be a great video for you: https://www.youtube.com/watch?v=qgmLDPLApBY
What I would recommend is to make the card smaller and set it in the center by using Flexbox on the body element for example.
You could place all the elements under the image in a separate div and giving that div element a padding. Then your content will fit properly.
You're doing great. I hope you find my feedback useful and I wish you a lot of fun learning HTML and CSS
0
