Design comparison
Solution retrospective
Hello Everyone! π
I finally finished the first JavaScript challenge. π
After learning JavaScript for about one month. Here's the result! π
Now for the questions:
- Does this website looks good on your device?
- For the
FAQ
, I uppercased the letter on the HTML file instead of doing it on CSS. I'm afraid that the screen reader will pronounceFAQ
when it should spellF-A-Q
(letter by letter). So, is the screen reader smart enough to spell thefaq
letter by letter? - Please try to navigate this website using your keyboard. If you don't know how to navigate using a keyboard, see the keyboard support section. Do all the keys work based on the functionality?
- For those of you who have finished this challenge, which text uses a very dark grayish blue color (
hsl(237, 12%, 33%)
)?
Any questions on the technique that I'm using are very welcome!
Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link in the community feedback! I will be glad to help you too!
Hint: Try to disable JavaScript to get the pop-up box that will give you the link to the non-javascript version (using details
and summary
tag) or just click this.
Thanks!
Community feedback
- @dwhensonPosted about 3 years ago
Hey @vanzasetia lovely job here! π Looks great and functions really nicely with the keyboard.
Did you consider using the
details-summary
tag here? If so I'd be keen to know why you opted not to use it. I just ask as it might have made your mark-up easier and require less aria attributes.** Hang on I think I missed the link to your other solution without JS - did you just add this?
My only small suggestion would be to make the focus styles a bit easier to see, perhaps a bit thicker βusing
outline-offset
with a small value can also help making it look nice. But this is really a small point!Lovely job!! π
Cheers π
Dave
PS If you were concerned about the "FAQ" you could perhaps try
aria-label
, I'd need to check but I think this will stop readers accessing the content and read the content of the label, so you could tryaria-label="frequently asked questions"
- I'd need to test this to be sure though.Marked as helpful3@vanzasetiaPosted about 3 years ago@dwhenson Thanks for your kind words! π
I was added the non JavaScript version after several hours I submitted the solution π. How did you notice it?
I already had
outline-offset: 0.09em
to give space between the text and the outline. I have made the outline a little bit thicker π.About the
aria-label
, I'm not going to use it, sincearia-label
is not translatable. Instead, I added thesr-only
that tells whatFAQ
stands for, which isFrequently Asked Questions
. I think this is useful since not all people know what FAQ stands for, especially for those of them who are not native English. So, when they try to translate the page, it will translate theFrequently Asked Questions
words to their native language π.2@dwhensonPosted about 3 years ago@vanzasetia oh, good point. I had not thought about aria label not being translatable. I didn't know that and will keep it in mind. Shame about that.
0 - @EAguayodevPosted almost 3 years ago
Your finished challenge looks good! Got a question, how were you able to make your panel transitions smooth when a user clicks on them to open them? I did this challenge a while ago and mine jumps up and down weirdly when I click on mine. Heres my live link https://frontendmentor-faq-accordian-page-ax6ky8byj-ericaguayo90.vercel.app/. Overall, very impressive!
Marked as helpful0@vanzasetiaPosted almost 3 years ago@EricAguayo90 Thank you for your kind words! π
To reduce the amount of the jumping layout, I made a
function
where I only allow the user to open only one accordion panel at a time.About your solution, I have some feedback on it:
- I would recommend using native HTML elements,
details
andsummary
for the accordion. They are accessible by default and have a built-in open and close functionality. - I would recommend using CSS classes instead inline styling with JavaScript. You might already know that inline CSS is a bad practice and the same principle apply when working with CSS in JavaScript.
I hope this helps! Happy coding! π
0 - I would recommend using native HTML elements,
- @Sloth247Posted about 3 years ago
It looks awesome! I like your banner on Github too. I also tried this challenge a while ago and could not close the panels by only HTML and CSS (without JS). I appreciate if you give me a feedback on mine too!
Marked as helpful0@vanzasetiaPosted about 3 years ago@Sloth247 Thanks for taking a look at the README file!
I have given you my feedback on your solution!
Hopefully that's helpful for you!
0 - @pccipriPosted about 3 years ago
Hey, just took a look over your solution, and I gotta say it looks awesome(although keep in mind that I am a beginner as well).So if u can give me any tips on well anything :) but especially responsiveness and if u have any tips on image positioning I would appreciate that as well. Anyway as for your question about the text color I think it's used on well, pretty much all the text. My solution - this is the link to my solution
Marked as helpful0@vanzasetiaPosted about 3 years ago@pccipru For the text color, I used the primary color (Very dark desaturated blue), which I think match the design.
I'm confused since there are a lot of similar colors π .
Anyway, I have just given the feedback on your solution, feel free to take a look.
Also, I would recommend to use Markdown syntax to give your solution link.
[My solution](https://www.frontendmentor.io/solutions/profile-card-component-main-html-and-css-flexbox-grid-and-no-js-WdYYa5jEC)
It will render it as:
1 - @mathiconhPosted about 3 years ago
Hey, nice challenge, looks awesome, just a comment. The shadow svg, is positioned above the woman svg. that is resolved with z-index: 2 in shadow, z-index: 1 in woman. Cheers.
0@vanzasetiaPosted about 3 years ago@mathias9968 Sorry, I don't understand what do you mean, could you explain it in more detail? Are you talking about the box shadow on the
box
image?For the
illustration-woman
, on desktop, I usedbackground-image
which, I can't control thez-index
of it.0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord