All solutions

What are you most proud of, and what would you do differently next time?

In this project I got more experienced with semantic HTML, and I created and styled a simple table and make it accessible as possible. As for what I would do differently next time: I think there might be an optimization related to the image file size, as I mentioned in the question below regarding specific areas where I would like help.

What challenges did you encounter, and how did you overcome them?

How to create custom bullets and numbering with custom colors for the list items? for this issue I used the pseudo-element (::before) to generate content and style it with CSS, and for numbering I used CSS Counter.

What specific areas of your project would you like help with?

I noticed that the image dimensions are very large, so I need to know if it would be better to create a new copy of the image file for the webpage and resize the image dimensions to be smaller to reduce the image file size

What are you most proud of, and what would you do differently next time?

Here are some aspects that I am proud of:

• Building an organized structure and using the unordered list element `` to group the links together, which makes them easy to control.
• Using CSS variables for color management, which enhances maintainability and readability.
• Getting familiar with media queries, which I used several times in this project to implement responsive design and ensure the profile page looks good on various devices.
• Adding hover, focus, and active states for links, improving user interaction feedback.

As for what I would do differently next time:

I really don't know exactly, but I am open-minded to any suggestions if available.

What challenges did you encounter, and how did you overcome them?

• Horizontal Scroll Issue: Initially, a horizontal scrollbar was appearing due to the use of width: 100vw. This was resolved by changing it to width: 100%.
• Vertical Spacing: Adjusting the vertical padding to ensure the profile section was not too close to the top of the viewport, and maintaining consistency across different screen sizes.

What specific areas of your project would you like help with?

I just need some review on the link states styles to ensure this approach is correct: CSS .profile .profile-info ul li a:link, .profile .profile-info ul li a:visited, .profile .profile-info ul li a:focus { background-color: var(--grey); }

.profile .profile-info ul li a:hover { background-color: var(--light-grey); }

.profile .profile-info ul li a:active { background-color: var(--green); color: var(--off-black); }

What are you most proud of, and what would you do differently next time?

I am proud of being able to make the card component structure semantic and organized by separating it into clearly defined sections as follows: 1- card-image 2- card-content 3- card-info Which makes the code more readable and maintainable. As for what I would do differently next time, I really don't know exactly, but I am open minded for any suggestions if available.

What challenges did you encounter, and how did you overcome them?

One of the challenges I encountered was finding suitable alternative text for the images used in the project. Providing meaningful alt text is crucial for accessibility, as it ensures that users who rely on screen readers can understand the content and purpose of the images. and for this issue, I found the file names for the images that provided with this project were descriptive and can be used as an alternative text.

What specific areas of your project would you like help with?

I would value a thorough code review to ensure my HTML, CSS, and overall code structure follow best practices. Feedback on improving code readability and maintainability would be beneficial.

What are you most proud of, and what would you do differently next time?

I can say I am proud of being able to build HTML structure for this project easily. but next time I need to take care of semantic elements even in simple projects like this one.

What challenges did you encounter, and how did you overcome them?

The challenge I encountered was how to make the box shadow similar to the design as possible, and I just guessed it.

What specific areas of your project would you like help with?

How to make the box shadow exactly like the design?