ImAlpha/OdinProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

starting first webpage

Browse Source
This commit is contained in:
Jacob Delgado 2023-04-04 17:23:32 -07:00
parent 4d2367c3cb
commit 90fcfaa9cf
4 changed files with 90 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
Markdown/TheOdinProjectNotes.md
View File

@ -28,7 +28,7 @@ git config --global pull.rebase false
git config --get user.name git config --get user.name
git config --get user.email 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 - SSH keys are good for avoiding retyping credentials every time
- Check to see if there is an existing ssh key - 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 - press enter when asked for what location to store it unless you have a specific location
- add a passphrase and retype it - 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 - 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 - Click on new ssh key and give it a name and leave the window open for the next steps
- Copy the public SSH key - Copy the public SSH key
@ -49,11 +49,11 @@ ssh-keygen -t ed25519 -C <youremail>
cat ~/.ssh/id_ed25519.pub cat ~/.ssh/id_ed25519.pub
``` ```
- Paste the key into your settings, it should start with ```ssh-ed25519``` and end with your email - 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 git remote set-url origin https://'username':'password'@repositorylink
``` ```
## Using Git ### Using Git
- Check git version by using `git --version` - 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 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``` - 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 - 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 - 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 - Make sure to only push working code
### Git Best Practices #### Git Best Practices
- Atomic commits - Atomic commits
- A commit that includes changes related to only one feature or task of your program. - A commit that includes changes related to only one feature or task of your program.
- Easily reversible if the commit causes breaking changes - Easily reversible if the commit causes breaking changes
- Enables you to write more specific commit messages - 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. - 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? - What is HTML?
- Stands for **Hypertext Markup Language** - Stands for **Hypertext Markup Language**
- It's the raw data that a webpage is built out of. Includes: - 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) - ![](images/capture3.png)
### Links and Images ### 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
-

BIN
Markdown/images/capture4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

15
odin-links-and-images/index.html Normal file
View File

@ -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>

11
odin-links-and-images/pages/about.html Normal file
View File

@ -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>