Skip to content
OverviewSolutions
8
Comments
3
Hira
@hirashabeer

All comments

  • visualdennis•8,375
    @visualdennissSubmitted over 1 year ago

    You can find MY ANIMATION TUTORIAL HERE

    🔥 Another challenge with my own custom design on top the original fem design.

    • Landing Page Animation done in gsap.
    • Changing Words Animation done in vanilla JS.
    • Error Animations done in framer-motion (due to exit animations)
    • Input Field Animations done in vanilla CSS.

    For optimum animation experience, recommended viewing dimensions: 1440x800

    • I've built the form using react-hook-form for functions and yup for validation.
    • Modal component built by using Dialog component by headlessui
    • The placeholder text for terms of services generated by ChatGPT (who would have written all that text anw :) )

    It is also responsive for mobile.

    And finally with this submission, i've officially completed all newbie challenges 🔥

    🦊 Smoothly Animated Sign-up Form [Redesign] + [react-hook-form] 🦊

    11
    Hira•130
    @hirashabeerPosted 6 months ago

    hey @visualdenniss...could you spare a moment to review my recently solve expenses chart component solution and answer my questions pleaseeeeeeee
    i want to get rid of this headache asap

    0
  • Hira•130
    @hirashabeerSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of using some new animations ,some pseudo class elements(actually always forget the difference bw pseudo elements and pseudo classes 😁 plz explain it to me),and using JSON data file...

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

    1=> I find it extremely difficult to make the website responsive to all screen sizes i just made to y screen then to min width of 375 px .... please share some techniques to make it responsive easily and share some resources to me where i can learn the responsive techniques .(is there any tool which could make the website responsive by it self by giving it the code of one screen size 😂 ) 2=> I always try to Make the code as short as possible as i think this is good approach and makes execution fast .is it a fact or just my myth😌 ..please check my code for any improvement in logic or cleanliness 3=> I found it difficult to make the bar on hover display "another" element popup in CSS so I had to write long code in js. pleaseeeeeee🙏 share a way to do it in css 5=> In the script.js file the last part commented out is not working for me why ?

    Expenses Chart Component

    2
    Hira•130
    @hirashabeerPosted 6 months ago

    salam @0xabdulkhalid,, Could you please spare some of your precious time to answer all these 5-6 questions of mine in retrospective.....and check why the logo and favicon-32x32.png is not displaying in my site while i have added the images in my repository .. Thanks in anticipation

    0
  • Hira•130
    @hirashabeerSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    So,,,this was my second junior project on FEM.I am proud of experimenting with grid . Proud of learning to make important hamburger feature on mobile sizes .

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

    **Conquering the Hamburger! **

    Building a responsive website can be tricky, but I just tackled a tough one . I wanted to implement a hamburger menu but using display: block and none for animation wasn't working ‍♀️. Then, it hit me! By setting the popup menu to position: fixed, I could achieve the desired slide-in effect on hover ✨. This is a great learning experience, and next time, I'll explore integrating the navigation bar itself into the popup menu for a cleaner design . Onward to responsive web awesomeness!

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

    Beyond the hamburger menu, I'm keen to learn more about responsive web design best practices. Techniques like media queries sound promising for adapting my layout to different screen sizes. I'm also open to exploring responsive image optimization and accessibility considerations. ♿

    I truly appreciate any positive criticism – it helps me refine my work! With these improvements, I'm excited to create a truly responsive and user-friendly website.

    News-homepage

    1
    Hira•130
    @hirashabeerPosted 6 months ago

    hi @0xabdulkhalid ,,,could you please spare a moment to REVIEW MY WEBSITE ,and suggest me some improvents..and also help me in finding the mistake that when i previiew my site its perfect but on screenshot why does it layout gets distorted

    1