All solutions

Hello, everyone! It's been a while since I put out my last solution. Nevertheless, I think this challenge was worth the time I put into it. 😉

• First of all, I learned about the URL shortening process and how to work with an API for that.
• Secondly, I deepened my understanding of the Framer Motion library. In particular, I finally got the hang of the AnimatePresence component that allows you to create animations for elements that are being removed.
• Also, I decided to try something new and discovered a cool (yet very limited) library for animations on scroll: React Reveal. Going through its examples and picking the animations I needed was very enjoyable. 😄 There's one drawback, though: the animations aren't customizable, and some of them may show up too early or too late while you scroll. Anyway, all of it is just details.

Okay, let me know what you think about this challenge and perhaps my work on the whole. I'd greatly appreciate any feedback! 😊

P.S. The popup window that you see when you load the page for the first time appears only once. (You can clear your browser's local storage if you want to see it again.)

Hello there, everyone! 👋 Here's another CSS challenge I decided to tackle.

At first, I wanted to practice another CSS framework — Tailwind. However, I didn't find it very entertaining: looking up specific tailwind classes when I can just write my own styles, ugh. 😒

Don't get me wrong, I still learned a lot about Tailwind! In fact, it's the best CSS framework I tried. (As some of you know, I also tried Bootstrap and Bulma in the last couple of challenges.) It is very comprehensive: you get way more classes than in Bulma and can style your page with virtually no CSS! However, sometimes, there's still a need to apply a very specific value to width or use pseudo-classes (or -elements), for instance. Well, you see, no matter how extensive a certain framework is, plain CSS will always be more flexible. 😏

So, I believe that from now onwards, I'll write my own styles, using SASS, and use CSS frameworks only for super-small projects.

Well, thanks for reading this long text till the end. 😅 And happy coding to all of you! 💻

Hello, everyone! 😃

I decided to take a short break from CSS frameworks and deepen my SASS knowledge a little. And this challenge was a perfect opportunity to do that! I focused only on Dart SASS. It is a specific implementation of SASS that gets all the bells and whistles first. ✨

In brief, here is the list of Dart SASS tools I used for this challenge:

• variables, mixins, placeholders;
• built-in modules, such as sass:color and sass:map;
• @use, @forward keywords instead of @import, which is getting deprecated.

As regards the challenge itself, it was pretty fun. I got a kick out of positioning the curved parts. 😄 And resizing images depending on the screen width was quite enjoyable, too! Finally, it's worth mentioning that I used Font Awesome icons for social media.

As usual, any feedback is very welcome! Probably the only question I have is this: should I avoid extra media queries, or is it okay to use as many as I need?

P.S. I went with the default form validation this time simply because I didn't want to clutter my project with an extra js file. 😏

P.P.S. You can also check out the README.md file on my github page for extra links.

Hello, folks! 🎉

Once again, I decided to try out something new, and this time my choice was another CSS framework — Bulma.

At first, this tool seemed very useful to me. There was nothing complex and it helped me add basic styles in no time. However, as I went on with the project, I needed my site to be more responsive and some of the predefined classes didn't suit my needs. That's why I ended up writing lots of @media queries and other styles.

Anyway, I enjoyed working with Bulma way more than with Bootstrap, especially, when it came to responsiveness. I think it has something to do with its simplicity. However, if someone asked me whether I'd prefer writing my own styles or using one of the CSS frameworks mentioned above, I'd most likely go for the former.

I'll probably try out a couple more CSS frameworks before making up my mind, though 😁

Hello there, everyone! 😀

I finally decided to try out some CSS frameworks and started with Bootstrap, since it's considered to be the most popular. So, this site was built without CSS Grid and media queries (well, technically, there's one media query in my code, but its use is optional).

What's my opinion on this framework? Well, to be honest, I didn't enjoy it very much. To create this grid layout, I had to use a LOT of nested divs and apply specific bootstrap classes to all of them. That was somewhat irksome. 😓 From my point of view, it'd be much easier to use CSS Grid and apply all the necessary styles in SCSS.

Anyway, the overall experience of using Bootstrap was quite absorbing!

Hello, everyone!

This time, I decided to redo the challenge I once attempted using Vanilla JS. Hopefully, I've improved since then 😅

