starting first webpage

Markdown/TheOdinProjectNotes.md

@@ -28,7 +28,7 @@ git config --global pull.rebase false
 git config --get user.name
 git config --get user.email
 ```
-## Create an SSH Key for repos
+### Create an SSH Key for repos
 - SSH keys are good for avoiding retyping credentials every time
     - Check to see if there is an existing ssh key
 ```
@@ -41,7 +41,7 @@ ssh-keygen -t ed25519 -C <youremail>
 ```
 - press enter when asked for what location to store it unless you have a specific location
 - add a passphrase and retype it
-## Link SSH key to Git
+### Link SSH key to Git
 - Find the ssh key input on GitHub or repository website of your choice
 - Click on new ssh key and give it a name and leave the window open for the next steps
 - Copy the public SSH key
@@ -49,11 +49,11 @@ ssh-keygen -t ed25519 -C <youremail>
 cat ~/.ssh/id_ed25519.pub
 ```
 - Paste the key into your settings, it should start with ```ssh-ed25519``` and end with your email
-## Change git repository remote
+### Change git repository remote
 ```
 git remote set-url origin https://'username':'password'@repositorylink
 ```
-## Using Git
+### Using Git
 - Check git version by using `git --version`
 - After creating a new repository you can clone it to your current directory by using ``` git clone <repolink>```
 - After the cloning, check the url with ```git remote -v``` 
@@ -64,15 +64,21 @@ git remote set-url origin https://'username':'password'@repositorylink
 - After creating a file you can use ```git add <filename>``` to add that specific file or ```git add .``` to add all files within the directory that are not on the repo
 - We can push the changes to the cloud repository with ```git push origin main```, origin being the remote location and *main* being the branch to upload to
   - Make sure to only push working code
-### Git Best Practices
+#### Git Best Practices
 - Atomic commits
   - A commit that includes changes related to only one feature or task of your program.
     - Easily reversible if the commit causes breaking changes
     - Enables you to write more specific commit messages
-### Changing the Git Commit Message Editor
+#### Changing the Git Commit Message Editor
 - Typing ```git config --global core.editor "code --wait"``` into the terminal will give you the option to use either ```git commit -m <your message here>``` or ```git commit``` without anything extra.
+#### When to Commit
+- These are best made when you think is a good time to take a **snapshot** of your current project
+- Never commit code that isn't working to the main branch if it was working before
+- It is considered best practice to commit every time you have a meaningful change in the code
+  - Creates a trail to show how you got to the current iteration of the code
+- Useful for when looking back to when the project feature was working to compare what you've changed
 
-## Introduction to HTML And CSS
+## HTML And CSS Introduction
 - What is HTML?
   - Stands for **Hypertext Markup Language**
   - It's the raw data that a webpage is built out of. Includes:
@@ -249,3 +255,54 @@ git remote set-url origin https://'username':'password'@repositorylink
 ```
 - ![](images/capture3.png)
 ### Links and Images
+- Links allow for the chaining of other HTML pages on the web
+- Create an `index.html` file and use it so link other pages within the [odin-links-and-images](/OdinProject/odin-links-and-images/index.html) directory
+#### Anchor Elements
+- The anchor element is denoted by the `<a>` tag
+  - It creates a link with a separate page and routes towards it
+  - Requires an HTML attribute in order to complete the link
+- This link is known as a reference, `<a href="https://www.theodinproject.com/about">click me</a>`
+  - the `href` attribute is what highlights text in blue to show that it is linked to an address
+  - Links work for anything that has a web address, this includes:
+    - photos
+    - documents
+    - pdfs
+    - html pages
+    - videos
+#### Absolute and Relative Links
+- Most links are one of two things:
+  - Links to pages on other websites
+  - Links to pages on our own website
+- Absolute Links
+  - Links to pages on other websites, in order to link you need the full address of the destination
+    - Example: `protocol://domain/path`, `www.https://youtube.com/home`
+- Relative Links
+  - Links to other pages within our own website, or internal links
+  - These links do not include the domain name since it is within the same domain
+  - Relative links consist of the **file path** instead of the web address
+- Links are created the same whether absolute or relative, the `href` tag is what controls the anchor binding
+- Proper file management recommends to have a separate directory for `pages` within the project
+- The proper way to direct an anchor to a subdirectory is by using `./` in the path
+  - This tells the anchor to start looking for the **file/directory relative to the `current` directory of where the `index.html` is located** 
+#### A Metaphor
+- The domain name `town.com` is a city
+- The directory where the website is located would be similar to a museum `/museum`
+  - Each page on your website could be considered a room, in this case a room within the museum `/museum/movie_room.html` or `/museum/coffee_shop.html`
+  - Relative links like `./shop/coffee_shop.html` are directions from the current room (movie_room)
+  - Absolute link would be the full directions to the room from entering the town
+    - Ex: `https://town.com/museum/shops/coffee_shop.html`
+#### Images
+- HTML uses the `<img>` tag in order to embedd images into the page, does not require a closing tag
+  - These images can be added with Absolute or relative links Ex: `<img src="https://www.theodinproject.com/mstile-310x310.png">`
+  - ![](images/capture4.png)
+#### Parent Directories
+- In order to navigate to the parent directory when linking, you should use `../` relative to the current directory
+#### Alt attribute
+- images also have an alt attribute
+- Used to describe the image, helps with accessability and when the image itself can't be loaded
+- Ex: ` <img src="https://www.theodinproject.com/mstile-310x310.png" alt="The Odin Project Logo">`
+  - This loads the logo, if it can't then `The Odin Project Logo` is displayed
+### Recipes
+- Project to build a basic recipe website
+- Will have a main index page with links to a few recipes
+- 

odin-links-and-images/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Homepage</h1>
+    <a href="https://www.theodinproject.com/about">click me</a>
+
+    <a href="./pages/about.html">About</a>
+</body>
+</html>

odin-links-and-images/pages/about.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Odin Links and Images</title>
+    </head>
+
+    <body>
+        <h1>About Page</h1>
+    </body>
+</html>