Intro to HTML5: Development Environment Setup Flashcards
Command Line Interface (CLI)
A command line program that accepts text input to execute operating system functions.
Windows OS Command Line Interface (Win CLI)
Command Prompt (a.k.a. CMD Program)
Macintosh OS Command Line Interface (Mac CLI)
Terminal
File System (fs)
An integral part of every OS. Functions Include:
- Managing the folder/directory structure
- Providing an index of files
- Defining syntax for the paths to files
- Dictating file names, max size, and storage capacity.
Windows OS File System’s Name
File Allocation Table (FAT)
Macintosh OS File System’s Name
Apple File System (APFS)
File System Commands
Utilities which allow you to manage the files you download or create. They are designed to operate on file systems.
Are File System Commands Universal?
No. They are operating system (Windows vs. Mac) specific. However, there are SOME universal commands that work on both OS.
Confirming App Installation on CMD Program (Windows)
- Open Command Prompt
2. Enter: “AppName –version” (Ex: “node –version”)
What Does NPM Stand For?
Node Package Manager
What does NPM do?
Two main functionalities:
- Online repositories for node.js packages/modules => searchable on search.nodejs.org
- Command line utility to install packages, do version management, and dependency management of Node.js packages.
Program Plugin Global Installation Stepts (CMD Program - Windows)
- Open CMD Program
- Enter: “ProgramName” “Install” “-g” “Plugin-Name”
(Example: “npm install -g browser-sync”)
What is “-g” in a CMD Program Installation
“-g” = “Globally”
Installs Program/Plugin “globally” (all users on PC) rather than locally (active user doing installation only)
GitHub
A website for hosting source code in Git. It is the most common place to share and collaborate on open source projects, and can also be used to host private repositories for companies.
Git
A Distributed Version Control System
Steps: Setting Up GitHub Hosting
- Create a Repository
- Repository’s Settings > “Pages” Section
- “Source” > Select Branch > Select Folder > Save
* Optional: Theme Chooser > Pick Theme* - Site URL Created and is Ready to be Published
- Create an “index.html” file > Save Somwhere in Repository’s Folder located locally on PC
- Host All Code in the “Main” Branch
Steps: Using GitHub for Hosting
- Pull Repository onto Local Machine
- Create a Sub-Folder/Directory in Main Repository (Local)
- Create & Save an “index.html” file into local Sub-Folder (Using Sublime Text)
- Commit Changes (Sub-Folder)
- Push Committed Changes into Remote Repository
- Check GitHub to Confirm Local Changes Added to Remote Repository
GitHub Hosting (Step 1): Pulling Remote Repository onto Local Machine
- Copy Repository’s Link (“Code” Section of Repository’s Page on GitHub > “Main” Branch > Green “Code” Button > Copy “.git” URL)
- Open CMD Program (Win) or Terminal (Mac)
- Enter: “git clone (Paste URL)”
GitHub Hosting (Step 2): Creating Local Sub-Directory
- In CMD Program (Win) or Terminal (Mac)*
1. List Command (Win = “dir” / Mac = “ls”)
2. Change Directory Command: “cd (Repository’s-Main-Directory)/”
3. List Command Again
4. “Git Status” Command (Shows Current Branch & Changes Made, if any) > Confirming in the Right Place. - *Switching Branches: “Git Checkout (Branch Name)”
5. Make Directory Command - Makes Sub-Folder (“mkdir (Directory’s Name)” or “md (Name)”)
6. Change Directory Command Again > Into Sub-Directory “cd Sub-Directory-Name/”
GitHub Hosting (Step 3): Creating Source File (index.html) in Sub-Directory
- In Sublime*
1. Open New/Empty File
2. Save File as “index.html” in Sub-Directory Folder (Path File (Win): C:\Users\User\Main-Directory\Sub-Directory)
3. HTML Template (“HTML” + Ctrl + Space into Line 1)
4. Enter Title Content Between &
5. Enter H1 Content Between <h1> & </h1>
6. Save File
GitHub Hosting (Step 4): Comitting Changes
- In CMD Program (Win) or Terminal (Mac)*
1. Confirm location is in Sub-Directory (cd into it if not)
2. “Git Status”: Confirms Directory Location & Change(s) status
3. Move to Main Directory (Either “cd (dir. name)” or “cd ..” = one directory up from current)
4. “Git Status” (Name in Red) = Changes Not Committed nor Marked
5. Marking (Specific file(s): “git add “ or All Changes in Local Folder: “git add .”)
6. Git Status > Newly Marked File Highlighted in Green
7. “Git Commit -m “Message in Here” (-m = Req. for Message)
8. Git Status > “(…) by 1 commit” = Changes Have Been Committed Locally
GitHub Hosting (Step 5): Pushing Committed Changes to Remote Repository
- In CMD Program (Win) or Terminal (Mac)*
1. “Git Push” > Push Local Changes to Remote Repository
2. “Git Status” > “Working Tree Clean” = Repository Successfully Pushed to Remote
GitHub Hosting (Step 6): Confirming Changes are in GitHub
- In GitHub*
1. Go to Repository > “New Files Posted”
2. Checking Web Page: Original URL for Web Page (NOT Repository) + “/Sub-Directory-Name” Added on end > New Page & its changes should appear
Browsersync
A plugin for node.js/npm that watches HTML and CSS files and performs live reloads to page in browser when changes are made. Tweaking/Testing made faster de to its synchronizing of file changes and interactions across all devices.
Browsersync: Start Command
“browser-sync start –server –directory –files “(Asterisk)”
Breakdown of Browsersync “Start” Command
(Browser-sync Start): Telling Browsersync hich Action to Perform
(–server): Starting in Server Mode (Like a Local http Server)
(–directory): Provides Directory Listing of Current Folder
(–files “…”): Which Files to Look for
(–files “*”): The Asterik tells B.S. to reload everything no matter what
Full Start Command Options:
Reload All Files: Browser-sync Start –server –directory –files “Asterisk”
Reload Specific File(s): Browser-sync Start –server –directory –files “File(s) Name(s)”
How to Use Browsersync
- Starting Browsersync opens a new window (URL: localhost:3000)
- Select File Being Edited (Files Listed Under “~/”)
- Keeping Browser Open > Make Edits to File in Sublime
- Save File > Browser Updates Automatically
