diff --git a/enter/.obsidian/plugins/recent-files-obsidian/data.json b/enter/.obsidian/plugins/recent-files-obsidian/data.json index 7df7665..bb8d436 100644 --- a/enter/.obsidian/plugins/recent-files-obsidian/data.json +++ b/enter/.obsidian/plugins/recent-files-obsidian/data.json @@ -1,5 +1,9 @@ { "recentFiles": [ + { + "basename": "Week 7 Slides", + "path": "Week 7 Slides.md" + }, { "basename": "Week 3 Slides", "path": "Coding Tips (Classical)/Project Vault/Current Occupations/Manhattan Youth/Week 3 Slides.md" @@ -195,10 +199,6 @@ { "basename": "Potentiometers & Analog SerialReader", "path": "Machine Tips (Quantum)/Project Vault/Constructions/Hardware/Potentiometers & Analog SerialReader.md" - }, - { - "basename": "Photonic Chips", - "path": "Machine Tips (Quantum)/Project Vault/Constructions/Hardware/Photonic Chips.md" } ], "omittedPaths": [], diff --git a/enter/.obsidian/workspace.json b/enter/.obsidian/workspace.json index 1864a07..e913606 100644 --- a/enter/.obsidian/workspace.json +++ b/enter/.obsidian/workspace.json @@ -14,8 +14,33 @@ "type": "reveal-preview-view", "state": {} } + }, + { + "id": "bfe3f96da35a5568", + "type": "leaf", + "state": { + "type": "markdown", + "state": { + "file": "Coding Tips (Classical)/Project Vault/Current Occupations/Manhattan Youth/Week 3 Slides.md", + "mode": "source", + "source": false + } + } + }, + { + "id": "be222825d8a3267f", + "type": "leaf", + "state": { + "type": "markdown", + "state": { + "file": "Week 7 Slides.md", + "mode": "source", + "source": false + } + } } - ] + ], + "currentTab": 2 } ], "direction": "vertical" @@ -74,8 +99,7 @@ } ], "direction": "horizontal", - "width": 200, - "collapsed": true + "width": 200 }, "right": { "id": "4bd9c02fbfe6785f", @@ -91,6 +115,7 @@ "state": { "type": "backlink", "state": { + "file": "Week 7 Slides.md", "collapseAll": false, "extraContext": false, "sortOrder": "alphabetical", @@ -107,6 +132,7 @@ "state": { "type": "outgoing-link", "state": { + "file": "Week 7 Slides.md", "linksCollapsed": false, "unlinkedCollapsed": true } @@ -128,7 +154,9 @@ "type": "leaf", "state": { "type": "outline", - "state": {} + "state": { + "file": "Week 7 Slides.md" + } } } ] @@ -154,9 +182,10 @@ "obsidian-excalidraw-plugin:Create new drawing": false } }, - "active": "dbad7b010371d947", + "active": "be222825d8a3267f", "lastOpenFiles": [ "Coding Tips (Classical)/Project Vault/Current Occupations/Manhattan Youth/Week 3 Slides.md", + "Week 7 Slides.md", "Coding Tips (Classical)/Terminal Tips/Languages/1.About Languages.md", "Coding Tips (Classical)/Terminal Tips/CLI Tools/CLI Tool Collection/Mods.md", "Coding Tips (Classical)/Project Vault/Past Occupencies/Windtelligent.ai/Windtelligent CTO.md", @@ -185,7 +214,6 @@ "Coding Tips (Classical)/Project Vault/Current Occupations/Communication Projects/RADIO/Software/AIR.md", "Coding Tips (Classical)/Project Vault/Current Occupations/Communication Projects/RADIO/GNURadio/2. GNU Radio tutorials.md", "Coding Tips (Classical)/Project Vault/Current Occupations/Communication Projects/RADIO/GNURadio/About GNU Radio.md", - "Coding Tips (Classical)/Project Vault/Current Occupations/Communication Projects/RADIO/GNURadio/GQRX.md", "imgFiles/Pasted image 20231022162536.png", "Machine Tips (Quantum)/Project Vault/Constructions/3D printing", "Coding Tips (Classical)/Project Vault/Current Occupations/Manhattan Youth/week 5 web design", diff --git a/enter/Week 7 Slides.md b/enter/Week 7 Slides.md new file mode 100644 index 0000000..9e7a632 --- /dev/null +++ b/enter/Week 7 Slides.md @@ -0,0 +1,155 @@ + + +### Week 7: Coding with EXTRA! Javascript & CSS in websites + +--- + +Welcome back to Developer land. So far we have learned: +- what real programmers use to upload their code for others to collaborate. Using **Github.com** +- **HTML** basics to make a website +- the tools we can use to edit code in + + +Today we are going to start programming in CSS! This makes your website **PRETTY**! + + + +--- + +### Building Blocks of a Website + + + +![[imgFiles/Pasted image 20231010141612.png]] + + +- HTML - the content and "bones" of a website +- CSS - the decorations, here we can add fancy decorations +- Javascript - animations can be added here, game-making, scripting, etc.. + +--- + +## Step 1. Go to your favorite website + + +Believe it or not this is all we need to actually start coding (who needs Github anyways) + +--- + + +## Step 2. HTML Building blocks + + +Making the structure + +There are 3 parts that tie into basic HTML structure. Think of these as the “building blocks” of a web page:   + +1. HTML version declaration   +2. Heading(s)   +3. Body + +Let's start with #1. + +--- + +### 1. HTML version declaration   +Every website starts with this line of code for HTML + +Start by typing this line in your program +```html + + + + + + +``` + +--- + +### 2. Next is the Header! + +``` + + + + + + + + + +``` + +--- + +### 3. Next is the Body! + +``` + + + + + + + + + This is the tile of my site! + + + +& This is where the text of a website goes + + + + + +``` + + +--- + + +## Save this file as hello.html file + +& drag it to your browser window. +Ta-da!! You have just launched your web design...but there's only text in it + + +--- + + +## Give it Pizzazz + + +Change the background color in the `body` tag. + +``` + + + +``` + + +Change the size of the text with the `h` tags & `p` tags +``` + +

This is a heading

+

This is a paragraph.

+ + + + + +``` + + + +Add an image from the internet with: + +``` +