{"id":13,"date":"2025-05-10T14:48:40","date_gmt":"2025-05-10T14:48:40","guid":{"rendered":"https:\/\/leutgeweger-miriam.web.kslinz.at\/?page_id=13"},"modified":"2025-06-13T17:42:29","modified_gmt":"2025-06-13T17:42:29","slug":"projects-computer-science","status":"publish","type":"page","link":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/projects-computer-science\/","title":{"rendered":"Projects Computer Science"},"content":{"rendered":"\n<p>In our computer science class, we are introduced to the fundamentals of web development by learning HTML and CSS. We use platforms like StackBlitz to build and test our projects in real time, which helps us understand how websites are structured and styled. The course not only teaches us technical skills, but also encourages logical thinking and problem-solving. It\u2019s a hands-on, practical approach that gives us a solid foundation in modern web technologies.<br><br>In our first year of computer science, we were introduced to the basics of web development by learning HTML and CSS. We created our first websites and learned how to structure and style content. Here&#8217;s a link to my website from that time: <a href=\"https:\/\/leutgeweger-miriam.web.kslinz.at\/about.html\">\u00dcber Mich<\/a><br><br>This year, we&#8217;re taking it a step further by working with StackBlitz, an online development environment that lets us build and test projects directly in the browser. It supports more advanced setups like frameworks, TypeScript, and live previews. StackBlitz helps us understand how modern web technologies work together and gives us a real-world feel for coding and debugging.<\/p>\n\n\n\n<p>Below are some of the projects we&#8217;ve built using StackBlitz. They reflect what we&#8217;ve learned so far in terms of structure, interactivity, and design.<\/p>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-1e265810aa87b9ee2770b3e2e62bc575\" style=\"color:#728a6e\"><strong>&#8220;Any fool can write code that a computer can understand. Good programmers write code that humans can understand.&#8221;<\/strong><br>\u2014 Martin Fowler<\/p>\n\n\n\n<div class=\"iframe-container\">\n  <iframe src=\"https:\/\/stackblitz.com\/edit\/p5-starter-j6xs5ah1?embed=1&#038;file=index.ts\" \n          frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \n    height: 0;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/style>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"iframe-container\">\n  <iframe src=\"https:\/\/stackblitz.com\/edit\/p5-starter-b8sdoucg?embed=1&#038;file=index.ts\" \n          frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \n    height: 0;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/style>\n\n\n\n<p>Klick on the black space!<\/p>\n\n\n\n<div class=\"iframe-container\">\n  <iframe src=\"https:\/\/stackblitz.com\/edit\/p5-starter-q3pfimiz?file=index.ts\" \n          frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \n    height: 0;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/style>\n\n\n\n<p>Klick on the black space!<\/p>\n\n\n\n<div class=\"iframe-container\">\n  <iframe src=\"https:\/\/stackblitz.com\/edit\/p5-starter-5phpmbr8?file=index.ts\" \n          frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \n    height: 0;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/style>\n\n\n\n<div class=\"iframe-container\">\n  <iframe src=\"https:\/\/stackblitz.com\/edit\/p5-starter-osx78z6x?file=index.ts\" \n          frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \n    height: 0;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/style>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"iframe-container\">\n  <iframe src=\"https:\/\/stackblitz.com\/edit\/p5-starter-kw8x6l?file=index.ts\"\n          frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-bottom: 56.25%; \n    height: 0;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n<\/style>\n\n\n\n<p class=\"has-text-color has-link-color wp-elements-79fbf319a38557998233815bce114123\" style=\"color:#728a6e\"><strong>&#8220;Code is like humor. When you have to explain it, it\u2019s bad.&#8221;<\/strong><br>\u2014 Cory House<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our computer science class, we are introduced to the fundamentals of web development by learning HTML and CSS. We use platforms like StackBlitz to build and test our projects in real time, which helps us understand how websites are structured and styled. The course not only teaches us technical skills, but also encourages logical thinking and problem-solving. It\u2019s a hands-on, practical approach that gives us a solid foundation in modern web technologies. In our first year of computer science, we were introduced to the basics of web development by learning HTML and CSS. We created our first websites and learned how to structure and style content. Here&#8217;s a link to my website from that time: \u00dcber Mich This year, we&#8217;re taking it a step further by working with StackBlitz, an online development environment that lets us build and test projects directly in the browser. It supports more advanced setups like frameworks, TypeScript, and live previews. StackBlitz helps us understand how modern web technologies work together and gives us a real-world feel for coding and debugging. Below are some of the projects we&#8217;ve built using StackBlitz. They reflect what we&#8217;ve learned so far in terms of structure, interactivity, and design. &#8220;Any fool can write code that a computer can understand. Good programmers write code that humans can understand.&#8221;\u2014 Martin Fowler Klick on the black space! Klick on the black space! &#8220;Code is like humor. When you have to explain it, it\u2019s bad.&#8221;\u2014 Cory House<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":25,"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":363,"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/pages\/13\/revisions\/363"}],"wp:attachment":[{"href":"https:\/\/leutgeweger-miriam.web.kslinz.at\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}