Code Monkey home page Code Monkey logo

atm's Introduction

Background

AI-generated content has risen in popularity, so what is an easy way to learn how to use it?

This is a demonstration webpage on how to use Generative AI following the playbook included in this repository.

The playbook is a tutorial shared by the International Society of Service Innovation Professionals (ISSIP) on how to create your own webpage to promote "Service Innovation" using AI generated content, such as text, images, and video.

Prompts used

Claude AI (text prompt):

  • "Write me a short paragraph explaining how the ATM is an important service innovation"

Bing Image create (image prompt):

  • “happy person using an atm”

HourOne (video options selected):

  • Presenter: Emily (Christmas)
  • Voice: Nova (English, US)

The HTML webpage was coded by myself following the playbook.

How to Host a Website (with VS Code and GitHub)

A demonstration of how to host the website on GitHub Pages as done on this repository could be a good addition to the playbook.

Suggested Prerequisites

  • Make a GitHub account
  • Download Visual Studio Code (FREE!) to write HTML and Markdown
  • Download the Live Server extension in Visual Studio Code (to preview HTML webpages and see live feedback)
  • Download the Markdown Preview Enhanced extension in Visual Studio Code (to preview Markdown and see live feedback)

PART 1: Make the webpage in VS Code:

  1. Create a new folder on your computer
  2. Copy an image into this folder
  3. Right click in this folder and select Open in VS Code
  4. Create a new text file and name it index.html
  5. Follow the playbook instructions to make a webpage

TIP: You can click "Go Live" in VS Code to preview the webpage

  1. Create a new text file and name it README.md
  2. Write something to explain your work

TIP: You can use Markdown Preview Enhanced to preview your README file

  1. Go to Source Control and Initalize Repository (you may have to sign in to your GitHub account)

TIP: Write a brief message to explain what you did, like "created webpage"

  1. Commit the changes and Publish to your public repository
  2. Your files have now been uploaded onto a GitHub repository! Go to your GitHub account to check it out.

PART 2: Host the webpage via GitHub Pages

  1. Go to your repository on GitHub
  2. Go to the Settings of that repository
  3. On the left under "Code and Automation" go to Pages
  4. Under "Branch" select "main" and click Save

TIP: Hosting your webpage may take a couple minutes, so get a drink and refresh the page

  1. When it says "Your site is live" your HTML webpage is now up for the internet to see!

TIP: Edit the "About" and README.md on your GitHub repository to conveniently include the link to your site

atm's People

Contributors

aaron-thai avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.