Introduction and Project Overview:
The AlumniConnect website is designed and developed to serve as a platform for university alumni to stay connected and informed about upcoming events. The website consists of four main pages: Home, Events, About, and Contact Us. The Home page provides an overview of the website's aims and objectives, while the Events page categorises upcoming events as campus events. The About page displays information about the team members behind the website, highlighting their technical expertise. The Contact Us page includes a form for students to reserve their slots for events they want to participate in.
Discussion on CSS Styling:
In styling the website, CSS (Cascading Style Sheets) was utilised extensively to enhance the visual appearance and layout. Skills learned in CSS include:
Selectors: Used to target specific HTML elements for styling, such as headings, paragraphs, and buttons.
Properties and Values: Applied various CSS properties to control aspects like colour, font, size, margin, padding, and background.
Box Model: Utilised to control the spacing and layout of elements by adjusting margins, padding, and borders.
Flexbox and Grid: Employed Flexbox and Grid layouts to create responsive and flexible designs, ensuring proper alignment of elements on different screen sizes.
Media Queries: Implemented media queries to make the website responsive, adjusting styles based on the device's screen width and orientation.
Discussion on Markup Development:
HTML markup was used to develop the structure and content of the website, incorporating the following skills:
Semantic HTML: Utilised semantic elements such as
, , , , , etc., to provide meaning and structure to the content, enhancing accessibility and SEO.
Lists and Tables: Employed lists for navigation menus and tables for organising event information.
Forms: Created forms for user interaction, such as the reservation form on the Contact Us page.
Links and Images: Incorporated links to navigate between pages and images to enhance visual appeal and provide context to the content.
Discussion on Responsive Design:
To make the website responsive and adapt to various devices and screen sizes, several techniques were employed:
Fluid Layouts: Utilised percentage-based widths and flexible units like em and rem to create fluid layouts that adjust to different screen widths.
Media Queries: Implemented media queries to apply specific styles based on breakpoints, ensuring optimal layout and readability on devices of various sizes.
Responsive Images and Videos: Used CSS techniques and HTML attributes to ensure that images and videos scale appropriately and maintain aspect ratios across different devices.
Mobile-first Approach: Adopted a mobile-first approach, focusing on designing and optimising the website for smaller screens first before scaling up for larger devices.
Conclusion, Challenges, and Technical Recommendations:
In conclusion, the AlumniConnect website provides a user-friendly platform for university alumni to stay connected and engaged with upcoming events. However, several challenges were encountered during the development process, including:
Ensuring cross-browser compatibility and consistent rendering across different web browsers.
Optimising performance by reducing page load times and minimising resource usage.
Enhancing accessibility to ensure that the website is usable by people with disabilities.
To address these challenges and further improve the website, the following technical recommendations are proposed:
Conduct thorough testing across various browsers and devices to identify and resolve any compatibility issues.
Optimise images and multimedia content to reduce file sizes and improve loading speed.
Implement accessibility best practices, including proper semantic markup, keyboard navigation, and ARIA attributes, to ensure compliance with web accessibility standards.
By addressing these recommendations, the AlumniConnect website can continue to evolve and provide a seamless experience for university alumni, facilitating communication, collaboration, and engagement within the alumni community.
collaborators:-Emmelance Ucunguyabe
Email:e.ucunguyab@alustudent
-Nelly Iyabikoze
Email:n.iyabikoze@alustudent.com