ederchrono/QuickFrontendScaffolding.md

## QuickFrontendScaffolding.md

      
    Raw
  

              QuickFrontendScaffolding.md
            
          
    From zero to product page

This is a collection of links and snippets for the workshop.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome app</title>
</head>
<body>
  
</body>
</html>
Tailwind

Go to Site
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Live server

# from https://github.com/tapio/live-server
npm install -g live-server

Tailblocks

Go to Site
Tailwind UI

Go to Site
TailwindComponents

Go to Site
Admin template

Go to Site
Netlify Drop

Go to Site
Users fake API

Save this in api/users.json
{
  "users": [
    {
      "name": "Jhon",
      "email": "jhon@wizeline.com"
    },
    {
      "name": "Jack",
      "email": "jack@wizeline.com"
    },
    {
      "name": "Ann",
      "email": "ann@wizeline.com"
    },
    {
      "name": "Karen",
      "email": "karen@wizeline.com"
    }
  ]
}
Vue

Add Vue 3 to site
<script src="https://unpkg.com/vue@next"></script>
Initialize Vue app
<script>
Vue.createApp({
  data() {
    return {
      users: []
    }
  },
  mounted() {
    // TODO: fetch users and display them
  }
}).mount('#user-list')
</script>