@Louay997Submitted 2 months ago
Yassin Amr
@justXeeZAll comments
- @justXeeZPosted 2 months ago
Nice form validation, some minor fixes I'd do are to make the dismiss message button functional and spend a little more time styling the solution, but overall good job👏
1 - @justXeeZSubmitted 2 months ago@justXeeZPosted 2 months ago
sorry for the screenshot offset, I'll fix it later
Never mind, I fixed it
0 - @sedaryildirimSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Few design differences, mainly with the active share button state on the desktop view - was just a personal preference to keep the length of the share card within the borders of the main wrapper/article!
@justXeeZPosted 5 months agoI like the concept and the animations but the overall project could definitely be polished some more.
0 - @BledanITSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Proud of managing to use a CSS grid effectively and changing it according to screen size.
What challenges did you encounter, and how did you overcome them?Responsive design with grid has been difficult to implement, I had to resort to a number of margin hacks that needed too specific classes.
What specific areas of your project would you like help with?I would like to know some good practices to reduce unique code as much as possible and favor reusability
@justXeeZPosted 5 months agothe grid approach is quite interesting although I'd not suggest it for such design, it will be quite hard to make everything responsive by default(this is why your code contains a lot of properties changed in the media query), and the image in the mobile version is extremely squished (maybe its a firfox problem idk), and also it would be great to make use of the
object fitproperty.Marked as helpful0 - P@lia-oliveiraSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
It was very nice to center the card without using margin: 0 auto. Before starting a new project, I will look through all available resources before developing a solution, instead of relying only on the Figma files.
What challenges did you encounter, and how did you overcome them?The biggest challenge for me was the card shadow. I tried CSS documentation and some tutorials to understand how it works, but it only looked right after ChatGPT helped me get the transparency value that matched the example card.
What specific areas of your project would you like help with?I've been researching accessibility, and I would really like to find materials created by people who use screen readers or have altered color perception. I’d also like to know how to test a page to ensure it meets accessibility requirements.
- @jeremymouzinSubmitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
I didn't do the shadows because it's a nightmare to retro-engineer and I don't have the figma file.
@justXeeZPosted 5 months agothe pseudo classes approach is quite interesting, and you should have reverse engineer the box shadow without the figma files lol, anyway good job!
1 - P@aurelienfliegerSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I got reacquainted with CSS Grid & used Sass for the very first time.
What challenges did you encounter, and how did you overcome them?I was not sure how to handle the cards' unusual placement, and I experimented with the number of columns/rows to include before setting for 3.
What specific areas of your project would you like help with?Is clamp() the ideal solution for setting the cards sizes, or should I go with something else?
@justXeeZPosted 5 months agohere are some tips:
- always make h1 and h2 a bit bigger in size to make them stand out more
- if you don't want the top border to take this weird curvature at the tips like a hook, make the border radius the same value as the border width like:
.container{ border-top: 5px solid yellow; border-radius: 5px; }- another tip would be to use the
gapproperty instead of margins to prevent the cards from cramming in smaller screen sizes before the page translates into the media query
other than that you did a pretty good job.
1 - @Tasin269Submitted 5 months ago
- @AnnaRoussSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of how I was able to understand better the spacing of my page, and trying to better understand Flexbox.
What challenges did you encounter, and how did you overcome them?I will be honest, the buttons caused issues for me. At first, I just couldn't figure out how to lengthen them or how to make it look the way it was supposed to.
What specific areas of your project would you like help with?Need a little bit more practice with Flexbox, had to use a website to help me figure out which displays to use, and then how to style it.
@justXeeZPosted 5 months agoI think you did something wrong when uploading the solution live, I'd recommend using vercel to upload your solutions, it is much user friendly to use than GitHub pages
0 - @dREY73Submitted 5 months ago@justXeeZPosted 5 months ago
I'd suggest giving the container a max width like:
.container{ width: 95%; /*to leave some space for margins */ max-width: 750px; /*change according to your needs */ }Marked as helpful1 - @frost3dWaveSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
- starting to get hang of responsive & fluid terminologies and incorporating them naturally.
- making use of logical properties instead of regular physical ones.
I had a bit of trouble with using
What specific areas of your project would you like help with?srcsetwith theimgtag & couldn't get my primary image to switch to other image after the specified media query but with the help of the kind folks from the discord server (@AlexKMarshall) I understood the use cases ofimgandpictureelement & in the end switched to usingpicturetag and resolved it.I'd very much like if someone could point out what i could do better in all cases/in much more efficient ways to do things or just in general, things I could improve in my code. But specifically I want help with responsiveness & fluidness of text ect. stuff related to responsive design.
I'd appreciate any meaningful feedback. Thank you very much!
@justXeeZPosted 5 months agosolution on point! if you could, please let me how did you get the sizes so right?
0 - P@jedcancholaSubmitted 5 months agoWhat challenges did you encounter, and how did you overcome them?
I faced the challenge to style tables, I was not able to styling as I wanted but it look a lot like the solution, I tried different approaches to styling the table but not able to avoid unexpected behavior while editing the th elements.
What specific areas of your project would you like help with?Styling tables to avoid undesired behavior in this case for desktop design it was not possible for me to add padding to th elements without having td elements moved.
Also I would like to have advice on how can I handle font sizing to be responsive, how should I handle fonts sizes without using pixels and text to adapt to different sizes.
- @ange14032005Submitted 5 months ago@justXeeZPosted 5 months ago
definitely did the assignment but there is a couple of points if you want to perfectly match the design:
- change the background color.
- fix the profile name font size.
- play with the margins till yo find the perfect match for the height.
other than that, great job :)
Marked as helpful1 - @BAM225CCSubmitted 6 months ago@justXeeZPosted 5 months ago
Well Written Code!, but the author name could be a bit bigger.
0 - @mahmoud-abuyoussefSubmitted 5 months ago
