All solutions

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

I encountered a lot of new challenges in this project, and learned some new approaches that I can carry with me moving forward.

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

I struggled with the hover transition for the buttons. The button is a linear gradient, and I didn't know that you can't add a transition to background images. The mentors on Discord really helped steer me in the right direction, and I was able to come up with a solution using a pseudo element with a -1 z-index.

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

For the success screen, I used JavaScript to toggle the display from none to flex, and the component from grid to none. I don't know if this is best practice for this type of component and if it meets accessibility standards. Any advice on this, or anything else would be greatly appreciated.

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

I'm proud that I've begun the JavaScript path, and was able to achieve the basic functionality required, although, I do believe it needs some work. I learned a ton in this challenge, by getting stuck so many times, stopping to read up from many resources, asking questions, trying, failing, and trying again.

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

So many. A significant challenge was getting the positioning of the dialog in the correct spot, and then the arrow that points to the button on the desktop version in the active state. Since I decided to use just 1 button to toggle the hidden component instead of adding another button to close it, I had to refractor my html. Originally I had the avatar, author name and publication date inside a footer tag, within the card but not contained with the rest of the content. When I refractored this to be a regular div, and moved it within the same container as the other card text, I realized the dimensions of the hidden content will need to take into account the padding of the card body. With absolute positioning on the "share options" content, I used negative right, bottom, and left rem's. The desktop version was even more difficult, and I actually hope to receive advise on a better approach. My solution involves setting explicit widths and weird percentages for positioning.

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

Besides what I mentioned above, accessibility standards. I don't think my focus is correct for the social media links. I'm not sure if focus should be trapped within this div when it is active. Of course, I am always open to all feedback and suggestions for improvement.

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

I'm happy that after much trial and error my solution is responsive, seems to be working correctly on different browsers and devices, and that I learned new techniques while practicing and reviewing others. I know its only a Newbie challenge, but for me it wasn't easy.

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

It was difficult to extend and center the hero image to be wider than the viewport width without causing horizontal scroll. Ultimately, I applied 110vw to the image (wrapped in a picture element) with -5vw margins left and right for mobile and tablet screens. The desktop image is different in that it is 2 image that surround the text, still escaping the bounds of the viewport. Using grid, I set the display to none for the right side image on small screens, and display block when it reaches the desktop width.

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

I would really like to know if my use of and tags is ok for this project. Especially this piece of code in the hero section:

and within the hero I have this ``:

Group Chat for Everyone

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

For this challenge I took a bit of a different approach than in my previous few solutions by experimenting with utility classes with my custom properties for colors, typography, and basic layout. This allowed me to write Bootstrap-like classes directly into my html. For responsiveness, I used grid-template-areas to place the testimonial cards on the grid.

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

I did my best to match the design as closely as possible, but I found some challenges when it came to spacing the elements within each testimonial and landing on the same height/width as in the Figma file. Eventually I created little boxes directly in the Figma file itself to measure spacing, e.g. (8x8px, 16x16px, 24x24px) and converted these to rem units in my CSS. I tried a few line heights for the paragraphs as well until I got within a few pixels of the correct heights and widths of the cards for mobile and desktop views without hardcoding them.

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

I used the and elements, and I'm wondering if how I used as the wrapper for the entire card is OK, or if the cards also need to be's in a `` for this challenge.

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

In this challenge I used a combination of custom properties, a media query and responsive sizing using the clamp() function. With these tools and the Figma file, I was able to achieve the responsive layout, and make smooth sizing transitions for elements like the h1 and the icons, and padding differences inside and between the cards. Next time I might use grid-template-areas instead of using line based placement when working with grid.

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

Getting the sizing to match the design/Figma files as close as possible took some trial and error. First I matched as close as possible to the mobile using static sizing in rem units. When that looked good, I noted what differences I saw in the desktop version. Where I thought it would be a good opportunity to use a function to fluidly transition to different font sizes and/or padding, I tinkered with clamp() and the devtools responsive view until my sizes were matching in both mobile and desktop. By 'sizes', I mean the h1, icons, and spacing (padding, margin, gap).

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

There were several decisions I made that I had doubts about being the best practice, so I will explain my thought process, and if you see how I can improve please let me know:

I used flexbox in the body, and grid only in the wrapper which contains the 4 cards. I needed just a one-directional vertical alignment to stack my and. Inside my element, I have an which contains my and. I didn't see any need to include those in and complicate the grid.

I do wonder if this is good use of the element. I thought since there is no navigation here, wouldn't be correct.

For the cards I used and for each card. Is this the right situation for use a list for cards, and if so, when is it correct to add the attribute role="list"?

