hackbca-example-prototypes

These are prototypes for the event-related pages for the hackbca example webapp.

• index.html : homepage for the entire webapp.
• events.html: a table/list of all official events, showing basic info about each (e.g. name, location, time, date, attendance/interest, duration, type, etc.)
• events/1.html, events/2.html: info pages for specific events, showing basic and detailed info (e.g. event description, image of the location, etc.)
• eventform.html: form for adding new event or updating information about an existing one.

The prototypes are built with the Materialize Framework (https://materializecss.com/)

Working through this example:

If using VSCode, install the Live Server extension. Then, you can easily view any HTML file on your browser by right clicking and choosing "Open with Live Server."

Each HTML file contains a comment header describing what is happening, and referencing relevant Materialize documentation.

Start by looking through the progressive versions of the homepage, index.html, in the index_progress folder.

Then, check out events.html, eventform.html, and events/1.html. (You might take a peek at the CSS files and event_utils.js as well)

Your turn to practice:

You should make some prototypes for the project-related pages for this webapp:

• projects.html : a table/list of projects, showing basic info about each (e.g. owner, type, date proposed, etc.)
• projects/1.html, projects/2.html : info pages for specific projects, showing basic and detailed info(e.g. project description, tech stack, etc.)
• projectform.html: form for adding a new project or updating information about an existing one.

You may also create additional CSS and JS files.