All solutions

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

I did this challenge faster than I usually would do.

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

i didn't run into much problems, however, something that i learned throughout this project was how to stop a flex item from stretching to full flex

.card__content {
  ...
  align-items: start;
  ...
}

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

• any Feedback would be appriciated!

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

• 🤗 i definitely had fun doing this challenge .

• I'm mostly proud of the way i handled the responsiveness of the page using various functions like calc() , min() and max() for my margins and paddings.

• i also tried my best to stick to the BEM Naming convention and i think i handled it pretty well.

• for my future projects I would probably go for a Mobile-first design .

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

• setting the margins and padding on bigger screen sizes and removing/shrinking them on smaller sizes was a tough challenge!

• i did not want to use Media Queries that much and tried to understand the default web flow and use that to my advantage.

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

• Any Feedback would be appreciated! ✅🙌

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

1.I used some CSS Variables to define my colors :

:root {
--Green: hsl(75, 94%, 57%);
--white: hsl(0, 0%, 100%);
--gray: hsl(0, 0%, 20%);
--dark-gray: hsl(0, 0%, 12%);
--off-black: hsl(0, 0%, 8%); }

2.I used a min() function for my main container's width to make the page responsive with smaller widths:

.profile-container {
 ...
 width: min(100vw , 19rem);
 ...
}

3.I changed the style of my buttons on :focus and :hover like this :

.button:focus-visible {
  outline: 2px var(--gray) solid;
  outline-offset: 3px;
}

.button:hover {
  background-color: var(--Green);
  color: var(--dark-gray);
}

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

in my HTML markup , something that i wanted to do was to make the image not draggable in the page. so i learned to do that by adding draggable="false" to the `````` tag :

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

i would love to know if there is any better way of the layout being responsive . i did desktop-first design and then proceed to do the mobile layout then .