Using grid and its functionality
What challenges did you encounter, and how did you overcome them?I still struggle a little bit with responsiveness
What specific areas of your project would you like help with?Responsiveness
You did an excellent job! Your page looks almost identical to the reference image, but there is one small thing that could be better: your project has a small issue with the bottom padding.
In some resolutions, the webpage is "joined" to the border of the screen. You can fix this kind of issue by adding some "padding-bottom" to the container.
It looks like the page doesn't display your image because you forgot the dot at the start of the path:
<img class="img" src="/image-product-mobile.jpg" alt="product-img">It should be something like this:
<img class="img" src="./image-product-mobile.jpg" alt="product-img">i can not really say there is anything because i really struggled to complete this. and i performed poorly than i had expected. i am glad i completed it, but i would keep making adjustments as well especially in the area of accessibility.
What challenges did you encounter, and how did you overcome them?not having access to the figma file, made it difficult to replicate the design. from the colors to layout and all, it was just a matter of guess work. trial and error. and the table section gave me a little bit of hard time.
What specific areas of your project would you like help with?Accessibility!!!!! i do need help understanding and implementing that. ive read an article but i would welcome further articles that could help simplify the topic.
Great job! Your project looks almost identical to the reference image. If I had to point out something, it would be that you should keep the space between the container and the body/background, because it could cause problems on certain devices (I can tell from experience).
I'm proud of successfully creating a clean, social link profile that closely matches the design. It was a great opportunity to practice my skills in semantic HTML and CSS Flexbox. Next time, I would like to explore adding some animations or links that actually lead ot somewhere when you click the buttons. Additionally, I would use a CSS preprocessor like Sass to streamline and organize my styles more efficiently.
What challenges did you encounter, and how did you overcome them?One of the main challenges I encountered was ensuring that this profile card looked good on all screen sizes. Initially, the layout didn't scale well between different devices. I overcame this by adopting a mobile-first workflow and using CSS Flexbox to create a flexible, centered layout. Additionally, I made extensive use of media queries to adjust the styling for various screen widths, ensuring a consistent and responsive design across all devices.
What specific areas of your project would you like help with?I think it was all good
Great job! If I have to point out something, it is that you should use a lighter color for the background. Generally, intense dark backgrounds can cause visual fatigue, and if the user stays on the page for too much time, it would be uncomfortable.
Great job! If I have to make a suggestion, it would be to make the card a little wider to fit the proportions of the reference.
I really liked that I was able to understand how to implement flex and widths into my design in order to avoid making unnecessary responsive media queries. When it comes to the margin and padding I added, I think there are better solutions to get the desired design, however, I'm not sure yet.
What challenges did you encounter, and how did you overcome them?The most difficult challenge for me was getting the margins of the card to not over extend and ruin the design. This was especially hard in the white background, because when I checked the site in phone width, it was really broken, but I managed to fix it by investigating more about how to manipulate the width and height.
What specific areas of your project would you like help with?How can I make my design be responsive without the use of media queries? In the case of the widths and heights, is there a function that allows me to make the design responsive more easily instead of establishing a predetermined max height or width?
When you implement flexbox, you should be aware of the 'level' of the elements in the HTML. For example, I see that the card in your project is slightly off-center, and I notice that you use a container (in this case called 'flexbox') and then add the card.
If the container does not occupy the full height and width of the screen, it can cause problems when centering elements.
One way to fix this is to use flexbox properties on the 'body' tag as well, so you don't need to create another 'div' element to act as a container/flexbox because you only need the body and the card elements.
Another way is to give the flexbox element 'height: 100vh' and 'width: 100vw'. This sets the size of the container to fill the entire screen.
