@CheosphereSubmitted over 1 year ago
...made with a lot of love π€π»π
Pranshu Sahu
@Pranshu-SahuAll comments
- @UsamaBinKashifSubmitted almost 2 years ago
Hello, everybody! π
This was such a beautiful challenge and I learned so much from making it! I actually wanted to do more, but I felt like it was taking a while and I simply needed to submit my solution. π Of course, feedback is welcome and appreciated! π
Happy coding, everyone! π
@Pranshu-SahuPosted almost 2 years agocongratulations on completing the solution.
I have few suggestions to improve the solution-
-
<h1 class="sr-only">splitter</h1> <img src="./images/logo.svg" alt="" />The rule to follow when using heading tags is to never skip the heading level. In other words, heading levels must always be in order to give structure to a page. *this is would remove your first accessibility error. * -
You should use the
<main>wrapping entire content for the calculator. *this would remove your second accessibility error `
I hope this helps. Happy coding! π
0 -
- @ahmetkabacaliSubmitted almost 2 years ago
Thats was funny.
I would be happy to hear your suggestions and opinions.
Ty.
@Pranshu-SahuPosted almost 2 years agoHi,
congratulation for completing the challenge
I have looked your solution, I see that when I look for advice it produces the same one. You could see my solution, I have added random parameter at the end of api
https://pranshu-sahu.github.io/advice-api-fem/which solves the issue .π βHope you find it helpful Happy coding
Marked as helpful0 - @revin212Submitted almost 2 years ago
I'm open to any feedback!
@Pranshu-SahuPosted almost 2 years agohi @revin212,
congratulations on completing the solution.
I have few suggestions to improve the solution-
1-- you are missing the separator just below the navbar as shown in the design
2-- you can take your dropdown one step ahead by getting it close when user clicks anywhere on the document
3-- I don't know why I'm unable to preview your code. It is showing error 404 page not found. I hope you would fix it.
hope you find it helpful
happy coding
Marked as helpful1 - @PhoenixDev22Submitted almost 2 years ago
Hi Community,
I have completed this challenge some time ago, If you have any recommendations please do leave a comment.
Thanks in advance.
@Pranshu-SahuPosted almost 2 years agohi @PhoenixDev22, I'm just curious to know how did you make the solution so pixel perfect?
1 - @debriksSubmitted almost 2 years ago
Hi Guys! Here's my solution to this challenge.
As usual, feedback is greatly appreciated β¨
@Pranshu-SahuPosted almost 2 years agohiπ @debriks, you could add
aria-label="pricing component range", this would remove accessibility error.Hope you found it helpful Happy coding
Marked as helpful0 - @je-joSubmitted almost 2 years ago
Any feedback is appreciated :)
@Pranshu-SahuPosted almost 2 years agoHi @je-jo,
Congratulations on completing the challenge.
Your solution looks quite impressive, how much time did it take you to complete it.
1 - @catherineisonlineSubmitted almost 2 years ago
Hello, Frontend Mentor community! This is my solution to the Huddle landing page with alternating feature blocks.
I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.
You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.
Thank you
@Pranshu-SahuPosted almost 2 years agoHi @catherineisonline,
I am very impressed by the solution.
I wanted to know that how much time did it take you to complete such pixel perfect solution and at what screen do you make your solution for desktop screen.
1 - @kpranay613Submitted almost 2 years ago@Pranshu-SahuPosted almost 2 years ago
Hi @kpransy613,
I have few suggestions for you to improve your code -- Images must have alternate text
---It is important for images to have alternate text, also known as "alt text," for a number of reasons. Alt text is a brief description of an image that is displayed when the image itself cannot be displayed, such as when a user is using a screen reader due to a visual impairment. It is also displayed if a user has images disabled in their browser or if the image fails to load for some reason.
Alt text is important for accessibility because it allows people with visual impairments to understand the content of an image and to navigate a website or document more easily. It also helps search engines to understand the content of an image, which can improve the website's search engine optimization.
Including alt text for images is a requirement of the Web Content Accessibility Guidelines (WCAG), which are a set of internationally recognized guidelines for making web content more accessible to people with disabilities. Failing to include alt text for images can make a website or document difficult or impossible for people with visual impairments to use, and can also result in penalties or other negative consequences for the website owner.
In general, the alt text for an image should be concise and describe the content of the image as accurately as possible. It should not be too long or too short, and should avoid using overly complex language. For example, the alt text for the image you provided might be something like "Illustration of a box on a desktop computer screen." Hope you will find it helpful. Happy coding
0 - @Yuri-MendesSubmitted almost 2 years ago
Any feedbacks are welcome. Bootstrap was applied in this challenge I wasn't able to get the corners of the columns rounded, I don't know what I did wrong, if anyone could help, I appreciate.
@Pranshu-SahuPosted almost 2 years agoHi, Yuri-Mendes! π
**Congratulations for completing the completing the challenge.**π
πYour solution looks awesome bro.
In order to make rounded corner you should use
border-radiusproperty to individual card. To know more about about border-radiusHaving multiple
<h1>elements can create confusion and make it difficult for screen readers and other assistive technologies to properly navigate the content. Many <h1> mean many titles which can confuse the users, especially the screen reader users. So, I recommend replacing all the<h1>with<h2>.In this case, it is only a component, not a full website. So, it is okay to not have
<h1>.Learn more β [How-to: Accessible heading structure - The A11Y ]Project(https://www.a11yproject.com/posts/how-to-accessible-heading-structure/)
I hope you find this useful. Wish you all the best for future projects.ππ
0 - @tiobistaSubmitted almost 2 years ago
Do you have any questions about best practices? How can I write a best and compelling Readme.md for the projects?
@Pranshu-SahuPosted almost 2 years agoHello @tiobista, how are you? I truly loved your project's outcome,
there is accessibility error in your code -- To improve the code structure wrap this div:
<div class="attribution">with the semantic tag footer
The remainder is excellent.
I hope it's useful. π
Marked as helpful0 - @gpt-anuragSubmitted almost 2 years ago
I tried BEM methodology for naming classes. Please review the class names, if they are according to BEM or not. Any other suggestions are welcome.
@Pranshu-SahuPosted almost 2 years agoHi! π
Congratulations on finishing this challenge! π
Some suggestions from me.
--In order to remove accessibility error for
Page should contain a level-one heading- You have givendisplay:nonetoh1inside the main container instead giveh1class ofsr-only.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}this would improve your accessibility of the site.
Related resources:
How-to: Accessible heading structure - The A11Y Project
I hope this helps. Happy coding!
Marked as helpful1
