All solutions

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

I did a mobile first approach where I used flexbox for everything except the 4 images under 01, which was done with grid. My reasoning for this was that I imagined flexbox to be more suitable for the main layout than grid. For example, flexbox with the desktop hero image and description was easily achievable, where I used order to put the two images on both ends, and the text in the middle.

Next time I might try grid. Please let me know if you think grid is better for this layout, and why.

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

The most challenge I went through was figuring out how to code out the footer image with the blue overlay. I solved it by using picture and source elements in html rather than css background-image (for responsive reasons), and adding a background-color in css for the footer selector.

I also had a bit of trouble planning out how to code the hero image for the desktop view, but I solved it by using display: none;

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

Please let me know if grid was a better choice for this challenge.

In addition, I feel like my media query may have a lot of redundancy. If there's better ways to code responsive sizing, please let me know. If there's any other area where I could use more work on or I should change, please let me know as well. Thanks for your time!

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

I had a lot of fun with this one. I think I'll revisit this challenge next time using CSS frameworks.

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

I struggled a bit getting the grid to work correctly. If you look at the bottom of the card on the very right, the height of it is slightly off from the other cards. I think it has something to do with the amount of rows/columns I made.

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

Please let me know if there's any mistakes I made, or if there's better code I can implement.

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

Since I used mobile first approach, I started off the mobile design using flex instead of grid, then turned it into grid for desktop approach. I think next time I'll start with grid right off the bat, though I don't know if that has much significant in the grand scheme of things.

Next time I should also implement custom variables in :root to dictate the font family, weight and size, and color so I won't have to keep manually typing them in. Implementing :root will also make things more efficient if I have to change the font or color, preventing me from having to go to every code and change them.

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

I had difficulty with using grid at first, but I was able to maneuver around it by playing around with grid-template rows and columns. I was also unsure of how to move the svg images inside each card, and I settled on position: relative;

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

Please let me know if there's more efficient way to write out my grid code, and whether or not I made any mistakes overall. I would also like to know if I'm using best practices

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

I used mobile first approach where I coded the mobile design first, then expanded into the desktop design. I'm happy it turned out well, and similar to the design given

I still use fixed units (px) for media query, and I think next time I should practice using em in media query to make it even more responsive.

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

I'm most used to manually coding image sizes when doing responsive design, but this time I implemented picture in my html with source srcset media which made the process a lot easier. This also educated me as a designer that I should provide separate image of different dimensions for the developer when handing in my designs.

This time, the figma file given did not have specific padding and margin given to use, so I had to eyeball the padding within the card.

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

Please let me know if my website is responsive enough, and if there's any areas, especially responsive code, that I need more work on.

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

I'm sort of happy I was able to make it responsive, but there's lots of areas where I can improve on in terms of the code when it comes to responsive design.

Next time I might try to do mobile first approach, where I code out the mobile view first then expand on the larger sizes.

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

There were two areas that I struggled with:

1. adding padding within ul/ol, as well as aligning the text. I was able to solve it by using list-style-position: inside and ::marker to decorate the bullet points. In terms of aligning the text, I discovered that position: relative helped me add space between the bullet points and the paragraph. text-indent in combination with padding-left made the paragraph align on the left
2. responsive sizing on mobile screen. I used fixed sizing in the original code, so I struggled with making it responsive in the mobile view. I solved this by using em/%. Next time I'll try to not depend entirely on given sizes by the Figma design, and use responsive units of measurement instead.

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

I feel as if my code could be condensed more, but I'm not sure how. There were a lot of repetitiveness that I could do without. In addition, I don't know if I overdid it with the classes and tags in the html.

If there's better approaches to responsiveness than what I wrote, please let me know. I will gladly take criticism from any weak areas you may spot.

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

I liked implementing transitions to the buttons with hover effect, it added a bit more depth to the design.

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

In figma, the design looked identical in both mobile and browser view so I opted out of adding a media query. However, upon further look, I realized that the dimensions were indeed different, so I added a media query. I don't know the best px to use for specific devices, so I went with the one given in figma.

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

When it comes to buttons, I'm not sure if I should use p with css styles to make it look like a button, or if I should use the button tag that already exists in HTML. I would like to know if there's specific situations where one is better than the other, or if it's just a personal preference for developers.

Another area is the sizing; currently I use fixed sizing (px) for the container since I'm trying to get the final product to look as similar to the design as possible. Should I instead use em/vw/vh/% to make it more responsive, despite given the specific dimensions in figma?

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

I'm proud of making the solution quite similar to the design, but I feel like there's still areas that are different.

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

I was hesitant on using certain html tags for sectioning layouts. I wasn't sure if aside was necessary.

I also need help with the hover state! I want to trigger the increase in box shadow as well as the change in H1 font color to yellow, but I don't know how to trigger both of them at once. If I add :hover to card container, I can only increase the box shadow.

If I simply add H1:hover, the font change will only trigger when I hover on H1 specifically. How can I change the H1 font color when I hover over the entire card?

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

I think I have a tendency to write redundant code, so if anyone has tips on how I can change my code to be more efficient that would be really helpful. I would also like to know if I chose the right html tags. All other critiques are also welcome!

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

I'm most proud of having the final product look very similar to the design. Having access to the figma file is very helpful to the process. Next time I should organize all the font styles and colors before I start coding so I don't have to go around looking for them in the middle of coding.

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

I had a bit of trouble with flex. I mistakenly tried to center the container in the child instead of the parent class, which ended up in me centering it horizontally only. I figured out that display: flex should have been in the parent, and upon changing it, I successfully centered it vertically.

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

I am not sure if the code I wrote could have been written more efficiently. I think I have a habit of writing excess code, or doing things in a way that use more code than necessary. If anyone has more effective ways that I could implement, please let me know.