🍡Session 8: Create a "Collection" Website
Make a microsite showcasing a list or group of things
Event Link:
Tonight's Goal
Create a minimal website featuring a collection
Getting something running
Pre-requisites
Basic HTML, CSS, and JavaScript experience
How to get started
Visit https://codesandbox.io
Pick your favorite starter stack
Click "Import from GitHub" and connect your GitHub account
Import one of the following
Wait for the project to load
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
Design Assets
Art & Design Galleries
Misc.
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
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:
Last updated