All solutions

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

I'm proud of making the web page to look as identical as possible to the Figma design for the larger screen.

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

1- styling the un-ordered and ordered lists bullet points and numbers respectively. for the ul list, I set the list-style-type to be none then used pseudo-element li::before to create and style the bullet points themselves. The same concept was applied to the ol items as well.

2- not resolved but making the layout responsive to different screen sizes.

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

• making the the layout responsive using media query
• make the size of the elements to decrease as the screen size decreases so that the content does not go to the next line. For example, each word in the title "Simple Omelette recipe" is in a separate line as the screen size reaches a certain screen size or smaller. I'd like to keep them in the same line in all screen sizes.

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

because flex is very helpful, one of the first questions i will ask myself next time is: "can i flexbox? how? where?"

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

getting the background of the social media accounts' background was tricky, and after sometime I found out that the solution was to make the display: block for the tags.

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

The parent div container was given a fixed width of 384 initially but the problem was that the image did not have a balance left and right margins, the right one was a bit bigger than the left margin. To solve it, I removed the fixed width but I faced new problem: the content of the p tag continued and did not rap as shown in the figma design. It is not the ideal solution, but I added two br tags to break the paragraph lines.

I would love to hear how to tackle this problem, thanks!

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

how to make the content of the p tag to go to the next line at a certain point to match the figma design.

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

even though it was a simple card to implement, I still had to pay attention to the details found in the Figma design to re-produce the design in code.

I also did not know how to center elements inside the container dive, so I googled "how to center an image inside a dive" and used one of the solutions I found online.