Skip to content
OverviewSolutions
20
Comments
35

Amjad Shadid

@amjadsh97palestine810 points

Front-End Developer

Latest solutions

View more solutions

Latest comments

  • Victor•1,400
    @VictorKevz
    What are you most proud of, and what would you do differently next time?

    I am excited to have managed to tackle this challenge and implement all functionality, regardless of the difficulties I may have encountered during development.

    I underestimated the complexity of this challenge, as I initially implemented the desktop version, which was surprisingly easy as I used conditional rendering instead of routing. The tablet and mobile versions were the tricky ones and posed a challenge that forced me to use react-router for routing, as I noticed conditional rendering would have created an unreadable code.

    The current version is working as expected, and I look forward to hearing any feedback you might have on how I can improve my solution or anything I may have missed.

    I am very happy with my decision to get the Premium subscription because not only do the designs provide a clear guide on potential components you could build for reusability, but you also get a prototype that makes everything clear regarding how the software you are building is intended to behave.

    Happy coding

    Responsive | Interactive | Animated Notes App

    #motion#react#material-ui
    2
    Amjad Shadid•810
    @amjadsh97

    You did a good job! I have one comment about dark/light mood. you can do it by CSS variables without adding class for each element. you just need add dark class for body or top parent element.

    e.g: //for light :root{ --text-color: black; }

    //for dark

    .dark { --text-color: white; }

  • Amjad Shadid•810
    @amjadsh97

    @zeynabmvs Very good Job! 👏

  • Teodor Jenkler•4,040
    @TedJenkler
    What are you most proud of, and what would you do differently next time?

    What I’m Most Proud Of I’m most proud of the final result of the key-controlled calculator, which features smooth animations and engaging hover effects. The combination of accessibility and visual appeal makes the app both functional and aesthetically pleasing.

    What I Would Do Differently Next Time Next time, I want to explore creating a 3D version of the calculator using Three.js to add a unique and interactive dimension to the user experience.

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

    What Challenges Did You Encounter, and How Did You Overcome Them?

    I encountered some small TypeScript challenges, which were quickly resolved with further research and debugging. This project served as a refreshing break from my larger project, where I had been heavily focused on SCSS. It provided a valuable opportunity to practice TypeScript and enjoy a change of pace.

    What specific areas of your project would you like help with?

    Anything really, but I don't think this one has any improvements; however, I could be wrong.

    Tip-calculator-Typescript-SCSS-Animation-Accessibility

    #accessibility#sass/scss#typescript#vite#animation
    2
    Amjad Shadid•810
    @amjadsh97

    Very nice job!

    I think if you add this code to this element (".result-value") the app will not grow and shrink when you change the value.

    .result-value {
    min-width: 100px;
    text-align: center;
}
  • Amjad Shadid•810
    @amjadsh97

    nice job

  • P
    🔅 Yuliya 🐈•330
    @O-Julia-O
    What are you most proud of, and what would you do differently next time?

    Tried to use methodology BEM. Tried not to repeat the same line of code. I'm wondering how to improve the responsiveness of the site.

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

    Challenge with background, i didn't find the correct way to place it. So I still looking for the way to solve it.

    Responsive Profile Card Component HTML CSS

    2
    Amjad Shadid•810
    @amjadsh97

    good work! about background you can add this to main element: main { background: url(./images/bg-pattern-card.svg) no-repeat; min-height: 100vh; background-size: cover; background-position: center; }

  • P
    🔅 Yuliya 🐈•330
    @O-Julia-O
    What are you most proud of, and what would you do differently next time?

    I am proud of doing readable and understandable code. I used BEM Methodology for naming block.

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

    Small challenge was with margins in flexbox block_subscription. I delete them and used flex-grow.

    What specific areas of your project would you like help with?

    Did I use BEM correctly? If no, what should I change? How about responsiveness? Does it readable for you? If no, please, share you opinion!

    Any feedbacks are important! :)

    Responsive order summary component html css

    2
    Amjad Shadid•810
    @amjadsh97

    Hey Yuliya, Great work! I would like to comment on css.

    you can wrap .card__text, .card-wrapper__subscription and .card-footer with another element and then add padding 3rem instead of add margin(left and right) for each element.

View more comments