Got the website as close to the design. Used semantic elements where appropriate.
What challenges did you encounter, and how did you overcome them?The alignment for the list items was a little bit tricky. I needed to enclose the list items in a element and adjust the padding to get them to indent.
Good , but the "Front-end develop and avid reader" text should be more white cause its showing bit grey in the solution design.
I could not style the image and control the width of it. I tried many things to crop the image to look exactly like the design. Finally I used object-fit to solve the issue.
What specific areas of your project would you like help with?I would like to know how to reduce the font-size on mobile without using media queries. Also I would like to get help on how to style the image properly
You can also use rem units which you can get accurate ones from Figma design file in Figma get the width and height size(in pixels) and convert it to rem using online converters. I did that.
For reducing font size on mobile without media queries, you can use relative units like vw (viewport width) or vh (viewport height). These units scale with the size of the viewport.
For styling images, using object-fit is a good start. Here are some additional tips: Use max-width: 100%; to ensure the image doesn't overflow its container. Use height: auto; to maintain the aspect ratio.
I only used basic HTML and CSS in order to realize this project but I will use diverse libraries or methodologies for future projects.
What challenges did you encounter, and how did you overcome them?I used media queries for the mobile format of the challenge.
What specific areas of your project would you like help with?I would like to have a better understanding on how I can improve my code and how I can create responsive projects or apps.
You can use the position absolute method to center the component, position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); and also review the margins and padding of image and texts inside the component. you can increase the border radius to match the original design.
