Mazen Hassan
@Mazz100All comments
- @LukichLabadzeSubmitted 5 months ago@Mazz100Posted 5 months ago
Hi, I took a look at your solution and I would strongly recommend taking it a step back and follow up with challenge roadmaps on community. Furthermore, ask on help channel for valuable feedback form others.
Some of the work messing:
-
Responsive design breaks on small screens.
-
Form labels are messing.
-
Both radio inputs shouldn't be selected together so you need to have same
name
attribute for each and not leave them""
. -
Design wise it can be improved as well.
Consider looking into non JS challenges first focus on your CSS skills and build up from there.
Good luck and keep going
0 -
- @CairoGarbSubmitted 8 months agoWhat challenges did you encounter, and how did you overcome them?
None was that challenging, I had the concept in my head and knew "how" to do it. I searched how to do it properly a few things but nothing too complex.
What specific areas of your project would you like help with?A overall feedback or some tips/tricks to improve the code will always be appreciated, thanks!
@Mazz100Posted 8 months agoWell done on completing the challenge. some tips that could be of some help:
- I think you can minimize the errors for this particular challenge since it's just calculating a tip so don't be strict with error messages.
- Only try making condition on calculating results after user selects all the options or at least 2 of them eg. bill and persons. See what fits with you
- I notice that sometime I need to double-click on each discount to apply it so it seems they are not radio inputs which should be the ideal approach for this case.
- One last thing about calculation I see that total/person is not getting calculated correctly, maybe you forgot to link some logic to it ?
Overall your solution looks great but these were some points to consider especially accessible HTML semantic as much as possible. Don't hesitate to ask for help on discord community and get feedback 👍 Best of luck!
Marked as helpful0 - @kelvinbamSubmitted 8 months ago@Mazz100Posted 8 months ago
Good job! Your solution looks great and the responsive is really good 😀. Can I ask how did you implement the bonus step on animating age results ? is it with CSS animation or something different ?
0 - @kennylun123Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I implemented
What challenges did you encounter, and how did you overcome them?React Portal
for my custom dialog / modal box and also able to close it when we click the area outside of the dialog. But I'm not sure if it's been used correctly. Next time I'd prefer to use third party library to ensure the correct behaviour of a dialog.Data state management, we usually fetching data in server side and render the UI. However in this challenge, I imported data locally and store in data state in useEffect to simulate fetching data on page load. On the other hand, it has to do everything in client side which basically abandoned the advantages of server side rendering.
@Mazz100Posted 9 months agoWell done! I like the unique difference in visuals you got. Keep it going :)
1 - @don-franklitoSubmitted 9 months ago
Hi, any advice you can give me to keep improving.
@Mazz100Posted 9 months agoHey. I just finished mine and would like to give a few suggestions.
-
Firstly just like @Dimitar mentioned you need to display an error text like it's in reference and I achieved that with conditional rendering.
-
For me I wanted to cap the digits because it makes no sense to insert hundreds of them so a simple
bill.length
can do the trick and then set it back to empty strings. -
Lastly if you want you could make a condition so the results doesn't render unless both bill and people are not 0.
Marked as helpful0 -
- @kennylun123Submitted 10 months ago
Hi everyone, this is my first SASS solution. I also want to know the best practice of updating SASS variables using media query.
Any comment would be appreciated. Thanks for your help!
@Mazz100Posted 10 months agoLooks Great Well Done! 😃
Was very close to be pixel-perfect you LOST haha 🤣
One small thing I noticed on HTML which I always did too is wrapping
main
in a parentdiv
container while we could just assign a class like.main-wrapper
formain
and use it as a grid instead. Got the advice on my last challenge 🙂1 - @ParaPacaSubmitted 11 months ago
What do you think are the best practices for this project? What am I supposed to do to improve my code?
Thanks in advance for your feedback 😊
@Mazz100Posted 11 months ago@ParaPaca Hello. Well done on completing the project!
While the final solution is looking great, I have some tips that might help you.
CSS SCSS:
-
Consider using rems for sizing UI like
font-size
and width, other properties can be preference. Note: 1rem = 16px. -
Nesting elements in SCSS can very quickly get confusing and unreadable, you can separate unrelated classes like
.card
and.name-wrapper
outside ofmain
. -
I am not an expert but I feel that using the nth child thing a lot is complicating and other selectors that I don't know or even using.
-
the last 2 points I mentioned I want to highlight the readability of CSS too, I also fell for nesting too much with SCSS forgetting that CSS exists.
HTML
- The
main
element should be inside the container or wrapper because it indicates the the main content of a website, its like accessibility tip, I also get confused by it sometimes.
I hope any of this could help in any way for future projects :).
Resources that could help:
Marked as helpful1 -
- @CheosphereSubmitted 11 months ago
...made with a lot of love 🤘🏻🙂
@Mazz100Posted 11 months agoGREAT WORK!!: I always since I started on FEM, trying to pixel-perfect match every project. I don't have access to PRO for Figma files but I saw your reply on using PS to analyze image canvas and size, I am familiar with adobe apps so if you have any tricks you using in photoshop I will gladly take it.
1 - @Islandstone89Submitted 11 months ago@Mazz100Posted 11 months ago
@Islandstone89 Hello, your solution looks neat. Great work!
Something that I really want to figure out about animation, when we hover over the header the color gradually ease-in but once we hover away it just disappears, I got the same result when I tried to have a button scaled up. I'm not sure if you want it that way but if you can figure it out I would love to discuss it.
- How to ease-in and out any kind of animation, opacity, scaling, moving. Anything?
Marked as helpful1 - @eghosaclintonSubmitted 12 months ago
No questions.
However, I am very open to criticism. :)
Have any tips for CSS best practices? Please Drop them!
@Mazz100Posted 12 months agoHi @clintt-09. Good job with finishing the project. some things I could help with is
** On CSS**
-
.flex which is your main tag you could add
align-items:center
andjustify content:center
to have your design in the middle. -
Add
min-height:100vh
in body to maximize the content to the full viewport height. -
You can remove the
width:85%
because you already have youmax-width
defined.
That's all I can suggest from my end. Keep in mind you can play with the devtool and debug your code live. Hope I could help. Happy coding :)).
Marked as helpful1 -
- @kwokkwSubmitted about 1 year ago
I found difficult to determine the size (width, height) of the container for the card during the challenge. Therefore, I hard coded the size of it. I would love to heard feedback on getting the right size. How can I handle this situation better? I also was not sure if I should use padding or margin.
Any additional comment/advise or related information will be greatly appreciated!
@Mazz100Posted about 1 year agoHello, your work looks great good job, as for your question about fixed width I had exactly the same approach on my end, I used margins and width with pixels but this was bad practice so I will write down what I learned from this solution:
HTML
- You can remove the class used for main element as it describes itself and can be used directly inside of CSS.
- I read that linking the font or any outsourced content inside HTML and you can do that by copying the google-font link provided for the font and then use it in CSS.
CSS
- You need to use max-width and define a rem number instead of fixed width.
- Remove all the margins as its also not ideal to measure distance.
- Change the grid type to column display and remove
place content
replace it withjustify-content, align-item
I see more hard coded numbers and also absolute position is very bad in this first solution so if you don't want the footer showing up just use
display:none
.Feel free to checkout the discord community it helped me a lot. Good luck :)
Marked as helpful2