Notes for Visual Studio Code By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 6 Rakozy, Greg [@grakozy]. “silhouette photography of person photo – Free Sky Image on Unsplash”. Unsplash, 12 Oct 2015, https://unsplash.com/photos/oMpAz-DN-9I. Web. 1 Nov 2015. Licensed from Unsplash: https://unsplash.com/license. ## Slide 7 Rakozy, Greg [@grakozy]. “silhouette photography of person photo – Free Sky Image on Unsplash”. Unsplash, 12 Oct 2015, https://unsplash.com/photos/oMpAz-DN-9I. Web. 1 Nov 2015. Licensed from Unsplash: https://unsplash.com/license. ## Slide 12 Sensa. “Face with symbols on mouth”. Sensa, 4 Mar 2021, https://sensa.co/emoji/. Web. 12 Oct 2022. MIT License: https://github.com/sensadesign/sensaemoji/blob/main/LICENSE Copyright (c) 2021 sensadesign ## Slide 13 Granneman, Scott. “Visual Studio Code - Initial Info - Main Project Folder”. Vimeo, 11 Oct 2022, https://vimeo.com/758991172. Web. 11 Nov 2022. ## Slide 17 “Stack Overflow Developer Survey 2023”. Stack Overflow, 20 June 2023, https://survey.stackoverflow.co/2023/#section-most-popular-technologies-integrated-development-environment. Web. 25 Jan 2024. ## Slide 20 https://code.visualstudio.com ## Slide 21 Wikipedia contributors. “Microsoft Visual Studio”. Wikipedia, The Free Encyclopedia, 17 July 2022, https://en.wikipedia.org/wiki/Microsoft_Visual_Studio. Web. 20 July 2022. Microsoft. “Visual Studio: IDE and Code Editor for Software Developers and Teams”. Visual Studio. Microsoft, 2022, https://visualstudio.microsoft.com. Web. 20 July 2022. ## Slide 22 https://code.visualstudio.com ## Slide 31 Icon by Dave Gandy: https://www.flaticon.com/authors/dave-gandy ## Slide 32 https://code.visualstudio.com/docs/setup/linux ## Slide 33 https://code.visualstudio.com/docs/setup/linux ## Slide 44 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 45 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 46 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 47 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 48 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 49 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 50 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 51 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 52 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 53 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 54 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 55 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 56 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 58 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 59 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 60 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 61 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 62 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 63 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 64 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 65 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 66 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 67 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 68 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 69 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 70 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 71 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 72 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 73 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 74 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 75 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 76 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 77 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 78 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 79 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 80 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 81 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 82 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 83 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 84 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 85 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 86 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 87 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 88 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 89 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 90 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 104 Granneman, R. Scott. “VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01). GitHub Gist, 1 Feb. 2024, https://gist.github.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae. Web. 15 Apr 2024. ## Slide 105 Granneman, R. Scott. “VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01). GitHub Gist, 1 Feb. 2024, https://gist.github.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae. Web. 15 Apr 2024. ## Slide 106 Granneman, R. Scott. “[Raw code for VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01)]”. GitHub Gist, 1 Feb. 2024, https://gist.githubusercontent.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae/raw/371cf6e7226aaa91803be78b5cd779332dde2312/grannepack-html-vscode-settings.json. Web. 15 Apr 2024. ## Slide 107 Granneman, R. Scott. “[Raw code for VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01)]”. GitHub Gist, 1 Feb. 2024, https://gist.githubusercontent.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae/raw/371cf6e7226aaa91803be78b5cd779332dde2312/grannepack-html-vscode-settings.json. Web. 15 Apr 2024. ## Slide 131 VS Code documentation calls this the “suggestion documentation fly-out”: Microsoft. “Emmet in Visual Studio Code”. Visual Studio Code, 30 Mar. 2022, https://code.visualstudio.com/docs/editor/emmet. Web. 6 Apr 2022. ## Slide 132 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p ## Slide 141 https://emmet.io ## Slide 158 “Abbreviations Syntax”. Emmet Documentation, https://docs.emmet.io/abbreviations/syntax/. Web. 5 Apr 2022. ## Slide 174 Granneman, R. Scott. “GrannePack Web Dev Snippets”. Visual Studio Marketplace, 20 Jan 2023, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Web. 20 Jan 2023. ## Slide 204 Somu X. “Inception fog horn sound effect (HD)”. YouTube, 4 Apr. 2022, https://www.youtube.com/watch?v=ij5W4ZBTcXo. Web. 4 Apr. 2024. Fair use. Modified by converting to MP3. ## Slide 205 Think Media. “Popular Meme Sound Effects (For Video Editing)”. YouTube, 12 Jan. 2022, https://www.youtube.com/watch?v=a9P_j1gMXBo. Web. 4 Apr. 2024. Fair use. Modified by excerpting only “Heavenly Music” & converting to MP3. ## Slide 209 “Search results - grannepack | Visual Studio Code”. Visual Studio Marketplace, https://marketplace.visualstudio.com/search?term=grannepack&target=VSCode&category=All%20categories&sortBy=Relevance. Web. 15 Apr 2024. ## Slide 210 Granneman, R. Scott. “GrannePack HTML”. Visual Studio Marketplace, , https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. ## Slide 219 https://chnsa.ws/1b1 ## Slide 220 Granneman, R. Scott. “HTML5 template for Web dev courses”. GitHub, 30 Oct 2018, https://gist.github.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce. Web. 8 Oct 2022. ## Slide 221 Granneman, R. Scott. “HTML5 template for Web dev courses”. GitHub, 30 Oct 2018, https://gist.github.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce. Web. 8 Oct 2022. ## Slide 222 Granneman, R. Scott. “[Code for HTML5 template for Web dev courses]”. GitHub, 30 Oct 2018, https://gist.githubusercontent.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce/raw/4718225d4deb0b7a4b1cee5aa01b7f050ede53be/html5.html. Web. 8 Oct 2022. ## Slide 223 Granneman, R. Scott. “[Code for HTML5 template for Web dev courses]”. GitHub, 30 Oct 2018, https://gist.githubusercontent.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce/raw/4718225d4deb0b7a4b1cee5aa01b7f050ede53be/html5.html. Web. 8 Oct 2022. ## Slide 235 https://chnsa.ws/1yn ## Slide 236 Granneman, R. Scott. “Bootstrap 5 CDN template for Web dev courses”. GitHub, 08 Oct 2022, https://gist.github.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11. Web. 08 Oct 2022. ## Slide 237 Granneman, R. Scott. “Bootstrap 5 CDN template for Web dev courses”. GitHub, 08 Oct 2022, https://gist.github.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11. Web. 08 Oct 2022. ## Slide 238 Granneman, R. Scott. “[Code for Bootstrap 5 CDN template for Web dev courses]”. GitHub, 8 Oct 2022, https://gist.githubusercontent.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11/raw/1fb44ff50fe0690d8c79ebde3cc894f7984f69bd/bootstrap-5-cdn.html. Web. 8 Oct 2022. ## Slide 239 Granneman, R. Scott. “[Code for Bootstrap 5 CDN template for Web dev courses]”. GitHub, 8 Oct 2022, https://gist.githubusercontent.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11/raw/1fb44ff50fe0690d8c79ebde3cc894f7984f69bd/bootstrap-5-cdn.html. Web. 8 Oct 2022. ## Slide 249 Bootstrap 3 CDN template: https://chnsa.ws/1b2 Bootstrap 4 CDN template: https://chnsa.ws/1b3 Bootstrap 4 NPM template (https://chnsa.ws/1bz) is only needed unless I specifically tell you to, which will be unlikely ## Slide 272 Wikipedia contributors. “Context menu”. Wikipedia, The Free Encyclopedia, 10 May 2022, https://en.wikipedia.org/wiki/Context_menu. Web. 8 Oct. 2022. ## Slide 296 Granneman, Scott. “Visual Studio Code - Installation - Running in GitHub”. Vimeo, 11 Oct 2022, https://vimeo.com/758916351. Web. 11 Nov 2022. ## Slide 311 FIXME: add video ## Slide 321 FIXME Do this section! ## Slide 362 https://marketplace.visualstudio.com/items?itemName=AdamCaviness.theme-monokai-dark-soda ## Slide 371 https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ## Slide 372 https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ## Slide 377 https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-css ## Slide 426 No, you can’t fold everything in just a particular section of code ## Slide 438 https://en.wikipedia.org/wiki/Git; basic definition modified by me ## Slide 445 https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt ## Slide 446 https://www.granneman.com/presentations/all-presentations ## Slide 469 https://code.visualstudio.com ## Slide 475 Icon by Dave Gandy: https://www.flaticon.com/authors/dave-gandy ## Slide 476 https://code.visualstudio.com/#alt-downloads ## Slide 483 For a video of this process, see “Visual Studio Code - Installation - Running in GitHub” at https://vimeo.com/769775274. ## Slide 484 For a video of this process, see “Visual Studio Code - Installation - Running in GitHub” at https://vimeo.com/769775274. ## Slide 487 Dias, Chris. “vscode.dev(!)”. Visual Studio Code, 20 Oct 2021, https://code.visualstudio.com/blogs/2021/10/20/vscode-dev. Web. 09 Nov 2022. ## Slide 488 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 489 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 490 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 491 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 492 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 493 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 494 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 495 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 496 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 497 Microsoft. “settings.json — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 498 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 499 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 500 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 501 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 502 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 503 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 504 Microsoft. “Visual Studio Code Server”. Visual Studio Code, 2 Nov 2022, https://code.visualstudio.com/docs/remote/vscode-server. Web. 09 Nov 2022. ## Slide 505 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 506 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 507 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 508 Microsoft. “index.html — herbert-west [GitHub] - Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 509 Microsoft. “index.html — herbert-west [GitHub] - Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 539 Granneman, R. Scott. “GrannePack Web Dev Snippets”. Visual Studio Marketplace, 20 Jan 2023, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Web. 20 Jan 2023.