Coder's Guild

"Code, Create, Connect: Discover Your Potential with Us. Yes UCan"

Comment

Inspiration

The inspiration for this website comes from our recent college event, CITCS Week, specifically CITCS Night, which featured a cyberpunk and tech theme. This event encouraged participants to dress in futuristic attire, creating an innovative and visually striking atmosphere. The creative concept art and artwork from the Animators Guild also influenced the design and visual elements of the website. Additionally, the Coder's Guild is temporarily inactive due to internal reasons, but this website aims to showcase its potential and keep its spirit alive. It serves as a reminder that even when things are on hold, there are always opportunities for growth and learning. The website’s aesthetic is also inspired by the world of technology—particularly programming, coding interfaces, and terminal visuals—to reflect a tech-driven experience.

What It Does

  • Showcases the Guild's Mission: The website clearly presents the mission of the Coder’s Guild, its purpose, and the various opportunities it offers to students. It highlights how the guild helps students enhance their technical skills, fostering a collaborative environment where members can learn from one another.

  • Interactive Features: The site includes a chatbot to address questions and concerns about the guild, making it more interactive and user-friendly. This feature helps prospective and current members easily access information and stay connected with guild activities.

  • Membership Information: The website provides a dedicated joining page for new members who want to become part of the guild. This page outlines the benefits of membership, including access to exclusive events, workshops, and networking opportunities that can significantly enhance both personal and professional development.

  • Knowledge Tests: Features a "Test Your Knowledge" section to engage users in educational quizzes related to technology and coding. These quizzes are designed to challenge members, helping them assess and expand their knowledge while earning recognition within the guild.

  • Engagement and Learning: Aims to maintain interest and engagement within the community by offering valuable information and interactive learning tools. The guild provides numerous opportunities to work on real projects, participate in hackathons, and engage in coding competitions, all of which can be valuable additions to your resume.

  • Career Advancement Opportunities: By participating in the Coder’s Guild, members can earn credits and accomplishments that are recognized by the university. These achievements can be highlighted on your resume, showcasing your involvement in technology-focused activities and your commitment to continuous learning.

  • University Recognition: Active participation and notable achievements within the guild are often recognized by the university, providing members with a platform to showcase their skills and gain visibility among peers and faculty. This recognition can open doors to further opportunities, both academically and professionally.

How I Built It

  • Technologies Used: Developed using HTML, CSS, and JavaScript, making it flexible in design and functionality. The website is hosted on GitHub for easy access and sharing.
  • Design Focus: Emphasized UI/UX design to create an engaging user experience, incorporating parallax effects, dynamic background changes, and interactive elements that align with the cyberpunk theme.
  • Customization: Utilized open-source resources as a foundation and customized them extensively to match the cyberpunk style and showcase a tech-driven world, such as programming and coding environments.
  • Creativity and Functionality: Designed to be both visually appealing and functional, featuring animated buttons and interactive objects to keep users engaged.

Challenges I Ran Into

  • File Management: Organizing the file structure effectively and ensuring all div wrappers and layout elements worked seamlessly without causing conflicts.
  • Responsiveness: Making the website fully responsive across various screen sizes, especially for mobile devices, required extensive use of media queries and testing.
  • Time Management: Balancing the project with schoolwork, household chores, and other responsibilities required effective time management and prioritization.
  • Technical Difficulties: Faced challenges with merging CSS styles and JavaScript functions, requiring troubleshooting and debugging.

Accomplishments That We're Proud Of

I’m incredibly proud of this project and its representation of the Coder's Guild. It stands out as one of the coolest and most creatively designed projects I have worked on to date. The website not only showcases technical skills but also captures the spirit and ethos of the guild in a visually compelling way. It improved my front-end skills which I can definitely use for my upcoming subjects. Needless to say Im proud to how far I reached with this website.

What We Learned

  • Advanced UI/UX Design: Gained deeper insights into UI/UX principles, creating visually engaging and user-friendly interfaces using CSS and JavaScript.
  • Responsive Design Techniques: Enhanced understanding of responsive design, including using @media queries to adapt layouts for different devices.
  • JavaScript and Git Proficiency: Improved skills in JavaScript for interactive features and gained more experience with version control using Git and GitHub.
  • Community Insight: Learned more about the guild’s history and activities, emphasizing the importance of community spirit, even when physical events are not possible.

What's Next for Coder's Guild

  • Expand Content: Plan to add more pages about the guild’s past efforts, including previous events and accomplishments, to provide a more comprehensive view of its history and impact since I do not have access of images and data of the pasts efforts of the guild.
  • Enhance Features: Continue developing interactive features and resources to engage the community and attract new members.
  • Adding Animator's Guild: Show casing the animators guild along side the coder's guild since they are the club/organization that is currently active as of today.
Share this project:

Updates