Now, I used SCSS modules and Formik library to make things a bit easier and more organized. As always, any feedback is welcome!

P.S. Comparing your solution to the previous one is so interesting! I suggest everyone tried to do this at some point 😉

Hello, everyone!

This time, I decided to create something new: a simple game. Making it was fun, and I learned lots of stuff along the way, as always. Especially about the Framer Motion library! It turned out to be very useful.

Anyway, I still have a couple of questions for the community:

• Is there a way to get rid of flickering images? I bet they are constantly preloading every time I refresh the site. And the whole experience isn't user-friendly at all. 😔
• Should I avoid using nested styles in styled-components? And instead, try to create a separate Component for each element?

P.S. As regards the site functionality, I also added keyboard support:

• "1", "2", "3": "Paper", "Scissors", "Rock" respectively;
• "R": Show/Hide the rules popup;
• "Esc": Hide the rules popup;
• "Space"/"Enter": Play Again;
• "Y": reset the score (else it is saved in your local storage);

As always, I would highly appreciate any feedback! 😃

This is my first challenge with styled components. They are indeed very convenient, and I learned a lot about them! I also learned how to create a drag-and-drop effect, which was quite gratifying as well. 🤩 However, I faced some problems that I couldn't resolve 😥 Here they are:

• Using drag-and-drop made my TodoItem component rerender quite frequently, and when I tried to pass some props to TodoItem styles, using styled-components, I had to deal with very poor performance (due to the constant rerendering). That's why in the end, I put all the styles in a separate css-file and added them using className property. I read about using attrs in styled components and putting the dynamically changing styles there, but it didn't help improve the performance 😞

• Another little bug is one-time background image flickering when I drag a list item. It happens quite randomly and sometimes doesn't happen at all, but I think some of you might notice it.

• Finally, I spent quite a lot of time fixing the caret position in the text field. By default, it is aligned to the top of the text instead of to its middle. So I wanted to align it ~2pxs above the text, but I couldn't figure out how to do that properly so I left everything as it was.

All in all, it was an interesting challenge with lots of opportunities to deepen my React knowledge. 😅 For example, I practiced using useState and useEffect hooks (see TodoItem component) and for the first time applied localstorage to the list items.

I would be very grateful if some of you could take your time and comment on my solution or shared some insight on how I could resolve the aforementioned problems. Anyway, thank you for checking out this solution and reading this entry till the end! 😊

P.S. Check out my README.md description file for some extra links.

Hello, Frontend Mentor community 👋

It is another React JS challenge of mine. This time I tried to create something really cool with lots of bells and whistles. However, I think I went too far with it: my code turned into a complete mess, and the site itself started working somewhat slowly. Anyway, at least, everything is working without bugs, as far as I can see.

❗ Aside from the smoothness, I ran into a few other problems:

