session-8-create-a-collection-website.md

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)
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

{% 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
   2. Vue: https://github.com/WWCodeTokyo/sample-vue-app
3. Wait for the project to load {% endtab %}

{% tab title="Vanilla Javascript" %}

Click Start from a Template > Vanilla

{% 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?

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:

{% 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 %}