All solutions

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

I am most proud of creating the js script! I learnt how to manage events and change element class. I would do it faster next time (although I think mine is alr fast enough).

I also created this using a mobile-first workflow. Surprisingly, it's kinda fast!

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

I don't encounter any difficult one, but I think it's lining up the padding and margin. And responsive design. My website looks ugly on tablet.

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

I was most proud of creating a page that is responsive and looks good!

I also learnt how to hide elements in HTML and css. We can do two things basically:

1. Moving the element past the container and setting the container overflow to be hidden. This way, when we need the element, we can "drag" it from the hidden part
2. Set opacity and visibility to zero.

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

Eh, creating the event was challenging but doable. The hardest part is changing the shape for the popup (the desktop and mobile overlay are different from each other).

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

I'm most proud of being able to create it responsively, and I would do it desktop first next time. Mobile first workflow was... weird. IDK. Probably it's skill issue.

I had to meddle a lot with the css to make it look like what I wanted to do, especially with regards to the cut header picture. I also had to manually set up where the picture should be (if you notice the header, one of them is located above and the other is below). It's hard enough!

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

I have to determine the margin for the picture in order for it to be out of page. That's hard. And I'm not that good at CSS, so I have to fiddle a lot with the containers, etc. I also have to put the circle on top of the picture in the footer, and that's also hard. I managed to do it by again - fiddling with it a lot. I learnt about negative margin, and yeah I played with it.

In order to put a green overlay, I had to use a ::before attribute for the picture. That's new for me (and I have to set the z-index as well).

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

How would you simplify this? I feel like this could be done in way less lines...

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

I'm most proud of being able to work faster using CSS grid - and be able to change it easily to flex using media queries.

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

I set it to flex when on mobile, as it's hard for me to set the grid when on small screen sizes :(. I tried to change the column into 1 column but it's super hard to make it do what I want.

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

I am most proud of using grid in this page. It's so hard! I'd definitely do it faster next time. This time I'm still figuring out the intuition behind grid settings, but it's okay!

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

I encountered some challenges in setting the gap and width for the row. I know that the row should have the height of 250px, but the way I set up the grid was that each card should occupy two rows.

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

Nothing

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

I was most proud of creating a responsive design, both for desktop and mobile. It was hard at first, but I finally can do it (it's not that hard actually, it's tedious).

I also changed the picture using a js script so yeah that's pretty cool.

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

The difference between desktop and mobile layout is pretty annoying as I'd have to configure the margin between elements manually. Furthermore, I use a set width and height for the mobile page so yeah... Should've make it moar responsive :)

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

Nooooo

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

I was most proud of my media queries, as this is my first time I meddled with one. It was fun! I was also proud of manually setting my and elements, as it is so troublesome.

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

I had difficulties in setting the and as the padding is a little bit.. weird? I also had difficulties in setting the size for the card - turns out I haven't properly reset the elements (box-sizing: border-box) (I forgot about it).

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

I'm not sure. How do you all configure your list? Do you use flex alongside w/ the bullet? Or do you use vanilla and ?

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

Eh it was good. I was most proud of knowing how to create a hover effect to make the button go green.

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

None I guess? Again, I'm not that familiar w/ flex and direction - and sometimes I have to tweak the settings but it's good.

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

I am most proud of the hover function. I haven't touched any html and css before, and yet it look so good!

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

Eh, nothing I guess. Thanks to Mr. Chad Gippity I am able to solve most of the problems. I think the hardest part of this is to determine the font size for desktop and phone screen.

How am I supposed to dynamically figure that out?? Turns out you can use clamp() or em, rem, or something like that.

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

I'm not sure..