Hazem Hussein• 120
@HazemHussein14
Submitted
This is my second challenge and I need your feedback, thank you.🤩
Khondoker Aashabul Imam
@aashabul
All comments
@aashabul
Posted
- reduce the width little bit in mobile view.
- or use a fixed width lesser than 375px.
0- ans91• 50
@ans91
Submitted
@aashabul
Posted
For good practices:
- Avoid doing inline css. Keep your styles in a separate file. So that the code will look cleaner. You can use SASS or Styled Components. There are also bunch of style component libraries. I assume that you are solving exercise to make your fundamentals strong. Then I prefer Styled Components with react.
- In visual case, enlarge the size of your calculator. Its tough to read small texts. Keep a min-width of the container.
0 - Lucas• 180
@LOUDO56
Submitted
@aashabul
Posted
- by clicking mark all as read, the notification number disappears.
- You can make this more fun by dynamically change the unread notification number.
- Also you can click on individual unread notification and the number will be reduced one by one until no unread messages are left.
If you need a reference that what I am saying, feel free to visit my Live Website and Code.
0 - Matej Ch• 320
@Matej-ch
Submitted
@aashabul
Posted
- Your notification status header disappears in mobile view. You can solve that issue by setting the min-height of the page to 100vh.
Marked as helpful
0 - Marcin• 180
@marcin10lw
Submitted
Hi everyone! This responsive news landing page has been a great challenge and learning opportunity. I found the mobile menu functionality to be the most difficult part of this project, particularly its animation. Sometimes when the menu is opened it shakes a little. I guess it might be caused by animating method in news-page-react/src/Menu/styled.js and news-page-react/src/Overlay/styled.js. If there is anything I could improve the feedback is welcome!
@aashabul
Posted
- Hi, Everything is good. Just make the mobile menu position fixed or absolute so that when we scroll by letting the mobile menu opened it does not disappears to the top.
- The page is not shaking. You can delay the animation time by some seconds so that it looks smooth.
If you need any help just reply. All the best!
Marked as helpful
1 - Scott Weston• 270
@slweston
Submitted
@aashabul
Posted
You can make this challenge a little bit more fun by making
- clicking on the single notification reduces the counter number by one, removes the red dot circle, makes the selected notification background transparent.
- Also can add some hover effect for better experience.
- I have solved this problem like this. It was fun! In any case you need a reference feel free to check my solution https://github.com/aashabul/notification-page-html-sass-js
0 - Krystine• 10
@krystinee
Submitted
Moving the QR component around was probably the most difficult as getting all the information arranged to look right. The area I am most unsure of is my mobile design. It didn't look perfect, but it was as good as I could get it. I should have begun with a mobile-first design but I didn't think the project was going to be a responsive challenge. I hope my code looks nice and organized though!
@aashabul
Posted
- you can simply avoid media query and set the card with to less than 347px. Because in the given design files, the card component does not shrink when viewport changes from desktop to mobile.
- you can just remove the media query and keep a smaller width. That will do the work.
- Also you can check my solution in any case you need reference https://github.com/aashabul/QR-code-component-html-css
0 @Lizz3108
Submitted
What did you find difficult while building the project? The biggest challenge for me was to make it responsive, using media query. I didn't use them before and this was the first time approached the concept.
Which areas of your code are you unsure of? Personally, my media query, since it was the first time there's room to grow.
@aashabul
Posted
- you can align the card in center of the page.
- you can notice that the padding of the QR code image and the text content is not the same. You can improve this.
- Also for more details, you can make the header text little bit bigger and the paragraph litter bit smaller.
2- Joanna Skrzypczak• 530
@joaskr
Submitted
Hi community :)
Oh my, that challenge was a lot harder than I expected. I had a lot of trouble making it responsive. I decided to use grid for styling and that was actually the first time that I used grid in a frontend mentor challenge. I tend to stick to Flexbox whenever I can but I wanted to challenge myself. Big kudos to Design Course for this tutorial. It help me understand how to use grid-template-areas.
I'm not fully satisfied with the solution and I will definitely improve but I need to do a couple more sites with grid to get some practice. But you know, practice makes perfekt.
@aashabul
Posted
your site looks good. But I have found two areas that you can improve.
- letting the mobile menu opened If I change the viewport from mobile to desktop, the mobile menu still remains opened. You can make it more responsive by solving that issue.
- the buttons and other link tags are clickable when the mobile menu is opened. You can increase the z-index of the overlay div to secure all the content in bottom of it so they can't be clicked when the mobile menu is opened. That might be a good practice.
I am also learning. Thanks.
0 - Ahmet Ozhan• 150
@amd42
Submitted
@aashabul
Posted
- In mobile view your site shows scrollbar in x axis.
- Put overflow-x:hidden in the body to solve this.
- Also in mobile view, during scrolling the page your menu is not positioned fixed.
- Add position fixed or absolute to solve this problem.
- Try to position the burger icon and close icon in the same position.
0 - Eseoghene• 550
@EseAlli
Submitted
Feedback is welcome
@aashabul
Posted
- By letting opened the mobile menu If you scroll then a problem occurs. Make the mobile menu position fixed or absolute.
- You can add some transition to the opening and closing of your mobile menu to have a better user experience.
- I am giving you hints so that when you try to find the defects you will learn much rather than getting the solutions directly.
- Also you can check my solution for any clue.
I am also opened to any type of suggestions. Thank you.
0 - DaveMan-stack• 130
@DaveMan-stack
Submitted
@aashabul
Posted
- you can improve the desktop view by making it more responsive.
- on mobile view, when mobile menu opens, try to position the overlay section all over the content except the menu bar. I will look more nice.
- open the dev tools in your browser and check the console log. It's showing a error with the fonts.
- Also you can improve the sidebar paragraph color to little bit lighter so that users can read them easily. And add some hover effect on button and other titles which will look cool.
Marked as helpful
1
