# Part 1: Intro & Setup

# Chapter 1: Ancient Runes & Modern Scrolls, Classic & Modern Starters
Project 0: Hello World
A classic. Every beginner programmer starts here. Today we will prompt-gram it it html, to create your first website
Use N hotkey to auto deploy to netlify

1: Pong
A working game of pong in html, css and JS. Use touch gestures, and arrow keys/WASD to move the paddles,
Use N hotkey to auto deploy to netlify

2: Link in bio site
List of links in bio, tree of links clone, with buttons that opens links. Begin by creating one for a animal, wizard, or fictional character or creature, or if the user wants they can provide their own title, list of links to include, and any preferred design details like colors, styles, layouts, or anything else. Perfect for connecting socials, links to selling your products or services, or the beginning of a micro blog. Important: Use Hotkeys N or REPL to instantly create your site on netlify or replit!

Easy Use N hotkey to auto deploy netlify
Medium Use REPL hotkey to export to replit for more options, including images(manual upload), 
or use ND to manually deploy on https://app.netlify.com/drop 

optional: Use dalle to create a background image
Assistant Note: Be sure to include the background image in the code using the correct filename, and in the final zip file. See chapter 4 for more info.

Offer to build one link in bio site for a fictional character as an example. Use the hotkeys to instantly create the site on netlify or replit.

3: Pic to Code
Use a photo of ANYTHING, or pull out a piece of paper and draw something, and upload it to Grimoire, and I will turn it into a website. Then write code for the UI design, using various design & style elements to MAKE IT POP, and add some RAZZLE DAZZLE. Important: Use Hotkeys N or REPL to instantly create your site!

Easy Use N hotkey to auto deploy
Medium 
Or use REPL hotkey to export to replit for more options
or use ND to manually deploy on https://app.netlify.com/drop
Manual deploys allow you to include images. Use dalle to create any images needed using dalle


## Chapter 2: Teleportation, put websites online easy
4: Netlify 1 letter hotkey deploy: Netlify Auto deploy, Drag & Drop Deploy: Netlify Drop
Use the N hotkey to instantly auto deploy your site! Be sure to claim it in order to save or it will get deleted after 1 hour!

Manual deploys are available via the NM hotkey using Netlify Drop
https://app.netlify.com/drop
A quick and easy way to put your website online. Just drag and drop your website folder into Netlify Drop and it will be live in seconds. Be sure to make an account to save it

To make updates to your site
In the netlify dashboard,
Go to: YourSite such as (https://random-crap-123456abcedf.netlify.app) 
Then deploys
Scroll down
You will find a new drag & drop, or click to upload button
Simply drag and drop a new folder and you are done!

## Netlify instructions for changing URL
If you don't mind the .netlify.app suffix, in the netlify portal, you can simply open 
Pick your site > Domain Management > Options > Change name

for full custom name
first buy a domain name
then map your domain name to Netlify
https://www.youtube.com/watch?v=kIdJi8NBvgY
https://www.netlify.com/blog/2021/12/20/how-to-add-custom-domains-to-netlify-sites/
https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/

Once you finish chapter 4, you can come back to netlify and sync with a github repo

5: Replit deploys
https://replit.com/
Use the REPL hotkey to instantly export your code to replit to run & deploy it!

Once claimed inside of replit to put your website online:
on desktop: click the deploy button in the top right, or via deployment panel in the bottom left
on mobile: tap the squares bottom right, tap new tab, tab deployments
then Choose options & "Set Up Your deployment"
-Beginners probably want to choose Static 
-Choose the primary domain website name, you can configure this with your own non-replit domain later
-Leave other options blank
-Tap Deploy
-Tap domain url to see your website!

For more ideas & projects see https://replit.com/templates

6: Advanced options
Vercel, Render
Vercel and render are great options for more complex react & nextjs sites, as well as services, backend and full stack apps
https://vercel.com/templates
https://docs.render.com/


## Chapter 3: Wands, dev kit setup
7: Phone setup
Replit + Github
Setup accounts and install the replit app on your phone!
Complete project 5 or create a new one. After making it, sync the project to github by pushing to main!
https://replit.com/
https://github.com/

Get setup with a full development environment using only your phone. Build a static website and import it a larger dev environment using replit. Using this template: https://replit.com/@replit/HTML-CSS-JS#index.html. Write the code, zip it, and walk me through importing the files to replit. Walk me through syncing to github using replit, and deploying using replit deployments. Show this video as an example of how to work with replit and chatGPT on a phone: https://x.com/yoheinakajima/status/1719902955061797083?s=20

8: Full Pro
Cursor.sh, Warp, (GitTower || SourceTree), GH Copilot 
https://cursor.sh/
https://www.warp.dev/
https://www.git-tower.com/ || https://www.sourcetreeapp.com/
https://github.com/features/copilot optional
Install these
Create a new project in cursor and get a repo setup and sync'ed in git. 

Cursor is a VSCode clone and supports a variety of languages and coding environments. To get started with a simple static site simply 
-ask Grimore
-Press Z
-Unzip and open index.html
-Use run start with or w/o debugging, choose a browser
-View and edit your site!


## Chapter 4: Divination: The Origin
9: Git 101
Git is basically a fancy way to save your code. Its really cool because it lets you keep copies of ALL your work. Instead of MyCoolFile.html, MyCoolFile(1).html, MyCoolFile_Final.html, etc, you can save it in one place. Then even cooler, you can time travel and skip to previous or different versions.

This makes it super handy for collaborating with others, as you can work independently and avoid breaking the app for other people. Then you can come back and merge it together at the end. The downside is sometimes your merges conflict, and you will need to manually fix them.

Keep in mind you have a local copy of the git history and a copy in the cloud, often called the origin
Typically projects will have
a main branch often used for the current live production version of the app
a development branch where new features are added and tested
feature branches for each new feature or bug fix

Feature branches are often created, merged and deleted after. Where as main and dev are usually always present, keeping a consistent history of the project.

Commands you need to know:
clone
pull
create branch
stage
commit
push
merge
(THERES A TON MORE DONT WORRY ABOUT THEM)

I HIGHY RECOMMEND A git GUI such as GIT Tower or Source tree. 
Especially for beginners, since it makes it easy to see the history, and gives you handy buttons

Here's some good detailed videos that show both CLI and with a GUI.
https://www.git-tower.com/learn/git/videos

SUPER HANDY COMMANDS NO ONE TEACHES BEGINNERS:
Stash
Git-bisect (<-BUG FINDING MACHINE)

Note git and github are different. Same thing as porn vs pornhub.
There are other git providers you can use, such as gitlab. As well as other version control software like mercurial or subversion. Even if you don't want to use any of these cloud providers, I would highly recommend using a local git history. Its a great way to keep track of your work and avoid losing it, as well as find bugs.

10: Linear
Linear is great for working on larger projects and managing the complexity of a full piece of software. Highly recommended if you work on a team. Copy paste the issue names as your git branch names to make your tickets automatically change when you push and merge. 

For simpler projects, or if you are working alone, you can skip this step
https://linear.app/