• In Chrome, the menu text (in the pledges' popup) gets quite blurry, and all the solutions I tried (like transform: tranlate3d(0,0,0) or scale(1), etc.) don't fix it.
• Sometimes, images flicker when I launch the site for the first time. I tried to deal with this problem using an extra component called Preloaded, where I preload all the necessary images and then put them in a div with display: none. However, I don't think that's the right way to do that.

Well, other than that, I enjoyed the challenge. It really tested my React JS skills. Besides, I realized many React libraries can help me write cleaner code with less effort. Hopefully, I'll learn their proper use in the future too! 😃

Thank you for your time if you read this post till the end! And as always, feel free to leave any comments! 😉

Hello there 🙋‍♂️

It was a nice challenge! I did it mainly to practice css animation with React, since I was a bit inexperienced in it and couldn't tackle bigger projects 😔

In fact, it turned out to be harder than I thought at first. The thing that helped me the most was forwards value in animation-fill-mode property (it makes the element retain the computed values set by the last keyframe). A real life-saver 😅

Another thing I practiced was writing clean code (well, at least I tried), not using extra properties or variables. Plus, I used sass @mixin for the first time.

So, the overall experience was pretty gratifying!

P.S. Could someone tell me if you can use the word "animation" in plural in this context (see the first paragraph)? English is not my first language, and I'm a bit confused. 🙄

Hello there! This is my first React challenge, and that's why I picked an easy page. Anyway, it was quite tough to wrap my head around all these components and file structuring in React at first, but I hope I did it the right way. 😅

If anyone has any suggestions on how I could improve this project, let me know! I'm open to any feedback 😃

In particular, I'd love to know if I should avoid using so many media queries with React as I'm doing it now.

This is my first big project, and I put a lot of time in on it. I only used HTML, CSS (with the preprocessor SASS) and Vanilla JS. Well, here is a brief outline of the site's functionality. You can read about it in more detail here.

• Testimonials' slider that is automatically moving. You can hover a mouse pointer on it to stop it. Also, you can choose which testimonial to read by clicking one of the dots below the slider;
• The input field in the footer will shake and change its border on the invalid input;
• Button sounds and animation;
• Different mobile and desktop designs.

So, that's it. As always, any feedback is very welcome! 🙂

It took me a long time to finish this one. The hardest thing was to wrap my head around all this request making stuff using JS. (It's not so much about Frontend after all 😏) Also, I had to combat lots of bugs along the way. Anyhow, I think the end version is quite stable. 😄

Functionality:

• 🔎 Search for any IP or domain using the search bar;
• ✍ Make sure you don't leave the text field empty. Otherwise, you'll get the corresponding error;
• ✍ Also, ensure that you type in the correct IP or domain, or you'll receive another kind of error;
• 🌐 You can move and zoom the map however you like;
• 🐺 Click the attribution button in the bottom left corner of the page (btw, it's fixed, so it won't move on scrolling on small screens).

So, I think that's pretty much it for this challenge. As always, any feedback is welcome! 🧐

This was an interesting challenge. However, I think it would have been much better to complete it using React or some other JS framework. Anyway, I decided to make the site with pure JS and HTML, CSS (with lots of copy & paste) 😏

Functionality:

• Click filter tablets to select the right jobs;
• Click on the job title to move the page to the top;
• Press "ESC" key or click "Clear" button to remove all the filters;
• You can also TAB through all the job vacancies and chosen filters using "tab" button (or shift + tab to go backwards);

Bugs & small issues:

• 🔉 In Firefox the clicking sound doesn't work well. (It either doesn't sound the way it should or not sound at all.) The "remove" sound works all right, though.
• ❎ Firefox depicts "×" (the one that you see on the "remove filter" button) in a different way, which isn't pretty at all.

P.S. I created the JS functionality without using "data-*" attributes in HTML, which was advised in README.md. Probably, I'm missing out on something and don't understand the right way of going about this 🙁

As always, any feedback would be highly appreciated 😊

That was quite a tough challenge, but I think I learned quite a lot (working with setInterval(), setTimeout() in JS; adding animation via JS, etc.)!

The most difficult part was to animate the cards. I struggled for some time with css and then tortured myself with js, but eventually it worked 😅 (There's a bug where numbers kind of skew a pixel or two every time they flip. I've tried really hard to get rid of it, but the only solution was to change the width/height of the card, which worked only for the desktop design. P.S. I tried all kinds of length units, like px, rem, %, vw, etc.).

In terms of functionality, you can do the following:

• Press "Space" key to pause/resume the timer;
• Press "Enter" key to see what happens at the end of the countdown (there's some extra animation I added);
• Click social-media links to refresh the page and therefore restart the timer.

As always, any feedback is welcome!

Happy coding, everyone! 😉

As usual, feel free to leave any comment and give some feedback on my solution. I would especially appreciate the latter! 🙂

This time I decided to reorganize my files. I used to store all the style files in one folder, and I don't think it was a good practice. Now I hope it looks better 😉 Also, I learned about blur() function, which helped me get rid of that unnecessary focus (and :focus styles) after I click the links.

There's one question that's nagging me though: should I avoid using pixels in favor of relative units? I use rem for text, but in the end, it all comes down to px again, since rem units depend on the root font size, which happens to be in pixels. I feel especially uneasy adjusting some elements using "margin-top: 2px" or something like that.

That challenge was quite tough in terms of CSS. I spent quite a lot of time researching how to create a custom slider and toggle switch. As for the JavaScript part, everything was more or less simple. Well, except for finding out how to correctly set background color for the slider (when the thumb is being moved). Anyway, I enjoyed the challenge! And I am quite happy with my end result too.

Any feedback is welcome!