All solutions

Hello Frontend Mentor✌️

Feedback is welcome. Please feel free to critic👌

Hello Frontend Mentor✌️

I completed this project a while ago. I had fun with this one although I still remember having problems with routing in react and ever since switching to Next JS I've never experienced a similar issue again in other projects. File based routing in Next JS has been a plus point and I've since never looked back.

Maybe one day I might redo this project using Next JS and tailwind CSS and see how long it might take this time around.

Feedback is welcome. Please feel free to critic👌

Hello everyone👋

A time-lapse from start to finish. 2 days in 7 min 21sec

Cheers👌

Hello Frontend Mentor 👋

I am glad to have completed this challenge. It was a great experience where I got to practices what I've learnt in web development so far. However, I wish there was better contrast in the design colors of this challenge. It was a bit painful to work with and I hope that won't affect much the user experience in the finished product.😊

I used data.json file from which to load the default notifications and then store them in sessionStorage when they get modified. I also used react context API to share and manage state across the components. I plan on doing a bigger challenge where I can use redux which I've been learning recently. If you have any suggestion which challenge I should go for next, please leave it in your comment. 🤞

I'll highly appreciate your feedback. Happy Coding! 👌

Greetings Front-end Mentor Community 👋

This is my first solution to this challenge and I decided to go tailwind CSS this time over SASS. The main reason being I wanted to compare the experience of using a CSS pre-processor over a CSS framework. However, I started to notice immediately that my HTML markup was getting quickly cluttered and increasingly difficult to track changes that I made even though this project was fairly small. I suppose it's a bit to early to give up on a CSS framework, therefore I'll use it again but with react on my next project to see if I can refactor my styling more efficiently.

Besides that, there was not a lot that I found challenging though I did get to use clip-path to create the small triangle on the "tooltip" in desktop design. This was something I had to search online and I found out there were several ways to achieve this so I chose this way because I never had a chance to use it before. 😊

I am quite satisfied how this project turned out.

I'll highly appreciate your feedback. 👌

Hello Front-end Mentor Community 👋

I've wanted to do this challenge for so long that now I've got the chance to do so, I am quite excited that I got to practice some React and Sass features I've learnt so far. 😪

Next plans for this project:

• Add error reporting functionality in case a user set password length to 0 or deselect all the check boxes and they click "Generate".
• Implement default reset styles for some HTML elements.

One of the most difficult or I should say tedious part was the CSS🥱, although SASS made it somehow manageable. On my next project I'll be using a CSS framework. Any suggestions on which one to use will be highly appreciated, I never really used one a project before but I've seen some tutorials on bootstrap and tailwind. The reason for not using them was that I did not like how they cluttered my HTML markup. However, I've realized that since I started doing this challenges, I spend most time on CSS than the HTML markup and JavaScript logic, maybe a CSS framework will save me some time.

Any suggestions will be highly appreciated. 👌

Hello Everyone 👋

I finally got to finish this one and submit it after a while. I have been working on it for quite some time, I'd leave it, work on something else and come back to it. The JavaScript logic was fun, I really enjoyed it and I got to practice some React features. However, the CSS was quite tedious and painful to work with due to the fact that if you wanted to get it looking as close to the design as possible, there were significant differences between mobile and desktop designs. Maybe a CSS framework would have saved me a lot of time. 😎

I am still not satisfied with the layout are at the moment. I plan to work more on the responsiveness and the transition of the UI between the breakpoints. Even better, I'll create the bonus version.

Any feedback is welcome. I'll highly appreciate it. 👌

Hello Everyone.

This one was pretty straight forward.

Estimated time of completion: 2 hours Completed in: 1 Hour 30 Min

Any feedback would be much appreciated👌

Hello everyone👋

First time I timed myself while doing a challenge. It took me 4 hours to complete. I'd like to hear some feedback from anyone who has done a challenge similar to this one and how long it took them to complete.

Cheers👌

Hello everyone...

Does anyone know how to configure webpack or add a JavaScript polyfil plugin so I can implement latest features JavaScript has to offer.

I came across this when I tried to add a timeout to fetch and the solution I found was to add AbortSignal.timeout() to fetch options but this is only supported in latest browser versions. You can check an article from MDN Abort Signal.

Thanks in advance.

Small project but it took me a while to complete...

1. My first time using React context API and it was quite straight forward.
2. I had to revisit the basics in JavaScript -- it's array methods -- because I found myself having to research how do something and only to find out there's no one method to achieve that, you have to use a combination of them. I've used PHP and their array functions I find them to be quite useful. Here's an example where I spent most time trying to figure out and ended up leaving the laziest solution:

// src/components/Layout/Jobs

// fn to return jobs that match current filters
const filterJobs = jobs => jobs.filter(({ languages, tools }) => [...languages, ...tools].filter(value => filters.includes(value)).length ) 

Any feedback would be appreciated 👌