All solutions

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

I am most proud of my problem solving for this project. I stumbled upon a lot of different challenges, but I managed to solve them at last with some googling.

Next time I think I would want to get more into how to use the figma files, I am still a little bit confused about them, and would love to get more confident on that part. It really makes life easier if you are able to utilize the figma files effectively

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

The first challenge was getting the paragraphs to not take up the entire lines. I am still a little unsure on how to do this effectively. I thought that by using flexbox and setting the align-items property, the div will automatically shrink to the size of the content, but I managed to solve it using max width on the paragraphs.

And figma also tested my temper this project. Its a little hard to navigate and understand all the different parts of it. I did however get out the most important details, like the colors and fonts.

The biggest struggle was getting the dots in the list to shrink. I had no clue that it was possible to change the font size of these things by using li::mark, and also use this pseudo class to change the color of the dots.

One more interesting thing that I learned, once you remove the dots from the list, they actually have a default padding that you need to remove if you want them to center.

Yes and also getting the space between the list elements themselves and the bullet points I took my time on, but eventually figured out that you can use padding to create the space by applying it to the elemnts.

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

Use figma effectively, and also knowing when to actually the different units for width and height. I feel like there are so many best practice solutions I simply dont know about.

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

The only real challenge I faced with this project was getting the "main" div to center in the body, not sure how to center them other than using padding or flexbox. The main problem however was getting the transitions like in the example to be so smooth and responsive. My button background-color change are so unresponsive in comparison to the solution. Is it because I'm using the button property, or is it something else? I don't think its the transition speed either, because that matches pretty good, its just that they are not as responsive.

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

Getting responsive buttons

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

I think the part I'm most proud of from this was the process was the process I did when starting of the project itself, I took some time to plan it, and I got out the different elements in html before I started to fully style them, I was patient and focused on my layout using flexbox.

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

The absolute biggest ecounter was getting the flexbox to work properly. I am mostly familiar with using flexbox flex-direction: row, now I had to use the column value instead. The problem I had was that the paragraph container inside my main container stretched out to the whole line, making the actual box too big. I wanted the picture on top to determine the width of the box not the paragraph, so what I did was putting a max width on the paragraph and aswell using align items and justify content to make sure the paragraph elements only took up the necessary space and not the whole box vertically. Not sure which one of them do the prior though. Should figure that out.

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

Yes I could not seem to figure out how they manage to do the transition when hovering with the mouse. I'm not reffering to the transition with the text, that is just using the color, but I am referring to the box shadow effect where it looks like the opacity goes from 1 to 0, and from 0 back to 1 and the box-shadow is in a new position.