All solutions

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

Overall the result seems pretty good (even though it's not very close to the design).

What I'm really proud of is that I started to use animations to animate my components to add a little bit of interactivity (besides micro transitions when hovering/focusing radio buttons and submit button)

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

My biggest challenge was to animate the "thanks component" after submitting it.

Initially "thanks component" is display: none and it's not that easy to animate discrete properties like that.

What I did was taking inspiration from this Kevin Powell's video, where he animate a dialog.

Eventually I got a rough idea on how to set things up.

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

Any suggestion is highly appreciated, in particular I want to know if there's a better approach to animate things rather my approach.

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

Pretty satisfied with the overall results, especially I used flexbox and grids in conjunction, remarks that these two are two incredible tools in our toolbelt!

Maybe I would have structured differently the markup, I think that if I opted to go full grid, maybe someof the markup could be removed.

Also I took inspiration from Kevin Powell's solution for the stars in the ratings, very cool trick with background-repeat property!

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

Where I struggled initially how to structure the grid.

At first I set it to be 3 columns, and it worked fine the testimonials parts, but with the upper part I had a column in between that was empty and I didn't find a solution on how to collapse it, so I decided to go with 2 columns and the testimonials part was convertend into a flexbox container.

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

Any improvements is really appreciated! :)

In particular how to make images in the background better match the design

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

Pretty happy with the overall result. This time I try to split up the layout into different boxes to easily oraganize my markup.

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

Nothing in particular

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

Maybe I've absued a little bit Grid, but any suggestion is highly welcome! :D

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

I'm very happy about the overall results. I took a huge inspiration from Kevin Powell's video (here the video).

After my first personal iteration I saw how he approached the challenge and I was so amazed how simply he broke down every layout piece. Kudos to him!

Also, I gave a shot to ES6 Javascript Classes to dynamically render the data in the json file.

Next time I'll for sure take more time to break down the layout as Kevin did.

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

For me the challenge was to semantically lay down the HTML structure, but Kevin's video helped with that.

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

Something in particular I want an advice would be about the javascript part, but any suggestion is highly appreciated! :)

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

I'm pretty happy with the overall results.

Maybe I'd do something about code structure and avoiding to use media queries somehow.

Also I'm happy about the use of locally scope variable to add different background colors to cards (I'd have done the same thing with dedicated classes, but I did it this way just for experimenting, so it was unecessary).

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

At first when I put elements with flex I expected them to go on the next line when they wrap, but they didn't at first.

I found out that giving the wrapper container a max-width did the job.

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

As I mentioned in the beginning maybe I would like to have some feedbacks on overall code structure, but any feedback is really appreciated!

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

Hey everyone, here I am with another solution! :)

I'm pretty happy with the overall results, maybe what I would have done better are transitions. I had an idea of making the central eye blinking when hover over the image, but I didn't find a way to do so.

Also, I'll try to organize better my code to make it easier to read and understand.

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

I find difficult to add the overlay effect on the image when hover over it, but I somehow managed to do it by doing some research.

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

I have nothing in particular in mind where it could be improved, aside from what I've mentioned before. Any suggestion, of course, is welcome! :)

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

What I really enjoy of this challenge is how is easy is to make accordion with just plain html thanks to the tag.

Aside that, I'm pretty happy of the overall results.

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

Unfortunately, at the moment trying to animate the details element is not an easy task and there's no native way in CSS to do it without the support of a bit of JS.

I found different solutions online on how to animate them, but I didn't implement any animation and stick with the default open/close offered natively by the element itself.

I didn't because at this stage I felt it was a bit like cheating trying to recreate the same exact solution, so maybe in the future when I will have a bit more knowledge about how DOM and animation work with JS, I'll try to implement it by myself.

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

What I really want help to is about the sizing of the background image, cause I set it to 100%, so it will grow a lot on bigger screens.

The positioning of the card doesn't quite match the design. I used grid positioning on body to place items in the center.

I would like to find a way to expand the details not to the top but to the bottom (I've seen solutions that when you expand the details, they do to the bottom)

Hints on the typography would be great as well

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

Any suggestion will be appreciated to improve my solution!

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

Hi everyone, hope you're doing well!

In this challenge I struggle a little bit to find the most accessible tags for each elements but I think I can do better. Also It was a good opportunity to give css'grid a shot.

Any suggestion is accepted. Until then, happy coding! :)

Hello everyone!

I had fun building this one and I've discovered about the :has() selector. I used it for apply transitioning when hovering on card title (I put a transitioning on card title and links as well!)

I tried also to write semantic html as much as possible.

Any tips is really appreciated! Until then, happy coding! :)

Hi everyone!

Took a pause from practicing. I came to the basics to learn more about grid and flex and I've discovered new amazing things.

It's incredible how grid can simplify layouts with just few lines of code. Also I'm happy that I learnt something new about semantic html (I have a long road ahead, but I'm happy that I didn't use way too muc divs inside my code!)

Give it a look and give me suggestion on how to improve for next challenges. Until then, happy coding! :D

Hello World!

I'm pretty satisfied overall with the result, I just want to know how to better positioning the two bubbles in the background and make them adaptable based on view port.

Also, I'm open to any animation idea, I just started experimenting! :D

Hello World!

Very happy with the result. Any feedback will be really appreciated!

Have a nice day y'all! 😎 ✌️

Hello world!

This was a little difficult for me, but in the end I did it! :D

I not totally satisfied about some alignment (for example the Huddle logo when illustration and hero section reach their max width)

Hope my solution can be helpful for someone and, of course, all tips are highly appreciated! :D

Have a nice day!

Hello world!

What I've found a little bit complicated was making image adapt to the container. Looking at some solution, I've adapted them to my case, thanks to the great community here on Frontend Mentor!

Any suggestion will be highly appreciated! Have a nice day! :D

Hey everyone! I've experimented with responsive typography and sizing in this challenge and it was interesting.

Any feedback will be highly appreciated! 😀