@MarkPraiseSubmitted about 1 month ago
What are you most proud of, and what would you do differently next time?
Using the js validation API and sass was a breath of fresh air
Edudje wisdom
@CitycodAll comments
- @CitycodPosted about 1 month ago
You did well Just adjust the spacing at the mortgage calculator left side, work on the spacing at the bottom and up inside the container u created
0 - @anwar-elbarrySubmitted 3 months ago
- @anwar-elbarrySubmitted 3 months ago
- @fox22432Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I've been able to use more semantic HTML and flex to do centering and adaptive stuff. I was able to approach the challenge with the mindset that the page might be dynamic, so description can be longer or shorter and it shouldn't break the page.
Adjusting fonts and margins by eye was annoying (I use jpg version of design file) so I wasn't pixel hunting too much.
I think class names could be better and also I could use more general classes that would combine some similar elements.
What challenges did you encounter, and how did you overcome them?I've had trouble with vertically aligning text, some finessing was done. Also I've noticed that the picture in design file is a bit darker and more contrasty, I've decided not too fiddle with this too much, since I assume this is outside of normal CSS work.
@CitycodPosted 3 months agokeep it up, as you solve more problems you become better.
0 - @crimson3dSubmitted 10 months ago
- @Amr-Atef-kSubmitted 3 months ago@CitycodPosted 3 months ago
Main Container (main) The main element is styled to be centered both vertically and horizontally using position: absolute; and transform: translate(-50%, -50%);. This approach works, but it's not responsive. Consider using Flexbox or Grid for centering. The height and width are fixed, which might not be ideal for different screen sizes. A more flexible layout might use percentages or max-width/max-height. The box-shadow property creates a shadow, but using 0px 0px for the last two values would make it more natural. Photo Styling (main .photo) padding: 30px; is used, but ensure there's enough space in the container (main) to accommodate this padding without overflowing. border-radius: 40px; is quite rounded, which is fine if that's the intended design. Info Section (.info) Padding is set uniformly with padding: 0px 30px 0 30px;. It’s better to use padding: 0 30px; for consistency. The .f class is used for a small element. Consider whether the fixed width and height are necessary, as they could cause issues with responsiveness. Spacing Issues .s, .l { padding: 10px 10px 10px 0px; } can be simplified to padding: 10px 10px 10px 0; or padding: 10px 10px 10px 0;. .s-card has some padding, and the display: flex; align-items: center; is good for aligning the items horizontally. Text and Image Alignment .s-card h4 has padding-left: 10px; to separate the text from the image. This is fine if the spacing looks good in your layout. .s-card img { height: 40px; width: 40px; } sets fixed dimensions for the image, which might work depending on the design. Ensure that the images you use fit these dimensions well. Potential Issues to Address: Responsiveness: Your layout is fixed in height and width. This might cause issues on smaller screens or when resizing the browser window. Consider using percentages, Flexbox, or CSS Grid to create a more responsive layout. Box Shadow: The current box-shadow can be improved for a more natural look. Consider box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25); for a subtle effect. Absolute Positioning: position: absolute; with transform: translate(-50%, -50%); is an older method for centering. Modern layouts often use Flexbox for easier and more flexible centering.
1 - @innitmanSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
It's getting easier the more I do :)
One issue is accessibility. I tried adding 'a' but it doesn't seem tab navigatable. I will read into tab index and aria more.
What challenges did you encounter, and how did you overcome them?Did this without the Figma, so it won't be pixel perfect.
What specific areas of your project would you like help with?I need to read into tab index and aria more. Any advice on helping make it more keyboard accessible appreciated :)
- @Y-ashbhattSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Was able make Mobile responsive easily this time unlike the confusion with qr-code project. Next time I would like to practice grid because I still went with flexbox.
What challenges did you encounter, and how did you overcome them?Getting the size correct was a problem. I constantly compared it to solution to get it as close as possible but this doesn't seem efficient.
What specific areas of your project would you like help with?The best approach to get size if you don't have figma design files?
- @speeddemon911Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I liked the fact that I was able to get it pretty close aesthetically to what was provided. There's always room for improvement though.
What challenges did you encounter, and how did you overcome them?Most of my challenges I was able to google and resolve quickly. I didn't remember the css padding, margins, and which order they needed to be adjusted.
What specific areas of your project would you like help with?How is my overall layout? How can I make it clearer and easier for another coder to take over the project and not have a hard time understanding what I did?
- @abd-elrahman-sattoufSubmitted 8 months ago
