---
description: Make a microsite showcasing a list or group of things
---

# Session 8: Create a "Collection" Website

Event Link:

{% embed url="https://www.meetup.com/women-who-code-tokyo/events/291265524/" %}

## Tonight's Goal

Create a minimal website featuring a collection

## Getting something running

### Pre-requisites

1. [GitHub Account (free)](https://github.com/join)
2. [Code Sandbox Account (free)](https://codesandbox.io)
3. Basic HTML, CSS, and JavaScript experience

### How to get started

1. Visit [https://codesandbox.io](https://codesandbox.io)
2. Pick your favorite starter stack

{% tabs %}
{% tab title="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](https://github.com/WWCodeTokyo/sample-react-app)
   2. Vue: [https://github.com/WWCodeTokyo/sample-vue-app](https://github.com/WWCodeTokyo/sample-vue-app)
3) Wait for the project to load
{% endtab %}

{% tab title="Vanilla Javascript" %}
<figure><img src="https://1935110066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9eH7GQkucRmuNCDFnfPv%2Fuploads%2FV0RwjPPaFZF1FwvgipUk%2FScreenshot%202023-02-19%20at%202.55.22%20PM.jpg?alt=media&#x26;token=9b306c02-9a6c-4164-a3d6-0e4e213f88c1" alt=""><figcaption><p>Click Start from a Template > Vanilla</p></figcaption></figure>
{% endtab %}

{% tab title="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.
{% endtab %}
{% endtabs %}

3. Edit your code and see it render live

## Pick a theme

What would you like to share via your website?&#x20;

### Inspiration

#### Places to Eat or Visit

* [https://tokyoterraces.com/](https://tokyoterraces.com/)

#### Design Assets

* [https://www.colordic.org/w](https://www.colordic.org/w)
* [https://www.awwwards.com/awwwards/collections/free-fonts/](https://www.awwwards.com/awwwards/collections/free-fonts/)

#### Art & Design Galleries

* [https://www.byalicelee.com/](https://www.byalicelee.com/)
* [https://www.c82.net/](https://www.c82.net/)

#### Misc.

* [https://yokai.com/](https://yokai.com/)
* [https://www.cameronsworld.net](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](https://www.w3schools.com/HTML/html_lists.asp)
* React MUI: [https://mui.com/material-ui/react-list/](https://mui.com/material-ui/react-list/)
* Vue Vuetify: [https://vuetifyjs.com/en/components/lists/](https://vuetifyjs.com/en/components/lists/)

### Data Tables

* Basic HTML Table: [https://www.w3schools.com/HTML/html\_tables.asp](https://www.w3schools.com/HTML/html_tables.asp)
* React MUI: [https://mui.com/material-ui/react-table/#data-table](https://mui.com/material-ui/react-table/#data-table)
* Vue Vuetify: [https://vuetifyjs.com/en/components/data-tables/](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/](https://cssgridgarden.com/)
* React MUI: [https://mui.com/material-ui/react-grid/](https://mui.com/material-ui/react-grid/)
* Vue Vuetify: [https://vuetifyjs.com/en/components/grids/](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:

{% tabs %}
{% tab title="Netlify" %}
{% embed url="https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/" %}
{% endtab %}

{% tab title="GitHub Pages" %}
{% embed url="https://vitejs.dev/guide/static-deploy.html#github-pages" %}
Instructions for deploying a static site with Vite and GitHub Pages
{% endembed %}
{% endtab %}

{% tab title="GitLab Pages" %}
{% embed url="https://vitejs.dev/guide/static-deploy.html#gitlab-pages-and-gitlab-ci" %}
How to deploy a static vite site to GitLab Pages
{% endembed %}
{% endtab %}
{% endtabs %}
