Muhammad University Portal — A portfolio-worthy, open-source university website demonstrating semantic HTML5 structure, accessibility, and modern web standards — without a single line of CSS or JavaScript.
Muhammad University Portal is a fully functional, multi-page university website created exclusively with HTML5 for Muhammad University. It serves as both a demonstration project for semantic web development and a ready-to-deploy template for educational institutions.
Every page uses proper semantic markup — <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, and more — with no styling frameworks, no inline CSS, and no client-side scripting. The project is designed to be portfolio-worthy and production-ready for deployment on GitHub Pages with a custom domain.
| Detail | Value |
|---|---|
| University | Muhammad University |
| Website | html-university-portal.roboticela.com |
| muhammad@roboticela.com | |
| Phone | +923299148147 |
| Domain | roboticela.com |
- 13 Complete Pages — Home, About, Departments, Faculty, Courses, Admissions, Timetable, Examination, Library, Student Portal, Teacher Portal, Contact, and FAQ
- 100% Pure HTML5 — No CSS, no JavaScript, no frameworks, no external libraries
- Semantic Structure — Proper use of HTML5 semantic elements throughout
- Rich Content — Forms, tables, navigation, multimedia, lists, and definitions
- Accessibility — Skip links, ARIA labels, semantic headings, and descriptive alt text
- SEO Ready — Meta descriptions, canonical URLs,
robots.txt, andsitemap.xml - GitHub Pages — Automated deployment via GitHub Actions
- Custom Branding — Original SVG logo, favicon, and homepage preview image
- MIT Licensed — Free for personal and commercial use
Muhammad University portal homepage preview
| Home Page | Admissions |
|---|---|
| index.html | pages/admissions.html |
| Course Catalog | Student Portal |
|---|---|
| pages/courses.html | pages/student-portal.html |
The site is live at:
https://html-university-portal.roboticela.com/
- Fork or clone this repository
- Push to the
mainbranch on GitHub - Go to Settings → Pages → Build and deployment
- Set source to GitHub Actions
- The workflow in
.github/workflows/deploy.ymlwill deploy automatically - Configure your custom domain (
html-university-portal.roboticela.com) under Settings → Pages → Custom domain
No build tools, package managers, or dependencies required.
git clone https://github.com/MuhammadShahsawar/HTML-University-Portal.git
cd HTML-University-PortalSimply open any HTML file in your web browser:
# Windows
start index.html
# macOS
open index.html
# Linux
xdg-open index.htmlOr use a local development server (optional):
# Python 3
python -m http.server 8000
# Then visit http://localhost:8000Navigate the site using the main navigation menu present on every page. Key sections include:
| Page | Path | Description |
|---|---|---|
| Home | /index.html |
University overview, news, and quick links |
| About | /pages/about.html |
History, mission, and leadership |
| Departments | /pages/departments.html |
Academic schools and inquiry form |
| Faculty | /pages/faculty.html |
Faculty directory and profiles |
| Courses | /pages/courses.html |
Course catalog with filters |
| Admissions | /pages/admissions.html |
Requirements and application form |
| Timetable | /pages/timetable.html |
Weekly class schedules |
| Examination | /pages/examination.html |
Exam schedules and grading scale |
| Library | /pages/library.html |
Catalog search and reservations |
| Student Portal | /pages/student-portal.html |
Login, grades, and registration |
| Teacher Portal | /pages/teacher-portal.html |
Faculty login and grade submission |
| Contact | /pages/contact.html |
Contact form and department info |
| FAQ | /pages/faq.html |
Frequently asked questions |
HTML-University-Portal/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Pages CI/CD workflow
├── assets/
│ ├── icon.svg # Main project logo
│ ├── favicon.svg # Browser favicon
│ ├── preview.png # Social preview / README screenshot
│ ├── preview.svg # Vector fallback graphic
│ └── captions.vtt # Video captions track file
├── pages/
│ ├── about.html
│ ├── admissions.html
│ ├── contact.html
│ ├── courses.html
│ ├── departments.html
│ ├── examination.html
│ ├── faculty.html
│ ├── faq.html
│ ├── library.html
│ ├── student-portal.html
│ ├── teacher-portal.html
│ └── timetable.html
├── index.html # Home page
├── robots.txt # Search engine crawler rules
├── sitemap.xml # XML sitemap for SEO
├── README.md # Project documentation
├── LICENSE # MIT License
└── .gitignore # Git ignore rules
| Feature | Implementation |
|---|---|
| Semantic Layout | <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> |
| Text Semantics | <hgroup>, <blockquote>, <cite>, <address>, <pre>, <code> |
| Lists | Ordered, unordered, and description lists |
| Tables | <caption>, <thead>, <tbody>, <tfoot>, scope attributes |
| Forms | Text, email, password, date, time, file, search, number inputs |
| Form Controls | <select>, <optgroup>, <textarea>, radio, checkbox, fieldset, legend |
| Multimedia | <img>, <picture>, <video>, <audio>, <track> (WebVTT) |
| Interactive | <details>, <summary> for FAQ accordions |
| Navigation | Internal links, skip links, breadcrumb-style navigation |
| Metadata | <meta>, <link rel="canonical">, <link rel="icon"> |
| Time | <time datetime=""> for machine-readable dates |
| Search | HTML5 <search> element |
- Skip Navigation — "Skip to main content" link on every page
- ARIA Labels —
aria-label,aria-labelledby, andaria-currentattributes - Semantic Headings — Proper heading hierarchy (h1 → h2 → h3)
- Table Accessibility —
scopeattributes and<caption>elements - Form Labels — Every input associated with a
<label>element - Alt Text — Descriptive
altattributes on all images - Keyboard Navigation — Native HTML focus management (no JS required)
- Language Declaration —
lang="en"on<html>element
This project uses standard HTML5 features supported by all modern browsers:
| Browser | Minimum Version |
|---|---|
| Google Chrome | 90+ |
| Mozilla Firefox | 88+ |
| Microsoft Edge | 90+ |
| Apple Safari | 14+ |
| Opera | 76+ |
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Maintain HTML5 only — no CSS, JavaScript, or external libraries
- Use semantic HTML elements wherever appropriate
- Ensure accessibility with proper ARIA attributes and labels
- Test pages in multiple browsers before submitting
This project is licensed under the MIT License — see the LICENSE file for details.
Muhammad Shahsawar Khan
- Website: roboticela.com
- Email: muhammad@roboticela.com
- Phone: +923299148147
- GitHub: @MuhammadShahsawar
- Project: HTML-University-Portal
- Live Demo: html-university-portal.roboticela.com
- MDN Web Docs — HTML5 reference and best practices
- W3C — Web standards and accessibility guidelines
- GitHub Pages — Free static site hosting
- GitHub Actions — Automated deployment workflow
- Roboticela — Custom domain hosting
- The open-source community for inspiration and support
Repository Metadata
| Field | Value |
|---|---|
| Repository Name | HTML-University-Portal |
| Description | Muhammad University portal — a complete university website built with pure HTML5. No CSS, no JavaScript, no frameworks. |
| Live URL | https://html-university-portal.roboticela.com/ |
| Version | 1.0.0 |
| License | MIT |
| Topics | html5, university-portal, muhammad-university, semantic-html, accessibility, github-pages, roboticela, static-website, education, portfolio-project, pure-html, no-css |
| Keywords | muhammad university, portal, html5, semantic, accessibility, education, static-site, roboticela, forms, tables, multimedia |
| Tags | v1.0.0, html5, university, portal, release |
Made with pure HTML5 for Muhammad University