LaunchCodeNotes/Textbook/B. Assignments/A4.HTML Me Something.md at master · jrcharney/LaunchCodeNotes

Assignment #4: HTML Me Something

[toc]

Assignment #4 is a rare case where I want to write out the assignment, namely because it has a lot of important stuff for using Git, Github, and Github Pages.

Background

First, a little bit of background.

Github Pages uses Jekyll, which was made in Ruby, another programming language. The plus side with using Jekyll is that we can use Github Flavored Markdown (a sub set of Markdown) to write content in pages quickly without having to meddle with HTML.

But we're learning node. What if we want to deploy a Node.js set up using a MEAN stack (MongoDB/Express/Angular/Node)? This course does have us fiddling with Angular later, of which TypeScript will be there.

Those are all some very important questions which will be answered in due time.

The assignment

You've learned a bit of HTML and some CSS, but have only scratched the surface so far by adding or modifying content in exercises, or pre-existing files. In this assigment, you are going to take another great step forward by building an entire page from scratch.

While the assignment does say you only have to make one page, over time you'll want to revisit this assignment and build upon it. I know I will!

You will also get some practice using Git. You won't need to worry about branching or merging, just the basic stuff.

There are two parts to this exericse. One focuses on HTML. The other focuses on CSS. HTML makes up the structure and content of a web page, while CSS defines the visual style.

Remember this diagram:

Best practices dictate that content and style should be kept as separate as possible. (I'll add some code snippets to help with that.) TO that end, we will build the HTML portion of our page first, and afterwards, we will add a few styles with CSS. We do this to avoid using HTML tags to change the general apperance of our pages. Inline styles should only be used in rate cases, and even if you do use them you should define classes for stuff like that whenever able. (Be glad you didn't have to endure how folks applied styles prior to HTML4. That's ancient history, and we're learning history post-1980s as far as I'm concerned!) Still, inf you need to use the style attribute in an HTML tag, use it sparingly.

Getting Started

🏗️ You need a Github account at this part! If you haven't signed up for Github yet, do so.

🏗️ You need to install Github first! Windows users can get it here, as well as the simple Bash set up we need to so some of the stuff here.

📖 Did you read chapters 19 through 22? To understand how to use just about everything in this assignment, you need to read these chapters first.

Follow the steps below to create a folder for your project and initialize it as a Git Repository.

Setup the project

ℹ️ NOTE: When we speak of Bash here, we are talking about the terminal. Bash is our default shell, but if you are using Zsh, that's fine too. If you are using Git Bash (Bash that came with Git for Windows), that also applies here when we speak of "Bash".

Navigate to the home directory of Bash, or if you have a cloud directory (Microsoft One Drive, Google Drive, or Mega, you can start this project there) so as long as you remember where you put this project later. We want to put all of our Launch Code stuff in a directory called lc101.
```
$ cd ~/OneDrive/2020
$ mkdir lc101
$ cd lc101
```
Make a new folder for this assignment called html-me-something. This directory should be in the lc101 folder.
```
$ mkdir html-me-something
```
ℹ️ NOTE: We could have created two directories at one time. The -p attribute will allow us to make multiple, nested directories.
```
$ mkdir -p lc101/html-me-something
```
Then we can navigate to it
```
$ cd lc101/html-me-something
```
If you have a Mac or Linux, you can probably us a command called tree to show the relationship between the two directories.
```
$ tree lc101
lc101
|- html-me-something
```
Go into the html-me-something directory and use touch to create your HTML file. The homepage on any website is called index.html, though the prefix may be different depending on how your website is deployed. Since this is supposed to be a simple assignment, we just need to make an index.html file. We can make other HTML files with different names (e.g. bananaphone.html) some other time, but for now, we need an index.html file.
```
$ touch index.html
```
ℹ️ NOTE: Alternatively, we could have used touch in the parent directory or just opened a new file called index.html with a text editor.
```
$ pwd
lc101
$ ls
html-me-something
$ ls html-me-something	# returns nothing because nothing is in it yet
$ touch html-me-something/index.html
$ ls
index.html
$ nvim html-me-something/index.html		# opens a text editor 
```
ℹ️ NOTE: If you find yourself stuck in vim or Neovim (nvim) by accident, hit the ESC key, then enter the command :q! followed by ENTER. This will force vim to quit.

I don't care what Shawn thinks! Learning Vim can be easy AND FUN!
ℹ️ **The file name index.html is a standard convention for the name of the root page of a website. Most web servers will treat index.html as the default file to load from a given directory.
Open your new file in a text editor. I recommend using VS Code, but if you are looking for something lighter, consider using something like Notepad++ or NeoVim. For simple stuff and quick edits, I recommend using a text editor that can be opened in the shell (i.e. nano, vim, or neovim), but if you don't know how to use any of htose things, use a graphical text editor (Notepad++). Write an HTML file.
😞 UNBELEIVEABLE! What is this crap?! "Add a single line with the following HTML: <p>YOUR NAME</p>"?! HTML DOES NOT WORK THAT WAY!

The author of this assignment thinks you can get buy just making a paragraph with your name in it. But that is syntactically wrong!

When you write an HTML file, it should have the following items:
- A <!DOCTYPE html> on the first line.
- An <html> element to put everything in with <head> and <body> children.
- A <head> to put your <meta>, <title>, and <link> tags in.
- A <body> to put that <p>Your Name</p> in.
If your HTML page doesn't have those items in them, it's not a very good page.

TLDR: Your page should look like this
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>LC101 - HTML Me Something</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <h1>Jason Charney</h1>
    </body>
</html>
```
We'll worry about the style.css file and semantic HTML elements later.
ℹ️ Note: If you are using vim or nvim, the command to insert text (which enters "Insert Mode") is i ("i for Insert"). If you type a ("a for Append"), the cursor will start at the next character. If you use capital I or A, insert mode will start at the first or last character of a line, respectively.
Save your file.

ℹ️ Note: If you are using vim or nvim, the command to save a file is :w. Remember when you use one of these editors, you need to press ESC to enter command mode and use ENTER to execute a command that starts with :. To exit the editor, use :q.
Finally, open the file in a web browser. Use pwd to identify your present working directory if you need to. In the browser, you can go to a file on your computer by typing file:/// followed by the path to the file.

ℹ️ Note: If you are using Windows, you will need to enter the path but replace the backslashes with forward slashes.

For example, my lc101 folder is located in C:\Users\Jason\OneDrive\2020, so I have to go to that directory in my browser through file:///C:/Users/Jason/OneDrive/2020/lc101.

If I were using a Linux system and storing this project on Google Drive, I probably would have created the lc101 directory in '/home/Jason/Google Drive/2020' which would have been entered into the browser as file:///home/Jason/Google%20Drive/2020/lc101 .

If I were using a Mac and using something like MEGA, I probably would have created in in file:///Users/Jason/MEGASync/2020/lc101.

Whatever you use and wherever you put your lc101 file, put it somewhere you can remember it.

Use Git

Let's incorporate Git into our project.

Because websites change, screenshots should change too. As of March 2020, here's what the top part of GitHub.com looks like. I didn't want to show everything in my browser.

Step 1. Go to Github.com click the green button

As the first step of part of the assignment, click the green New button in the left column.

Step 2. Fill out the New Project form

You will then be taken to github.com/new to fill out a form to create a new Git project. While this assignment wants you to create a project called html-me-something, I'm going to do something similar to that and set up a project to establish my own Github Pages site thorugh Github. Generally, it is your username followed by .github.io. So by the end of this part, we should have jrcharney.github.io set up.

There are a few things happening here.

Since I am the owner of my project, I don't need to change that. If you are part of a team, you may wnat to change that field. I want to call my project jrcharney.github.io. I can add a description describing what it is.

I could set the repository to Private, but it would only be visible to me. Besides, you can keep stuff on your computer until it is time to publish it, so leave the Public radio button checked.

A good Git project has a README file (called README.md). We can use it here to send a message to people to go to the website instead of the repo.

Adding a .gitignore file is a good idea if you are using an IDE (Independent Development Environment) like Visual Studio Code. If you are using VS Code, I would recomment choosing VisualStudio. I should devote a section to stuff that you can use .gitignore for, but I'll do that another time.

ℹ️ NOTE: In retrospect, I should probably have also checked to see if there were setting for Node.js. You can add more stuff to ignore using gitignore.io. For instance, it would be more accurate to apply things that should be ignored in Node.js and Visual Studio code. We'll edit our .gitignore later.

Another thing you should consider is adding a license to your project. If you are creating a project that will be distributed to other systems, it's a good idea to add a license file (which will generally be located at LICENSE) telling people how they can legally use your software. It's intended to make sure your work is recognized and attributed if other people use it. I generally recommend the MIT License.

Once that is done, take a deep breathe, click the green Create Repository button!

Step 3. Set up your page for Deployment

After letting that dramatic breath of air out of your body to let the stress exit your body. Take a look at the three files that are in your repository.

The page you are looking at on your GitHub page is is your README.md. You could edit it here, but we want to practice doing that stuff with Github in the command line.

Click on the ⚙️ Settings link on the page's tab bar.

The setting page should look something like this.

Because the person who designed this page didn't put a module to scroll down to the part of this page that we want that controls Github pages.

Scroll down until you see that section.

Step 4. Change the Source Branch

By default this is likely set to None, but we want to change it to master branch. The Master Branch is where all the stuff is applied by default in a Github project unless it is changed to something else.

When that is done the Github pages section should look something like this.

If you are building a website ending in .github.io, this step is already done, and the page should look something like this.

ℹ️ NOTE: If you get a 404 Message, give it a few minutes for GitHub to process that you are you are creating a new page.

❓ Question: What would happen if you created html-me-something in one repository, but you wanted to do what I am doing in these instructions and establish your website in another repository that is represented by another repository?

That is a very good question, and one I hope to answer in these instructions. Maybe you can merge html-me-something into YourUserNameHere.github.io later.

ℹ️ NOTE: You can actually do stuff explicitly for Github on your computer using the gh command. But that's kind of new and I'm not going to go into that right now. Also, creating a Git repo over the command line often requires writing a JSON file and sending it to GitHub's computer to do the stuff we did in steps 1 through 4 "hacker wizardry" style. But you're not a wizard, Harry. (At least not yet.) Also, it's just easier to do that part on the website.

Step 5. Do the command line stuff.

For some reason, the LaunchCode folks decided to instruct everyone todo the stuff on Github second and the command line stuff first. While that does work, it is much better to do the stuff you need to do on Github first THEN do the stuff on you computer.

ℹ️ NOTE: Remember how the assignment wants you to put your LC101 stuff in lc101? I'm putting this project that I am using in a different directory on OneDrive called Code Projects. If you are trying to navigate files with spaces in them, your path needs to be enclosed in quotes when using commands like cd.
$ pwd
/c/Users/Jason/OneDrive/
$ cd 'Code Projects'
$ pwd
/c/Users/Jason/OneDrive/Code Projects/

We need to get the Clone URL from our repository (which we will call the "repo" from now on). Click on the green Clone or Download button then click the clipboard icon to copy the URL. The URL will be something like this https://github.com/jrcharney/html-me-something

The LaunchCode Way

The LaunchCode way to do this was to create your HTML stuff inside a directory called html-me-something, set up the repo on Github, then pair your local repo with the remote repo that was created. This is the remote way since the git remote command is used first.

$ pwd
/c/Users/Jason/OneDrive/2020/lc101/html-me-something
$ git remote add origin https://github.com/jrcharney/html-me-something.git

If you don't see the new files, try doing a git pull command. Hopefully those files will merge with the files you already created.

My Way

My way would have been to clone the repo we created first, then create the HTML file (as well as any other files for CSS, etc.)

$ pwd
/c/Users/Jason/OneDrive/Code Projects/
$ git clone https://github.com/jrcharney/jrcharney.github.io.git
$ cd jrcharney.github.io.git
$ pwd
/c/Users/Jason/OneDrive/Code Projects/jrcharney.github.io.git
$ ls -a
.  ..  .git .gitignore  LICENSE  README.md

In this method, we don't need to use git pull to get our files.

Step 6. Test to make sure you can commit and push

ℹ️ NOTE: I've noticed that Git Bash locks up sometimes when doing simple things like an ls or using vim. This shouldn't happen. In the future, I will replace Git Bash with MSYS2, even if Microsoft doesn't like it! (You blew it, Microsoft!) Besides, we can do more Linux stuff in it.

Every time we come to a checkpoint in our project, we want to do a commit. A commit MUST include a message using the -m command other wise the text editor will open in the Bash shell, and you don't want that! (It's why I put those basic vim command in these instructions in case you make a mistake, which you will at some point. Even I've done it at times.)

In this example, I'm in my repo (jrcharney.github.io).

Let's start by creating a blank file that we can remove later.

We want to use a command called git status which is like ls but it shows us what files we haven't pushed to the repo. Files we don't want pushed to the repo are generally put in the .gitignore file (which we need to update to use the stuff I was talking about earlier because VisualStudio is NOT VS Code.)

$ touch test.txt
$ ls
LICENSE README.md test.txt
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        test.txt

nothing added to commit but untracked files present (use "git add" to track)

The text for test.txt file may appear red.

As the instructions imply, you should use git add the file to the repo.

$ git add test.txt
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   test.txt

The text for test.txt should now appear green, indicating it's readly to be pushed to Github.

We are now ready to commit our file. Committing files to a repo is sometimes called staging.

$ git commit -m "Test Commit"
[master a1eda32] Test Commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 test.txt

It should be noted that when we commit our files, the git status is shown to have no files in it. We can commit multiple times before we push.

$ git status
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

Finally, we should be ready to push.

$ git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 4 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 271 bytes | 135.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/jrcharney/jrcharney.github.io.git
   0465f29..a1eda32  master -> master

These change should be reflected in our repository.

Use Git Desktop

Prior to Microsoft's take over of GitHub in 2018, Github also had a graphical user interface called Github Desktop. In this section, we want to set up Github desktop. If you intend to use something like NotePad++ as your text editor, or if you are using a application like Typora (which is being used to compile these notes you are seeing), You'll want to use it.

You can get it at desktop.github.com, or you can install it the easy way with Chocolatey and install it through an adminstrative PowerShell (if you are using Windows).

> choco install github-desktop

🎗️ TODO: Instructions for Mac and Linux!

Open Github Desktop. In the File menu, select "Add Local Repository". (You could do a clone remotely, but let's have the command line do that.)

In the Local path field click "Choose...", navigate to the folder where your repo is.

Once selected, click "Select Folder".

Click "Add Repository".

You are now ready to use Github Desktop with your Repo.

More practically, here's another example of Git Desktop as I'm using it for these notes!

I'd like to go into the nuances of all that Git Desktop does, but we'll get into that later.

Use VS Code

Finally, there's one other place you can use Git to do stuff in Github and that is Visual Studio Code. You can get that via Chocolatey.

> choco install vscode

Open VS Code.

ℹ️ NOTE: You may need to install some other stuff. I don't have screenshots of it. But that's why I recommend using Chocolatey or a command line software manager in Linux or Mac to deal with that.

ℹ️ NOTE: There's like a bunch of plugin that I've added. Also, this theme, Synthwave x Fluoromachine, is also not the default theme. You can get it and themes like it either in the Visual Studo Marketplace, or find other themes at VSCodeThemes.com.

Get the GitHub Pull Requests Extension

We first need to make sure we have the extension we need to do Git stuff in VS Code. Go to the Extensions tab (Ctrl+Shift+X) on the left side of the screen.

You'll see a sidebar with a bunch of stuff.

You're going to see a lot of garbage apps (just like any other App store).

Viewing the extensions you do have is alot eaiser than looking up the ones that are available.

Typically you go to Preferences (Ctrl+, (that is Ctrl+Comma) or File > Preferences > Settings) and the main part of the screen will look like this.

Then in the left colum of the main section, click on Extensions to see the list of extensions you do have.

🎗️ TODO: Add a list of recommendations later.

Let's go to the Extension Sidebar and search for "Github".

As you can see, there's some other guy who has his extension ahead of the GitHub Pull Requests. Even "KnisterPeter" recommends downloading Github Pull Request over his extension. When downloading extenions, look who the provider of the extension is.

We want to install the GitHub Pull Requests extension.

There should be a link in the header that says "Install" click on that. When it is installed, you may need to restart VS Code but you should see the Octocat logo in the left sidebar.

Typically, the command that opens the Source Control software (Ctrl+Shift+G) should show that we have a folder open. But since we don't we have this.

We'll figure this out later. right now, we need to do one other important thing: Set up the integrate terminal.

Set up the Internal Terminal

Integrated Development Environments (IDEs) have become quite complicated these days. So much so, there is now a command to find other commands. Ctrl+Shift+P is generally the command used for that task.

✍️ Technical Note: Typically I use Screen Snip and Snip & Sketch to take my screenshots. However, you can't do that when trying to screenshot pop-up boxes like the ones Ctrl+Shift+P uses. You'll need to be a little more clever than than to get screenshots like the couple I'm about to add here.

The way to get the screenshots for Ctrl+Shift+P is to use an older Windows trick WindowKey + PrintScreen (The window key is sometimes denoted as WinKey or Meta in some documentation, while Print Screen is sometimes labled PrtScr because of how it is labeled.) If you need to, use a full keyboard for stuff like that.

Screen shots taken using the WinKey method often are stored in C:\Users\{Username}\Pictures\Screenshots, so you may want to delete them later after you've used Screen Snip to grab the cropped part of the picture you wanted to take.

Select Type in the panel "Default Shell" and look for Terminal: Select Default Shell.

Since we have Git Bash installed, Select Git Bash from the lsit of options. When we open the terminal in the IDE, we can now use Git Bash like we use if it was on its own.

Another way to set this up (and to make sure it is done with a sense of permanence) is to open the Settings menu and in the Features > Terminal section, scroll down to a link that says "Edit in settings.json" which should open a JSON file that shows all the settings you've applied.

I'm not a fan of this way. I mean, look. What this nonsense about Terminal.app. I would have liked to have used External Linux considering the features that are in some of my screenshots were made using a Zsh shell, but LaunchCode has is hanging around with Git Bash (which is basically sorta broken, but we need it anyway.) You can set the terminal here editing the Exernal: Windows Exec option and chaing it to C:\Program Files\Git\bin\bash.exe, but chaos ensue.

The best way to handle the problem is directly which is why this next way of doing is my cup of tea.

You can also use Ctrl+Shift+P to find the settings.json file that control that stuff. This JSON file is typically stored in C:\Users\{Username}\AppData\Roaming\Code\User\settings.json.

⚠️ WARNING!: Don't mess with Preferences: Open Default Settings (JSON). Th file we want to modify is the Preferences Open Settings (JSON) that has our settings.json file. If you edit the defaultSettings.json file, nothing will happen. You might even break something. While this screen shot below shows that I have the defaultSettings.json file selected, you want to select the second file listed below.

Here's what my settings.json looks like. I haven't used VS Code a whole lot until recently so it's rather small.

You want to set "terminal.integrated.shell.windows" to C:\\Program Files\\Git\\bin\\bash.exe. (Eventually I will change this to whatever MSYS2 is using since Git Bash has some issues.) We need to escape our backslashes in the path.

To open a terminal in VS Code, we use **Ctrl+Shift+\``** (Ctrl+Shift+Backtick). If you don't know where that key is, the backtick key is generally paired with the tilde (~) on most American keyboards to the left of the 1key or below theESC` key. (This is why I'm not a fan of crazy keyboard layouts. I'm looking at you Chromebooks and Apple!)

Here's a familar sight! We can finally get to work.

Opening our first Workspace

We want to open our project in something called a workspace. A workspace is basically a project environment. Anything open in that environment is part of the workspace, so be careful when opening files in VSCode that are not part of the workspace.

⚠️ WARNING! ALWAYS CLOSE THE WORKSPACE THAT YOU ARE USING BEFORE OPENING ANOTHER PROJECT!

I'm starting to get the hang of this, but the issue here is that if you try opening another file or project when there is an active workspace open, those files will become part of that workspace, whether you want them to be or not. That is really bad! It messes up the organization of your files and is added to whatever file that is in the .vscode directory or .workspace file that is managing what files are part of your project. It's a mess to clean up when it happens.

🎗️ TODO: Find someting that can prevent that from happening.

We want to open our project folder and make it a workspace. Type Ctrl+K then Ctrl+O. This is a rare instance where we need to type two control commands sequentially to do something.

Navigate to the folder that our project is in.

Once there click "Select Folder".

VS Code will likely reopen with the Welcome. (Close it, but definely let it show up on startup.) But look at this!

It's all of our files!

Look where we are when we open up a terminal with `Ctrl+Shift+``.

Very nice!

Let's save our workspace by going to File > Save Workspace As....

We will want to save the file in our folder. Typically, it is the name fo the folder with .code-workspace added to the end. So, save this one as jrcharney.github.io.code-workspace.

We've added files let's see what happens when we update one and remove one.

Modify .gitignore

Remember how I said eariler that .gitignore was not configured properly because the contents of the file were not configured properly, but that there was a website where we could generate a better .gitignore? Let's update our .gitignore by going to gitignore.io an in the field look up Node and VisualStudioCode.

Next, click "Create".

Select all (Ctrl+A) the contents in the file generated then Copy (Ctrl+C) them.

In VSCode, switch to the Explorer (Ctrl+Shift+E) Sidebar.

If you hover over the JRCHARNEY.GITHUB.IO (WORKSPACE) line, you will notice a set of icons appear on the right. Let's go over those real quick.

New Document - Create a new document
New Folder - Create a new folder
Refresh Explorer - Update the list of files manually if it doesn't do that automatically.
Collapse Folders in Explorer - Fold the lists of files at each directory. We don't have any directories in this list right now so it's not that important.

If we right click on jrcharney.github.io we see a list of options that can be applied to this directory.

If we right click on .gitignore, we have a different set of options.

It turns out we don't really need to do anything with those options just yet. I was going to say "Right Click on .gitignore in the list and select Open to the Side (Ctrl+Enter)", but that just opens .gitignore to the right of the Welcome tab.

We want to just open .gitignore, so just double click on .gitignore to open it. This will open .gitignore in a new tab, but it won't close the Welcome tab so we should probably close that.

You may notice there is something on the right side of the window. There's some extension (I think) that allows you to see a small version of the file. It can be used to jump around long files quickly. Our concern right now is the contents of the file that is open.

Select all (Ctrl+A) the contents in .gitignore and Paste (Ctrl+V) the contents from gitignore.io into our .gitignore. Save (Ctrl+S) when you are done.

Deleting and Restoring files

Let's try to remove the test.txt file.

In the console, delete the test file with rm test.txt and see how that looks not just in our console but in the Source Control (Ctrl+Shift+G) but also the Github Pull Extension

$ rm test.txt
$ ls -a
.  ..  .git  .gitignore  jrcharney.github.io.code-workspace  LICENSE README.md
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   .gitignore
        deleted:    test.txt

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        jrcharney.github.io.code-workspace

no changes added to commit (use "git add" and/or "git commit -a")

According to the text in the git status commna, we have the option to update this change with git rm test.txt or we can restore it with git using git restore test.txt We definitely want to get rid of this file and will confirm its removal upon the next git commit.

Here's what happens when we use git restore on test.txt.

$ git restore test.txt
$ git ls -a
.  ..  .git  .gitignore  jrcharney.github.io.code-workspace  LICENSE  README.md  test.txt
$ git status
$ git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   .gitignore

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        jrcharney.github.io.code-workspace

no changes added to commit (use "git add" and/or "git commit -a")

Let's delete our test file again this time in the Explorer. Right click on test.txt and select Delete. You may be asked if you want to toss it in the Recylce Bin or Trash, go ahead and do that.

I have a feeling about it (and I should probably check the documentation to be sure), but I'm pretty sure that once you git commit, there is no going back with the git restore command. You'll need to roll back a commit a that point. It's not a topic I want to cover here.

Create .gitattributes

There is one file I recommend adding and that is a .gitattrubtes file. Click on jrcharney.github.io in the explorer and select New file. You will be asked to enter a new name for the file. Type in .gitattributes.

To our good fortune, just just gitignore.io exists to help create .gitignore files, there also happens to be a getattributes.io file for creating a .gitattributes file. But that site missses the mark in that it seems to want to set things up much like a .gitignore file. Instead we want to use ihopepeace's .gitattribute generator.

In each of the four fields, insert the following:

Binary Files: jpg, png, gif
CRLF Files: vscode-workspace
LF Files: js, json, css, html, md
Text Files: js, json, css, html, md

Once that is done, hit "Generate" and save the file as .gitattributes in your Workspsace folder.

Using Source Control

We are now ready to Source Control (Ctrl+Shift+G).

You may notice there are three kinds of letters on the right:

U = Untracked - This file is not part of the repo's most recent commit.
- A = Added - Any U file will turn to an A file once it is staged the first time.
M = Modified - This file has changes the file in the repo's most recent commit does not have.
D = Deleted - This file was removed and will be removed from the repo upon the next commit.

If we hover over each file in the list, we will see three icons.

Open file - Open a file in a tab.
Discard Changes - Undo all the changes back to what they were in the last repo. (essentially our git restore.)
Stage Changes - Add/Remove a file much like how git add or git remove works.

==Files must be staged before they are committed.==

If you right click on a file, there are a list of other options that I won't get into right now.

Also take note of the field over the CHANGES header. Here you enter your required message followed by Ctrl+Enter to commit any staged. This works just like in Github Desktop.

You may also notive in the Source Control heading, there are also a few icons:

Toggle View Mode - Switch between flat and tree view.
Commit - Commit your staged files. (Don't forget to fill out the message field below.)
Refresh - Update the list of files the CHANGES list. (Useful if another contributor has made changes.)
More Actions... - A long list of other things I won't get into in these notes.

Let's use it to stage our four files for changes. Click on the Plus sign on each of the files or in the CHANGES header, hover over it and click the Plus sign to stage all the files in the list.

Three things will happen once files are staged

Unstaged file wll become Added files. Their U status changed to an A.
Staged files are put under a STAGED CHANGES header. This means that these files will be readed to be committed
Plus signs relaced with minus signs. This is your last chance to unstage a file. Press the Minus sign and the file won't be part of the next commit. It will go back to the CHANGES category.

I think we are ready to commit. In the message field write the message you want follwed by clicking the check mark above it or type Ctrl+Enter when you are ready.

Once we commit, the files that were in the STAGED CHANGES category disappear, however they are not pushed.

==Files have to be committed before they are pushed==. You can commit as many times as you like before the next push.

A commit is just a checkpoint for your work. It isn't submitted online until it is pushed, but there is no Push icon.

==In the "More Actions..." option above the Message field, search for the Push option.==

ℹ️ NOTE: If you are working with others, pull their changes first before you push yours. It's kind fo complex, but we'll cover it in the Git Chapter in the LaunchCode text book.

With all this considered, you are ready to complete the rest of this assignment and post it online!

The Git Process Diagramed

Before I end this section, let's do a quick review of the git process.

We went over how to create a repo.

LaunchCode explains how to do this by creating your project first then setting up the repo on GitHub.
I explained how setting up your Github first and Cloning has some benefit.

stateDiagram
state fork_state <<fork>>
[*] --> fork_state
fork_state --> Create_First
fork_state --> Clone_First

state join_state <<join>>
Create_First --> join_state
Clone_First --> join_state
join_state --> Typical_Git_Process
Typical_Git_Process --> [*]

state Create_First {
 [*] --> Write
 Write --> Initialize
 Initialize --> GitHub : If working on Github
 Initialize --> Remote : If Working elsewhere
 GitHub --> Remote
 Remote --> [*]
}

state Clone_First {
 state fork_first <<fork>>
 [*] --> fork_first
 fork_first --> GitHub : If working on GitHub
 fork_first --> Clone  : If working elsewhere
 GitHub --> Clone
 Clone --> Write
 Write --> [*]
}

state Typical_Git_Process {
 [*] --> Edit
 Edit --> Stage
 Stage --> Commit
 Commit --> Push
 Push --> [*]
}

The typical Git process for a simple project looks sort of like this.

stateDiagram

Editing : Edit your file
note left of Editing
	Create new files.
	Make changes to existing files.
	Remove files we don't need.
	It is possible to restore files before staging.
end note

Staging : Stage your file
note left of Staging
	Files must be staged before they are commited.
	Check the status of files before commiting.
end note

Commiting : Commit your file
note left of Commiting
	Files must be committed before they are staged.
	You MUST add a message before commiting.
end note

Pushing : Push your file to the server
note left of Pushing
	Pull request from the outside
	before pushing your changes.
end note

[*] --> Editing
Editing --> Staging : git add/git rm
Editing --> Editing : git restore
Staging --> Commiting : git commit
Staging --> Staging : git status
Commiting --> Pushing : git push
Pushing --> [*]

🎗️ TODO: Wasn't there a sequence diagram that describe this process better that included cloning, pulling and other stuff?

Part 1: HTML

🎗️ TODO: Coming Soon: HTML Reference

Sidebar

ℹ️ NOTE: This section is NOT part of the assignment. Rather it was my notes on my take on HTML.

Having slayed the dragon, we can now get on with this assignment, which is quite easy.

What's in an HTML File

Every HTML File must have:

<!DOCTYPE html> on the first line - There's a file called a document type defintion (DTD), which is beyond the scope of this course but tells what standard to use for HTML defined by the World Wide Web Consortium (or W3C). There can only be one of these!
<html> element - EVERYTHING except the <!DOCTYPE html> line MUST be inside this element including the <head> and <body>. There can only be one of these! The body MUST have the following two elements and in this order.
- <head> element - The head of the file, which is not visible but does set up the things the rest of the page needs, especially for the body. The header must have:
  - The <meta> tag that tells the browser what character set is being used (charset="utf-8").
  - The <title> tag is used in the title bar of the web browser. This will also be used when people bookmark the page. ==EVERY PAGE MUST HAVE A TITLE!==
- <body> element - The body of the file, which is visbile and contains the contents of the file users will interact with. You'll work on most of your HTML stuff here.

The Head Element

The <head> element may only have one of six elements in it: <meta>, <link>, <base>, <title>, <script>, and <style>. With exception of the <script> tag, none of those elements should ever be in the <body>. Any <body> element that is one one of the six <head> elements, except <script>, should never be put into the <head> either. <script> May be put into the <head> or the <body>, but how it is use depends on it's position. We'll talk more about this later. What does matter is that the <head> MUST be before the <body>.

Let's take a look at each of those <head> elements:

More <meta> tags that describe the page. Anyone who says "You don't need these" is full of it! If you want your page to be found on Google, Yahoo, Bing, or any search engine with a web crawler that looks for new content, you MUST use them. You must also use them to use special meta tags to tell the same web crawlers NOT to find them. Read more about the <meta> tag on MDN
The <link> tag is typically used to tell the browser where to find an external resources, although it is used for alot more than that. It can also be used to define the structural relatonship between pages, state what file to use as an icon, tells what other stylesheets should be used base on the medium it will be displayed in including print and mobile devices. Read more about the <link> tag on MDN
The <base> tag isn't used as much as probably should be, but it is optional. Basically it is used to state where the base (home) webpage is in relationship to the other pages if you use relative links. Read more about the <base> tag in MDN, if you want.
The <title> element is manidtory. Writing a title for a page should be semantic. It should tell everyone what website they are on (e.g. JRCharney.github.io), what part of the website they are on (Launch Code Notes), and what page they are at (Assignment #4). Together it would look like JRCharney.github.io - Launch Code Notes - Assignment #4. These aren't the rules of using it. But you should use it so that when someone bookmarks or saves your file, that string appears in the header of the web browser or in the tab that it is in inside the web browser. Read more about the <title> tag on MDN, but it should be pretty obvious what it does.
The <style> element define CSS styles internally. You should really use external stylesheet if you are applying the same style to multiple webpages, but if you need to apply stuff to this page explicitly or if you are whipping up a single page real fast, <style> is your element for that sort of stuff. You can use <style> more than once to apply styles to various mediums. Defintely read more about the <style> element on MDN.
The <script> block was intended to be use in the head. In fact, many people teach JavaScript horribly in such a way the tell people things like "Stick your <script> elements at the end of the <body>. The reason why <script> was, and should still be treated as a <head> element is because people need to learn how to defer their JavaScript until the HTML and CSS has loaded. <script> is not just used to write JavaScript internally for webpages, but it is also used to link to external JavaScript files. Hopefully this was discussed in the book. Read more about the <script> element on MDN.

The rest of the elements I will talk about in this section should be used in the <body>.

The Body Element

There's a list of HTML elements that you can use to build a structure around your content. All of these elements belong in the <body> element.

As I previously stated in the previous section, the six elements that I mentioned should only go inside the <head> element. The only exception for this is the <script> element which we'll talk about later.

One thing I will not cover in this section, especially since it is not part of the assignment is <form> and <input> elements. These are interactive elements, and they will be dealt with in another assignment and in other sections of LC101.

Comments Everywhere!

One special tag that can be used almost everywhere, except the first line and outside of the <html> element is the comment tag . The contents inside this tag are not visible, but they can be seen if you view the source code. Like multiline JavaScript comments, HTML comments can be used similar. They start with a  sequence.

Escape Sequnces

Unlike Markdown, you will likely need to escape a short list of characters in HTML if you want to use them not as part of tags:

Character	Escape Sequence	Name
`<`	`<`	Less Than
`>`	`>`	Greater Than
`&`	`&`	Ampersand

Ampersand is often used to insert special characters as sequences. I could get into the entire list of them, but I don't want to do that here.

Less than and greater than need escaped if they are being used in text because they are used to define tags in HTML. You should still use < and > ad the beginning and ending of your opening and closing tags.

Block and Inline Elements

If you haven't read the HTML chapter, most HTML elements fall into two groups:

block elements which define elements that are used like code blocks. There are a few sub categories of block elements:
- Regular block elements which don't really have any special featueres applicable to them.
- Headers which are useful for outlining.
- Lists which liket the structure this list is in define a list in one of a few forms.
- Tables which are useful if you need to generate a quick table and don't really are to get technical about manipulating a bunch of <div> elements to behave like table elements.
- Forms
- Media elements for things like images, videos, audio, SVG, and <canvas> drawings.
inline elements which are often used on-the-fly to quickly format text strings.

Common Block Elements

Tag	Name	Description
`<div>...</div>`	Division or Div	Divide a page up into parts. New elements like `<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`, and `<aside>` can do this semanticly.
`<p>...</p>`	Paragraph	Indicates a paragraph of text, use this frequently.
`<blockquote>...</blockquote>`	Blockquote	Though intended to use a quote in a block, this element is often used to emphasize important messages and asides about content.
`<pre>...</pre>`	Preformatted Text	Defines code blocks. Often in monospace text and intended to be literal. Some folks have figured out how to use this with the inline `<code>` element to format code appearance. I'm not going to go into how that works here.
`<ul>...</ul>`	Unordered list a.k.a. Bulleted List	One of two frequent list elements, `<ul>` have `<li>` elements for children. Unordered Lists are bulleted by default but CSS can change the bullet character.
`<ol>...</ol>`	Ordered list a.k.a. Numbered list	One of two frequent list elements, `<ol>` have `<li>` elements for children. Ordered Lists are number by default but CSS can change how lists are numbered, even use letter, roman numerals, or start at a different value.
`<li>...</li>`	List Item	Unordered and Ordered lists cointain a list of list item elements.
`<dl>...</dl>`	Defintion List	Defintion lists aren't uses as much as they should be. These lists are composed of a set of `<dt>` and `<dd>` elements.
`<dt>...</dt>`	Defintion Term	A defintion term defines a new list item in a defition list. It is followed by one or more `<dd>` elements.
`<dd>...</dd>`	Defintion Description	A defintion descript defines the defintion of a term. Just like some words have more than one meaning, `<dd>` can be used more than once consecutively. A new term starts at the next `<dt>` element.
`<h1>...</h1>` through `<h6>...</h6>`	Headers	Headers are used to structure the contents of a document. Just as I've used them throughout these notes, headers are used to organize information. The only downside is that HTML only limits this for levels 1 through 6. (Microsoft Word users might know the can use us to 9 in Word.) Maybe when HTML6 comes out someday, there will be more headers. If you need more headers than this, you may want to divide your informaton up into smaller documents or consider using XML to define deeper layers of header. (I'm not going to do that.)
`<article>...</article>` and `<section>...</section>`	Article and section	These two elements are a couple of semantic elements that were added to HTML5. These are still basically `<div>`s, but because they have different names, we can use them to define the article of writing we are compositing and also divide them into sections.
`<header>..</header>`, `<main>...</main>`, and `<footer>...</footer>`	Header, Main, and Footer	These sematic elements are useful in defining the three main sections of the content of a webpage: The header, the main area, and the footer. These are often nice to use if you are designing a webpage and are much more descriptive than using `<div>`. You should only use these elements once.
`<nav>...</nav>`	Navigation bar or Nav	Some websites have a `<div>` espeically used for links to navigate through the website. This semantic element is used explicitly for that. Often, the `<nav>` element goes between the `<header>` and `<main>` elements.
`<hgroup>...</hgroup>`	Header Group	`<hgroup>` is a rare sematic element used to group multiple header elements together , like how you wanted to make a `<h1>` for a title then follow it with an `<h2>` for a subtitle.
`<table>...</table>`	Table	Define a table of information. Many people have optied to format `<div>` elements instead of use `<table>` elements to add functionality that isn't part of a table by default, like sorting and filtering. Perhaps someday when HTML6 comes out, the W3C will address these issues.
`<tr>...</tr>`	Table Row	Tables are divided up into rows.
`<td>...</td>`	Table Cell or Table Data	Define a cell in a table. Table cells can be spanned, but this is rarely done.
`<th>...</th>`	Table Header or Table Column Header	The first `<tr>` in a table (which is sometimes encapsulated in another element called `<thead>`) contains a list of `<th>` elements which are formatted diffent from `<td>`, often in bold text and center aligned. 🤓 ACTUALLY there is no set rul that says you can't use `<th>` elements elsewhere in the table. You can use them as the first cell in a table row to be the leading row element.

Common Inline Elements

Tag	Name	Description
`<span>...</span>`	Span	Span is the base inline element to which all other inline tags are defined from, with exception of the `<a>` element. Often, span is used with the the `style` or `class` attributes to apply inline CSS or define a class that is used, respectively.
`<b>...</b>` or `<strong>...</strong>`	Bold or String	Increase the weight of a font. Bold, or strong text, is often used to indicate strong emphasis.
`<i>...</i>` or `<em>...</em>`	Italic or Emphasis	Often used to indicate that the tone of how it is used, or to indicate emphasis of text.
`<u>...</u>`	Underline	Removed in HTML4, but brought back in HTML5, underline underlines text, obviously. This can be done with CSS and in a `<span>` element.
`<s>...</s>`	Strike-through	Almost lost in HTML4 as well, but made standard in HTML5, strike-through is like underline, but is crosses out text. See also `<del>`.
`<mark>...</mark>`	Mark a.k.a. Highlight	A new feature in HTML5, `<mark>` is used to highlight text. This used to be done with `<span>`
`<code>...</code>`	Inline Code	Format text with a monospace font for code.
`<ins>...</ins>`	Inserted Text	Usually used following a `<del>` element to indicate a correction insertion. Insert text is often formatted underline.
`<del>...</del>`	Deleted Text	Used to strike-out larger errors. Often used in tandem with `<ins>`
`<kbd>...</kbd>`	Keyboard command	Seldom used, but when it is used, it often indicates a keystrok that must be used.
`<var>...</var>`	Variable	Ofthen used with `<code>`, `<var>` italicizes function parameters.
`<abbr>...</abbr>`	Abbreviation	Used with the `title` attribute, and often formatted with dashed or dotted underlining, this element indicates an abbreviation or acroynm. There used to be an element called `<acronym>`. Don't use that. Use `<abbr>`.
`<dfn>...</dfn>`	Defintion	Indicates a defintion. Often italicized. If you use defintion lists, you might want to consider this element.
`<a>...</a>`	Anchor	The venerable anchor element has a couple of uses: * Define a link to another page or section of a page with the `href` attribute. * Define a target with the `name` attibute. The W3C would really like people to stop using `name` what with `id` having similar functionality, but that's never going to happen.
`<sub>...</sub>`	Subscript	Used to subscript text. For example: `H<sub>2</sub>O` creates H₂O.
`<sup>...</sup>`	Superscript	Used to superscript text. For example `A = πr<sup>2</sup>` creates A = πr².
`<q>...</q>`	Inline Quote	Used to indicate a quote.
`<cite>...</cite>`	Inline Citation	Cite a resource. It might be useful to superscript this to make footnotes.
`<address>...</address>`	Address	Group a set of information together usually used to identify a set of contact information. This is one of the rare inline sematic elements. Typically put in the `<footer>`.

There's likely a few other inline elements, but these are the ones I can think off the top of my head.

Script Off-Script

The <script> element is somewhat of a loose canon. While it was intended to be put in the <head>, because of how JavaScript operates, it can run as soon as it is loaded. To prevent that, you sould instruct your code not to run until the page has completely loaded.

In the <head>, you should put this code block in it.

<script>
// Write your functions here, but don't let them do anything.
    
window.addEventListener('load',function(){
    // JavaScript that should run once the page loads
});
</script>

This line of code should NOT run until all the HTML content has loaded.

We may encounter instructions later that say you should put your <script> blocks in the <body> especially near the closing </body> tag. But that's not at all how it should be used.

JavaScript should NEVER run until the contents of the file are loaded, and using <script> in the <body> is problematic. If that is not mentioned in the DOM chapter of the LaunchCode book, then that's a problem.

Common Structures

Lists

Ordered lists and Unordered lists are usually strucutred like this. Nested lists should be inside of <li> elements. For instance, what if you wanted to insert text between a list item and another list? This example will show oth using text between list elements and without it.

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>
        Underpants Gnome Plan
        <ol>
        	<li>Steal Underpants</li>
        	<li>???</li>
        	<li>PROFIT!</li>
        </ol>
    </li>
    <li>
        <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Baz</li>
        </ul>
    </li>
    <li>Sixth</li>
    <li>Seventh</li>
</ul>

Defintion lists are different. You probably shouldn't nest them, but if you must nested list should probably go in a <dd> element.

<dl>
    <dt>Terminal</dt>
    <dd>The part of the airport where people take their shoes off.</dd>
    <dd>The best part of a computer.</dd>
    <dd>Another word for "Oh yeah, he's gonna die of that."</dd>
    <dt>Ticket</dt>
    <dd>A fine for a moving or parking violation.</dd>
    <dd>A required document for entering an event.</dd>
    <td>Tube</td>
    <dd>What an internet is made of according to old people.</dd>
</dl>

Tables

The most you'll ever use of a table will likely be the <table>, <tr>, <th>, and <td> elements.

<table>
    <tr>
        <th>Tag</th>
        <th>Name</th>
        <th>Description</th>
    </tr>
    <tr>
        <td><code>&lt;thead&gt;</code></td>
        <td>Table Header</td>
        <td>Group the first <code>&lt;tr&gt;</code> element that has all the <code>&lt;th&gt;</code> elements in it.</td>
    </tr>
    <tr>
        <td><code>&lt;tbody&gt;</code></td>
        <td>Table Body</td>
        <td>Group all but the first <code>&lt;tr&gt;</code> element that has all the <code>&lt;td&gt;</code> elements in it. If you use <code>&lt;tfoot&gt;</code>, you can exclude the last <code>&lt;tr&gt;</code> element as well.</td>
    </tr>
</table>

But let's go all out and try an example that uses everything:

<table>
    <!-- caption is the first element but it will appear after the table -->
    <caption>Quarterly Earnings</caption>
    <!-- colgroup applies styles across each column -->
    <colgroup>
        <!-- Applies nothing to the first row -->
        <col>
        <!-- applies a style to each cell in the column -->
        <col class="winter">
        <col class="spring">
        <col class="summer">
        <col class="autumn">
        <!-- span applies this to the last two colums -->
        <col span="2" class="stats">
    </colgroup>
    <thead>
        <tr>
            <th>Year</th>
        	<th>Q1</th>
        	<th>Q2</th>
        	<th>Q3</th>
            <th>Q4</th>
            <th>Total</th>
            <th>Average</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>2015</th>
            <td>$5,195</td>
            <td>$8,343</td>
            <td>$6,983</td>
            <td>$6,840</td>
            <td>$27,361</td>
            <td>$6,840</td>
        </tr>
        <tr>
            <th>2016</th>
            <td>$6,244</td>
            <td>$5,397</td>
            <td>$8,154</td>
            <td>$5,672</td>
            <td>$25,467</td>
            <td>$6,367</td>
        </tr>
        <tr>
            <th>2017</th>
            <td>$7,809</td>
            <td>$5,529</td>
            <td>$5,968</td>
            <td>$7,598</td>
            <td>$26,904</td>
            <td>$6,726</td>
        </tr>
        <tr>
            <th>2018</th>
            <td>$6,562</td>
            <td>$9,819</td>
            <td>$7,736</td>
            <td>$7,920</td>
            <td>$32,037</td>
            <td>$8,009</td>
        </tr>
        <tr>
            <th>2019</th>
            <td>$9,261</td>
            <td>$8,922</td>
            <td>$9,333</td>
            <td>$9,625</td>
            <td>$37,141</td>
            <td>$9,285</td>
        </tr>
    </tbody>
    <!-- tfoot can be used in a table summary -->
    <tfoot>
        <tr>
            <th>Average</th>
            <td>$7,014</td>
            <td>$7,602</td>
            <td>$7,635</td>
            <td>$7,531</td>
            <td>$27,782</td>
            <td>$7,446</td>
        </tr>
    </tfoot>
</table>

🎗️ TODO: Add more examples here later.

Getting Started

Create a new file index.html with the following content:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Me Something</title>
        <link href="./styles.css" rel="stylesheet">
    </head>
    <body>
        <!-- Body Content goes here -->
    </body>
</html>

Save this file.

💡 TIP: You should probably make a copy of this file at this point so you can use it as a template because this is how almost all HTML files are structured!

Getting to Work

Your mission is to build a page that:

Tells a story. This can be personal or impersonal, funny serious, or neither. You can do whatever you like, but it should be something in the range of 3 to 10 paragraphs or section. Sort of like this example. Here's some other ideas:
1. Create résumé page that tells the story of your professional joyring to-date, and where you want to go as a coder.
2. Describe a trip you took.
3. Talk about one of your hobbies or passions.
Does of the following:
1. Use the HTML5 tags, especially the semantic elements (<header>, <main>, <footer>, <section>, <article>). Paragraphs should go in <p> elements. If you need to reiew any of these tags, check out the HTML Tag Reference at W3Schools.
2. Uses at least one <img> tag (hopefully more). When placying images in you page, put them in a subfolder called images within youhtml-me-something directory.
3. Use at least one HTML entity.
  
  💡 Tip: Using © to insert the copyright symbol in the Footer element is a © is a good start. But play round with words with accents inthem (é as in Pokémon, or ñ as in quinceañera.)
4. Demonstrate creativity. Don't stop with these items or tags. Have some fun with this project!

Notes and Tips

Use your browser's development tools to look at the example page or to troubleshoot things that don't look right. You can mimic the doucment structure of this example, but do not copypasta! ❌ 🍝
Use the examples to learn how your HTML elements might be structure, and build your page to fit your own content.
Don't add any CSS yet. Really, save that part of Part 2. If you hate out it looks right now, it's OK. We'll fix it soon.
As you make changes, you will want to see the results. We went over this in "Setting up the Project" section way back in the begining of this document. F5 or Ctrl+R (Windows/Linux) or Cmd+R(Mac) to refresh to see the new changes that are applied.
Rely on the reference sites lined on this page and find more online. Not everything in this document will be things that LaunchCode or I will tell you about.
You're free to use tags that haven't ben explicity introduced in this class or this document. LaunchCode and I have given you enough background to forge your own path. It's in your hands at this point as to where to go.

Add and Commit Your Changes

I think I went over this earlier with you, but let's repeat it once more:

Once you finish your page, you Git to add, commit, and push your index.html changes.

The Git workflow more or less comes down to this:

Write: Create some intial stuff.
Initialize: Intialize your repo with git init.
Stage And commit: Use git add and git commit. (As overly simplistic as that is.)
Make some changes.
Stage and commit (again)
Repeat steps 4 and 5.

(My explaination was better. Also, why is their a lack of push?!)

The general rule is that ==whenever you make any changes, you must add and commit those changes to Git.==

Basicall do this.

$ git add index.html
$ git commit -m "Finish Part 1"

You might be wondering: "How do I know hwne it's time to pause working and do another commit?"

That's someoen subjective, and ultimately up to you. The good habit is to pause and commit any time you reach a natural stoppin gpoint or complete a coherent chunk of work.

Done!

If you made it this far, AWESOME! On to part 2.

Part 2: CSS

🎗️ TODO: Coming Soon: CSS Reference and CSS Guides

In this part, you'll get confortable using CSS selectors and rules to dictate display, while keeping your style separate from your content.

Getting Started

Create a file named styles.css in you html-me-something/ directory.
(optional) Add a normalization stylehseet. You can either put the normalization rules at the top of you styles.css, or you can add another file in the same directory and link to it in your HTML document. This will reset some of your browser's built-in styles so that you start with a cleaner slate when you add your own.

Getting to Work

Go ahead and start adding styles in your styles.css file!

Requirements

Your CSS mist:

Use margin and padding to space your elements in a visually pleasing way.
Use at least one of each of the following tyles of selectors:
1. element
2. .class
3. #id
Follow these rules:
1. Avoid adding HTML elements in order ot achieve a specific visual effect.
2. Use document-level and inline styles, sparingly, and only when absolutely necessary.
3. Be creative! Make your page look great! Don't just settle for checking off the items in this list. Have a look at CSS Zen Garden, CSS Tricks, and CodePen.io. Use your browser's development tools to see how those page's styles are built.

Note

In order to see any visible change, make sure to link the styllesheet to your main document.
Feel free to check out the styled example. Use "View Source" to fiew the source of the document.
Use your browser's developer developer tools.
Also, be usre ot use the Resources section below.

Resources

🚚 MOVED: In an effort to integrate resource, the contents of this section has been moved to References

Add and Commit Your Changes on Git

When you are ready, add and push your file to your repo.

$ git add styles.css
$ git commit -m "Adding CSS style"

Don't forget to PUSH!

$ git push

Submitting Your Work

If you are taking a LaunchCode class, you more than likely are using Canvas. In the Courses > Assigments section, there should be a Graded Assigment #4: HTML Me Something. You must submit the assigment that way!

I chose to publish this assigment because it has inspired me to get my notes published as a website and to get my GitHub Pages site established.

References

#LaunchCode

FilesExpand file tree

A4.HTML Me Something.md

Latest commit

History

A4.HTML Me Something.md

File metadata and controls

Background

The assignment

Getting Started

Setup the project

Use Git

Step 1. Go to Github.com click the green button

Step 2. Fill out the New Project form

Step 3. Set up your page for Deployment

Step 4. Change the Source Branch

Step 5. Do the command line stuff.

The LaunchCode Way

My Way

Step 6. Test to make sure you can commit and push

Use Git Desktop

Use VS Code

Get the GitHub Pull Requests Extension

Set up the Internal Terminal

Opening our first Workspace

Modify .gitignore

Deleting and Restoring files

Create .gitattributes

Using Source Control

The Git Process Diagramed

Part 1: HTML

Sidebar

What's in an HTML File

The Head Element

The Body Element

Comments Everywhere!

Escape Sequnces

Block and Inline Elements

Common Block Elements

Common Inline Elements

Script Off-Script

Common Structures

Lists

Tables

Getting Started

Getting to Work

Notes and Tips

Add and Commit Your Changes

Done!

Part 2: CSS

Getting Started

Getting to Work

Requirements

Note

Resources

Add and Commit Your Changes on Git

Submitting Your Work

See Also

References