{"id":1104,"date":"2024-08-07T18:17:43","date_gmt":"2024-08-07T16:17:43","guid":{"rendered":"https:\/\/programmier-workshops.de\/blog\/?p=1104"},"modified":"2024-08-07T18:18:49","modified_gmt":"2024-08-07T16:18:49","slug":"lesson-responsive-layout-with-common-header-and-footer","status":"publish","type":"post","link":"https:\/\/programmier-workshops.de\/blog\/lesson-responsive-layout-with-common-header-and-footer\/","title":{"rendered":"Lesson: Responsive Layout with common Header and Footer"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Creating a Layout with multiple HTML files mostly leads to duplicate code of the common parts (header, footer) in each HTML file.<\/p>\n\n\n\n<p>To use one file  and &#8222;include&#8220; this file in each HTML page, we can use Javascript to load the header file dynamically.<\/p>\n\n\n\n<p>Code is <a href=\"https:\/\/github.com\/coding4beginner\/Tutorial_Create-responsible-layout-with-header-footer-and-sidebar\">here<\/a>. Demo is <a href=\"https:\/\/coding4beginner.github.io\/Tutorial_Create-responsible-layout-with-header-footer-and-sidebar\/index.html\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/08\/logo-1024x512.png\" alt=\"\" class=\"wp-image-1105\" srcset=\"https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/08\/logo-1024x512.png 1024w, https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/08\/logo-300x150.png 300w, https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/08\/logo-768x384.png 768w, https:\/\/programmier-workshops.de\/blog\/wp-content\/uploads\/2024\/08\/logo.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Creating a Layout with multiple HTML files mostly leads to duplicate code of the common parts (header, footer) in each HTML file. To use one file and &#8222;include&#8220; this file in each HTML page, we can use Javascript to load the header file dynamically.&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,9,3,33],"tags":[],"class_list":["post-1104","post","type-post","status-publish","format-standard","hentry","category-coding4beginner","category-css","category-kurs","category-kurs-lesson"],"_links":{"self":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/1104","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=1104"}],"version-history":[{"count":1,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/1104\/revisions"}],"predecessor-version":[{"id":1106,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/posts\/1104\/revisions\/1106"}],"wp:attachment":[{"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/media?parent=1104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/categories?post=1104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmier-workshops.de\/blog\/wp-json\/wp\/v2\/tags?post=1104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}