🍡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

Other

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 Netlify | NetlifyNetlify

GitHub Pages

GitLab Pages