curt2023 / cintel-01-getting-started

Getting started with interactive apps

Continuous Intelligence and Interactive Analytics - Getting Started

• GitHub Pages Website: cintel-01-getting-started
• GitHub Repository: cintel-01-getting-started
• Author: Curtis Rogers

We begin with two important tools: Git and VS Code. If you are new to them, don't worry - they're relatively easy to learn and very powerful. Many of us use them throughout our career.

Note: 🚀 Rocket Tips are for learners who want to go beyond the basics. They are not required but can improve workflow, increase productivity, and make things more enjoyable.

---

1. Join the Club

1. Create a free account on GitHub, a platform that hosts project code.
2. Copy this starter repository into your own GitHub account by clicking the 'Fork' button at the top of this page.
3. Watch Git and GitHub for Beginners - Crash Course, first 20 min to get started.

2. Set Up Your Machine

Install Git

1. Download and install Git from the official Git website. Git helps manage our code and data.

2. After installation, open your terminal (PowerShell on Windows, Terminal on Mac/Linux) and configure Git with your name and email.

3. Replace "John Doe" and "[email protected]" with your name and email in the commands below.

4. Type (or paste) your version of the first command into your terminal and hit ENTER to run it.

5. When it completes, type (or paste) your version of the second command into your terminal and run it.

   git config --global user.name "John Doe"
   git config --global user.email "[email protected]"

Install VS Code

Download and install VS Code from the official VS Code website.

🚀 Rocket Tip: Invest time in learning VS Code. The more you make use of your editor, the more productive you'll be.

---

3. Customize Your Web App

We customize this web app by changing the name and colors. We'll get exposure to HTML, CSS, and JavaScript - the 3 key languages of the web, but we're not going for mastery. Learn their names and you can search for more information as needed. These exercises are designed to help explore the possibilities of these incredible, free tools we can use to create immediately useful things.

Get the Code to your Local Machine

1. Open VS Code and from the menu, select View / Command Palette.
2. Type "Git: Clone" in the command palette and select it.
3. Enter the URL (web address) of your forked GitHub repository (make sure it contains your GitHub username - not denisecase).
4. Choose a directory on your local machine (e.g., Documents folder) to store the project.
5. If prompted, sign in to GitHub from VS Code.

Make Changes in VS Code

With your repo folder open in VS Code:

1. Click on this README.md file for editing.
2. Update the README.md file by changing your name in the author link above.
3. Update the links in the README.md file to your username instead of denisecase.

Save Your Changes

1. After making changes, send them back up to GitHub.
2. In VS Code, find the "Source Control" icon and click it.
3. Important: Enter a brief commit message describing your changes.
4. Change the "Commit" button dropdown to "Commit and Push" to send your changes back to GitHub.

Test the Web Page

Use File Explorer (Windows) or Finder (Mac) to navigate to your repo folder and open index.html file with your favorite browser. I use Chrome, but most browsers should work fine.

🚀 Rocket Tip: search for the VS Code Extension: Live Preview by Microsoft and add it to your VS Code. Then, right-click on index.html and select "Show Preview" to view your web page without leaving VS Code.

---

4. Keep Experimenting

That's it! You're all set. Use the same process to modify other files in your repo.

Experiment while changing to your name and colors.

• modify index.html, then commit and push
• modify main.css, then commit and push
• modify main.js, then commit and push

Use CTRL f to find the TODO items.

🚀 Rocket Tip: Search for the VS Code Extension: Todo Tree and add it to your VS Code. Then, open the TODO Tree view icon (added to the icon column on the left) to see all the TODO items in your project.

---

5. Publish Your App with GitHub Pages

GitHub lets us publish our client-side web apps for free with GitHub Pages. Read [PuBLISH.md] to learn how to make your app available on the web.

Reminders

• Humans excel at pattern matching. Leverage this innate ability as you learn.
• Details matter! Double-check spelling, capitalization, and spacing. (A good editor helps.)
• VS Code autosaves as we work.
• Be courageous - experiment! You can't hurt anything; we learn best when something doesn't go quite right and we learn we can figure it out!
• Work with others - ask questions, share what you learn, and help others. We learn more when we collaborate.