All solutions

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

• Used SASS for this project & its quite intuitive, I liked it!

• css filter property to enhance look & feel of the card.

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

Overwhelmed with Responsiveness, Isolated & took 1 step at a time to solve it

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

Utopia fluid responsiveness design system implementation.

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

I worked on detailing, including:

• List marker styling
• ARIA labeling
• Tab indexing

I encountered a development blocker related to responsiveness. Next time, I will isolate the problem and resolve it. I believe this approach will help me focus better and find a solution more efficiently.

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

Responsiveness: The image was getting inside the wrapper when its width was higher than the mobile screen.

List: Creating a gap between the marker and the text. I went through some blogs and resolved it.

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

Achieve Responsiveness: Using clamp().

This way, I can avoid writing media queries. I have gone through a few blogs; however, I couldn’t find a definitive guide. Please let me know if you could help me out.

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

Proud to have developed a pixel-perfect webpage for desktop, tablet, and mobile screens!

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

I need a better understanding of grid layout.

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

Looking for user resources as I want to learn more about using clamp for building responsive layouts.

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

Proud:

Changing root font size scales all rem-based elements proportionally, For screens up to 28.5rem wide: Root font size: 12px (default is 16px) 🖥️

Learn:

1. To dive deep into the world of CSS and JavaScript animations.
2. Crafting interactive elements that bring concepts to life.

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

Responsive Design Challenge:

Making a responsive blog preview card, especially for small screensSolution: Studied blog posts and tutorials to understand responsive design, focusing on font sizes and rem units

CSS Pseudo-classes Challenge:

Understanding :active, :hover, and :focus (for tabindex)Solution: Consulted MDN docs to learn about these pseudo-classes

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

CSS Reset

• Question: What is the best CSS reset to use and why?
• Goal: Understanding the advantages of different CSS reset options.

Resources Needed

• Guidelines for CSS class naming conventions
• Best practices for CSS file structure
• Comparison of popular CSS reset/normalize options
• Tutorials on implementing BEM or other CSS methodologies

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

I would use a vite from next time for the live server, also create css variables in beginning to save time

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

It took me some time to get the padding & margins correct. I see we can use options key on figma to check it

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

I need help with grid system