![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-10.png\")
<\/figure>\n\n\n\nIn the upper input box type \u201cVisual\u201d<\/p>\n\n\n\n
Beneath this line, the application Visual Studio Code \u2013 Insiders should appear.<\/p>\n\n\n\n
Click on the icon<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-11.png\")
<\/figure>\n\n\n\nVisual Studio Code should open:<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-12.png\")
<\/figure>\n\n\n\nOn the lower left, if you see a blue badge with a number, you could update to a new version.<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-13.png\")
<\/figure>\n\n\n\nClick on the icon and select Restart to Update<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-15.png\")
<\/figure>\n\n\n\nThe application should be closed and reopened after a while with the new version information.<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-16.png\")
<\/figure>\n\n\n\n<\/span>Open the Repository<\/span><\/h2>\n\n\n\nOpen the created folder.<\/p>\n\n\n\n
Select File \/ Open Folder<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-17.png\")
<\/figure>\n\n\n\nSelect the created folder C:\\Coding4Beginner\\DevContainer<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-18.png\")
<\/figure>\n\n\n\nAfter opening the folder and some time, you see two popups on the lower right side:<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-19.png\")
<\/figure>\n\n\n\n<\/span>Install recommended extensions<\/span><\/h2>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-20.png\")
<\/figure>\n\n\n\nClick on Install<\/p>\n\n\n\n
After a few seconds, restart die application.<\/p>\n\n\n\n
\n- Either by close the app and open it again<\/li>\n\n\n\n
- Or be typing CTRL-SHIT-P and entering Reload in the search field.
Click on Developer: Reload Window<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-21.png\")
<\/figure>\n\n\n\nThe application should be closed and reopened after a while.<\/p>\n\n\n\n
Then, on the popup, click on Reopen in Container<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-22.png\")
<\/figure>\n\n\n\nThe application will start with some installation steps, which you can follow by clicking on show log<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-23.png\")
<\/figure>\n\n\n\nIn the log, you will see the steps, which are executed to install and prepare our development environment.<\/p>\n\n\n\n
\nTechnically:<\/p>\n\n\n\n
We are installing a Linux Distribution (Ubuntu) and install all the required packages (Python, Django, NodeJS, JavaScript, Jupiter) we need for our exercises.<\/p>\n<\/blockquote>\n\n\n\n
After a long time (maybe more than 20 Minutes, depending on your internet speed), the installation is finished.<\/p>\n\n\n\n
You should see something like this, especially on the upper left under EXPLORER the folder name<\/p>\n\n\n\n
WORKSPACE [DEV CONTAINER: \u2026]<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-24.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-25.png\")
<\/figure>\n\n\n\nAnd, again, you should the pop up for installing recommended extensions,<\/p>\n\n\n\n
So, click on Install<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-26.png\")
<\/figure>\n\n\n\nAfter this, you should see multiple windows with a register for each installed extension<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-27.png\")
<\/figure>\n\n\n\nRight-Click on a header of a register and select Close All<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-28.png\")
<\/figure>\n\n\n\n<\/span>Check Development Environment<\/span><\/h2>\n\n\n\n<\/span>Check, if a required extension is installed.<\/span><\/h3>\n\n\n\nClick on Extensions:<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-29.png\")
<\/figure>\n\n\n\nIn the upper textbox insert live server<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-30.png\")
<\/figure>\n\n\n\nIf you find the extension with a configuration icon, everything is good.<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-31.png\")
<\/figure>\n\n\n\nIf you see an Install Button, then click on Install, Install Pre-Release or Install in Dev-Container<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-32.png\")
<\/figure>\n\n\n\n<\/span>Preview a file<\/span><\/h2>\n\n\n\nOpen the Explorer View<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-33.png\")
<\/figure>\n\n\n\nNavigation to the file lessons\/Week01\/solutions\/01.html<\/p>\n\n\n\n
Right-Click on 01.html and select Show Preview<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-34.png\")
<\/figure>\n\n\n\nFinal Result should be<\/p>\n\n\n\n![\"\"](\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/05\/image-35.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"Prepare Development Environment Create a folder C:\\Coding4Beginner Checkout the Repository into this folder Start Command Line Press the keys Windows + R Type cmd A new window appears: Create folder for development environment. Enter the following commands: Enter the following command: Change to new folder…<\/p>\n","protected":false},"author":1,"featured_media":887,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,3,33],"tags":[],"class_list":["post-984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding4beginner","category-kurs","category-kurs-lesson"],"_links":{"self":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/comments?post=984"}],"version-history":[{"count":3,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/984\/revisions"}],"predecessor-version":[{"id":1003,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/984\/revisions\/1003"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/media\/887"}],"wp:attachment":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/media?parent=984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/categories?post=984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/tags?post=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}