All solutions

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

Happy with the layout. Next time I might add some subtle animations.

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

For a while I wasn't sure how to go about the HTML for best semantics and to provide easy "hooks" for the CSS and JS. I looked around at what other people had done in similar situations, read some guides, and worked with ChatGPT.

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

Open to feedback for any improvements!

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

.

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

.

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

.

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

Happy with the javascript simplicity using the toggle feature for class list.

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

Some of the padding sizes seemed unusual to me, so I had to use more media queries for the padding than usual.

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

I'll be curious to see how others have structured the pop-menu in html and positioned with css. It seems most intuitive to have it be a child of the footer section on mobile for the layout on the bottom, but then on desktop it would be easier for it to be a child of the share button so it can be positioned relative to that.

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

Happiest with the last section. Next time I would do more planning and outline work to understand the system and spacing.

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

The spacing with the last section and marker was difficult at first because I had put the marker inside of the div with the image background and then adjusted the position up.

Instead, I create a larger surrounding section with the marker inside and adjusted down, with negative top-margin adjusted the same amount. This helped me keep consistent spacing between the major page sections.

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

Always open to feedback and ideas!

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

Happy with the responsive grid layout. Next time I would plan out my project tasks and execution steps.

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

The circle behind the profile images was a challenge. It isn't calculated as part of the document flow, so I had to use a pseudo-element to target it, and getting the size of the image-wrapper and image was tricky. Turns out I had to set the flex container to align-items center to stop the image-wrapper from stretching and distorting the pseudo-element.

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?

Relatively happy with my solution for the tab at the top.

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

The cards in the left and right sides of the layout were not centered vertically, so I created 2 rows and had them span both.

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

This is actually my first time using Grid, and I'm not sure what best practices are for layout options. It feels like what I created isn't very flexible. I would be interested in seeing other approaches to this specific layout pattern.

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

Happy with the simplicity of my css. Next time I would consider doing a brief write-up of my intended approach before starting.

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

The distances between items in the info section on the design file were unusual and inconsistent. I initially set individual margins for each to follow it exactly, but it didn't respond well to the screen size between 375px and the tablet/desktop size at 600px, so instead I set the container to flex-column, with a minimum gap between, and formatting for space-between.

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

Curious if anybody has a different approach to the spacing and css.

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

Most proud of the curves.

Next time I would create wrapper elements for the contents of each section instead of relying on padding. This would make it easier to control the elements.

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

The curves were especially difficult. I encountered them through brainstorming, ChatGPT, and a lot of trial and error. Part of the difficulty is that there are some many ways to approach the problem.

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

What do you think is the best approach for the curves in this case and why?

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

I am most proud that I built it in React and feel that I created a decent separation of concerns and modularity. Next time I might consider sketching out the structure beforehand.

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

When I ran the build process the resulting page was completely blank, so I asked ChatGPT what the common errors were, and fixed a capitalization error in the homepage url.

Another challenge was that the images I was trying to use weren't loading, even though the relative file path was correct. I learned that it is necessary to import them at the top of the jsx files.

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

Deciding which HTML elements to use to represent the FAQs section for the most accurate semantics and accessibility.

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

Most proud of the table spacing at the bottom. Next time I would ask ChatGPT for ideas form the get go.

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

Getting the spacing right on the tables and the list items and markers was difficult. Persistence was key in figuring it out.

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

Not a big deal, but the number 1 in the instructions list is different than the design doc despite being the same font, and I can't figure out why.

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

I think I got a really close match, and am getting familiar with translating the designs from Figma. Next time I want to try using variables for the spacing.

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

I couldn't get the padding to be responsive to the media query, but I realized I had an extra ; in my media query.

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

Open to feedback!

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

.

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

.

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

.

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

I am happy that it looks right. Next time I would assume an 8px basis for the grid.

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

I wasn't sure of the spacing at first, but used some tools in Figma to understand the layout better.

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

Having an easier time determining pixel values for spacing.