Responsive Webpage using flex display and divs

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

I initially considered starting with a grid display; however, I learned that it is important to first examine the project thoroughly and then break it down into manageable parts. Ultimately, I utilized a flexbox layout to achieve the desired results.

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

Challenge: Getting the two-column layout (price/features and "Why Us") to work correctly, especially making it responsive.

How to Overcome: "I initially struggled with using floats for the layout, which caused some issues with responsiveness. I switched to Flexbox, which made it much easier to control the alignment and behavior of the columns, especially on smaller screens. I used media queries to ensure the columns stacked vertically when the screen width became too narrow."

Challenge: Centering the "Sign Up" button.

How to Overcome: "Centering the button was trickier than I anticipated. I tried text-align: center but that didn't work because it's an inline element. I realized I needed to make it a block-level element using display: block and then use margin: 0 auto to center it horizontally."

Challenge: Getting the rounded corners and the box shadow on the main container to look right.

How to Overcome: "I used border-radius for the rounded corners, but I noticed some content was overflowing. I fixed this by adding overflow: hidden to the container. The box shadow was straightforward with box-shadow, but I tweaked the values to get the subtle effect I wanted."

Challenge: Styling the price, especially the currency symbol and the "per month" text.

How to Overcome: "I used <span> tags to style the currency symbol and the 'per month' text separately. I adjusted the font-size and vertical-align for the currency symbol to make it look like a superscript. For 'per month,' I used a smaller font size and a lighter color."

Design/User Experience Challenges:

Challenge: Making sure the card was visually appealing and easy to understand at a glance.

How to Overcome: "I experimented with different color combinations and font choices. I paid attention to the hierarchy of information, making the price the most prominent element. I also made sure there was enough white space to avoid a cluttered look."

Challenge: Deciding what information to include in the card and how to present it concisely.

How to Overcome: "I focused on the key selling points and kept the text brief and to the point. I used bullet points for the features to make them easy to scan. I considered what a user would need to know quickly before making a decision."

Challenge: Ensuring the button was clearly a call to action.

How to Overcome: "I used a contrasting color for the button and made sure the text was clear and compelling ('Sign Up'). I also made it large enough to be easily clickable, especially on mobile devices."

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

Knowing when to use grid and flex display