Muneeb Ahmed• 10
@muneebahmed05
Submitted
Giang Nhật Khánh (Kayden)
@KaydenGiang2512
All comments
@KaydenGiang2512
Posted
Hi Muneeb, it seems that your project is incomplete, as the QR image is missing from the page and only the text section is visible. Please check your code and fix any errors you may have made. Good luck!
0- PKent O'Sullivan• 1,870
@12Kentos
Submitted
First time trying out the mobile first approach. I've got mixed feelings about it tbh, probably the issue is I've done quite a few projects desktop first, so it feels weird doing it almost in the reverse.
@KaydenGiang2512
Posted
Brilliant work Kent! I just noticed a single accessibility issue in the report generated by Frontend Mentor, where there is no <h1> tag in your entire document. Other than that, your solution was very close in resemblance to the original design. One suggestion that I would make is to set up all your colors as custom properties to be used widely across your stylesheet simply by calling var(--your-color).
1 - Lacey E• 110
@laceeder
Submitted
I found using hover difficult because of the eye icon. I couldn't seem to get it completely opaque like in the design files. I feel like I also maybe could've been more efficient with my code too.
My main question is how could I make the eye icon more opaque when I hover over the main image?
@KaydenGiang2512
Posted
It was probably because I didn't phrase my suggestion well enough (quite hard to do so through text-only comments!), so I will paste in the link to my solution here so you can see what I tried to explain above. Hope this clears up any confusion you may have on our issue!
https://github.com/KaydenGiang2512/Article_Preview_Component
Best of luck :D
Marked as helpful
1 - Lacey E• 110
@laceeder
Submitted
I found using hover difficult because of the eye icon. I couldn't seem to get it completely opaque like in the design files. I feel like I also maybe could've been more efficient with my code too.
My main question is how could I make the eye icon more opaque when I hover over the main image?
@KaydenGiang2512
Posted
Hi Lacey, great work on this project overall. I actually completed this project a few weeks ago so I might have a solution to your "eye image opacity" issue, which is by separating the eye-icon from the NFT image into 2 separate <div> tags. After that, create another <div> as the overlay and use position: absolute for all of these to ensure that they stack on top of one another. By putting the eye-icon in its own <div> tag, the opacity attribute from the NFT image will no longer affect it, and you can independently set the opacity of the eye to your choosing. Hope this helps and happy coding!
P.S. the image is not horizontally centered in the entire card element, so that's another thing you should look into.
0 - Satyajeet Das• 40
@123Satyajeet123
Submitted
Please suggest some things that i can improve on and what things i can add extra here and also provides some learning resources.
@KaydenGiang2512
Posted
The result seems pretty nice for your first attempt, and responsiveness is good! I just have some feedback based on my personal opinion:
- The card seems to small for desktop (in comparison to the original design) so the content within is cramped and therefore some elements aren't exactly fitted well inside, for example the rating circles and the star icon on the first card.
- The font color on the submit button should be white (for the sake of the provided design)
- font sizes are smaller than the required ones (15px) which could largely be due to the limited height and width you set for the containers (refer to my first feedback). Frontend Mentor always provides design screenshots as well as parameters for most of the elements on the page, so keep an eye on those in your future projects to replicate the original as well as you can.
Other than these comments, you did an excellent job overall and best of luck to you on your next challenge!
0 @kennysyke
Submitted
Hey, everyone, I've been learning HTML and CSS for a week now, but have decided to make some practice to understand the whole thing better. Can't even say what was the hardest part to make to qr-code itself or to figure out the GitHub. Was really close to burst into tears at some point.
Anw. I was pretty much confused with the mobile version, I remember being taught of media queries, however I'm not sure I used it right. Also the panel size, is it okay for it to be exactly pixeled? Or should I advantage percentages? Just saw a p in CSS I do not need at all.
So, in conclusion any feedback at all would be appreciated. :)
@KaydenGiang2512
Posted
Design-wise, this is a solid project for a beginner with everything looking nice and centered. However, the link to your GitHub repository isn't working Alexandra, please double-check in case it might be incorrect!
For the code, I noticed 2 huge selector chunks you made on the css (the ones with lots of tags): html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
which were quite confusing to me as to what you're trying to achieve because CSS can specifically target elements in your html by selecting them individually, instead of gathering them all at once. This is important for readability as well as maintaining your code going forward.
1@KaydenGiang2512
Submitted
I personally think that I've improved since my first front-end challenge (the QR code), but I still have questions on coding practices as well as readability/scalability aspects of my code. Any form of constructive feedback/critique is greatly appreciated!
P.S: be nice please :D
@KaydenGiang2512
Posted
Can someone please help me figure out why the SVGs aren't showing on my website? It's been driving me crazy so if anyone can clarify this for me, that would be awesome!
0
