Project Website Template

Project Website Template is a responsive, lightweight HTML/CSS boilerplate for building project, personal, lab, or conference websites without complex user interactions, maintained by Yenchiah.

What is Project Website Template?

Project Website Template is a static HTML/CSS template that produces multi-page websites with a shared menu bar and footer. It takes plain HTML content plus optional jQuery UI-based widgets, and outputs a mobile- and desktop-friendly website that runs on any static host. The template is actively versioned (current v3.43) and powers production sites like Smell Pittsburgh, Smoke labeling tool, and the MMM 2024 conference. It is maintained by Yenchiah and has over 600 stars on GitHub.

Key Features

• Responsive and lightweight — The layout adapts to mobile and desktop screens without a heavy CSS framework; it is tested on macOS 12.4 (Chrome 103, Safari 15.5, Firefox 103, Edge 103), Android 12 (Chrome 103), and iOS 15.5 (Chrome 103, Safari 15.5, Firefox 102).
• Modular menu and footer — Since version 3.0, the top menu is loaded from menu.html by js/menu.js; since version 3.37, the footer is loaded from footer.html by js/footer.js, so one change propagates across the whole site.
• Two starting templates — empty.html gives a clean slate while index.html demonstrates many layout patterns you can copy; the README recommends starting with empty.html and copying from index.html.
• jQuery and jQuery UI widgets — Interactive blocks like survey questions with photo selection are available in widgets.html, built with jQuery and jQuery UI.
• Clear file separation — Custom code belongs in custom.css and custom.js; the core files css/frame.css, css/controls.css, css/widgets.css, js/widgets.js, js/util.js, js/menu.js, and js/footer.js are designed to stay unmodified for easier upstream updates.
• Real-world track record — The template runs the Smell Pittsburgh project site (smellpgh.org), the smellmycity.org citizen-sensing site, the smoke.createlab.org video-labeling tool, the TU Delft Periscope project, the MultiX Amsterdam lab site, and the MMM 2024 conference website.

Who is it for?

• Researchers and academics — Publish a project website with data, visualizations, and descriptions, as done for the COCTEAU-TUD project at TU Delft.
• Students and professionals — Create a tidy personal website to present a CV and portfolio, similar to yenchiah.me.
• Conference organizers — Build a conference site with program, call for papers, and organizer info, like the MMM 2024 website.
• Research labs — Stand up a lab website showing team members and research topics, as in the MultiX Amsterdam site.

What can you do with it?

• Project websites: Document a research project with structured sections, images, and links — e.g., Smell Pittsburgh and smellmycity.org.
• Personal websites: Present your biography, selected work, and contact links in a clean mobile-friendly layout.
• Conference websites: Announce a conference, list the program committee, and provide submission details without needing a CMS.
• Lab websites: Introduce your group, its members, and research areas with minimal maintenance thanks to the shared menu and footer.

How does it work?

Copy the template files to any static web server, open empty.html or index.html, and edit the HTML content. The menu and footer are injected into containers with the classes menu-container and footer-container through js/menu.js and js/footer.js. For interactive widgets, include jQuery and jQuery UI and copy the relevant markup from widgets.html into your page.

FAQ

Is this template free to use?

The template is open source and hosted on GitHub at yenchiah/project-website-template, so you can download, modify, and use it for your own personal, academic, or open-source project websites at no cost.

Do I need JavaScript to run it?

Only the menu bar, footer, and widgets depend on jQuery. A purely static page will render without JavaScript, but to get the shared navigation loaded you must include js/menu.js and js/footer.js on every page.

Which browsers are supported?

The README lists tested environments: macOS 12.4 with Chrome 103, Safari 15.5, Firefox 103, and Edge 103; Android 12 with Chrome 103; and iOS 15.5 with Chrome 103, Safari 15.5, and Firefox 102.

Are there any known bugs?

Yes, two issues are documented: on mobile Safari the top menu may not close after tapping the icon, and on desktop Safari the photo-selection survey widget can display photos oddly after clicking a checkbox. Both are listed as open problems in the README.

How do I contribute fixes?

The author welcomes pull requests and asks contributors to keep changes in separate files, avoid changing core template design, and explain the fix or feature in the PR description. Spam or unrelated changes will be marked as invalid.