i thought it would be easy... but the last part of the layout gave me a lot of trouble and i'm not sure if i'm using the fonts correctly in my work, i'd love to know more about it
What specific areas of your project would you like help with?correctly using fonts, and project structure gor my first project after FREECODECAMP HTML section
Using the js validation API and sass was a breath of fresh air
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
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.
keep it up, as you solve more problems you become better.
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.
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 :)
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?
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?
please how do u publish this assignment page on github
