All solutions

My 22nd challenge is completed 🎉

My 21th project is completed 🎉

It took me 20 days to finish.

Any constructive feedback is welcome.

20th challenge completed 🎉

The project allowed to use cool CSS Grid techniques for responsiveness and project's card overlay effects.

Any constructive feedback is welcome.

19th challenge completed 🎉

The share part of the project had interesting style for open state. I think I could use a nice approach to make it look awesome.

How did you approach the sharing section? I'd love to know about it.

Any constructive feedback is welcome.

18th challenge is completed 🎉

Tried to use as little content wrapper divs as possible.

Any constructive feedback is welcome.

17th challenge is completed 🎉

Projects completed: 17/103

For this challenge I used Copilot, it helps a lot with hinting the code.

Any constructive feedback is welcome.

16th project is completed 🎉

Simple, yet beautiful project is done.

15th project is ready 🎉

The projects includes email validation and its submission to Google Sheets. After the successful saving, page saves the email in localStorage and shows the success message on next visits.

I think I should refactor some JS-related code. Also, error message for email submission (if any) could be shown. Light theme addition is also an option.

Any constructive feedback is welcome.

14th challenge is completed 🎉

This project had two interesting sections to make.

1. Hero section has image changes in mobile and desktop. In small screens I used img with picture, for big screens I removed the img and replaced them with background-image of the section.

2. Section indices (i.e. circle with "01" and "02") was also interesting. The one that is near CTA section was styled with position absolute relatively to CTA.

I would love to hear your thoughts about these 2 approaches and also any other constructive feedback.

Thanks in advance.

13th challenge is completed 🎉

Tomorrow I'll try to add light theme to the project.

I think the JS code could be improved a bit. Especially async ... await parts.

UPDATE: Added theme toggler feature to the project.

Your feedback is more than welcome.

12th challenge completed 🎉

This was was also a bit simple to create. The component can fit well any landing or multi-page websites.

Any constructive feedback is welcome.

11th project is completed 🎉

In this project I used a little CSS variable feature to decrease the code amount.

Any constructive feedback is welcome.

10th project is completed 🎉

In this project I made use of a simple trick for stats columns.

Any constructive feedback is welcome.

Challenge #9 is completed 🎉

Thanks to Grace Snow I changed my approach to responsive design. Changed px to em and rem when applicable.

Also, I used a bit different style of naming/structuring custom properties.

Any constructive feedback is welcome.

My 8th challenge is completed 🎉

This project had me thinking about the layout of the Call to action section. It is where the phone preview is shown.

Other parts were rather simple.

I'd love to read your thoughts on how to structure the section that has phone preview.

Thanks in advance.

7th challenge is completed 🎉

This one was a bit simple.

The additional design point was to make the card full screen size in extra small screens.

Any constructive feedback is welcome.

I think you may find some useful techniques in the code.

My 6th challenge is completed 🎉

This visibly simple component was interesting to code. I've added some optional features, like dark theme toggler. Also, the page will save the theme value using localStorage and show the page with preferred theme even after page reload.

The page also will adapt to device's preferred-color-scheme. That was done using simple media query. I would recommend adding this in your future projects. Your websites users will probably happy for this feature.

UPDATE: Due to some reasons, if your phone is in dark mode, the theme toggler was not working. I removed this features until I find the workaround. Your help in this issue is highly welcome.

UPDATE 2: I fixed the issue. Now the page can adapt to user's default theme on page load. But, I could also improve the solution so the page would adapt to device's theme change instantly. Right now the user should refresh the page for changes to occur.

This video was very helpful for theme switching. The code is clean, too. https://youtu.be/Xk12JtYG8rw?si=cJT0kI_gwDJJ1B-7

Any constructive feedback is welcome.

In case you want to watch my live coding of the component, the video is here

Take care and good luck in your other FrontendMentor challenges 👍

My 5th project is ready 🎉

The project includes customization of radio input styles, animation for changing steps and responsiveness.

You may find 1-2 good tactics to use in your projects.

As usual I completed the challenge on my live video here (in Uzbek).

My 4th challenge is done 🎉

This one had a tricky positioning case in hero section. Also, I had to change the provided hero image to use HTML for displaying the statistics cards.

I hope you may find useful tricks, strategies to make a nice responsive website in mobile-first approach.

You may watch me live code this project here (Videos 8 and 9)

The 3rd challenge is done 🎉😎

This one was a bit easy and was done in a mobile-first approach.

Liked the font used for heading and button.

As usual, you can watch me live code this challenge here (in Uzbek)

The second challenge is done 💪😎 Finished it in ~2 hours

You may watch live code it here

Hello everyone. This is my first finished challenge 🎊

The challenge overall wasn't that hard. Except for these moments:

1. Rounded bottom of hero and features sections made me to look for several possible solutions. I think I could choose the optimal one.
2. For the positioning of circle images I had one approach that I thought would be great. But at the end, I had to change it a little bit, because overflow related problem in hero section.

I would love to have your feedback about abovementioned two cases. Would you find it a good solution or can it be done in a more simpler/better way?

I live streamed the coding process from the beginning. In case you are interested, you may get acquainted with my coding workflow. Warning, the video is in Uzbek. But the code is universal language 😉

Coding process videos playlist

Thanks in advance.