All solutions

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

This was my first project attempting to build from a mobile first perspective and then shifting to desktop vs. building desktop styles first. I feel the shift in perspective was easier to make than I anticipated and look forward to building more projects utilizing this method in the future.

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

This project was pretty straight forward. One small issue that does come to mind was trying to get the text to line up the way it was in the design. I found that using text-wrap: balance made the text line up in the respective element nicely and also matched the designs.

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

I am open to any general constructive critique that can make my code look and run better, especially if it is regarding best practices going forward. Thanks in advance!

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

This was a fun project to build. The challenge was mainly due to attempting to approximate precise measurements for elements without using Figma files. However I am happy with the overall end results.

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

The main challenge for me in this particular project was approximating the measurements without the use of Figma style files. I utilized the provided end result design jpgs and the native mac preview app to approximate the sizes of components on both desktop and mobile.

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

I was proud that I was able to practice responsive design by completing this project. I attempted to do this with one media query and no flexbox.

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

Mitigated overflow on various screen sizes by leveraging min-height and max-width rather than using static and rigid height/width parameters for containers.

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

I am always open to constructive insights on potential ways to improve my code.

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

I am proud to have completed this challenge as accurately as I could without the use of Figma files, and I am proud of the animation hover effects I created using just HTML and CSS. I am continuing to try to improve my use of Semantic HTML and site responsiveness.

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

The challenge posed was trying to approximate unit lengths for the elements (margins/padding etc.) without the use of a Figma design. I attempted to approximate these details as accurately as I could using Macs Preview application with the provided design jpgs. I was able to click and drag between items in the image and get a number in pixels to then use in my CSS code.

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

I am always open to constructive feedback, especially if there are any potential areas that are generally considered best practices that I should be incorporating into my code, or if there are design patterns that I could better be utilizing to improve my code.

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

I am proud I was able to complete this project as close to the design as intended. I was glad I was able to closely replicate the desktop, mobile, and active states of the designs. The only part of the challenge I had issues with was changing the font-sizes when going from desktop to mobile, without the use of media queries. I am sure the solution to this is something easy I overlooked, as I attempted using the new CSS feature container-name and @container (max-width ), however I was not successful. Any pointers on that part would be greatly appreciated.

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

Aside from the remaining challenge mentioned above regarding the font size changing, I was glad to overcome an issue with resizing the svg image in mobile vs desktop by utilizing the object-fit property.

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

How can I make font-size changes more fluid yet still specific to a size based off a container (without using a media query)? For example, if the card size in desktop has a width of 384px and a paragraph text is 16px, then when the card shrinks to 327px, the text shrinks to 14px?

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

I am most proud of completing my first FrontEnd Mentor challenge, which gave me experience utilizing Figma designs as a blueprint to develop the web page using semantic HTML and CSS3. Practice with Git and Github while developing the page was incredibly helpful as well.

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

Some challenges I faced regarding how to view exact details in the Figma design. However, this was simply due to it being my first time using Figma. I googled some resources to help me understand the lay of the land in Figma and was soon able to figure out how to view specific information needed to get dimensions and other information required to complete this task as accurate to the mock up as possible. Example of an issue would be trying to find the precise information for the subtle box-shadow in the Figma design.

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

Thank you for taking a look at my project! I welcome and appreciate any feedback regarding the organization of my code, along with any pointers or tips on how to improve my use of HTML syntax, CSS organization, or anything else that may come to mind.