diff --git a/Markdown/TheOdinProjectNotes.md b/Markdown/TheOdinProjectNotes.md index 326d942..155acda 100644 --- a/Markdown/TheOdinProjectNotes.md +++ b/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 ``` - 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 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 ``` - 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 ``` 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 ``` 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 `` 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, `click me` + - 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 `` 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: `` + - ![](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: ` 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 +- \ No newline at end of file diff --git a/Markdown/images/capture4.png b/Markdown/images/capture4.png new file mode 100644 index 0000000..7d9c796 Binary files /dev/null and b/Markdown/images/capture4.png differ diff --git a/odin-links-and-images/index.html b/odin-links-and-images/index.html new file mode 100644 index 0000000..77921dd --- /dev/null +++ b/odin-links-and-images/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + +

Homepage

+ click me + + About + + \ No newline at end of file diff --git a/odin-links-and-images/pages/about.html b/odin-links-and-images/pages/about.html new file mode 100644 index 0000000..97c8bcf --- /dev/null +++ b/odin-links-and-images/pages/about.html @@ -0,0 +1,11 @@ + + + + + Odin Links and Images + + + +

About Page

+ + \ No newline at end of file