Implementation of the grid itself. It was easy to get the layout here, but it could have been done also using `grid-template-areas'. I like using the shorthand:

.card-1 {
    grid-area: 2 / 1 / 4 / 2;
  }

But if this is not recommended then I want to correct my ways.

Thank you!

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

I gained some experience using a couple new elements for me: and . When I come across new ways to solve problems I pause for a while. I like to read about them or watch something, and I feel like I am making progress and getting deep into learning. I found an opportunity once again to practice using clamp. The padding in the content area of the card slightly increases on the desktop version, and clamp worked perfectly for this.

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

I was having some trouble with the Fraunces font-face declaration. I could only get it to work by importing in my html head.

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

A few doubts I had are whether the default image should be the mobile or desktop version. I went with mobile, which works, but I don't know if that is the best practice. Button type: "submit" or "button"? I chose button because I don't think adding to cart submits data to the server. I've been trying to use BEM more often. Any feedback on how I named my classes would be of great help. Any other suggestions or improvements are also very welcome.

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

I challenged myself to build responsive layouts for mobile and desktop screen sizes without using media queries. For this I used a combination of CSS math functions: min(), max(), clamp() to dynamically adjust padding sizes, margins and font sizes to match the Figma files. I was able to very closely match the design using this technique.

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

By far the most challenging part was making the border radii of the main card component and the image responsive: from 0 on mobile screens to their respective sizes on larger screens. I found a great article which really explains how this works and adapted the solution to my needs. There is a link to this article on the README page if you are interested. I had to make some decisions as well in other areas that required some thought. For example, the horizontal lines under the ingredients and instructions lists. It could be an , or could be a border-bottom for those entire sections. I went with the latter. It made sense to me to use last-child, not last-child pseudo selectors here and there for stuff like this. Is this the best way? I'm not sure!

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

I'm grateful for any feedback on how to improve. One thing in particular I couldn't figure out is how to vertically center the bullet points on the unordered lists. In the design they appear to be center aligned with the text in the list item rather than aligned to the top of their box.

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

In this project I had the opportunity to use some of the CSS tricks I learned in my previous project, the Blog Preview Card. That is, I used the clamp function again, but this time for responsive sizing rather than responsive text. Using this I was able to (almost) match the card widths at mobile and desktop widths exactly as in the Figma file (more on this in the challenges encountered section below). Additionally, I used a pseudo element for the a tags that are nested in the list items, so that when hovering over the buttons, the user in in fact hovering over the link which triggers the active stylings.

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

While I'm getting responsive sizing of the card width with use of the clamp rather than media queries, at 375px screen width, my card width is about 10px wider than in the Figma file. It's not a huge deal, but the use of the clamp function seems to cancel out any margin to the card, or padding to the body. Playing with the clamp function was the most challenging part in general, but I am happy with it so far. The padding within the card is responding as I would like.

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

Besides the problem mentioned above, any feedback on accessibility, best practices or any ways to improve in any way are massively appreciated.

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

For this project I learned a few new skills. I implemented the CSS clamp function for responsive text sizing without using media queries. I've used pseudo elements and selectors before, but in this project I learned how to properly build a hoverable card, by making sure the tag is wrapped within the heading element. This is also the first project where I hosted my fonts instead of linking the google fonts in my html head.

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

The most difficult challenge was implementing clamp to make my text fluid between mobile and desktop views. It took lot of trial and error to achieve the results I wanted.

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

Definitely the fluid text. At this point it "works", but I would really love feedback on my code for this, because I am sure it could be improved. But also any feedback on any other areas in my code would be greatly appreciated.

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

I'm pleased with my solution so for because it's visually similar to the design file, responsive, and I believe uses a fairly minimal amount of code to get the job done. Even though it's relatively simple, I know there are a number of things that could be done more wisely and I am looking forward to suggestions from the community on how to improve, what I overlooked, and what I can do differently next time.

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

The hardest challenge was deciding the most efficient way to handle the correct vertical spacing between the image, header, and paragraph, while at the same time matching the text wrapping and white space left and right of the text. The base padding in the card which wraps the image was not enough to force the desired tax wrapping. That might not be important, but visually to me the text section is clearly not as wide as the image. I wanted to avoid creating an extra div inside the card to wrap the text and add extra padding, so I decided on individual margins for the 2 text elements. Giving the card header 1.3 rem y-axis padding worked to get the spacing I wanted between the image and paragraph. 0.25 x-axis looked good to me to contain it horizontally. For the paragraph, the 1rem y-axis doesn't do anything to further separate from the header because of margin collapsing, the header margin wins. But to me there is a bigger gap below the paragraph to the bottom of the card, and that adding to the padding looked right. I suppose I could have set that difference to the bottom padding on the card. But since I wanted to add left and right margin to the paragraph as well, it seemed like either choice didn't make a lot of difference.

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

Naming conventions: Is it ok to use div here instead of an element like article? Are my names for classes appropriate? How about my CSS variable names?

CSS selecting: For nested elements, is it right to select just the class name for the element I want to select (e.g., .card-header), or should I include the parent's class? (e.g., .card .card-header, .footer .footer-link), etc.

Keeping the footer on the bottom: My solution was position: fixed, bottom: 0. Is there a better way? Adding flex-grow 1 to the main element also worked, but it seemed like not the best method.