All solutions

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

Using Astro Actions and Zod for the form validation. I would try to use a Vue component, as an Astro Island, the next time.

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

I wanted to use a separate Astro component as the success message, but could not find a way to show/hide it dynamically. I ended up having to scrap that idea and place the HTML for the message within the index file and use JavaScript to hide/display it.

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

I used margin to place the button in the success message at the bottom. It seems to me that there should be a better way to do this instead of using a huge margin value that I eye-balled to get right. Should I be able to use something like grid or flex to automatically position it at the bottom?

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

I almost gave up - but stuck with it. This one was extremely challenging for me. The JavaScript was simple...but the CSS was a nightmare. The share button is still not correct - but I decided to submit the solution for now and perhaps fix it down the road.

I should have started with mobile design first - and I knew better to do so - but for some reason I started with desktop mode first. I think it would have been easier to deal with the positioning of the share pop-up menu if designing for mobile first.

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

Positioning the social media pop-up menu was difficult. I had to make several attempts with setting the relative and absolute attributes at the correct DIVs. Once I started on the mobile design, it was then obvious how to do it.

I am still stuck on the share button. I could not figure out how to make it change colors - I am not sure if there is CSS code to change the color of an SVG file. Also, I was able to line it up properly in desktop mode - but it mobile mode it is floating too high in the DIV.

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

The share button - changing colors on click and centering it in mobile mode.

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

I originally attempted to use card components and data stored in a JSON file. I soon realized that there was too much variation in the cards to benefit from a generic card design. I am proud that I was able to recognize the flaw in my design early and start over without too much effort.

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

I tried to original store the testimonial data in a JSON file along with some custom CSS code that was specific to each testimonial. I soon discovered that the Tailwind JIT was not compiling those class names when stored in a JSON file and the styling was being lost. It took me quite a bit of time to figure out what was causing the problem...but then figured out that I needed to add the JSON file to the content property in the tailwind.config.mjs file. In the end, however, I ended up scraping the idea of using a JSON file for other reasons.

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

Nothing at this time. But I am very open to suggestions and constructive criticism.

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

Completing the design nearly completely on my own. I did have to consult Bing Co-Pilot to see how to arrange the cards in the desktop design specification (outer grid/inner flex) - however I am not sure if that it correct way to do it.

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

Arranging the desktop card layout. I knew I wanted to use a grid of 3 columns...but the inner column threw me. After consulting Bing Co-Pilot, it suggested using flex for the inner column to stack the cards.

I am guessing most newbies like me struggled with this as well...

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

I would like someone to review my desktop card layout and let me know if I should have done it a better way.

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

Learning new CSS tricks such as adding spacing between letters and adjusting line height. What I would do differently is handle the dual image differently. I believe the solution is to use the element, but I could not figure out how to map its functionality to the Astro equivalent - so I used the "hidden" declaration instead which is not ideal.

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

Spend way too much time tweaking spacing, text size, text weight, etc. Perhaps Figma might help.

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

Using the Astro component to select different images based on the screen size. The documentation, that I found, does not seem to explain how to do this (assuming it is even possible to do with this component).

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

Overcoming hurdles such as formatting list items markers (size and color), spacing between markers and list item text, and mobile design challenges.

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

I feel like the design I used for the table was a hack with a bunch of tweaks to get it to look correct. I feel like there should be a more eloquent method to do this.

I could only get the mobile design to work by setting individual margins/padding on the sections and the image (whereas originally I had set padding on the container itself until I tried to implement the mobile design). Otherwise, I could not figure out how to make the image flush but yet keep horizontal spacing for the sections at the same time when in mobile design. I feel like there should be an easier and cleaner way to do this.

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

• Cleanup the mobile design.
• Suggestions for better table implementation or replacing with something else (grid?)

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

Using the map function to iterate through an array of social media links to generate the list items in the unordered list.

It took me a while to realize that I can simply use an unordered list to display the links. Next time, I know to look to the simple solution, for layouts, first.

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

Layouts, layouts, and layouts. Just a major hurdle for me...

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

I think I got it mostly covered. The responsive design and the media queries I used might be a bit shaky and need some tweaking.

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

I started out using both grid and flex and then figured out that I could use just flex which made a simpler solution.

I have CSS styles in both the Astro layout and index pages - I am not sure if I like the way that works and may need to re-evaluate how I am using Astro layouts.

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

I was not sure if I should put the top image in the same DIV as the other elements or keep them separate. Looking at other solutions, most other people kept is separate. I am not sure why this is or the benefit of this.

I was originally trying to use grid for the bottom avatar image and author name and struggled with the spacing and Tailwind classes. Switching to flex made it much simpler.

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

Understanding why the top image is in a separate DIV.

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

Using Astro and my own Astro template to implement the solution. However, using an Astro component within the project might have been a bit overkill for getting to the desired outcome. Frameworks like Nuxt/Vue and Astro seem to be component-centric, so I am try to get into the habit of using components.

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

I struggle with CSS layouts. I had to "cheat" a bit to get started - but then was able to finish the rest on my own.

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

Sometimes I am not really sure where to put margins. Do I use it on the upper element, to add space between it and the lower element? Or vice versa? Or does it not matter? Same for left vs. right elements.

Using hard-coded widths seems "restrictive". Is there a better way to set the width that is more dynamic instead of using a hard-coded width of "360px".

I have several issues with Frontend Mentor itself:

• The screenshot does not match my live solution. For example, my paragraph has three lines but the screenshot of my solution only shows two lines. This seems to be a bug with the screenshot process. I tried creating a second screenshot and got the same results.

• Code blocks in this section are not being saved if they are at the very bottom. I tried using both of the options as described in the markdown help but neither worked. It shows it in the preview correctly, but when I hit submit or update solution, the content within the code block is lost. I have tried several times. Here is an example - you will see it is blank after I update solution:

``