All solutions

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

i'll make the website look better on screens between desktop and mobile, and align the cards using flexbox align items and justify content properties.

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

At first i had issues with aligning the cards as specified in the design, i used margin top at first to reduce the top, this was a bad solution so i used position relative instesd with the top property.

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

Any suggestions and corrections will be appreciated.

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

If i get the chance, I'll be redoing this project. i did'nt get the layout spacing properly. Next i'll stick to native CSS rather trying to solve it with bootstrap, which i didn't go through with anyway but got confused instead.

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

Any suggestions on how i can size the image properly when using flexbox will be highly appreciated.

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

I'm proud of my ability to use grid and it's spanning properties to create a responsive layout.

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

None

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

None

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

I'm proud of my ability to use flexbox with ease and also making use of the CSS background Image property.

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

My only challenge was with background image positioning, but with a little research i could place it appropriately.

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

None

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

I'm proud of getting the design specifications correctly.

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

I did not know how to use svg files so i had to use font awesome icons in place of them. And also i could not get the active state for the image.

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

A way of getting the active state for the image.

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

I'm proud of my ability to understand how grid can be used in real world projects.

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

I am most proud of my ability to use Flexbox to create the layout easily and making the website responsive on mobile screens down to 320px.

Next time, I'll make sure to check the styles required for responsiveness to determine basic sizing of main element and if my project will be better with a background image or the img tag.

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

I first used an img tag, when I discovered the style on mobile will use a different photo. So I had to get rid of my img tag and put a section without content instead which I later placed the appropriate images with CSS, and over riding it on mobile by replacing background image with the one specified for mobile.

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

All of the challenges I faced I was able to solve, so I don't know if there is a problem with my code and will surely appreciate a feedback if any is found.

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

It's my first time of working with a CSS reset and using the rem unit for sizing the box model and I am proud of the clean and responsive result.

Next time I will try to use flexbox within my main element, not just using flexbox to center the main element within the body.

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

Deciding a max-width with a value of rem was challenging, with a bit of testing out different rem values I knew which one would work out.

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

How do I decide best sizing properties and values for the width and height of my body element or wrapper, when I intend centering a div in it with flexbox.

there is width, min-width, max-width, height, min-height and max-height. it gets a bit confusing, which one works and which one doesn't?

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

I am most proud of how I was able to use the right media query and percentage sizing to get the desktop layout correctly.

Next time, I will use a layout tool like grid or Flexbox to solve the challenge.

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

I encountered some challenges when trying to make the desktop styling.

I used media query and resized the main element and my image to match the design perfectly.

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

I will like to know how to approach this project with Flexbox. How will my container's width and height be sized if I use Flexbox for the project?