EduPathwayHub
              The Static website for Sri Lankan students to find ways to pursue higher education 

website link - https://n2020d.github.io/EduPathwayHub/

Abstract

EduPathwayHub was developed to address the significant challenges faced by Sri Lankan students, particularly those in rural areas, in accessing reliable and centralized information about higher education opportunities. The platform consolidated comprehensive data on government and private universities, foreign degree programs, vocational training institutes, scholarships, and online learning resources. By presenting this information in a categorized and easily navigable format, the website simplified the decision-making process for students. Designed with HTML, CSS, and JavaScript, EduPathwayHub prioritized user-friendliness and accessibility to ensure a seamless browsing experience. This project aimed to bridge the information gap in Sri Lanka's education sector, empowering students to make informed choices about their academic and career paths. Ultimately, the website contributed to promoting equitable access to educational resources, supporting students in realizing their aspirations.

Introduction

In Sri Lanka, students transitioning from secondary to higher education encounter significant obstacles in identifying and accessing the best pathways for their future. Despite the growing number of educational institutions and opportunities available, the lack of a centralized platform for reliable information has left many students, particularly those in rural areas, at a disadvantage. Educational details are fragmented across various sources, such as government websites, institutional portals, and informal social media groups, making it challenging for students to gather and compare options comprehensively. This project, EduPathwayHub, aims to provide a one-stop solution for Sri Lankan students, offering a user-friendly platform that consolidates critical information about higher education. It bridges the gap between students and accessible resources by categorizing data on local and international universities, vocational institutes, degree programs, scholarships, and other related opportunities. Through this initiative, the platform seeks to empower students with knowledge, enabling them to make informed decisions that align with their aspirations and capabilities.

Resource Utilized

1. Technologies/Programming Languages

• HTML: The website's content was structured using HTML, ensuring a responsive and organized design.

• CSS: CSS was utilized for styling and enhancing the visual appeal of the website.

• JavaScript: JavaScript was employed to add interactivity and dynamic features, such as search functions and filters for educational resources.

2. Development Tools

• VS Code: Visual Studio Code was used as the primary Integrated Development Environment (IDE) for coding the website. It provided syntax highlighting, debugging extensions, and support for multiple programming languages, including HTML, CSS, and JavaScript.

• Google Chrome: Chrome served as the primary browser for testing and displaying the website. Chrome Developer Tools were used for debugging and ensuring cross-browser compatibility.

3. Learning Resources and Tutorials

• Web Designing Lecture Notes: Course materials and notes from web design lectures were utilized as the foundation for the website's development.

• Online Tutorials: Tutorials from W3Schools on HTML, CSS, and JavaScript were referred to for gaining deeper insights and implementing best practices in web development.

4. Graphics and Multimedia Resources

• Unsplash, Pixabay and Pexels: High-quality, free images from Unsplash and Pixabay were used to enhance the website's visual appeal.

• Google Icons: Icons were added to the website interface using Google Icons.

• Official Website Links: Reliable and up-to-date content was sourced by incorporating links to official websites.

5. Hosting

GitHub Pages: The website was hosted using GitHub Pages. After development was completed, the website files (HTML, CSS, JavaScript) were uploaded to a GitHub repository, and the site was published online using GitHub Pages.

1. Research and Requirement Analysis

• Problem Identification: Existing educational platforms often target narrow segments, such as university students, or lack user-friendly navigation. The absence of a centralized hub for comprehensive higher education resources posed a significant challenge for students, particularly those in rural areas.

• Target Audience Analysis: The platform was designed to address the needs of Sri Lankan students exploring various educational paths, including degree programs, vocational training, self-learning tutorials, and professional courses, both locally and internationally.

• Research education websites standard:

---

Research the standards for professional websites. Font Family. Choosing the right fonts for a professional website is crucial for readability, aesthetics, and maintaining a polished look.

