@atharyaqubSubmitted 4 months ago
kristinakasalova
@kristinakasalovaAll comments
- @kristinakasalovaPosted 4 months ago
Hi Athar,
nice job, looks good on desktop, despite some changes that could improve it.
I'd recommend to use more of semantic HTML tags, e.g. you use
class ="main"while there ismaintag available as default.Additionally, a few more
divtags could be used as containers for lists or blocks of text. That would allow you to style a bit better, for example use the same padding/margin within the main column and among the blocks themselves. At the moment, some blocks are offset as per design, others are not which doesn't look neat.The lists' font color is incorrect, but that's a minor one.
What I think is a quite big issue is missing media queries, so lacking responsiveness on mobile. Looking at your page on smaller screen is a problem. This is something I think you need to revise or add (or at least think about in your future projects), as responsive pages are standard nowadays.
To sum it up, you did good to complete the challange, but need to focus on responsive design next time.
0 - @fthkrtSubmitted 6 months ago@kristinakasalovaPosted 6 months ago
Great work.
I like in particular the use of
root:pseudoclass and variables.0 - @CarlTheBeginnerSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Mobile first web design.
@kristinakasalovaPosted 6 months agoHello, Carl,
great work with media queries. I am surprised by the detail you went to in them, since I usually see only 1-2 media cases (for tablets and desktops). I think it is good to be detailed, though I would consider whether it is not overcomplicating the setup in the long run. This is just a small component where it is relatively easy to setup, though managing this level of detail across full site could be painstaking and potentially create more issues than it is worth. So I reckon it's best to keep a balanced approach. Other then that it's a job well done, good luck in your next project!
Marked as helpful1 - @sidr467Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I did some style with flex and Also box-shadow was somthing new for me.
What challenges did you encounter, and how did you overcome them?I needed 1 div to the start but it was center but i managed with some negative margin in haste.
What specific areas of your project would you like help with?Styles stuff
@kristinakasalovaPosted 6 months agoHi,
looks great! Your card position is spot on. I noticed that you didn't change line height which changes the dynamic in the text bit of the card. Also, the category tag padding is a bit off, but these are minor bits. Although flex works fine, I wonder if you wouldn't get a bit better outcome in smaller screens using media queries, since the card is too wide in small screens. Maybe it's worth testing in your next project?
Well done and best of luck in your journey!
0 - @thekid2005Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
doing this by my self
What challenges did you encounter, and how did you overcome them?i struggle a bit on CSS but in the end i managed to make it.
What specific areas of your project would you like help with?none
- @kristinakasalovaSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
This was my second challenge completed within 24 hours, I'm mostly glad that it now started to come in much quicker as I get more used to the attributes and their use.
What challenges did you encounter, and how did you overcome them?I find it hard to guess the correct position and size without more reliable guidance.
What specific areas of your project would you like help with?I feel like importing fonts is something I need to dive into more even though I keep re-reading the documentation each time, I don't feel like I know what I'm doing.
@kristinakasalovaPosted 7 months agoHello, Bernardo,
Thank you very much for your kind words. I got the Perfect Pixel extension, will test it in my next assignment (or even this one actually, and redo the screens).
As for the @font-face, I do follow the W3School examples, though usually get swayed by the Google fonts' copy code/embed section, that show it differently... :) Need to remember not to get fooled!
1 - @FabianoTerdengeSubmitted 8 months agoWhat specific areas of your project would you like help with?
Can someone help me with finding the correct styles ? Some seem slightly off from the design.
@kristinakasalovaPosted 8 months agoHi Fabiano,
looks good!
As a fellow newbie who recently finished the same challenge I have only few tips or rather questions for you, since I wonder what is better practice. :)
- h2: I noticed that you wrote it out in capital letters in HTML. It may be worth considering to include
text-transform: uppercaseandletter-spacingjust to be on the safe side, ensure replicability and not to be dependent on the HTML input. - I wonder why do you keep adjusting the
<main>tag for different break points since from the visual aid the split looks either 50/50 or 100% and therefore your picture gets cropped too much. This is just a thought from my side.
0 - h2: I noticed that you wrote it out in capital letters in HTML. It may be worth considering to include
