Mukhtar Axmed• 10
@MoDev40
Submitted
AymaneOnline
@AymaneOnline
All comments
- AymaneOnline• 220
@AymaneOnline
Posted
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 - PFlávio Júnior• 100
@flavin-jr
Submitted
AymaneOnline• 220@AymaneOnline
Posted
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 helpful
0 - The value of
- Patricio Zarauz• 140
@PatricioZarauz
Submitted
What 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
place-items: center;.What specific areas of your project would you like help with?
I would like to get some feedback on how to improve accessibility to the code and also overall code improvements.
AymaneOnline• 220@AymaneOnline
Posted
You'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 What 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.
AymaneOnline• 220@AymaneOnline
Posted
Your 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- Ferdinando Aspro• 130
@ferdinandoaspro
Submitted
AymaneOnline• 220@AymaneOnline
Posted
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 - Ata Abatay• 160
@ataabatay
Submitted
What are you most proud of, and what would you do differently next time?
overall pretty proud with how quickly I was able to complete the challenge
What challenges did you encounter, and how did you overcome them?
No particular challenge was faced, overall feedback would be appreciated
What specific areas of your project would you like help with?
No particular challenge was faced, overall feedback would be appreciated
AymaneOnline• 220@AymaneOnline
Posted
I would recommend you use Lighthouse extension to optimise the result, as it show you where you lack in terms of performance, accessibility, best practices and SEO. You could see that it tells you that you need to put the headings element in a sequentially-descending order, and that you've got some unused Javascript in your code etc...
Also, you need to add a meta description in your html document for SEO purposes (this necessary in this challenge, but good to know for future use)
0 - Kikino02• 160
@Kikino02
Submitted
What 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?
.
AymaneOnline• 220@AymaneOnline
Posted
You've actually managed to get the dimensions that close, Great work! I recommend you add a meta description on your html file, as it's beneficial for SEO and may be included in search results to concisely summarise page content, this is not necessary for this challenge of course but it's good to know.
Marked as helpful
0 - PJuan Gomez• 260
@newbpydev
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of the SCSS mixin that I have used, as I continue exploring the possibilities of SCSS each project will add more features for me to share with everyone.
What challenges did you encounter, and how did you overcome them?
The main challenge was trying to make sense of the possibilities of SCSS, on the README.md file I added a responsive function that I made up which helped me understand how the inner workings of SCSS.
What specific areas of your project would you like help with?
Feel free to share any insights on SCSS, mixins, or BEM that could enhance my project. I’m open to learning and improving!
AymaneOnline• 220@AymaneOnline
Posted
Your solution seems amazing. I recommend you use lighthouse for accessibility measures (you got 89% score on it), even if does not exactly match the style-guides but it's a bonus for legibility.
0 - upbeatMood• 10
@upbeatMood
Submitted
What are you most proud of, and what would you do differently next time?
Finally, I am able to understand how some of the features of CSS works (such as box-sizing, flexbox, width and height). Next time, I would like to do it with grid layout instead, as I believe I need to practice it in order to understand it.
What challenges did you encounter, and how did you overcome them?
At first, I couldn't figure out how to center the whole thing. Then I wanted to try flexbox, as I previously went through some tutorials on it but never practiced it really. And it worked! It is amazing how simple it made it for me.
Another part I struggled with was aligning the paragraph with the above h3 text, as I wanted the text part to align with the imaginary borders of the QR code extending downwards. I ended up with wrapping both elements in a div and setting width to 80%. Worked like a charm.
What specific areas of your project would you like help with?
I would like to know what are some ways I could reduce the amount of code I write. I used SCSS as I wanted to learn it and it is quite useful in that regard but maybe I could set some global values that would help with that.
AymaneOnline• 220@AymaneOnline
Posted
I find your work really great, and I wanted to point out some of things I found on your solution that I have recently learned while doing the same challenge. First, I would like that you consider using "Lighthouse" which is an extension which is a tool developed by Google that helps developers improve the quality of web pages, it indicates which aspect you need to improve as for your case is accessibility and SEO. Second, well this is a thing I've struggled with also, which is paying attention to those small details like the shadow for the card and the letter-spacing for the paragraph (you can verify it on Figma its around 0.19px) and also the text color for the heading which should be that dark-blue pointed on the style-guide.md file.
Marked as helpful
0 - AymaneOnline• 220
@AymaneOnline
Submitted
The most difficult part for me was to add the two background images correctly to maintain responsiveness. I would like to receive some feedback guys. 🙂
AymaneOnline• 220@AymaneOnline
Posted
Do you have any ideas how to fix the problem on the mobile devices?
0
