@FixitoSubmitted 21 days ago
AymaneOnline
@AymaneOnlineAll comments
- @AymaneOnlinePosted 18 days ago
Add
aria-expandedto buttons that control the menu to indicate the menu’s open/closed state.0 - @Alexandru736Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Being able to improve the readability of my code. Next time I would try a CSS framework, maybe.
What challenges did you encounter, and how did you overcome them?Small challenges regarding how to style and how to extract the value of the radio buttons
What specific areas of your project would you like help with?I need feedback on how accessible is my site and how readable is my project.
@AymaneOnlinePosted 23 days agoHere are some feedbacks on accessibility as you asked:
- Add hover effects on the submit button and
cursor: pointerso to make it more intuitive. - The consent checkbox is not reachable from the keyboard (try pressing tab few times), remove the </input> closing tag after the checkbox.
- There some fields that are not visible on mobile devices, to fix that remove the
display: flex; justify-content: center; align-items: center;styles from the<body>. - Try using the Lighthouse Chrome Extention it could help to spot some accessibility flaws to improve (like colour contrast for your case).
0 - Add hover effects on the submit button and
- @Alexandru736Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Being able to think more of accessibility
What challenges did you encounter, and how did you overcome them?I didn't know how to split the background between the background color and the background image. I thought about creating two divs that represented both but I thought I would've overcomplicated the solution. In the end, I used the
What specific areas of your project would you like help with?background-imageproperty along withbackground-size: containFeedback on the accessibility standards I applied here. Thank you!
@AymaneOnlinePosted 26 days agoHere is some feedback:
Styles:
- Add
justify-content: space-between;to the<div class="question">to create that space between the question and the plus button. - Add
cursor: pointerto the<button class="btn">to change the appearance of the cursor whenever you hover the question.
0 - Add
- @elisilkSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I focused a lot on using semantic HTML and the accessibility features of the built-in form controls to make sure that this component was fully keyboard accessible. I definitely wanted to make sure none of my styling of the radio buttons would interfere with any of those built-in features, and I think it turned out pretty well.
@AymaneOnlinePosted 28 days agoI have nothing to say, I've actually learned from your solution a lot. Good Luck! 👍
0 - @AdrienB23Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
@AymaneOnlinePosted about 1 month agoI did want to see the code, but your repository link is not working.🤔
0 - @webdevbynightSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I learnt the way of building a grid layout with the keyword
What challenges did you encounter, and how did you overcome them?auto-fit. I thought it would be complicated to use it, but it is as easy as to use therepeat()function, where such a keyword is used. Combined with the use of theclamp()function to define the grid container width, I managed not to multiply media queries.I wondered how I would translate the coloured top banner of each card into code in a efficient way. By testing with a pseudo-element and a grid layout, I realised that grid layout, like flexbox, included the pseudo-elements attached to the grid container in the elements to which the grid effects applied.
What specific areas of your project would you like help with?Do not hesitate over giving feedback about accessibility if there are improvements in the way I use
aria-live, and about my TypeScript if there are improvements to make the code I wrote more performant.@AymaneOnlinePosted about 1 month agoGood job, I like how you didn't forget the
focus effectof the Daily button when the page is loaded on the first time.0 - @sonmikrafftSubmitted 5 months agoWhat specific areas of your project would you like help with?
The Error State seems to be cheated. Setting the background color of the text field is complicated.
@AymaneOnlinePosted about 2 months agoYour code is quite good congrats. Here are some remarks that could probably help you:
- The responsiveness need some improvements on screens between
375pxand1023pxin terms of width so what I suggest is to add another breakpoint from to adjust the looking for medium screens. - Decrease
line-heightof the<li>. - Give the
<body>amin-height: 100svhso its height covers the whole screen. - Add a
<meta name="description" content="">. (this one is for SEO) - Give a
margin-top: autofor the form so that it sticks at the bottom of any mobile screen.
0 - The responsiveness need some improvements on screens between
- @MoDev40Submitted 3 months ago@AymaneOnlinePosted 3 months ago
The QR code image is not displaying. This is the link of the image from your website:
https://qrcode-frontendmentor-solution.vercel.app/public/images/image-qr-code.png. Try fixing the path from your code base, because the correct path would be something like:https://qrcode-frontendmentor-solution.vercel.app/your-solution-folder/public/images/image-qr-code.png.0 - @flavin-jrSubmitted 3 months ago@AymaneOnlinePosted 3 months ago
Good job, your solution is quite close from the actual design. I could pinpoint some small inaccuracies:
- The value of
border-radiusfor the article banner needs to be changed when switching from mobile devices to desktop, from for exampleborder-radius: 10px 10px 0 0for mobile devices toborder-radius: 10px 0 0 10pxfor desktop devices. - The share button styles does not match the design given
- I think you could avoid the height changing of the card on mobile when you click on the share button by changing the
margin-bottomof the .text-content and adding amargin-topfor the .user-context.
Marked as helpful0 - The value of
- @PatricioZarauzSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of learning some new SASS methods as well as continue developing my css grid skills
What challenges did you encounter, and how did you overcome them?My main challenge was centering the the grid correctly will still having the minimum margins, what I ended up doing was using grid with one column and row to center it using
What specific areas of your project would you like help with?place-items: center;.I would like to get some feedback on how to improve accessibility to the code and also overall code improvements.
@AymaneOnlinePosted 4 months agoYou've done a really good job, I could see the effort you've put in, as in the two media queries instead of just one. 👍
If you want to improve the overall code of your pages you could use Lighthouse extension which is an open-source, automated tool for improving the performance, quality, and correctness of your web apps made by Google.
0 - @gajbos99Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
Im proud of me getting it to look somewhat the same.
What challenges did you encounter, and how did you overcome them?I had some problem on how to get the sizing and such in the card-container pixel-perfect and dont know what the best way is, would love some help with that.
What specific areas of your project would you like help with?the sizing in the grid, i want them to be the exact same size as in the example but i dont know what the best way is to do that.
@AymaneOnlinePosted 4 months agoYour solution is really good, only one subtle detail that you missed is the cards shadow that you didn't implement, you could do it using the
box-shadowproperty. I don't know if there is a way to be pixel perfect for the sizing other than having the actual FIGMA or .psd file which is not included in this challenge unless you're subscribed to frontendmentor.io 😊.Another tip is that you could use lighthouse, it's an extension that helps you to improve the overall quality of your pages in terms of performance, accessibility etc... You could download it in chrome web store if you're using Chrome.
0 - @ferdinandoasproSubmitted almost 2 years ago@AymaneOnlinePosted 4 months ago
Your solution is too close to the actual design, congrats! I've got some things to point out, I advise you to add some
margin-topon the card to make some space on top of the image when the mobile screen doesn't have enough height you could test with the iPhone SE to see what I'm talking about.For accessibility purposes, you need to add the alt attribute on your images, This may enhance the experience for users of assistive technology.
Also, you could add Meta descriptions on your HTML file to improve SEO.
Another thing is that you could use the Lighthouse extension on your browser, as it shows you the quality of your page regarding (Performance, Accessibility, Best Practices, and SEO).
1
