🍡Session 8: Create a "Collection" Website

Make a microsite showcasing a list or group of things

Event Link:

Creative Coding: Make a "Collection" Website, Wed, Feb 22, 2023, 7:00 PM | MeetupMeetup

Tonight's Goal

Create a minimal website featuring a collection

Getting something running

Pre-requisites

1. GitHub Account (free)
2. Code Sandbox Account (free)
3. Basic HTML, CSS, and JavaScript experience

How to get started

1. Visit https://codesandbox.io
2. Pick your favorite starter stack

React / Vue

1. Click "Import from GitHub" and connect your GitHub account

2. Import one of the following

   1. React: https://github.com/WWCodeTokyo/sample-react-app
   2. Vue: https://github.com/WWCodeTokyo/sample-vue-app
3. Wait for the project to load

Vanilla Javascript

Click Start from a Template > Vanilla

Other

If you're experienced with another frontend toolset and can keep up with the group, you're welcome to try it, but we may not be able to answer questions during the live session.

1. Edit your code and see it render live

Pick a theme

What would you like to share via your website?

Inspiration

Places to Eat or Visit

• https://tokyoterraces.com/

Design Assets

• https://www.colordic.org/w
• https://www.awwwards.com/awwwards/collections/free-fonts/

Art & Design Galleries

• https://www.byalicelee.com/
• https://www.c82.net/

Misc.

• https://yokai.com/
• https://www.cameronsworld.net

Decide how to share your collection

Lists

This is the simplest way

• Basic HTML: https://www.w3schools.com/HTML/html_lists.asp
• React MUI: https://mui.com/material-ui/react-list/
• Vue Vuetify: https://vuetifyjs.com/en/components/lists/

Data Tables

• Basic HTML Table: https://www.w3schools.com/HTML/html_tables.asp
• React MUI: https://mui.com/material-ui/react-table/#data-table
• Vue Vuetify: https://vuetifyjs.com/en/components/data-tables/

Grids

CSS and many layout frameworks include grid systems. Learn more here

• Learn basics of CSS Grid: https://cssgridgarden.com/
• React MUI: https://mui.com/material-ui/react-grid/
• Vue Vuetify: https://vuetifyjs.com/en/components/grids/

How to deploy your website to the web

First, save your project from Code Sandbox into GitHub by creating a PR.

Next, you'll need to find a way server your GitHub repository to the web. A couple free services are available:

Netlify

A Step-by-Step Guide: Deploying on NetlifyNetlify

GitHub Pages

Vitevite_js

Instructions for deploying a static site with Vite and GitHub Pages

GitLab Pages

Vitevite_js

How to deploy a static vite site to GitLab Pages