Center-Piece

• 

  Landing Page

• 

  Rizzler's guide to div centering

• 

  Centering Challenge

• 

  Centering Challenge

• 

  Rizzler's guide to div centering: Grid

• 

  Div Playground

The tracks we are aiming for:

• most centered div
• (IJAG) I’m Just A Girl
• codedex i wanna learn stuff prize
• PearAI (YC24) prize
• (LAKOG) lowkey actually kind of good
• I laughed (first hackathon!)
• Nosu.io
• Memenome Best Don Pollo-themed hack
• Most curvy website
• (WBUOT) would blow up on tiktok
• UI/UX most kawaii
• best morgan young build your brand linkedin post (https://www.linkedin.com/posts/arshgtariq_hackathon-nosu-responsivedesign-activity-7268998211002867713-mvnO?utm_source=share&utm_medium=member_android)

Desktop Recommended for best experience :)

Inspiration

Centering divs is something all frontend developers new and old struggle with, but we wanted to make learning it not that beta

What it does

Center-Piece is a educational webpage that teaches you about centering divs the fun way!

How we built it

We used:

• HTML/CSS/Javascript to develop the UI/UX.
• Github for version control and collaboration.
• Blood, sweat and tears , and the magic of PearAI.

Challenges we ran into

• Interactive Playground: Ensuring smooth drag-and-drop functionality while maintaining real-time updates of div alignments.
• User Experience: Designing an intuitive interface for users to experiment with centering techniques without feeling overwhelmed by complex controls.
• General Connectivity: Connecting all the different elements together while ensuring smooth user experience.
• Performance Optimization: Handling multiple div elements efficiently in the Playground, especially when users try complex layouts with large numbers of elements.

Accomplishments that we're proud of

• Integrating smooth transitions and animations that enhance the experience without overwhelming users.
• Finding the perfect balance to merge all the different pages into one cohesive, flowing site.
• This being our first hackathon, we’re thrilled to have created something fun, innovative, and fully functional! :)

What we learned

• Collaborating effectively in a team environment.
• Exploring various animation techniques using only vanilla JavaScript and CSS.
• Debugging and optimizing performance while handling complex web pages.

What's next for Center-piece

• Ensure full responsiveness across all devices, with a focus on mobile, as the current design breaks functionality on smaller screens.
• Add more interactive features, such as customizable animations and layouts, to enhance user experience.
• Introduce new ways for users to interact with and customize the elements within the playground.
• Further optimize performance to handle more complex structures without any lag or issues.
• Enhance accessibility features to ensure everyone can enjoy the site.

Built With

• css
• html
• javascript
• nosu
• pearai