1. Sans-Serif Fonts (Modern and Clean)  Sans-serif fonts are widely used for professional websites because they are simple, clean, and easy to read on screens.  Popular Sans-Serif Fonts.
2. Roboto (Google Font) o Clean and versatile, used in many modern websites. o Great for body text and headings.
3. Open Sans (Google Font) o Highly readable with a neutral design. o Popular in professional and educational websites.
4. Lato (Google Font) o Elegant and modern with a soft appearance. o Suitable for headings and body text.
5. Montserrat (Google Font) o Bold and stylish, ideal for headlines and navigation menus.
6. Poppins (Google Font) o Clean and geometric, with a modern aesthetic. o Ideal for tech, education, or startup websites.
7. Serif Fonts (Formal and Classic)  Serif fonts convey a sense of tradition, reliability, and elegance. These are great for professional sites in industries like education, law, or finance.  Popular Serif Fonts:
8. Georgia o A classic serif font, highly readable on screens. o Suitable for body text and headings.
9. Times New Roman o Formal and widely recognized, but may feel outdated unless used sparingly.
10. Merriweather (Google Font) o Designed specifically for web readability. o Great for long-form content and professional blogs.
11. Playfair Display (Google Font) o Elegant with a classic touch, ideal for titles and headings.
12. Libre Baskerville (Google Font) o A web-friendly serif font with a classic feel. o Ideal for body text.
13. Monospace Fonts (Professional and Technical)  Monospace fonts are suitable for coding or tech-related websites where a technical appearance is needed.  Popular Monospace Fonts:
14. Courier New o Traditional monospace font for a technical look.
15. Source Code Pro (Google Font) o Modern and clean, suitable for programming websites.
16. Fira Code (Google Font) o Excellent for coding websites, supports ligatures for technical symbols.
17. Display Fonts (For Branding and Highlights)  Display fonts are best for headings, logos, or special sections but should be used sparingly to avoid overwhelming the design.  Popular Display Fonts:
18. Raleway (Google Font) o Stylish and modern, suitable for headers.
19. Oswald (Google Font) o A condensed font, ideal for bold headlines.
20. Bebas Neue (Google Font) o A bold, all-caps font perfect for impactful titles.

Best Pairings for Professional Websites

Pairing two fonts (one for headings, one for body text) creates a balanced and professional look. Examples of Font Pairings:

1. Heading: Montserrat | Body: Roboto o Modern and clean, ideal for corporate or educational websites.
2. Heading: Playfair Display | Body: Open Sans o Elegant and versatile, great for blogs or formal websites.
3. Heading: Raleway | Body: Lato o Stylish yet simple, suitable for creative agencies.
4. Heading: Poppins | Body: Merriweather o Balanced mix of modern and classic.
5. Heading: Oswald | Body: Source Sans Pro o Bold and clean, ideal for tech or startup sites. Font Sizes The standard font sizes for an educational website are designed to ensure readability, clarity, and a professional appearance. Standard Font Sizes
6. Body Text (Main Content)  Font Size: 16px–18px  Reason: This size is ideal for readability, especially for students or teachers reading large amounts of content.  Line Height: 1.5 or 1.6 (for improved readability).
7. Headings

Heading Level Purpose Recommended Size H1 Main page title 32px-40px H2 Section title 24px-32px H3 Sub section title 20px-24px H4 Smaller sub section title 18px-20px

Use bold weights for headings to emphasize them.

3. Navigation Menu  Font Size: 14px–16px  Reason: Smaller font sizes are typically used for menus to ensure they don't take up too much space.

4. Footer  Font Size: 12px–14px  Reason: Footer content (e.g., copyright information, links) can be smaller since it’s secondary information.

5. Call-to-Action Buttons  Font Size: 14px–16px  Reason: Buttons need clear and readable text but should remain compact. Best Practices for Educational Websites Using rem units for font sizes is a best practice for responsive and scalable typography. The rem (root rem) unit is relative to the root element's font size (html), typically set to 16px by default in most browsers. Advantages of Using rem.  Scalable Typography: Changing the root font size adjusts all font sizes proportionally.  Responsive Design: Easy to create consistent typography that adapts to different screen sizes by adjusting the html font size.  Accessibility: Allows users to scale text sizes in their browser settings without breaking the layout. Element Purpose Recommended rem Body Text Main content 1rem (16px) Headings (H1) Main page title 2.5rem–3rem (40px–48px) Headings (H2) Section titles 2rem–2.5rem (32px–40px) Headings (H3) Subsection titles 1.5rem–2rem (24px–32px) Headings (H4) Smaller subsection titles 1.25rem–1.5rem (20px–24px) Navigation Menu links 0.875rem–1rem (14px–16px) Footer Text Secondary information 0.75rem–0.875rem (12px–14px) Button Text Call-to-action buttons 0.875rem–1rem (14px–16px)

