All solutions

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

I'm happy that I got to practice DOM manipulation!

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

I didn't know how to insert the triangle part of the social container, so I had to look at online resources to learn how.

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

Any resources on DOM would be great

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

I utilized grid-template-areas to create the perfect grid layout for the desktop view. I also timed myself while working on this component and was able to complete it in 1.5 hours, which was faster than I had anticipated. I chose to time myself in order to improve my time management skills and practice working under pressure.

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

The cards don't have the same height as each other so initially the grid looked very jumbled. I fixed this by setting the height to 100% on the cards.

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

I would love to learn another efficient way to achieve this grid layout.

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

I'm proud that I'm getting used to Tailwind CSS. It's my 2nd time using it. What I would do differently next time is revert back to using Sass for now. I feel like Tailwind CSS may be more advantageous to use for more significant projects such as a landing page. Since this task was simpler i.e. components, it would have been more time efficient to style with regular CSS or Sass

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

For the desktop layout I wasn't sure how to get the two cards to be in the same column in the middle. A solution I did was to wrap the two middle cards in a div and then do a 3-column grid. I'm open to other solutions

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

Any resources about flex would be great i.e. what is flex grow, flex shrink, etc

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

This is my first time using Tailwind CSS and I'm happy with what I produced. What I would do differently next time is to try to get precise measurements with certain elements on padding, margin etc. I didn't have access to the Figma file so I didn't know what the measurements were. I would have converted the mockup screenshots into a Figma design.

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

There was a learning curve with Tailwind. I didn't realize there were additional steps to install Tailwind. Also, I didn't know much of the syntax for styling certain element such as padding, hover etc. I overcame this learning curve my referencing this cheatsheet from Nerdcave. https://nerdcave.com/tailwind-cheat-sheet

Overall I can see why Tailwind is really popular. It saves a lot of time - I just need to get used to seeing styling on an html/js page

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

What's the difference between using App.css and index.css? I ended up putting the base styles on index.css but I didn't put anything on App.css.

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

Proud: making the page responsive between two devices, using flexbox, keeping code concise

What to do differently: I feel like I shouldn't have added class names to almost all of the tags in the HTML file and didn't reference most of the class names in the index.scss file.

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

I noticed that the bullet points in the unordered list are horizontally centered on mobile with the text beside them. I wasn't sure how to accomplish that. I tried looking at some resources online, but I couldn't find anything.

Also, it's been somewhat challenging to complete exercises without the Figma files but what I've done is used a Figma plugin to convert screenshots into the designs

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

See challenges above

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

proud of my code being DRY

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

n/a

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

When I look at other people's solutions, some of them have a base and abstract folder for their styling. I would like to learn what that is and why that is used.

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

I'm proud of getting used to the cadence of how to build a component from the ground up. The idea of first figuring out what content is needed, defining variables, fonts, and then figuring how out to approach styling is something that I'm glad I'm able to embrace.

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

One challenge I faced was defining fixed widths for the card for both mobile and desktop views. I struggled to find a way to make it more responsive. To overcome this, I utilized the clamp() function to make the component responsive. This approach ensures that as the screen size increases, the component also scales up to a certain limit, providing a more fluid and adaptive design.

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

The font "Figtree" isn't rendering on local but not on production. I'm not sure why this is happening. If someone can advise that would be great. Thank you

I noticed that in the Figma mockup, the mobile view seemed to have a 1.5rem margin around the card. However, after applying clamp() to the card’s width, I couldn’t achieve the same margin effect. I’m not sure if this discrepancy is significant, but I would appreciate feedback on how to accurately replicate the margin as seen in the mockup while maintaining responsiveness.

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

I'm proud of utilizing Sass' functionalities such as incorporating mixins, extends, and variables.

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

N/A

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

I tried to make my code as DRY as possible. If you have any feedback on my code let me know.