diff --git a/Markdown/TheOdinProjectNotes.md b/Markdown/TheOdinProjectNotes.md index c58bf8c..326d942 100644 --- a/Markdown/TheOdinProjectNotes.md +++ b/Markdown/TheOdinProjectNotes.md @@ -54,7 +54,7 @@ cat ~/.ssh/id_ed25519.pub git remote set-url origin https://'username':'password'@repositorylink ``` ## 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 ``` - After the cloning, check the url with ```git remote -v``` - Use ```git status``` to check the status of the current files within your directory @@ -175,13 +175,77 @@ git remote set-url origin https://'username':'password'@repositorylink ``` - **VSCode can generate the entire boilerplate by entering `!` into a blank `.html` document** -## Working With Text -### Paragraphs +### Working With Text +#### Paragraphs - If text is not preceded by a `

`, then it will all clump together as one large body of text - ![](images/chrome_dnDCL9ylH1.png) - ![](images/chrome_r0YaBjn2YV.png) -### Headings +#### Headings - These use the `` tag where `x` is the number that changes the font - `

` is the smallest font - ![](images/chrome_drT4PQKjhb.png) -- \ No newline at end of file +#### Strong Element +- The `` tag makes text **bold** +- It also marks text as important semantically + - This affects tools like screen readers for visual impairments + - It will change the tone of the voice for the content within the `` tag +```HTML +Showing bolded wording +``` +- ![](images/chrome_qSqVJNFNTe.png) +#### Em Element +- The `` tag makes text italic and also emphasises in text to speech +- ![](images/chrome_qzKKOkOr72.png) +#### Nesting and Indentation +- Elements are nested for legibility + - Also known as parent/child/sibling elements + - Similar to braces for code +```HTML + + + + +

Lorem ipsum dolor sit amet.

+ + + ``` +- ![](images/chrome_AhnmdRAmL7.png) +#### HTML Comments +- Comments are not visible when the page is rendered + - Useful for reading page format when performing maintenance + - Comments are written with ``, where the comment is inside the whitespace +```HTML +

View the html to see the hidden comments

+ + + +

Some paragraph text

+ + +``` +- ![](images/chrome_jpELgY8wjN.png) +### Lists +- Lists are one of the most commonly usedd elements/data structures because they neatly organize many items +#### Unordered Lists +- The order is random or irrelevant, then using an unordered list is the right choice +- It's created by using the `
    ` tag, with each element inside of the list using the `
  • ` tag +```HTML +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    +``` +- ![](images/capture1.png) +#### Ordered Lists +- Useful when the order of the list matters +- It's created by using the `
      ` tag instead with the same `
    1. ` elements inside of it +```HTML +
        +
      1. Item 1
        2. +
      2. Item 2
        3. +
      3. Item 3
        4. +
      +``` +- ![](images/capture3.png) +### Links and Images diff --git a/Markdown/images/capture1.png b/Markdown/images/capture1.png new file mode 100644 index 0000000..05efd47 Binary files /dev/null and b/Markdown/images/capture1.png differ diff --git a/Markdown/images/capture3.png b/Markdown/images/capture3.png new file mode 100644 index 0000000..07e8235 Binary files /dev/null and b/Markdown/images/capture3.png differ diff --git a/Markdown/images/chrome_3i5DrmVUD3.png b/Markdown/images/chrome_3i5DrmVUD3.png new file mode 100644 index 0000000..05efd47 Binary files /dev/null and b/Markdown/images/chrome_3i5DrmVUD3.png differ diff --git a/Markdown/images/chrome_AhnmdRAmL7.png b/Markdown/images/chrome_AhnmdRAmL7.png new file mode 100644 index 0000000..88feb15 Binary files /dev/null and b/Markdown/images/chrome_AhnmdRAmL7.png differ diff --git a/Markdown/images/chrome_jpELgY8wjN.png b/Markdown/images/chrome_jpELgY8wjN.png new file mode 100644 index 0000000..55fcf22 Binary files /dev/null and b/Markdown/images/chrome_jpELgY8wjN.png differ diff --git a/Markdown/images/chrome_qSqVJNFNTe.png b/Markdown/images/chrome_qSqVJNFNTe.png new file mode 100644 index 0000000..7c150d2 Binary files /dev/null and b/Markdown/images/chrome_qSqVJNFNTe.png differ diff --git a/Markdown/images/chrome_qzKKOkOr72.png b/Markdown/images/chrome_qzKKOkOr72.png new file mode 100644 index 0000000..f6ec1f1 Binary files /dev/null and b/Markdown/images/chrome_qzKKOkOr72.png differ