Font Colors Standard Color Palette Primary Considerations • Choose colors that convey professionalism and trustworthiness. • Prioritize accessibility with adequate contrast between text and background. • Use vibrant, secondary colors sparingly for emphasis or call-to-action elements. Color Type Description Examples (Hex Codes) Primary Reflects the institution's theme (trustworthy, calm). Blue (#1E88E5), Navy (#003366) Secondary Highlights important elements (vibrant, energetic). Orange (#FFA500), Gold (#FFC107) Neutral Provides balance for text and background. White (#FFFFFF), Light Gray (#F9F9F9), Dark Gray (#333333) Accent Used sparingly for CTAs or highlights. Green (#28A745), Purple (#6A1B9A) Color Scheme for an Educational Website

1. Background Colors: o Use a neutral light color for backgrounds (e.g., Light Gray #F9F9F9 or White #FFFFFF).
2. Text Colors: o Dark colors for body text (e.g., Dark Gray #333333 or Black #000000).
3. Navigation and Headers: o A strong primary color like Blue (#1E88E5) for the header and footer.
4. Buttons and Links: o Secondary or accent colors like Orange (#FFA500) or Green (#28A745). Margins The best margins for a website depend on the content layout and design style, but they should aim for balanced spacing to ensure readability, proper alignment, and a clean visual appearance.
5. Best Margins for Common Layouts Body Margins • Purpose: Create breathing space around the entire content. • Recommended Size: o Desktop: 1rem–2rem (16px–32px). o Mobile: 0.5rem–1rem (8px–16px). Main Container Margins • Purpose: Define the space between the main content and the edges of the browser window. • Recommended Size: o Desktop: 2rem–4rem (32px–64px). o Mobile: 1rem–2rem (16px–32px). Header and Footer Margins • Purpose: Create balance between sections and make the header/footer distinct. • Recommended Size: o Top/Bottom Margin: 1rem–2rem (16px–32px). o Left/Right Margin: Often 0 (headers and footers typically span the full width). Section Margins • Purpose: Separate different sections of content for better readability. • Recommended Size: o Between sections: 3rem–5rem (48px–80px). Paragraph Margins • Purpose: Add space between blocks of text for readability. • Recommended Size: o Top/Bottom Margin: 1rem (16px). Image Margins • Purpose: Prevent images from touching adjacent elements. • Recommended Size: Around images: 0.5rem–1rem (8px–16px).

---

• Platform Features: Core features were identified, including sections for degree programs, courses, career guidance, study resources, and expert insights.

2. Website Structure and Design

• Wireframing and Layout Planning: Initial wireframes were created to outline the structure of the website, ensuring seamless navigation between categories such as universities, Resources, courses and Pro Insights. Hand-drawn sketches were used for visual planning.

• User Experience (UX) and User Interface (UI) Design: The design focused on creating an intuitive and user-friendly interface. Google Icons were used for navigation, while high-quality images from Unsplash and Pixabay enhanced visual appeal.

• Responsive Design: The website was designed to function seamlessly across devices, including desktops, tablets, and mobile phones, utilizing responsive CSS techniques. (Used CSS media queries)

3. Development Process

• HTML and CSS for Structure and Styling: HTML was used for structuring content, while CSS ensured the website’s visual appeal. Visual Studio Code (VS Code) was used as the primary IDE.

• JavaScript for Interactivity: JavaScript was implemented to introduce dynamic features such as s dropdown menus, and interactive buttons, enhancing user engagement.

• Content Integration: Accurate and updated content was sourced from official university websites, YouTube tutorials, and educational platforms, forming a comprehensive resource library.

4. Content Management and Categorization

• Organized Educational Resources: Resources were categorized into sections such as government universities, Private Universities, courses, pro insights and online courses to ensure easy navigation.

• Embedding Multimedia and External Resources: YouTube videos were embedded for tutorials, and links to official websites were included to provide credible and accurate content.

5. Testing and Debugging

• Responsiveness Testing: The website was tested across various devices, including desktops, tablets, and smartphones, to ensure consistent functionality. (Used Chrome Developer Tools)

7. Deployment and Maintenance

• Hosting: The website was deployed using GitHub Pages, allowing for free and reliable hosting.