All solutions

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

I am proud of how it looks.

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

I has issues going from mobile to desktop view. This is what I put most of my time into.

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

Any feedback is appreciated

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

I am proud of learning how to include radial gradients into tailwind. One thing I need to learn more about is how to adjust and configure the gradients to make it elegant and easy with tailwind. If I were to start over, I would add have the gradient start at the top rather than the center.

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

Figuring out how to work with radial gradients, and I found the answer under a feature request for tailwind.

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

Any feedback is appreciated!

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

I am proud of getting the top part to work eventually. Biggest challenge was getting the spacing and padding to work correctly.

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

My biggest problem was getting the main section to cover the rest of the bottom. This was fixed by simplifying everything. I originally had padding on the main element and negative margins, but I changed this to only have padding on the background "tab", and added regular padding into the content.

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

Any feedback is appreciated!

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

I am proud of how everything fits together, and how I overcame each challenge. One thing I want to do differently is look at the best way to order elements in a grid. My way works, but it involved adding classes to two cards, when I would rather adjust the order by changing the class of only one card.

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

One challenge I had was getting the background image to not overlap the text. I solved this by learning about background-image properties using tailwind. I adjusted both the position, prevented background repeating, and adjusted the size using tailwind documentation. Another challenge was positioning the grid elements correctly. I solved this by adding 'order' class to the two last elements to get them in the correct order.

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

Any feedback is appreciated

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

In this project I've learned a lot about different font properties, such as how to modify the space between letters. I have also practiced adding different view ports to a component. One thing I wish I did differently was look into a more elegant way of changing viewports inside of Tailwind.

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

One challenge was getting the image to fully fit in Desktop view. The image would not cover the top part, and this was solved by playing around with different properties that were relevant to layouts.

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

Any Tailwind styling advice or tricks are appreciated. I would like a more elegant way to make it work.

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

I am most proud of the radio cards, and how I was able to make the styling work with only tailwind. Next time I would use a framework like React so I do not need to copy and paste the files over and over again. I excluded the JavaScript validation because my focus is on tailwind styling for now.

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

One main challenge was getting the radio cards to work. I solved this by wrapping the whole thing in an HTML element, and adding padding.

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

Any feedback is appreciated.

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

This project uses tailwind for the styling. I learned how to make responsive components using tailwind and found out some common issues. Many elements are repeated, so making one thing I would do differently is make this in React to make changing the code easier. I would have also add a custom gradient in the input.css folder

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

One challenge was that the card component was larger than the elements inside them, and I had trouble getting the purple element to fit correctly. This was solved by setting py-0 on large screens.

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

Any tips or advice is appreciated

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

I am proud of the tailwind animations I have used. I used the 'group-hover' tailwind feature that let me animate both the ring around the profile picture and the name tag at the same time. Next time I will look more carefully at the font specs, and adjust font properties to match the design more accurately.

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

One challenge was getting the eye icon in the middle of the image. I overcame this issue with a bit of googling to see how other people solved the problem.

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

I would like feedback in making cleaner code.

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

I'm most proud of the animations I added to the button. I am also proud that the component will respond to small screen sizes and shrink.

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

Not many; most of the issues I would have encountered have already been solved with my previous two solutions.

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

Any cool tips and tricks would be appreciated.

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

I am proud of the "categories" change I have made, where the card can display multiple categories at once. The categories will move to another row if there are too many categories to fit in a single row. One thing I would do differently is to incorporate the exact font weights used in style-guide.md.

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

The attribution message was causing problems, but it was fixed by giving it a relative position in the top left corner.

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

Any tips or advice is appreciated!

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

I am proud of how the rounded edges and padding look, and figuring out how to disable dragging the image makes the component feel a lot more professional. One thing I may do differently is use two different fonts; one for the titles, and another for the text.

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

One major challenge I had was getting the text to stay within the card component. The text wanted to stretch the card out as much as possible, and my solution is to add a fixed width to both the header and paragraph elements. This solution works for this component, but may not be reusable because the paragraph and header width would have to be edited if the size of the image has to be changed.

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

I would like help removing the fixed width to the paragraph and header elements, and making the width of the card depend on the width of the image. Ways to reduce the number of styling classes I have would also be appreciated!

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

I am proud of how the rounded edges and padding look, and figuring out how to disable dragging the image makes the component feel a lot more professional. One thing I may do differently is use two different fonts; one for the titles, and another for the text.

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

One major challenge I had was getting the text to stay within the card component. The text wanted to stretch the card out as much as possible, and my solution is to add a fixed width to both the header and paragraph elements. This solution works for this component, but may not be reusable because the paragraph and header width would have to be edited if the size of the image has to be changed.

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

I would like help removing the fixed width to the paragraph and header elements, and making the width of the card depend on the width of the image. Ways to reduce the number of styling classes I have would also be appreciated!