Skip to content
OverviewSolutions
5
Comments
4

Shaimaa01

@Shaimaa01200 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Shaimaa01•200
    @Shaimaa01

    I wanted to share a helpful resource for creating a background image with a dashed effect. You can use this website: Dashed Border Generator. It allows you to customize the dashed effect and use it as a background image instead of a border, which can look even better. It's highly customizable and might add a nice touch to your design!

    Marked as helpful
  • joe joe ntekim•310
    @0147ntekim
    What are you most proud of, and what would you do differently next time?
    1. What did you build? I built a Ticket Generator using React and TailwindCSS that allows users to register for an event and generate a visually appealing digital ticket. The form collects user details such as their avatar, full name, email, and GitHub username. Once submitted, it dynamically generates a ticket with a unique design, including curved edges, a rotated ticket number, and a background pattern.

    Key features include:

    Drag-and-drop image upload for the avatar Dynamic form validation A visually styled ticket with a custom shape Navigation between the form and the ticket page

    1. What did you learn? Through this project, I deepened my knowledge in: ✅ Advanced TailwindCSS – Creating custom shapes using clip-path and layering background images ✅ Handling file uploads in React – Using the FileReader API for previewing uploaded images ✅ State management & form handling – Managing user inputs and dynamically passing data between pages ✅ Routing in React – Navigating between the form and the generated ticket while preserving user data
    What challenges did you encounter, and how did you overcome them?

    One challenge I faced was accurately shaping the ticket card with rounded cutouts and aligning the dashed separator line. Getting clip-path to work correctly required trial and error. Additionally, ensuring the background pattern blended seamlessly into the design took some tweaking.

    I’d love feedback on:

    Optimizing the ticket shape – Are there better ways to achieve the cutout effect? Improving accessibility & responsiveness – How can I make sure the form and ticket look great on all screen sizes? Enhancing the user experience – What additional features could make the ticket generation process smoother?

    Ticket - Generator

    #react#react-router#tailwind-css#vite#post-css
    2
    Shaimaa01•200
    @Shaimaa01

    I wanted to share a helpful resource for creating a background image with a dashed effect. You can use this website: Dashed Border Generator. It allows you to customize the dashed effect and use it as a background image instead of a border, which can look even better. It's highly customizable and might add a nice touch to your design!

  • Adriano•330
    @adriano-wb
    What are you most proud of, and what would you do differently next time?

    I am proud of having done this form so accurately, of course it is not one of the best, but I can see the difference in my ability between today and two years ago. I feel that I need to learn new technologies to benefit from the time spent developing projects and the quality of my code for other developers.

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

    The only challenges were sending the form, as I am a perfectionist, I thought about sending it for real, however, I had to improvise using fetch to display the success message.

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

    I would like to know which technologies could help me even more in this type of project. What are the current trends?

    Responsive contact form with HTML, CSS, and JS

    #fetch
    2
    Shaimaa01•200
    @Shaimaa01

    use formik with yep https://formik.org/docs/tutorial#schema-validation-with-yup

    Marked as helpful
  • Shaimaa01•200
    @Shaimaa01

    In the second section (.main__grid-images-section__grid-images-container__grid-image-container), I noticed a few areas that could be improved to better align with the original design:

    Background Color: The original design uses #093F68, but the current implementation has #3EE9E5. It would be great to match the original background color for consistency. Border Radius: The border radius currently seems too small. Increasing it to 45px would enhance the design and add a smoother, more modern look.

    For the desktop view: The width of each feature is too small, causing the headings (e.g., Indulge your passions) to wrap onto a second line. Adjusting the width to prevent wrapping would improve readability and match the design.

    In the mobile view: The background color for each feature has been removed, which is inconsistent with the design. It might be better to restore the background color to match the original layout.

    Marked as helpful