@MarkPraiseSubmitted 6 months 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
Latest comments
- @CitycodPosted 6 months 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 7 months ago
- @anwar-elbarrySubmitted 7 months ago
- @fox22432Submitted 7 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 7 months agokeep it up, as you solve more problems you become better.
0 - @crimson3dSubmitted about 1 year ago
- @Amr-Atef-kSubmitted 7 months ago@CitycodPosted 7 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
