All solutions

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

I'm happy that I was able to get the design to look good with the mobile first approach.

What I would do differently next time is to set mobile first design to be the default design.

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

The hardest part for me was figuring out how to switch between image sizes based on either desktop or mobile design.

I had to reach out to the frontend mentor community for help and also look at others code on how they did it to get an idea how it should be done.

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

In the design, the desktop design still doesn't look accurate.

I'm having trouble with the right side of the card component to resonate with how the final design should look like, I still need some help with that.

Please do look over the code in my repository and the live URL and provide me any feedback with how I can improve this project, thank you.

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

I'm proud of my slight improvement on my css positioning, I've learned better as I've began building this project alongside previous projects.

What I would do differently next time is not to overuse the width and height property and only use them for such things like resizing icons and images where needed.

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

In my previous response I mentioned that I'd only use the width and height property on icons and images. I tried staying away from using those properties to size the middle section and the button and instead used padding.

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

• if using padding was necessary to size the "annual plan" section and the button?

• putting the text on a newline using "span" and then using "display: block;" to put them on newlines?

• how is the mobile response, does it look weird?

ideally those are some things I need help with, and if there's anything else that I must fix/change please let me know. I'd like to improve in any and every way possible.

my reflection upon going through this project :

What did you find difficult while building the project?

A: I mainly found completing the right side of the project difficult for me. Getting each element to where it needs to be positioned according to the design provided.

Which areas of your code are you unsure of?

A: this is what I'm unsure of :

• positioning of the elements on the summary section (right side).
• website responsiveness to be accessible especially for mobile viewing.

Do you have any questions about best practices?

A: I've started to discover about this best practice of "mobile first" that I was suggested, by the frontend mentor community. I've been doing research about it to learn more about it and how I can be good at it. I would also like any advice/suggestions along side any resources that can help me be better at mobile first design.

please do to take a look at my code with the uploaded project. Any advice and suggestions would be greatly appreciated on how I can improve this project, it's not at its final stage yet and I will still edit it along the way. Thanks!

overall this project challenge was fairly easy. I just have a concern about the "Learning" label.

I'm not sure if I used the correct properties for it, I used a width and padding to make it as close as to what the design shows.

Please let me know how I can improve this and anything else that might need improvement, thanks!

I really enjoyed doing this project! the only thing I found difficult for me was the "preparation section". I was using padding for the most part but I'd want to know how could I do this differently? any sort of suggestion and feedback would be appreciated!

after completing this project, here's my reflection based on the following questions :

• What did you find difficult while building the project?

A: a difficulty I experienced was figuring out how to align the component exactly to the center of the webpage. Took me a while alongside a few attempts to get it right but eventually I was able to figure it out.

• Which areas of your code are you unsure of?

A: so far, I didn't have much issues coming into this challenge other than feeling skeptical of how I aligned the qr code component as a whole.

• Do you have any questions about best practices?

A: what are some resources that I can refer to for me to improve my html/css positioning? as I continue my learning I want to improve the way I position elements and learn the best practices in doing so.

Q: What did you find difficult while building the project?

A: I found that positioning and aligning elements on the webpage was a challenge. There were times that certain elements wouldn't position itself the way it should so I had to fix individual elements to get them in the right spot.

Q: Which areas of your code are you unsure of?

A: The use of position: relative; for alignment/positioning

Q: Do you have any questions about best practices?

A: What are some good resources to improve alignment/positioning in CSS?

hello, here's my project for the 3-column card preview. I had some struggles when approaching this challenge so I'll go ahead and do so based on the questions asked :

1.) What did you find difficult while building the project?

A: I had a difficult time taking the 3-cards and centering them exactly in the middle of the page. I was using flexbox/grid like I should when positioning the elements but I wasn't sure which one to use.

2.) Which areas of your code are you unsure of?

A: I'd say in my html I'm unsure of including a "container" div if that was necessary. I include it by default but I don't know if I actually needed it, but I kept it there just in case. Also when using flexbox/grid to position the elements exactly in the center.

3.) Do you have any questions about best practices?

A: What would be a good practice to set up my code to better have the css positioning to work efficiently? it's likely the one major issue out of the many that I have, is when I'm positioning certain elements on a website.

Please feel free to look over my code and provide me with any advice that I can use to better improve this project, thanks.