Skip to content
OverviewSolutions
31
Comments
11
Mazen Hassan
@Mazz100

All comments

  • Mazen Hassan•600
    @Mazz100Posted 4 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
  • CairoGarb•810
    @CairoGarbSubmitted 7 months ago
    What 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!

    Responsive Tip Calculator

    1
    Mazen Hassan•600
    @Mazz100Posted 7 months ago

    Well 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 helpful
    0
  • Mazen Hassan•600
    @Mazz100Posted 7 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
  • Kenny Ng•400
    @kennylun123Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I implemented 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.

    What challenges did you encounter, and how did you overcome them?

    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.

    Crowdfunding product page using TypeScript, NextJS, TailwindCSS

    1
    Mazen Hassan•600
    @Mazz100Posted 8 months ago

    Well done! I like the unique difference in visuals you got. Keep it going :)

    1
  • Mazen Hassan•600
    @Mazz100Posted 9 months ago

    Hey. 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 helpful
    0
  • Kenny Ng•400
    @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!

    Blog preview card using SASS

    3
    Mazen Hassan•600
    @Mazz100Posted 10 months ago

    Looks 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 parent div container while we could just assign a class like .main-wrapper for main and use it as a grid instead. Got the advice on my last challenge 🙂

    1
  • Mazen Hassan•600
    @Mazz100Posted 10 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 of main.

    • 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:

    SASS Nesting

    CSS Units

    Marked as helpful
    1
  • Mazen Hassan•600
    @Mazz100Posted 11 months ago

    GREAT 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
  • Mazen Hassan•600
    @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 helpful
    1
  • Mazen Hassan•600
    @Mazz100Posted 11 months ago

    Hi @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 and justify 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 you max-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 helpful
    1
  • kwokkw•80
    @kwokkwSubmitted 12 months 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!

    QR code component using basic HTML, CSS

    2
    Mazen Hassan•600
    @Mazz100Posted 12 months ago

    Hello, 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 with justify-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 helpful
    2