All solutions

Any feedback is welcome.

In the desktop view, I am using the container's height to decide the height of the mockup image. It must be bigger and must overflow. The background image also must be bigger, but it must not overflow. Since they are contained in the same container, if I set the overflow to be hidden, the mockup image is cut. How can I use the container's height for the mockup and let it overflow?

I am very proud of this one. I think it works and looks good. The first thing I'm a bit concerned about is first loading time. I'm downloading the whole JSON to store it on Redux. That is causing some loading time, especially on mobile. Don't know what to do about it.

Another thing is about accessibility. I'm using my own component instead of a select input. Right now, it doesn't support tab Index and I don't know how much more problems I have in terms of accessibility. What can I do to improve it?

Thank you all for checking!

What is your opinion on "Patrick Abrams"s background color on the dark theme? I wanted to retain the contrast in the design, but is it too bright for a dark theme? I would love to hear your opinions on this, and any other comment is also appreciated.

This is the first time I've tried to do a pixel-to-pixel replicate of the design. It is not a very complex build, but I've spent more time on the CSS than usual to make it perfect. For the people planning to do this challenge anytime soon, I recommend you to have a look at the cache property for fetch API.

The only thing that I think I could do better is animation. A little animation between screens would make the game feel more fluent. But the reason is that I used the display property to switch between screens.

What do you all think about the general look and transitions? Or do you have any feedback? All contribution is welcome!

I used react.js for this project because the first thing that came to my mind was using the "useState" hook for the notification badge. Also, I could have gone further and used ContextAPI or Redux, which I know how to use, but I didn't want things to get messier for this kind of simple project. Instead, I stored the notifications in a JSON file and if you want to use it, it is named "nots.json" and you can access it in the "public" folder.

I think everything looks okay on my devices, but if you see any problems or have any suggestions, I would appreciate any feedback.

The only part that I'm not feeling that good about is the popular news section at the bottom of the page. I couldn't find any other way but to use those images as backgrounds for the divs. I believe there should be some way to use them as img tags, but it was challenging and couldn't do it for now.

Any idea, feedback is appreciated.

Images

Due to the lack of design files for tablet-sized screens, images are not in ideal sizes between 701 and 850 pixels.

Mobile Dropdown

I tried to make this project HTML and CSS only, but couldn't figure out how to make these dropdowns in mobile by CSS. Hover didn't work because if you hover the second dropdown while the first one is open, the first one closes and then the second one is no longer there where you hovered and it closes. So, I added simple JS, but it still isn't as smooth as I intended.

I am using Ecosia Mobile on my phone and it seems like there is a problem with font-weight there. I checked it on Chrome and it is working well. Please tell me if you also have the same problem and any feedback to solve that would be welcome.

I think it's done pretty good. But if you have any feedback, please tell. All of them are welcome.

I do believe that my operations are a little bit messy, but they are good at what they are meant to do. Because of my "calculations.js" file is full of if & else, the app is not the most agile. As long as you give enough time (absolutely not even a second) for my buttons to work, they will do what you want them to.

And also, I later figured out that I've got problems with negative numbers because I'm using "-" as a slicing point. I will fix it, promise.

I'm sure the operations can be improved, and I want to spend some time on them soon, and absolutely any feedback is also would be very welcome.

Any feedback welcomed!