Onlinekurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

<!DOCTYPE html> <html lang="de"> <head> <meta name="pageKey" content="d_learning_course_guest">  <meta name="locale" content="de_DE"> <meta id="config" data-app-version="2.0.2343" data-call-tree-id="AAYuU4+Tg7UEGXge80iusQ==" data-multiproduct-name="learning-guest-frontend" data-service-name="learning-guest-frontend" data-browser-id="fbf9a3ca-69df-4c85-80e8-c5c3d9afd344" data-enable-page-view-heartbeat-tracking data-page-instance="urn:li:page:learning_course_guest;WxYjGhzBRV+LMLOQAE3Xdg==" data-disable-jsbeacon-pagekey-suffix="false" data-member-id="0" data-dna-member-lix-treatment="control" data-human-member-lix-treatment="control" data-dfp-member-lix-treatment="control"> <link rel="canonical" href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid">     <link rel="manifest" href="/homepage-guest/manifest.json" crossorigin="use-credentials">  <script> function getDfd() {let yFn,nFn;const p=new Promise(function(y, n){yFn=y;nFn=n;});p.resolve=yFn;p.reject=nFn;return p;} window.lazyloader = getDfd(); window.tracking = getDfd(); window.impressionTracking = getDfd(); window.ingraphTracking = getDfd(); window.appDetection = getDfd(); window.pemTracking = getDfd(); </script>  <link rel="icon" href="https://static.licdn.com/aero-v1/sc/h/444zstxv7s91nepfm5et6ofge"> <title>Onlinekurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid | LinkedIn Learning, früher Lynda.com</title> <meta name="robots" content="noarchive, max-image-preview:large"> <meta name="description" content="Mit CSS schnell und einfach responsive Layouts erstellen."> <meta property="og:site_name" content="LinkedIn"> <meta name="twitter:site" content="@LI_Learning"> <meta name="twitter:card" content="summary"> <meta name="litmsProfileName" content="learning-guest-frontend"> <meta property="og:title" content="Onlinekurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid | LinkedIn Learning, früher Lynda.com"> <meta name="twitter:title" content="Onlinekurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid | LinkedIn Learning, früher Lynda.com"> <meta property="og:description" content="Mit CSS schnell und einfach responsive Layouts erstellen."> <meta name="twitter:description" content="Mit CSS schnell und einfach responsive Layouts erstellen."> <meta property="og:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU"> <meta name="twitter:image" content="https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU">  <meta property="og:url" content="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid"> <meta property="og:type" content="website"> <meta name="clientSideIngraphs" content="1" data-gauge-metric-endpoint="/learning-guest/api/ingraphs/gauge" data-counter-metric-endpoint="/learning-guest/api/ingraphs/counter"> <link rel="stylesheet" href="https://static.licdn.com/aero-v1/sc/h/6b8wvsb3tfl1nzziqbquygy3l"> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"Course","provider":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"publisher":{"@type":"Organization","name":"LinkedIn Learning","url":"https://www.linkedin.com/learning/"},"hasCourseInstance":{"@type":"CourseInstance","courseMode":"online","courseWorkload":"PT3H42M43S","instructor":[{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"}]},"inLanguage":"de","name":"Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid ","offers":[{"@type":"Offer","category":"Subscription"},{"@type":"Offer","category":"Paid","price":"50.46","priceCurrency":"SGD"}],"description":"Mit CSS schnell und einfach responsive Layouts erstellen.","image":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","creator":[{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"}],"author":[{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"}],"dateCreated":"2022-12-13","datePublished":"2022-12-13","thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","timeRequired":"PT3H42M43S","totalHistoricalEnrollment":1494,"url":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid","about":[{"@type":"Thing","url":"https://de.linkedin.com/learning/search?keywords=CSS+Grid+Layout","name":"CSS Grid Layout"},{"@type":"Thing","url":"https://de.linkedin.com/learning/search?keywords=CSS+Flexbox","name":"CSS Flexbox"},{"@type":"Thing","url":"https://www.linkedin.com/learning/topics/responsive-web-design","name":"Responsive Webdesign"}],"hasPart":[[{"@type":"VideoObject","name":"Mit CSS schnell und einfach responsive Layouts erstellen - Einleitung","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT59S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mit-css-schnell-und-einfach-responsive-layouts-erstellen"},{"@type":"VideoObject","name":"Was Sie erwartet und was Sie mitbringen sollten - Einleitung","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/was-sie-erwartet-und-was-sie-mitbringen-sollten"}],[{"@type":"VideoObject","name":"Die Übungswebsite im Überblick - vom klassischen zum modernen Layout - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M11S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-ubungswebsite-im-uberblick-vom-klassischen-zum-modernen-layout"},{"@type":"VideoObject","name":"Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT5M13S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-modernes-layout-1-zusatzliche-div-elemente-fur-die-layoutbereiche-hinzufugen"},{"@type":"VideoObject","name":"Ein modernes Layout: 2. Die Layoutbereiche gestalten - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M16S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-modernes-layout-2-die-layoutbereiche-gestalten"},{"@type":"VideoObject","name":"Ein modernes Layout: 3. Das Fine-Tuning der Abstände - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M21S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-modernes-layout-3-das-fine-tuning-der-abstande"},{"@type":"VideoObject","name":"\"Custom properties\": Eigene Eigenschaften definieren und als CSS-Variablen nutzen - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M44S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/custom-properties-eigene-eigenschaften-definieren-und-als-css-variablen-nutzen"},{"@type":"VideoObject","name":"Challenge: Farbwerte für die Übungswebsite mit CSS-Variablen definieren - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M25S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-farbwerte-fur-die-ubungswebsite-mit-css-variablen-definieren"},{"@type":"VideoObject","name":"Solution: Farbwerte für die Übungswebsite mit CSS-Variablen definieren - 1. Ein modernes Layout für die Übungswebsite","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M47S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-farbwerte-fur-die-ubungswebsite-mit-css-variablen-definieren"}],[{"@type":"VideoObject","name":"Responsives Webdesign: Das Web wird flexibel - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M15S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/responsives-webdesign-das-web-wird-flexibel"},{"@type":"VideoObject","name":"Medientypen definieren das Ausgabemedium - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M45S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/medientypen-definieren-das-ausgabemedium"},{"@type":"VideoObject","name":"Media Queries sind Medientypen plus Medienfeatures - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M23S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/media-queries-sind-medientypen-plus-medienfeatures"},{"@type":"VideoObject","name":"Media Queries brauchen den \"Meta-Viewport\" - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M10S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/media-queries-brauchen-den-meta-viewport"},{"@type":"VideoObject","name":"Auf der Suche nach dem richtigen Breakpoint - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M41S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/auf-der-suche-nach-dem-richtigen-breakpoint"},{"@type":"VideoObject","name":"Challenge: Responsive Schriftgröße per Media Query - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M20S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-responsive-schriftgrosse-per-media-query"},{"@type":"VideoObject","name":"Solution: Responsive Schriftgröße per Media Query - 2. Media Queries und responsives Webdesign ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M35S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-responsive-schriftgrosse-per-media-query"}],[{"@type":"VideoObject","name":"Block- und Inline-Boxen im Flow: Der Block Formatting Context - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M23S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/block-und-inline-boxen-im-flow-der-block-formatting-context"},{"@type":"VideoObject","name":"Block-Boxen im Flow und die Eigenschaft \"position\" im Überblick - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M20S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/block-boxen-im-flow-und-die-eigenschaft-position-im-uberblick"},{"@type":"VideoObject","name":"Versetzt weiterfließen - \"position:relative\" - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M32S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/versetzt-weiterfliessen-position-relative"},{"@type":"VideoObject","name":"Raus aus dem Fluss: \"position:absolute\" - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M12S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/raus-aus-dem-fluss-position-absolute"},{"@type":"VideoObject","name":"Praktisch: absolute und relative Positionierung kombinieren - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M59S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/praktisch-absolute-und-relative-positionierung-kombinieren"},{"@type":"VideoObject","name":"Wie ein Fels in der Brandung: \"position:fixed\" - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M40S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/wie-ein-fels-in-der-brandung-position-fixed"},{"@type":"VideoObject","name":"Scrollen und dann stehen bleiben: \"position:sticky\" für die Navigation - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M22S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/scrollen-und-dann-stehen-bleiben-position-sticky-fur-die-navigation"},{"@type":"VideoObject","name":"Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft \"z-index\" - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M49S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/positionierte-boxen-und-die-stapelreihenfolge-mit-der-eigenschaft-z-index"},{"@type":"VideoObject","name":"Challenge: Eine Bildbeschriftung über dem Bild platzieren - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M16S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-eine-bildbeschriftung-uber-dem-bild-platzieren"},{"@type":"VideoObject","name":"Solution: Eine Bildbeschriftung über dem Bild platzieren - 3. Der Flow und die Eigenschaft position","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M23S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-eine-bildbeschriftung-uber-dem-bild-platzieren"}],[{"@type":"VideoObject","name":"Die Eigenschaft \"float\" im Überblick - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M5S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-eigenschaft-float-im-uberblick"},{"@type":"VideoObject","name":"Gefloatete Elemente sind nicht mehr ganz im Flow - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M15S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/gefloatete-elemente-sind-nicht-mehr-ganz-im-flow"},{"@type":"VideoObject","name":"\"float\" und \"clear\" im Fließtext - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M4S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/float-und-clear-im-fliesstext"},{"@type":"VideoObject","name":"Praktisch: Klassen zum Floaten und Clearen - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M50S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/praktisch-klassen-zum-floaten-und-clearen"},{"@type":"VideoObject","name":"Floats umschließen mit einem neuen Block Formatting Context - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M21S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/floats-umschliessen-mit-einem-neuen-block-formatting-context"},{"@type":"VideoObject","name":"Floats umschließen für alle Browser mit @supports - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M37S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/floats-umschliessen-fur-alle-browser-mit-supports"},{"@type":"VideoObject","name":"Challenge: Textfluss um gefloatetes Bild gestalten mit \"shape-outside\" - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M31S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-textfluss-um-gefloatetes-bild-gestalten-mit-shape-outside"},{"@type":"VideoObject","name":"Solution: Textfluss um gefloatetes Bild gestalten mit \"shape-outside\" - 4. Schweben und schweben lassen: float und clear","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M5S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-textfluss-um-gefloatetes-bild-gestalten-mit-shape-outside"}],[{"@type":"VideoObject","name":"Flexbox und Grid: das moderne CSS-Layout - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M45S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexbox-und-grid-das-moderne-css-layout"},{"@type":"VideoObject","name":"Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M4S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexbox-display-flex-erzeugt-einen-flex-container-und-flex-items"},{"@type":"VideoObject","name":"Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M1S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mehrspaltige-layouts-per-flexbox-neue-moglichkeiten-ohne-alte-probleme"},{"@type":"VideoObject","name":"Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M3S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-fliessrichtung-von-flex-items-kontrollieren-mit-flex-direction-flex-wrap-und-flex-flow"},{"@type":"VideoObject","name":"Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT5M2S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-ausrichtung-von-flex-items-kontrollieren-mit-justify-content-align-items-und-align-self"},{"@type":"VideoObject","name":"Automatische Abstände für Flex-Items mit margin: auto - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M44S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/automatische-abstande-fur-flex-items-mit-margin-auto"},{"@type":"VideoObject","name":"Flexibilität für Flex-Items: Die Zauberformel flex: 1 - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M53S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexibilitat-fur-flex-items-die-zauberformel-flex-1"},{"@type":"VideoObject","name":"Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M4S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/sticky-footer-den-fussbereich-mit-flex-1-am-unteren-rand-des-viewports-platzieren"},{"@type":"VideoObject","name":"Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT5M","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-reihenfolge-von-flex-items-definieren-und-zwischenraume-festlegen"},{"@type":"VideoObject","name":"Die wichtigsten Flexbox-Eigenschaften auf einen Blick - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M48S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-wichtigsten-flexbox-eigenschaften-auf-einen-blick"},{"@type":"VideoObject","name":"Challenge: Die Navigation im Fußbereich gestalten - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M29S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-die-navigation-im-fussbereich-gestalten"},{"@type":"VideoObject","name":"Solution: Die Navigation im Fußbereich gestalten - 5. Flexbox: mehrspaltige Layouts mit display:flex","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M46S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-die-navigation-im-fussbereich-gestalten"}],[{"@type":"VideoObject","name":"Die responsive Navigation im Überblick - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M3S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-responsive-navigation-im-uberblick"},{"@type":"VideoObject","name":"Schritt 1: Prüfen, ob JavaScript aktiv ist - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M16S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-1-prufen-ob-javascript-aktiv-ist"},{"@type":"VideoObject","name":"Schritt 2: Die mobile Navigation gestalten - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M53S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-2-die-mobile-navigation-gestalten"},{"@type":"VideoObject","name":"Schritt 3: Den Menübutton im HTML einfügen - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M57S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-3-den-menubutton-im-html-einfugen"},{"@type":"VideoObject","name":"Schritt 4: Den Menübutton per CSS gestalten - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M22S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-4-den-menubutton-per-css-gestalten"},{"@type":"VideoObject","name":"Schritt 5: Die Navigation per CSS ausblenden - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M59S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-5-die-navigation-per-css-ausblenden"},{"@type":"VideoObject","name":"Schritt 6: Die Navigation mit dem Menübutton einblenden - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT5M3S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-6-die-navigation-mit-dem-menubutton-einblenden"},{"@type":"VideoObject","name":"Challenge: Eine horizontale Navigation für breitere Viewports - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M32S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-eine-horizontale-navigation-fur-breitere-viewports"},{"@type":"VideoObject","name":"Solution: Eine horizontale Navigation für breitere Viewports - 6. Eine responsive Navigation erstellen","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M10S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-eine-horizontale-navigation-fur-breitere-viewports"}],[{"@type":"VideoObject","name":"Ein Grid ist ein Raster und schafft Ordnung - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M58S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-grid-ist-ein-raster-und-schafft-ordnung"},{"@type":"VideoObject","name":"Mehrspaltige Layouts nur für moderne Browser: @supports - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT2M21S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mehrspaltige-layouts-nur-fur-moderne-browser-supports"},{"@type":"VideoObject","name":"Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co. - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M29S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-wichtigsten-begriffe-grid-container-grid-items-co"},{"@type":"VideoObject","name":"Das erste Grid-Layout: Die Infoboxen nebeneinander platzieren - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT5M8S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/das-erste-grid-layout-die-infoboxen-nebeneinander-platzieren"},{"@type":"VideoObject","name":"Flexbox und Grid sind ein gutes Team - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M10S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexbox-und-grid-sind-ein-gutes-team"},{"@type":"VideoObject","name":"Grid-Items manuell platzieren: 1. Mit nummerierten Linien - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M48S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/grid-items-manuell-platzieren-1-mit-nummerierten-linien"},{"@type":"VideoObject","name":"Grid-Items manuell platzieren: 2. Mit benannten Bereichen - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT5M10S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/grid-items-manuell-platzieren-2-mit-benannten-bereichen"},{"@type":"VideoObject","name":"Das Team: 1. HTML und grundlegende Gestaltung per CSS - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M15S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/das-team-1-html-und-grundlegende-gestaltung-per-css"},{"@type":"VideoObject","name":"Das Team: 2. Ein responsives Grid ohne Media Query - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT4M51S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/das-team-2-ein-responsives-grid-ohne-media-query"},{"@type":"VideoObject","name":"Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M18S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-unregelmassiges-grid-layout-mit-unterschiedlich-breiten-spalten-und-zeilen"},{"@type":"VideoObject","name":"Die wichtigsten Grid-Eigenschaften auf einen Blick - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M29S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-wichtigsten-grid-eigenschaften-auf-einen-blick"},{"@type":"VideoObject","name":"Challenge: Die Kontaktseite per Grid gestalten - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT1M31S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-die-kontaktseite-per-grid-gestalten"},{"@type":"VideoObject","name":"Solution: Die Kontaktseite per Grid gestalten - 7. CSS-Grid: mehrspaltige Layouts mit display:grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M8S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-die-kontaktseite-per-grid-gestalten"}],[{"@type":"VideoObject","name":"Ein kurzer Blick in die Zukunft von CSS - 8. Ein Blick in die Zukunft von CSS","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT3M24S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":true,"isAccessibleForFree":false,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-kurzer-blick-in-die-zukunft-von-css"}]],"syllabusSections":[{"@type":"Syllabus","name":"Mit CSS schnell und einfach responsive Layouts erstellen","timeRequired":"PT59S","description":"Lernen Sie in diesem LinkedIn Learning-Kurs, wie sich per CSS responsive Layouts erstellen lassen. Zum Start bringt Ihnen ihr Trainer Peter Müller die Inhalte und Lernziele nahe."},{"@type":"Syllabus","name":"Was Sie erwartet und was Sie mitbringen sollten","timeRequired":"PT3M","description":"In diesem Film zeigt Ihnen Peter Müller, was Sie in diesem Kurs inhaltlich erwartet und welche Kenntnisse Sie am besten schon mitbringen sollten: HTML-Vorwissen, CSS-Grundlagen, aktuelle Browser, die Projektdateien und einen Editor wie Visual Studio Code, am besten mit der Erweiterung Live Preview."},{"@type":"Syllabus","name":"Die Übungswebsite im Überblick - vom klassischen zum modernen Layout","timeRequired":"PT2M11S","description":"In diesem Film stellt Ihnen Peter Müller die in Teil 1 und 2 der Kursreihe erstellte Übungswebsite vor, die ein einspaltiges, klassisches Layout mit einer maximalen Breite von 600 Pixel aufweist. In schmalen Viewports ist das okay, in breiteren hingegen wird links und rechts viel Hintergrundfarbe sichtbar. In einem modernen Layout verschwindet der einfarbige Hintergrund und die Layout-Bereiche erstrecken sich als farbige Streifen über die volle Breite des Viewports."},{"@type":"Syllabus","name":"Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen","timeRequired":"PT5M13S","description":"Im ersten Schritt werden die Layoutbereiche mit einem zusätzlichen inneren div-Element gedoppelt. Die beiden Container sind für jeweils eine strikte Aufgabe zuständig: Der äußere Container füllt mit seiner Hintergrundfarbe den gesamten Viewport, der innere bekommt eine maximale Breite und begrenzt so den Inhalt."},{"@type":"Syllabus","name":"Ein modernes Layout: 2. Die Layoutbereiche gestalten","timeRequired":"PT4M16S","description":"Die Gestaltung der Layoutbereiche erfolgt mit wenigen CSS-Regeln in einem neuen Stylesheet-Modul, das im zentralen Stylesheet style.css eingebunden wird."},{"@type":"Syllabus","name":"Ein modernes Layout: 3. Das Fine-Tuning der Abstände","timeRequired":"PT4M21S","description":"In diesem Film werden für einige Elemente nach der Umstellung die Innen- und Außenabstände optimiert: Wenn sich die Umstände ändern, müssen oft die Abstände angepasst werden."},{"@type":"Syllabus","name":"\"Custom properties\": Eigene Eigenschaften definieren und als CSS-Variablen nutzen","timeRequired":"PT4M44S","description":"Es gibt die Möglichkeit, in einem Stylesheet eigene Eigenschaften zu definieren. Diese custom properties werden auch als CSS-Variablen bezeichnet, da sich damit häufig benutzte Werte zentral speichern und im CSS mit der Funktion var() zuweisen lassen."},{"@type":"Syllabus","name":"Challenge: Farbwerte für die Übungswebsite mit CSS-Variablen definieren","timeRequired":"PT1M25S","description":"In dieser Challenge geht es darum, die Farbwerte für die Übungswebsite als custom properties zu definieren. Überlegen Sie sich aussagekräftige Namen, weisen Sie die Variablen zu und testen Sie, ob alles funktioniert hat."},{"@type":"Syllabus","name":"Solution: Farbwerte für die Übungswebsite mit CSS-Variablen definieren","timeRequired":"PT3M47S","description":"In der Solution werden die Farbwerte als custom property gespeichert und im CSS als Variablen zugewiesen. Dabei können Sie optional z.B. einen Hex-Wert als Fallback angeben. Im Browser überprüfen Sie die Variablen im Entwicklertool."},{"@type":"Syllabus","name":"Responsives Webdesign: Das Web wird flexibel","timeRequired":"PT3M15S","description":"Das Web ist nicht aus Papier und Webseiten sollten sich Ihrer Umgebung anpassen. Bereits im Mai 2010 sorgte ein Artikel namens \"Responsive Web Design\" für Furore. Der Autor Ethan Marcotte beschrieb darin drei Techniken, mit denen sich flexible Webseiten bauen lassen: flexible Layouts, flexible Bilder und Media Queries."},{"@type":"Syllabus","name":"Medientypen definieren das Ausgabemedium ","timeRequired":"PT3M45S","description":"Mit @media und den Medientypen all, screen oder print können Sie das Ausgabemedium definieren, für das das CSS innerhalb der entsprechenden Anweisung gilt. Im Film sehen Sie eine einfache Druckversion für die Übungswebsite im Browser."},{"@type":"Syllabus","name":"Media Queries sind Medientypen plus Medienfeatures","timeRequired":"PT3M23S","description":"CSS stellt mit Media Queries eine Erweiterung der bestehenden Mediatypen um Medienfeatures zur Verfügung, um das Layout einer Webseite für verschiedene Situationen anpassen zu können."},{"@type":"Syllabus","name":"Media Queries brauchen den \"Meta-Viewport\"","timeRequired":"PT3M10S","description":"Der Meta Viewport veranlasst mobile Browser, den Viewport so breit zu machen wie das Gerät, und Webseiten nicht zu sehr verkleinert darzustellen. Dadurch werden Media Queries erst möglich."},{"@type":"Syllabus","name":"Auf der Suche nach dem richtigen Breakpoint","timeRequired":"PT3M41S","description":"Die Abfrage der Mindest- und Maximalbreite des Viewports gehört zu den häufigsten Media Queries. Dabei wird bei einem bestimmten Breakpoint das Layout angepasst. Dieses Video gibt Ihnen Tipps zur Auswahl der richtigen Breakpoints."},{"@type":"Syllabus","name":"Challenge: Responsive Schriftgröße per Media Query","timeRequired":"PT1M20S","description":"In dieser Challenge geht es darum, die Schrift auf breiteren Viewports per Media Query etwas zu vergrößern, sodass der Text auf allen Geräten gut lesbar bleibt."},{"@type":"Syllabus","name":"Solution: Responsive Schriftgröße per Media Query","timeRequired":"PT2M35S","description":"Mit zwei Media Queries gestalten Sie die Schriftgröße in dieser Solution so, dass der Fließtext in schmalen Viewports 16px entspricht, in mittleren Viewports 18px wird und in breiteren Viewports auf 20px wächst."},{"@type":"Syllabus","name":"Block- und Inline-Boxen im Flow: Der Block Formatting Context","timeRequired":"PT3M23S","description":"HTML-Elemente folgen dem Flow, dem Fluss eines Dokuments im sichtbaren Bereich eines Browserfensters. Im Block Formatting Context stehen Inline-Boxen nebeneinander und werden so breit wie ihr Inhalt. Block-Boxen stehen hingegen immer untereinander und werden so breit wie möglich dargestellt."},{"@type":"Syllabus","name":"Block-Boxen im Flow und die Eigenschaft \"position\" im Überblick","timeRequired":"PT3M20S","description":"Block-Boxen im Flow stehen immer untereinander, auch wenn daneben noch Platz wäre. Sie haben für die Eigenschaft position den Standardwert static. position kennt ansonsten noch die Werte relative, absolute, fixed oder sticky, die Sie in diesem Kapitel kennenlernen."},{"@type":"Syllabus","name":"Versetzt weiterfließen - \"position:relative\"","timeRequired":"PT2M32S","description":"Relativ positionierte Boxen bleiben im Flow, können aber mit den Eigenschaften top, right, bottom oder left von ihrer ursprünglichen Position verschoben werden."},{"@type":"Syllabus","name":"Raus aus dem Fluss: \"position:absolute\" ","timeRequired":"PT2M12S","description":"Absolut positionierte Elemente sind nicht mehr im Flow und somit für die anderen Elemente auf der Webseite nicht vorhanden. Sie können ebenfalls mit top, right, bottom und left positioniert werden."},{"@type":"Syllabus","name":"Praktisch: absolute und relative Positionierung kombinieren","timeRequired":"PT3M59S","description":"Ein umgebendes relativ positioniertes Element gilt als Bezugspunkt für die Werte der absoluten Positionierung. In diesem Video zeigt Ihnen Peter Müller ein Beispiel für die sehr praktische Kombination von absoluter und relativer Positionierung."},{"@type":"Syllabus","name":"Wie ein Fels in der Brandung: \"position:fixed\" ","timeRequired":"PT2M40S","description":"Ein fixiertes HTML-Element verhält sich ähnlich wie ein absolut positioniertes Element und wird aus dem Flow gehoben. Anders als ein absolut positioniertes Element bleibt es beim Scrollen einer Webseite aber an der fixierten Stelle stehen."},{"@type":"Syllabus","name":"Scrollen und dann stehen bleiben: \"position:sticky\" für die Navigation","timeRequired":"PT2M22S","description":"Boxen mit der Anweisung \"position:sticky\" sind im Flow, bis sie einen bestimmten Punkt erreichen. Dort bleiben sie - wie in diesem Film die Navigation - stehen und werden aus dem Flow gehoben."},{"@type":"Syllabus","name":"Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft \"z-index\" ","timeRequired":"PT3M49S","description":"Die \"z-index\"-Eigenschaft ermöglicht es, die Reihenfolge positionierter HTML-Elemente auf der z-Achse zu beeinflussen. z-index ist nur relevant, wenn sich positionierte Boxen überlappen."},{"@type":"Syllabus","name":"Challenge: Eine Bildbeschriftung über dem Bild platzieren ","timeRequired":"PT1M16S","description":"In dieser Challenge geht es darum, die Beschriftung eines Bilds halbtransparent am unteren Bildrand zu positionieren, und zwar so, dass die Beschriftung im Bild steht."},{"@type":"Syllabus","name":"Solution: Eine Bildbeschriftung über dem Bild platzieren ","timeRequired":"PT2M23S","description":"Das umgebende figure-Element wird relativ positioniert. Die mit figcaption ausgezeichnete Bildbeschriftung wird dann absolut positioniert, sodass sich die Werte zur Positionierung auf das figure-Element beziehen."},{"@type":"Syllabus","name":"Die Eigenschaft \"float\" im Überblick","timeRequired":"PT3M5S","description":"Die Eigenschaft \"float\" bietet die Möglichkeit, die Position von HTML-Elementen zu verändern. Hauptsächlich dient sie dazu, Bilder in einem Fließtext zu platzieren."},{"@type":"Syllabus","name":"Gefloatete Elemente sind nicht mehr ganz im Flow","timeRequired":"PT2M15S","description":"Gefloatete Elemente sind nicht mehr im normalen Flow des Dokuments. Sie werden soweit aus dem Fluss gehoben, dass der Text vor dem gefloateten Bild stehen bleibt, der Hintergrund aber darunter weiterfließt."},{"@type":"Syllabus","name":"\"float\" und \"clear\" im Fließtext","timeRequired":"PT2M4S","description":"Entwickler:innen können ein Element durch Anwendung der \"clear\"-Eigenschaft einen Float-Zustand beenden und das geclearte Element so unter ein gefloatetes Element verschieben."},{"@type":"Syllabus","name":"Praktisch: Klassen zum Floaten und Clearen","timeRequired":"PT3M50S","description":"Unter dem Gesichtspunkt der Wiederverwendbarkeit ist es praktisch, im Stylesheet ein paar Klassen zum Floaten und Clearen zu speichern, die Sie dann im HTML ganz einfach zuweisen können."},{"@type":"Syllabus","name":"Floats umschließen mit einem neuen Block Formatting Context ","timeRequired":"PT3M21S","description":"Die Deklarationen \"overflow:hidden\" und \"display:flow-root\" ermöglichen das Umschließen von gefloateten Elementen, indem sie einen neuen Block Formatting Context erzeugen. Beide haben jeweils Vor- und Nachteile."},{"@type":"Syllabus","name":"Floats umschließen für alle Browser mit @supports","timeRequired":"PT3M37S","description":"Mit der At-Regel @supports erstellen Sie eine Klasse im CSS, die in modernen Browsern \"display:flow-root\" und in älteren Browser den Workaround \"overflow:hidden\" serviert. Diese Lösung funktioniert somit in allen Browsern."},{"@type":"Syllabus","name":"Challenge: Textfluss um gefloatetes Bild gestalten mit \"shape-outside\"","timeRequired":"PT1M31S","description":"Normalerweise fließt der Text um die rechteckige Margin-Box eines gefloateten Elements. In dieser Challenge geht es darum, wie Sie mit der Eigenschaft \"shape-outside\" Text auch z.B. als Kreis um ein gefloatetes Element fließen lassen können."},{"@type":"Syllabus","name":"Solution: Textfluss um gefloatetes Bild gestalten mit \"shape-outside\"","timeRequired":"PT3M5S","description":"Die Eigenschaft \"shape-outside\" kennt Werte wie circle() oder ellipse(), die die Form festlegen, an der sich der Text orientiert. In den Entwicklertools des Firefox gibt es ein sehr nützliches Werkzeug zum Finetuning der gewünschten Form."},{"@type":"Syllabus","name":"Flexbox und Grid: das moderne CSS-Layout","timeRequired":"PT1M45S","description":"Ein Block Formatting Context ist zum Layouten nur bedingt geeignet. In diesem Film stellt Ihnen Peter Müller mit Flexbox und Grid zwei neue Module vor, die speziell zum Layouten erfunden wurden."},{"@type":"Syllabus","name":"Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items","timeRequired":"PT4M4S","description":"Machen Sie sich in diesem Video mit den grundlegenden Begriffe zur Flexbox vertraut. Die Deklaration display:flex erstellt einen Flex-Container, dessen Kindelemente automatisch zu Flex-Items werden. Die Entwicklertools der Browser helfen beim Kennenlernen von Flexbox."},{"@type":"Syllabus","name":"Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme","timeRequired":"PT3M1S","description":"Flex-Items stehen automatisch nebeneinander, sind gleich hoch und werden vom Flex-Container umschlossen. Dadurch werden völlig neue Layouts möglich. Die Flexbox-Eigenschaften lassen sich in vier Gruppen zusammenfassen: Fließrichtung, Ausrichtung, Flexibilität und Reihenfolge."},{"@type":"Syllabus","name":"Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow","timeRequired":"PT4M3S","description":"Innerhalb eines Flex-Containers können Sie mit flex-direction die Fließrichtung von Flex-Items steuern. flex-wrap erlaubt es dem Browser, Flex-Items bei Platzmangel in einer neuen Zeile zu platzieren. Die Kurzschreibweise flex-flow vereint flex-direction und flex-wrap."},{"@type":"Syllabus","name":"Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self","timeRequired":"PT5M2S","description":"Die Ausrichtung der Flex-Items innerhalb eines Flex-Containers ist nur relevant, wenn Leerraum vorhanden. Ist das der Fall, regelt justify-content die Ausrichtung entlang der Hauptachse und align-items die Ausrichtung entlang der Querachse. align-self ermöglicht die Gestaltung einzelner Flex-Items."},{"@type":"Syllabus","name":"Automatische Abstände für Flex-Items mit margin: auto","timeRequired":"PT2M44S","description":"Die Eigenschaft margin bekommt bei Flex-Items mit dem Wert auto Zauberkräfte und ermöglicht automatische Abstände. Auch die horizontale und vertikale Zentrierung von Elementen ist damit kein Problem."},{"@type":"Syllabus","name":"Flexibilität für Flex-Items: Die Zauberformel flex: 1","timeRequired":"PT4M53S","description":"Flex-Items sind von Natur aus flexibel. Lernen Sie in diesem Video die Zauberformel flex: 1 kennen und sehen Sie, was es mit den Eigenschaften flex-grow, flex-shrink und flex-basis auf sich hat."},{"@type":"Syllabus","name":"Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren ","timeRequired":"PT4M4S","description":"Flexbox ist nicht nur für Navigationen geeignet. Auf kurzen Seiten wie \"Über uns\" steht der Footer mitten auf der Seite. Mit Flexbox lässt es sich leicht so einstellen, dass der Fußbereich auch auf Seiten mit wenig Inhalt am unteren Rand des Viewports platziert wird."},{"@type":"Syllabus","name":"Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen ","timeRequired":"PT5M","description":"Flexbox erlaubt es, die Flex-Items am Bildschirm in einer anderen Reihenfolge als im Quelltext darzustellen. Dazu gibt es die Eigenschaft order und Werte wie row-reverse und column-reverse für die Eigenschaft flex-direction. Die relativ neue Eigenschaft gap erlaubt die Definition von Zwischenräumen."},{"@type":"Syllabus","name":"Die wichtigsten Flexbox-Eigenschaften auf einen Blick","timeRequired":"PT2M48S","description":"Zum Abschluss zeigt Ihnen Peter Müller alle Flexbox-Eigenschaften auf einen Blick, gruppiert diese übersichtlich und erklärt, welche im Alltag wirklich wichtig sind."},{"@type":"Syllabus","name":"Challenge: Die Navigation im Fußbereich gestalten","timeRequired":"PT1M29S","description":"In dieser Challenge geht es darum, die Navigation im Fußbereich zu gestalten. Dabei nutzen Sie einige Flexbox-Eigenschaften und kombinieren diese mit traditionellem CSS."},{"@type":"Syllabus","name":"Solution: Die Navigation im Fußbereich gestalten","timeRequired":"PT3M46S","description":"Die Navigationsliste wird ein Flex-Container und die Lstenelemente lassen sich mit den Pseudoklassen :first-child und :last-child gestalten. Den senkrechten Strich können Sie z.B. mit border-right erstellen und mit padding-right und margin-right ausrichten."},{"@type":"Syllabus","name":"Die responsive Navigation im Überblick","timeRequired":"PT4M3S","description":"In diesem Kapitel erstellen Sie eine responsive Navigation: In schmalen Viewports ist ein Menübutton zu sehen, der nach Aktivierung die Navigationsliste einblendet. In breiteren Viewports erscheint eine horizontale Navigationsleiste und der Menübutton wird versteckt."},{"@type":"Syllabus","name":"Schritt 1: Prüfen, ob JavaScript aktiv ist","timeRequired":"PT3M16S","description":"Im ersten Schritt prüfen Sie, ob JavaScript im Browser aktiviert ist. Ist das der Fall, bekommt das Stammelement \u003Chtml\u003E die Klasse js, die Sie im CSS bei der Gestaltung der Navigation nutzen können."},{"@type":"Syllabus","name":"Schritt 2: Die mobile Navigation gestalten","timeRequired":"PT2M53S","description":"Im zweiten Schritt erstellen Sie ein neues Stylesheet, binden es als Modul in style.css ein, und speichern die grundlegende Gestaltung der Navigation für schmale Viewports darin (mobile first)."},{"@type":"Syllabus","name":"Schritt 3: Den Menübutton im HTML einfügen","timeRequired":"PT2M57S","description":"Das Ein- und Ausklappen der mobilen Navigation geschieht mit einem Menübutton, der in diesem Schritt im HTML eingebaut wird. Bei Aktivierung des Buttons wird im HTML per JavaScript die Klasse showmenu hinzugefügt."},{"@type":"Syllabus","name":"Schritt 4: Den Menübutton per CSS gestalten","timeRequired":"PT3M22S","description":"Im vierten Schritt gestalten Sie den Menübutton per CSS und fügen mit dem Pseudoelement ::before eine SVG-Grafik mit drei waagerechten Strichen hinzu. Ist JavaScript nicht aktiviert, wird der Menübutton ausgeblendet und die Navigationsliste gezeigt."},{"@type":"Syllabus","name":"Schritt 5: Die Navigation per CSS ausblenden","timeRequired":"PT1M59S","description":"Im fünften Schritt wird die Navigationsliste per CSS ausgeblendet, denn sie soll ja erst in Erscheinung treten, wenn der Benutzer oder die Benutzerin auf den Menübutton tippt oder klickt."},{"@type":"Syllabus","name":"Schritt 6: Die Navigation mit dem Menübutton einblenden","timeRequired":"PT5M3S","description":"In diesem Schritt wird die mobile Navigation das erste Mal richtig funktionieren: Nach dem Antippen oder Anklicken des Menübuttons wird mit einer sanften Animation die Navigationsliste eingeblendet."},{"@type":"Syllabus","name":"Challenge: Eine horizontale Navigation für breitere Viewports","timeRequired":"PT1M32S","description":"Die Navigation für schmale Viewports ist fertig und funktioniert auch in breiteren Browserfenstern. Ab einer Breite von ungefähr 600 Pixel ist aber genügend Platz für eine horizontale Navigation, die Sie in dieser Challenge gestalten."},{"@type":"Syllabus","name":"Solution: Eine horizontale Navigation für breitere Viewports","timeRequired":"PT3M10S","description":"Die horizontale Navigation steht in einer Media Query mit min-width: 600px. Der Menübutton wird mit dem Zusatz !important versteckt, das nav-Element wird mit position: sticky versehen und die Liste wird mit flex-flow: row horizontal. Die Listenelemente werden mit flex: 1 gleich breit und mit max-width: 10rem in der Breite begrenzt."},{"@type":"Syllabus","name":"Ein Grid ist ein Raster und schafft Ordnung","timeRequired":"PT1M58S","description":"Grid ist das englische Wort für \"Raster\". Damit ist eine Anordnung aus Zeilen und Spalten gemeint, die Ordnung im scheinbaren Chaos der (HTML-)Elemente schafft. Das \"CSS Grid Layout Module\" erleichtert es dementsprechend, Texte und grafische Elemente per CSS in einem Rasterlayout anzuordnen."},{"@type":"Syllabus","name":"Mehrspaltige Layouts nur für moderne Browser: @supports","timeRequired":"PT2M21S","description":"Für mehrspaltige Layouts benötigt man in der Breite etwas mehr Platz. In diesem Video wird die Breite für das Layout mit @supports auf 960 Pixel erhöht, sofern der Browser die Deklaration display: grid versteht."},{"@type":"Syllabus","name":"Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co.","timeRequired":"PT3M29S","description":"In diesem Video stellt Ihnen Peter Müller einige sehr wichtige Begriffe vor. Mit dabei sind u.a. Grid-Container, Grid-Items, Grid-Lines, Grid-Track und Grid-Gap. Genau wie Flexbox basiert Grid auf einer intakten Eltern-Kind-Beziehung der Elemente."},{"@type":"Syllabus","name":"Das erste Grid-Layout: Die Infoboxen nebeneinander platzieren ","timeRequired":"PT5M8S","description":"Auf der Startseite gibt es drei Infoboxen, die in diesem Video per Grid nebeneinander gestellt werden. display:grid erzeugt einen Grid-Container, in dem mit grid-template-columns drei gleich breite Spalten und mit grid-gap Zwischenräume erzeugt werden."},{"@type":"Syllabus","name":"Flexbox und Grid sind ein gutes Team","timeRequired":"PT4M10S","description":"Flexbox und Grid ergänzen einander ziemlich gut: Flexbox ist für eindimensionale und Grid für zweidimensionale Layouts. In diesem Video platzieren Sie die Links in den Infoboxen per Flexbox am unteren Rand der Boxen."},{"@type":"Syllabus","name":"Grid-Items manuell platzieren: 1. Mit nummerierten Linien","timeRequired":"PT4M48S","description":"In diesem Video platzieren Sie die Stimmen von Kundinnen bzw. Kunden unten auf der Startseite mit nummerierten Grid-Linien, sodass sich die Überschrift über zwei Grid-Spalten erstreckt. Die Stimmen selbst werden dann vom Grid-Algorithmus automatisch in einem zweispaltigen Grid-Layout platziert."},{"@type":"Syllabus","name":"Grid-Items manuell platzieren: 2. Mit benannten Bereichen","timeRequired":"PT5M10S","description":"In diesem Video sehen Sie am Beispiel des Layouts für die Seite News, wie Sie zur Platzierung von Grid-Items statt der nummerierten Linien auch benannte Grid-Bereiche (engl. named grid areas) mit aussagekräftigen Namen nutzen können."},{"@type":"Syllabus","name":"Das Team: 1. HTML und grundlegende Gestaltung per CSS ","timeRequired":"PT3M15S","description":"In diesem Video zeigt Ihnen Peter Müller für die Vorstellung des Teams auf der Seite \"Über uns\" das HTML und die Grundgestaltung per CSS. In einer section mit der Klasse team gibt es eine Liste mit einem Listenelement pro Teammitglied."},{"@type":"Syllabus","name":"Das Team: 2. Ein responsives Grid ohne Media Query","timeRequired":"PT4M51S","description":"Grid at its best: Mit repeat(), auto-fit und minmax() erstellen Sie ein responsives Layout, das sich ohne Media Query automatisch an die zur Verfügung stehende Breite anpasst."},{"@type":"Syllabus","name":"Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen","timeRequired":"PT3M18S","description":"Mit Grid können Sie nicht nur regelmäßige Raster erstellen, und in diesem Film erstellen Sie ein Grid-Layout mit unterschiedlich großen Zeilen und Spalten."},{"@type":"Syllabus","name":"Die wichtigsten Grid-Eigenschaften auf einen Blick","timeRequired":"PT3M29S","description":"Das CSS Grid Layout Module kennt jede Menge neuer Eigenschaften, deren Namen anfangs nur schlecht zu merken sind. In diesem Video erhalten Sie eine kleine Übersicht der in diesem Kapitel vorgestellten Grid-Eigenschaften."},{"@type":"Syllabus","name":"Challenge: Die Kontaktseite per Grid gestalten","timeRequired":"PT1M31S","description":"Sofern genügend Platz in der Breite vorhanden ist, sollen erstens die Abschnitte für die Kontaktdaten und das Kontaktformular nebeneinander stehen. Und zweitens soll im Formular die Beschriftung rechtsbündig vor den Eingabefeldern stehen."},{"@type":"Syllabus","name":"Solution: Die Kontaktseite per Grid gestalten","timeRequired":"PT3M8S","description":"Kontaktdaten und Kontaktformular werden wie auf der News-Seite mit benannten Grid-Bereichen nebeneinander platziert. Das Formular bekommt ein Grid mit einer festen ersten und einer flexiblen Spalte. Die Beschriftung wird mit text-align: right ausgerichtet und der Button erstreckt sich mit grid-column: 1/-1 über die gesamte Breite des Formulars."},{"@type":"Syllabus","name":"Ein kurzer Blick in die Zukunft von CSS","timeRequired":"PT3M24S","description":"Am Anfang des Kurses hatte die Übungswebsite ein einspaltiges Layout mit einer festen Breite, das Sie mit Techniken wie Flexbox und Grid zu einem responsiven, mehrspaltigen Layout erweitert haben. Aber CSS steht nicht still, und in naher Zukunft wird es neue Features wie Subgrid, Container Queries und Cascade Layers geben."}],"aggregateRating":{"@type":"AggregateRating","ratingCount":27,"ratingValue":4.9,"bestRating":5,"worstRating":1},"review":[],"video":{"@type":"VideoObject","name":"Mit CSS schnell und einfach responsive Layouts erstellen - Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid ","author":{"@type":"Person","name":"Peter M. Müller","description":"Bücher und Videokurse zu Webthemen für Einsteiger","jobTitle":"Bücher und Videokurse zu Webthemen für Einsteiger","url":"https://nl.linkedin.com/in/pmmueller","image":"https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q"},"thumbnailUrl":"https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU","description":"Mit CSS schnell und einfach responsive Layouts erstellen.","duration":"PT59S","datePublished":"2022-12-13","uploadDate":"2022-12-13","requiresSubscription":false,"isAccessibleForFree":true,"contentUrl":"https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mit-css-schnell-und-einfach-responsive-layouts-erstellen"},"educationalCredentialAwarded":[{"@type":"EducationalOccupationalCredential","name":"LinkedIn Learning-Abschlusszertifikat","url":"https://www.linkedin.com/help/learning/answer/a598944/learning-certificates-of-completion-faqs","credentialCategory":"Certificate","offers":[{"@type":"Offer","category":"Subscription"}]}]} </script>  </head> <body dir="ltr">   <a href="#main-content" class="skip-link btn-md btn-primary absolute z-11 -top-[100vh] focus:top-0"> Weiter zum Hauptinhalt </a> <header class="header base-detail-page__header px-mobile-container-padding bg-color-background-container global-alert-offset sticky-header"> <nav class="nav pt-1.5 pb-2 flex items-center justify-between relative flex-nowrap babymamabear:py-1.5 nav--minified-mobile " aria-label="Primär"> <a href="https://de.linkedin.com/learning/?trk=learning-course_nav-header-logo" class="nav__logo-link link-no-visited-state z-1 mr-auto min-h-[52px] flex items-center babybear:z-0 hover:no-underline focus:no-underline active:no-underline babymamabear:mr-3" data-tracking-control-name="learning-course_nav-header-logo" data-tracking-will-navigate> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> </a> <section class="search-bar relative flex flex-grow h-[40px] bg-cool-gray-20 min-w-0 max-w-full mx-4 rounded-sm babymamabear:mx-0 babymamabear:mb-1.5 babymamabear:bg-color-transparent babymamabear:w-full babymamabear:flex babymamabear:flex-wrap search-bar--minified-mobile" data-current-search-type="LEARNING"> <button class="search-bar__placeholder papabear:hidden text-input w-full mt-1.5 !pl-[14px] border-1 border-solid border-color-border-faint rounded-[2px] h-[40px] max-h-[40px] flex items-center overflow-hidden cursor-text" data-tracking-control-name="learning-course_search-switcher-opener"> <icon class="text-color-icon w-3 h-3 mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/397vrsk6op88l4981ji1xe1qt"></icon> <div class="search-bar__full-placeholder font-sans text-md text-color-text max-w-[calc(100%-40px)] text-left whitespace-nowrap overflow-hidden text-ellipsis">  Suche (Kenntnisse, Themen, Software)  </div> <span class="sr-only">Suche erweitern</span> </button> <div class="switcher-tabs__trigger-and-tabs babymamabear:flex"> <button aria-expanded="false" class="switcher-tabs__placeholder flex !h-full !py-0 !pl-2 !pr-1.5 border-r-1 border-solid border-r-color-border-faint babymamabear:hidden tab-md papabear:tab-vertical papabear:justify-start cursor-pointer" data-tracking-control-name="learning-course_switcher-tabs-placeholder" aria-describedby="switcher-description"> <span class="switcher-tabs__placeholder-text m-auto"></span> <icon class="switcher-tabs__caret-down-filled onload pointer-events-none block my-auto min-h-[24px] min-w-[24px] h-[24px] babymamabear:hidden" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/7asbl4deqijhoy3z2ivveispv"></icon> </button> <div id="switcher-description" class="hidden">Dieser Button zeigt den derzeit ausgewählten Suchtyp an. Bei Erweiterung erscheint eine Liste mit Suchoptionen, die die Sucheingaben so ändern, dass sie zur aktuellen Auswahl passen.</div>  <div class="switcher-tabs hidden z-[1] w-auto min-w-[160px] mb-1.5 py-1 absolute top-[48px] left-0 border-solid border-1 border-color-border-faint papabear:container-raised babymamabear:static babymamabear:w-[100vw] babymamabear:h-[48px] babymamabear:p-0 overflow-y-hidden overflow-x-auto md:overflow-x-hidden"> <ul class="switcher-tabs__list flex flex-1 items-stretch papabear:flex-col" role="tablist"> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="jobs-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="JOBS" data-tracking-control-name="learning-course_switcher-tabs-jobs-search-switcher" id="job-switcher-tab" role="tab"> Jobs </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="people-search-panel" aria-selected="false" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer " data-switcher-type="PEOPLE" data-tracking-control-name="learning-course_switcher-tabs-people-search-switcher" id="people-switcher-tab" role="tab"> Personen </button> </li> <li class="switcher-tabs__tab h-[44px] babymamabear:basis-1/2" role="presentation"> <button aria-controls="learning-search-panel" aria-selected="true" class="switcher-tabs__button w-full h-full tab-md papabear:tab-vertical papabear:justify-start cursor-pointer tab-selected" data-switcher-type="LEARNING" data-tracking-control-name="learning-course_switcher-tabs-learning-search-switcher" id="learning-switcher-tab" role="tab"> Learning </button> </li> </ul> <button aria-label="Schließen" class="switcher-tabs__cancel-btn papabear:hidden block w-6 h-6 m-auto text-color-text-low-emphasis" data-tracking-control-name="learning-course_switcher-tabs-cancel-search-switcher" type="button"> <icon class="switcher-tabs__cancel-icon block w-3 h-3 m-auto onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </div> </div> <section class="base-search-bar w-full h-full" data-searchbar-type="PEOPLE" aria-labelledby="people-switcher-tab" id="people-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/pub/dir" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Vorname" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input" maxlength="500" name="firstName" placeholder="Vorname" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_first-name_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Nachname" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input" maxlength="500" name="lastName" placeholder="Nachname" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_people-search-bar_last-name_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="trk" value="learning-course_people-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Suche" data-tracking-control-name="learning-course_people-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="JOBS" aria-labelledby="job-switcher-tab" id="jobs-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/jobs/search" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-form"> <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input keywords-typeahead-input text-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-keywords-typeahead-list" aria-haspopup="listbox" aria-label="Suche (Stellen oder Unternehmen)" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-keywords" maxlength="500" name="keywords" placeholder="Suche (Stellen oder Unternehmen)" role="combobox" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-keywords-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section>  <code id="i18n_aria_live_text_no-suggestions" style="display: none"></code> <code id="i18n_aria_live_text_one-suggestion" style="display: none"></code> <code id="i18n_aria_live_text_multiple-suggestions" style="display: none"></code> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 typeahead-input location-typeahead-input"> <input aria-autocomplete="list" aria-controls="job-search-bar-location-typeahead-list" aria-haspopup="listbox" aria-label="Standort" autocomplete="off" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_dismissable-input" id="job-search-bar-location" maxlength="500" name="location" placeholder="Standort" role="combobox" value="Singapur" type="search">  <div class="typeahead-input__dropdown container-lined absolute top-[calc(100%+3px)] left-0 w-full rounded-b-md rounded-t-none z-[10] overflow-hidden max-w-none babybear:min-w-full babybear:bottom-0 babybear:overflow-y-auto"> <template class="typeahead-item-template"> <li class="typeahead-input__dropdown-item py-1.5 px-2 hover:cursor-pointer hover:bg-color-surface-new-hover hover:border-y-2 hover:border-solid hover:border-color-container-primary" role="option"> <span class="typeahead-input__dropdown-text font-sans text-sm font-bold text-color-text"></span> </li> </template> <ul class="typeahead-input__dropdown-list w-full" id="job-search-bar-location-typeahead-list" role="listbox"></ul> </div>  <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input name="geoId" value="111422291" type="hidden"> <input name="trk" value="learning-course_jobs-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Suche" data-tracking-control-name="learning-course_jobs-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <section class="base-search-bar w-full h-full" data-searchbar-type="LEARNING" aria-labelledby="learning-switcher-tab" id="learning-search-panel" role="tabpanel"> <form class="base-search-bar__form w-full flex babymamabear:mx-mobile-container-padding babymamabear:flex-col" role="search" action="/learning/search" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-form"> <section class="dismissable-input text-input !pr-3 bg-color-transparent flex items-center h-[40px] min-w-0 relative babybear:w-full babybear:mb-1 search-input"> <input aria-label="Suche (Kenntnisse, Themen, Software)" autocomplete="on" class="dismissable-input__input font-sans text-md text-color-text bg-color-transparent flex items-center flex-1 focus:outline-none placeholder:text-color-text-secondary" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input" maxlength="500" name="keywords" placeholder="Suche (Kenntnisse, Themen, Software)" type="search"> <button class="dismissable-input__button text-color-text h-[40px] min-w-[24px] w-[24px] -mr-2 opacity-0 transition-opacity duration-[0.1s] disabled:invisible focus:opacity-100" data-tracking-control-name="learning-course_learning-search-bar_keywords_dismissable-input-clear" type="button"> <label class="sr-only">Text löschen</label> <icon class="dismissable-input__button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cs55jggk4p3uqh9ozxdmpvjg7"></icon> </button> </section> <input class="nav__search-uoo" name="upsellOrderOrigin" type="hidden"> <input name="trk" value="learning-course_learning-search-bar_search-submit" type="hidden"> <button class="base-search-bar__submit-btn block basis-[40px] flex-shrink-0 cursor-pointer babymamabear:invisible babymamabear:ml-[-9999px] babymamabear:w-[1px] babymamabear:h-[1px]" aria-label="Suche" data-tracking-control-name="learning-course_learning-search-bar_base-search-bar-search-submit" type="submit"> <icon class="base-search-bar__search-icon onload mx-auto" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cb5bsr4tsn2r4sjg9e3ls4tjl"></icon> </button> </form> </section> <div aria-live="polite" class="search-bar__live-text sr-only" role="status"></div> </section>  <div class="nav__cta-container order-3 flex gap-x-1 justify-end min-w-[100px] flex-nowrap flex-shrink-0 babybear:flex-wrap flex-2 babymamabear:min-w-[50px] ">  <a class="nav__button-tertiary btn-md btn-tertiary" href="http://de.linkedin.com/learning/subscription/products?courseSlug=webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid&destRedirectURL=https%3A%2F%2Fde%2Elinkedin%2Ecom%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid&trk=learning-course_nav-header-join&upsellTrk=lil_upsell_nav_subscription&session_redirect=https%3A%2F%2Fde.linkedin.com%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid%3Ftrk%3Dlearning-topics_learning-search-card_search-card" data-tracking-control-name="lil_upsell_nav_subscription" data-tracking-impression-name="lil_upsell_nav_subscription" data-test-live-nav-primary-cta data-tracking-will-navigate> Kostenlos testen </a> <a class="nav__button-secondary btn-secondary-emphasis btn-md" href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&fromSignIn=true&session_redirect=https%3A%2F%2Fde.linkedin.com%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid%3Ftrk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_nav-header-signin" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate> Einloggen </a> <a aria-label="Einloggen" class="nav__link-person papabear:hidden mamabear:hidden" data-tracking-control-name="learning-course_nav-header-signin" data-tracking-will-navigate href="https://www.linkedin.com/learning-login/?redirect=https%3A%2F%2Fwww%2Elinkedin%2Ecom%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid%3Ftrk%3Dlearning-topics_learning-search-card_search-card%26trk%3Dlearning-topics_learning-search-card_search-card&fromSignIn=true&session_redirect=https%3A%2F%2Fde.linkedin.com%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid%3Ftrk%3Dlearning-topics_learning-search-card_search-card&trk=learning-course_nav-header-signin"> <img class="inline-block relative rounded-[50%] w-4 h-4 bg-color-entity-ghost-background" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt> </a> </div>   </nav> </header>  <div class="cta-banner "> <div class="enterprise-nav"> <div class="enterprise-nav__content-wrapper"> <p id="enterprise-nav-solutions" class="enterprise-nav__content" tabindex="-1"> Lösungen für: </p> <a href="https://learning.linkedin.com/de-de/for-entire-companies?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-business" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-business">Unternehmen</a> <a href="https://learning.linkedin.com/de-de/for-higher-education?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-education" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-education">Bildungseinrichtungen</a> <a href="https://learning.linkedin.com/de-de/for-governments?src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-government" class="enterprise-nav__content" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" id="business-nav-government">Behörden</a> <a href="/learning/subscription/teams?veh=lil_upx&src=li-learning-nav&trk=learning-course_enterprise-nav" aria-labelledby="enterprise-nav-solutions business-nav-buy" class="enterprise-nav__content" data-test-live-enterprise-upsell="true" data-tracking-control-name="learning-course_enterprise-nav" data-tracking-will-navigate="true" data-tracking-impression-name="lil_upsell_learning-course_enterprise-nav_teambuy" id="business-nav-buy">Für Ihr Team erwerben</a> </div> </div>   </div> <main class="main papabear:flex papabear:w-content-max-w papabear:mx-auto papabear:pt-desktop-content-top-margin mamabear:pt-desktop-content-top-margin " id="main-content" role="main"> <section class="core-rail mx-auto papabear:w-core-rail-width mamabear:max-w-[790px] babybear:max-w-[790px]"> <ol class="breadcrumb__list"> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://de.linkedin.com/learning/browse?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Alle Themen</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://de.linkedin.com/learning/topics/kreativitat?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Kreativität</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://de.linkedin.com/learning/topics/webdesign-und-ux?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Webdesign</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://de.linkedin.com/learning/topics/responsives-webdesign?trk=learning-course_breadcrumb" data-tracking-control-name="learning-course_breadcrumb" data-tracking-will-navigate>Responsives Webdesign</a> </li> </ol> <script type="application/ld+json"> {"@context":"http://schema.org/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Alle Themen","item":"https://de.linkedin.com/learning/browse"},{"@type":"ListItem","position":2,"name":"Kreativität","item":"https://de.linkedin.com/learning/topics/kreativitat"},{"@type":"ListItem","position":3,"name":"Webdesign","item":"https://de.linkedin.com/learning/topics/webdesign-und-ux"},{"@type":"ListItem","position":4,"name":"Responsives Webdesign","item":"https://de.linkedin.com/learning/topics/responsives-webdesign"}]} </script> <section class="top-card-layout container-lined overflow-hidden babybear:rounded-[0px]"> <section class="top-card__image-container"> <img class="top-card__image" alt="Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid " data-delayed-url="https://media.licdn.com/dms/image/v2/C4E0DAQFzJhW7qD9tPA/learning-public-crop_675_1200/learning-public-crop_675_1200/0/1670588346443?e=2147483647&v=beta&t=ueIcCDEkW-CZfZ4Yr-og6rpqlQTqDXLFoLx2vPiVucU"> <a class="top-card__overlay-button" data-tracking-control-name="course_preview" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mit-css-schnell-und-einfach-responsive-layouts-erstellen?autoplay=true&trk=course_preview"> <span class="top-card__preview-cta "> <icon class="top-card__preview-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l"> </icon> <span class="top-card__preview-cta-text">Vorschau</span> </span>  </a> </section> <div class="top-card-layout__card relative p-2 papabear:p-details-container-padding"> <div class="top-card-layout__entity-info-container flex flex-wrap papabear:flex-nowrap"> <div class="top-card-layout__entity-info flex-grow flex-shrink-0 basis-0 babybear:flex-none babybear:w-full babybear:flex-none babybear:w-full"> <h1 class="top-card-layout__title font-sans text-lg papabear:text-xl font-bold leading-open text-color-text mb-0"> Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid </h1> <h2 class="top-card-layout__headline break-words font-sans text-md leading-open text-color-text"> <div class="top-card__headline-row"> <span class="top-card__headline-row-item top-card__headline-row-item--large">Mit Peter M. Müller</span> <span class="top-card__headline-row-item">52 Mitgliedern gefällt das</span> </div> <div class="top-card__headline-row"> <span class="top-card__headline-row-item">Dauer: 3 Std. 42 Min.</span>  <span class="top-card__headline-row-item">Veröffentlicht am: 13.12.2022</span> </div> </h2>   <div class="top-card-layout__cta-container flex flex-wrap mt-0.5 papabear:mt-0 ml-[-12px]"> <a href="http://de.linkedin.com/learning/subscription/products?courseSlug=webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid&destRedirectURL=https%3A%2F%2Fde%2Elinkedin%2Ecom%2Flearning%2Fwebtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid&trk=course_info&upsellTrk=lil_upsell_course_info_subscription" data-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-impression-name="lil_upsell_course_info_subscription" data-litms-tracking-control-name="lil_upsell_course_info_subscription" data-tracking-will-navigate class="top-card__upsell-link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--primary btn-md btn-primary" data-test-live-course-sub-upsell> Gratismonat starten </a> <a class="buy-for-your-team-cta__link top-card-layout__cta mt-2 ml-1.5 h-auto babybear:flex-auto top-card-layout__cta--secondary btn-md btn-secondary" href="/learning/subscription/teams?veh=lil_upx&src=li-lil-upsell&trk=learning-course_buy-for-your-team-cta" data-tracking-control-name="learning-course_buy-for-your-team-cta" data-tracking-impression-name="lil_upsell_learning-course_buy-for-your-team-cta_teambuy" data-test-live-buy-for-your-team-upsell data-tracking-will-navigate> Für Ihr Team erwerben </a> </div> </div>  </div>   </div> </section> <div class="details mx-details-container-padding"> <section class="core-section-container my-3 course-details">  <h2 class="core-section-container__title section-title"> Kursdetails </h2>  <div class="core-section-container__content break-words"> <section class="show-more-less-html course-details__description" data-max-lines="4"> <div class="show-more-less-html__markup show-more-less-html__markup--clamp-after-4 relative overflow-hidden"> In seiner Kursreihe vermittelt Ihnen Peter Müller das gesamte Grundwissen, um moderne Webseiten erstellen und gestalten zu können - Sie müssen dazu über keinerlei Vorkenntnisse verfügen. Lernen Sie in dritten Teil, wie sich per CSS responsive Layouts erstellen lassen. Traditionelle Layout-Techniken wie position und float werden dabei ebenso vorgestellt wie Media Queries und die Layout-Module Flexbox und CSS Grid. Mit Hilfe von Challenge/Solution-Einheiten am Ende der einzelnen Kapitel können Sie das Erlernte sofort testen und Ihre Lösung auch gleich mit der angebotenen Solution vergleichen. </div> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--more ml-0.5" data-tracking-control-name="learning-course_show-more-html-btn" aria-label="i18n_show_more" aria-expanded="false">  Show more <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less-html__button show-more-less-button show-more-less-html__button--less ml-0.5" data-tracking-control-name="learning-course_show-less-html-btn" aria-label="i18n_show_less" aria-expanded="true">  Show less <icon class="show-more-less-html__button-icon show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button>  </section> </div> </section> <section class="core-section-container my-3 course-skills">  <h2 class="core-section-container__title section-title"> Entwickelte Kompetenzen </h2>  <div class="core-section-container__content break-words"> <ul class="course-skills__skill-list"> <li class="course-skills__skill-list-item"> <a href="https://de.linkedin.com/learning/search?keywords=CSS+Grid+Layout&trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> CSS Grid Layout </a> </li> <li class="course-skills__skill-list-item"> <a href="https://de.linkedin.com/learning/search?keywords=CSS+Flexbox&trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> CSS Flexbox </a> </li> <li class="course-skills__skill-list-item"> <a href="https://www.linkedin.com/learning/topics/responsive-web-design?trk=learning-course_pill-list" data-tracking-control-name="learning-course_pill-list" data-tracking-will-navigate class="pill flex w-fit mr-[6px] mb-1 hover:no-underline skill-pill"> Responsive Webdesign </a> </li> </ul> </div> </section> <section class="core-section-container my-3">  <h2 class="core-section-container__title section-title"> Zertifikate erhalten und teilen </h2>  <div class="core-section-container__content break-words"> <p class="course-certificate__body-paragraph">Teilen Sie, was Sie gelernt haben, und machen Sie in der gewünschten Branche auf sich aufmerksam – mit einem Zertifikat, das zeigt, was Sie in diesem Kurs gelernt haben.</p> <div class="course-certificate__image-container"> <img class="course-certificate__certificate-image" alt="Beispielzertifikat" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/52nu8qc7cfcn7vrftr7ttceqt"> <div> <h3 class="course-certificate__detail-list-heading"> <div class="learning-logo"> <icon class="learning-logo__inbug onload" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4zqr0f9jf98vi2nkijyc3bex2"></icon> <span class="learning-logo__text learning-logo__text--show-on-mobile" aria-hidden="true">Learning</span> <span class="sr-only">LinkedIn Learning</span> </div> <span>Abschlusszertifikat</span> </h3> <ul> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Zeigen Sie Ihr Zertifikat auf Ihrem LinkedIn Profil im Bereich „Bescheinigungen & Zertifikate“.</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Sie können das Zertifikat auch als PDF herunterladen oder ausdrucken und so an andere weitergeben.</p> </li> <li class="course-certificate__detail-list-item"> <div class="course-certificate__detail-list-item-icon-wrapper"><icon data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5lqa4dj5v9gp6yjh6s6iwtdbb"></icon></div> <p class="course-certificate__detail-list-item-text">Teilen Sie es online als Bild, um zu zeigen, was Sie können.</p> </li> </ul> </div> </div> </div> </section> <section class="core-section-container my-3 course-instructors">  <h2 class="core-section-container__title section-title"> Lernen Sie den:die Trainer:in kennen </h2>  <div class="core-section-container__content break-words"> <ul class="course-instructors__list"> <li class="course-instructors__list-item"> <a href="https://nl.linkedin.com/in/pmmueller?trk=learning-course_instructor" target="_self" data-tracking-control-name="learning-course_instructor" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-main-card flex flex-wrap py-2 pr-2 babybear:pr-0 base-main-card--link ">  <img class="inline-block relative rounded-[50%] w-6 h-6 " data-delayed-url="https://media.licdn.com/dms/image/v2/C4E03AQFaZt6LuAjWPQ/profile-displayphoto-shrink_400_400/profile-displayphoto-shrink_400_400/0/1659710287885?e=2147483647&v=beta&t=SnQQHYUZXdUNS3Jvq236KGflkpoxs1I6FS2-0QKLg7Q" data-ghost-classes="bg-color-entity-ghost-background" data-ghost-url="https://static.licdn.com/aero-v1/sc/h/9c8pery4andzj6ohjkjp54ma2" alt="Hier klicken, um die Trainer:innenseite von Peter M. Müller anzuzeigen"> <div class="base-main-card__info self-center ml-1 flex-1 relative break-words papabear:min-w-0 mamabear:min-w-0 babybear:w-full ">  <h3 class="base-main-card__title font-sans text-[18px] font-bold text-color-text overflow-hidden "> Peter M. Müller </h3> <h4 class="base-main-card__subtitle body-text text-color-text overflow-hidden "> Bücher und Videokurse zu Webthemen für Einsteiger </h4>   </div>  </a> </li> </ul> </div> </section> <section class="core-section-container my-3 reviews-feed">  <h2 class="core-section-container__title section-title"> Nutzerbewertungen </h2>  <div class="core-section-container__content break-words"> <div class="reviews-feed__ratings-summary"> <section class="ratings-summary"> <div class="ratings-summary__overall-rating"> <h3 class="ratings-summary__header"><span class="ratings-summary__rating-average">4,9</span> <span class="ratings-summary__rating-max"> von 5</span></h3> <figure class="ratings-summary__figure"> <span class="star-rating" role="img" aria-label="Rating: 4.9 von 5 Sternen"> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> <span class="star-rating__icon-container" aria-hidden="true"> <icon class="star-rating__icon star-rating__icon--small " data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cg0ud3t24av7pe8eamnp39hfq"></icon> </span> </span> <figcaption class="ratings-summary__ratings-total">27 Bewertungen</figcaption> </figure> </div> <div class="ratings-summary__breakdown"> <div class="ratings-summary__disclaimer"> <div class="tooltip"> <button class="tooltip__trigger ratings-summary__disclaimer-trigger" data-tracking-control-name="toggle_disclaimer" type="button"> <icon class="ratings-summary__disclaimer-icon" data-svg-class-name="ratings-summary__disclaimer-icon-svg" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/g8uts9v3k83n9e3iyvcxit0k"> </icon> <span class="ratings-summary__disclaimer-text">Wie werden die Bewertungen berechnet?</span> </button> <span role="tooltip" class="tooltip__popup" aria-hidden="true"> Die Gesamtbewertung gibt den Durchschnitt der abgegebenen Bewertungen wider. Sterne und Bewertungen können nur von nicht anonymisierten Nutzer:innen vergeben werden, die einen Kurs zu mindestens 40 % bearbeitet haben. So sollen gefälschte Bewertungen und Spam vermieden werden. </span> </div> </div> <ul> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 5 Sterne </figcaption> <progress class="ratings-summary__progress-bar" max="27" value="24" aria-valuemin="0" aria-valuenow="24" aria-valuemax="27"> Aktueller Wert: 24 </progress> <span class="ratings-summary__rating-count-percent"> 89 % </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 4 Sterne </figcaption> <progress class="ratings-summary__progress-bar" max="27" value="3" aria-valuemin="0" aria-valuenow="3" aria-valuemax="27"> Aktueller Wert: 3 </progress> <span class="ratings-summary__rating-count-percent"> 11 % </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 3 Sterne </figcaption> <progress class="ratings-summary__progress-bar" max="27" value="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="27"> Aktueller Wert: 0 </progress> <span class="ratings-summary__rating-count-percent"> 0 % </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 2 Sterne </figcaption> <progress class="ratings-summary__progress-bar" max="27" value="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="27"> Aktueller Wert: 0 </progress> <span class="ratings-summary__rating-count-percent"> 0 % </span> </figure> </li> <li> <figure class="ratings-summary__rating-count"> <figcaption class="ratings-summary__rating-count-label"> 1 Sterne </figcaption> <progress class="ratings-summary__progress-bar" max="27" value="0" aria-valuemin="0" aria-valuenow="0" aria-valuemax="27"> Aktueller Wert: 0 </progress> <span class="ratings-summary__rating-count-percent"> 0 % </span> </figure> </li> </ul> </div> </section> </div>  </div> </section> </div> </section> <section class="right-rail papabear:w-right-rail-width papabear:ml-column-gutter mamabear:max-w-[790px] mamabear:px-mobile-container-padding babybear:max-w-[790px] babybear:px-mobile-container-padding"> <section class="table-of-contents mb-4 table-of-contents--with-max-height"> <h2 class="table-of-contents__header"> Inhalt </h2> <ul class="table-of-contents__list"> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Einleitung <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> Einleitung <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mit-css-schnell-und-einfach-responsive-layouts-erstellen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Mit CSS schnell und einfach responsive Layouts erstellen </div> <div class="table-of-contents__item-duration"> 59 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/was-sie-erwartet-und-was-sie-mitbringen-sollten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Was Sie erwartet und was Sie mitbringen sollten </div> <div class="table-of-contents__item-duration"> 3 Min. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Ein modernes Layout für die Übungswebsite <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 1. Ein modernes Layout für die Übungswebsite <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-ubungswebsite-im-uberblick-vom-klassischen-zum-modernen-layout?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die Übungswebsite im Überblick - vom klassischen zum modernen Layout </div> <div class="table-of-contents__item-duration"> 2 Min. 11 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-modernes-layout-1-zusatzliche-div-elemente-fur-die-layoutbereiche-hinzufugen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Ein modernes Layout: 1. Zusätzliche div-Elemente für die Layoutbereiche hinzufügen </div> <div class="table-of-contents__item-duration"> 5 Min. 13 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-modernes-layout-2-die-layoutbereiche-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Ein modernes Layout: 2. Die Layoutbereiche gestalten </div> <div class="table-of-contents__item-duration"> 4 Min. 16 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-modernes-layout-3-das-fine-tuning-der-abstande?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Ein modernes Layout: 3. Das Fine-Tuning der Abstände </div> <div class="table-of-contents__item-duration"> 4 Min. 21 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/custom-properties-eigene-eigenschaften-definieren-und-als-css-variablen-nutzen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> "Custom properties": Eigene Eigenschaften definieren und als CSS-Variablen nutzen </div> <div class="table-of-contents__item-duration"> 4 Min. 44 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-farbwerte-fur-die-ubungswebsite-mit-css-variablen-definieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Farbwerte für die Übungswebsite mit CSS-Variablen definieren </div> <div class="table-of-contents__item-duration"> 1 Min. 25 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-farbwerte-fur-die-ubungswebsite-mit-css-variablen-definieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Farbwerte für die Übungswebsite mit CSS-Variablen definieren </div> <div class="table-of-contents__item-duration"> 3 Min. 47 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Media Queries und responsives Webdesign <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 2. Media Queries und responsives Webdesign <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/responsives-webdesign-das-web-wird-flexibel?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Responsives Webdesign: Das Web wird flexibel </div> <div class="table-of-contents__item-duration"> 3 Min. 15 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/medientypen-definieren-das-ausgabemedium?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Medientypen definieren das Ausgabemedium </div> <div class="table-of-contents__item-duration"> 3 Min. 45 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/media-queries-sind-medientypen-plus-medienfeatures?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Media Queries sind Medientypen plus Medienfeatures </div> <div class="table-of-contents__item-duration"> 3 Min. 23 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/media-queries-brauchen-den-meta-viewport?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Media Queries brauchen den "Meta-Viewport" </div> <div class="table-of-contents__item-duration"> 3 Min. 10 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/auf-der-suche-nach-dem-richtigen-breakpoint?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Auf der Suche nach dem richtigen Breakpoint </div> <div class="table-of-contents__item-duration"> 3 Min. 41 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-responsive-schriftgrosse-per-media-query?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Responsive Schriftgröße per Media Query </div> <div class="table-of-contents__item-duration"> 1 Min. 20 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-responsive-schriftgrosse-per-media-query?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Responsive Schriftgröße per Media Query </div> <div class="table-of-contents__item-duration"> 2 Min. 35 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Der Flow und die Eigenschaft position <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 3. Der Flow und die Eigenschaft position <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/block-und-inline-boxen-im-flow-der-block-formatting-context?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Block- und Inline-Boxen im Flow: Der Block Formatting Context </div> <div class="table-of-contents__item-duration"> 3 Min. 23 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/block-boxen-im-flow-und-die-eigenschaft-position-im-uberblick?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Block-Boxen im Flow und die Eigenschaft "position" im Überblick </div> <div class="table-of-contents__item-duration"> 3 Min. 20 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/versetzt-weiterfliessen-position-relative?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Versetzt weiterfließen - "position:relative" </div> <div class="table-of-contents__item-duration"> 2 Min. 32 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/raus-aus-dem-fluss-position-absolute?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Raus aus dem Fluss: "position:absolute" </div> <div class="table-of-contents__item-duration"> 2 Min. 12 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/praktisch-absolute-und-relative-positionierung-kombinieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Praktisch: absolute und relative Positionierung kombinieren </div> <div class="table-of-contents__item-duration"> 3 Min. 59 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/wie-ein-fels-in-der-brandung-position-fixed?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Wie ein Fels in der Brandung: "position:fixed" </div> <div class="table-of-contents__item-duration"> 2 Min. 40 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/scrollen-und-dann-stehen-bleiben-position-sticky-fur-die-navigation?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Scrollen und dann stehen bleiben: "position:sticky" für die Navigation </div> <div class="table-of-contents__item-duration"> 2 Min. 22 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/positionierte-boxen-und-die-stapelreihenfolge-mit-der-eigenschaft-z-index?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Positionierte Boxen und die Stapelreihenfolge mit der Eigenschaft "z-index" </div> <div class="table-of-contents__item-duration"> 3 Min. 49 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-eine-bildbeschriftung-uber-dem-bild-platzieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Eine Bildbeschriftung über dem Bild platzieren </div> <div class="table-of-contents__item-duration"> 1 Min. 16 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-eine-bildbeschriftung-uber-dem-bild-platzieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Eine Bildbeschriftung über dem Bild platzieren </div> <div class="table-of-contents__item-duration"> 2 Min. 23 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Schweben und schweben lassen: float und clear <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 4. Schweben und schweben lassen: float und clear <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-eigenschaft-float-im-uberblick?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die Eigenschaft "float" im Überblick </div> <div class="table-of-contents__item-duration"> 3 Min. 5 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/gefloatete-elemente-sind-nicht-mehr-ganz-im-flow?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Gefloatete Elemente sind nicht mehr ganz im Flow </div> <div class="table-of-contents__item-duration"> 2 Min. 15 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/float-und-clear-im-fliesstext?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> "float" und "clear" im Fließtext </div> <div class="table-of-contents__item-duration"> 2 Min. 4 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/praktisch-klassen-zum-floaten-und-clearen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Praktisch: Klassen zum Floaten und Clearen </div> <div class="table-of-contents__item-duration"> 3 Min. 50 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/floats-umschliessen-mit-einem-neuen-block-formatting-context?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Floats umschließen mit einem neuen Block Formatting Context </div> <div class="table-of-contents__item-duration"> 3 Min. 21 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/floats-umschliessen-fur-alle-browser-mit-supports?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Floats umschließen für alle Browser mit @supports </div> <div class="table-of-contents__item-duration"> 3 Min. 37 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-textfluss-um-gefloatetes-bild-gestalten-mit-shape-outside?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Textfluss um gefloatetes Bild gestalten mit "shape-outside" </div> <div class="table-of-contents__item-duration"> 1 Min. 31 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-textfluss-um-gefloatetes-bild-gestalten-mit-shape-outside?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Textfluss um gefloatetes Bild gestalten mit "shape-outside" </div> <div class="table-of-contents__item-duration"> 3 Min. 5 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Flexbox: mehrspaltige Layouts mit display:flex <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 5. Flexbox: mehrspaltige Layouts mit display:flex <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexbox-und-grid-das-moderne-css-layout?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox und Grid: das moderne CSS-Layout </div> <div class="table-of-contents__item-duration"> 1 Min. 45 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexbox-display-flex-erzeugt-einen-flex-container-und-flex-items?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox: display:flex erzeugt einen Flex-Container und Flex-Items </div> <div class="table-of-contents__item-duration"> 4 Min. 4 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mehrspaltige-layouts-per-flexbox-neue-moglichkeiten-ohne-alte-probleme?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Mehrspaltige Layouts per Flexbox: Neue Möglichkeiten ohne alte Probleme </div> <div class="table-of-contents__item-duration"> 3 Min. 1 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-fliessrichtung-von-flex-items-kontrollieren-mit-flex-direction-flex-wrap-und-flex-flow?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die Fließrichtung von Flex-Items kontrollieren mit flex-direction, flex-wrap und flex-flow </div> <div class="table-of-contents__item-duration"> 4 Min. 3 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-ausrichtung-von-flex-items-kontrollieren-mit-justify-content-align-items-und-align-self?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die Ausrichtung von Flex-Items kontrollieren mit justify-content, align-items und align-self </div> <div class="table-of-contents__item-duration"> 5 Min. 2 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/automatische-abstande-fur-flex-items-mit-margin-auto?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Automatische Abstände für Flex-Items mit margin: auto </div> <div class="table-of-contents__item-duration"> 2 Min. 44 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexibilitat-fur-flex-items-die-zauberformel-flex-1?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexibilität für Flex-Items: Die Zauberformel flex: 1 </div> <div class="table-of-contents__item-duration"> 4 Min. 53 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/sticky-footer-den-fussbereich-mit-flex-1-am-unteren-rand-des-viewports-platzieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren </div> <div class="table-of-contents__item-duration"> 4 Min. 4 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-reihenfolge-von-flex-items-definieren-und-zwischenraume-festlegen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die Reihenfolge von Flex-Items definieren und Zwischenräume festlegen </div> <div class="table-of-contents__item-duration"> 5 Min. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-wichtigsten-flexbox-eigenschaften-auf-einen-blick?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die wichtigsten Flexbox-Eigenschaften auf einen Blick </div> <div class="table-of-contents__item-duration"> 2 Min. 48 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-die-navigation-im-fussbereich-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Die Navigation im Fußbereich gestalten </div> <div class="table-of-contents__item-duration"> 1 Min. 29 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-die-navigation-im-fussbereich-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Die Navigation im Fußbereich gestalten </div> <div class="table-of-contents__item-duration"> 3 Min. 46 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Eine responsive Navigation erstellen <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 6. Eine responsive Navigation erstellen <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-responsive-navigation-im-uberblick?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die responsive Navigation im Überblick </div> <div class="table-of-contents__item-duration"> 4 Min. 3 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-1-prufen-ob-javascript-aktiv-ist?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Schritt 1: Prüfen, ob JavaScript aktiv ist </div> <div class="table-of-contents__item-duration"> 3 Min. 16 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-2-die-mobile-navigation-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Schritt 2: Die mobile Navigation gestalten </div> <div class="table-of-contents__item-duration"> 2 Min. 53 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-3-den-menubutton-im-html-einfugen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Schritt 3: Den Menübutton im HTML einfügen </div> <div class="table-of-contents__item-duration"> 2 Min. 57 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-4-den-menubutton-per-css-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Schritt 4: Den Menübutton per CSS gestalten </div> <div class="table-of-contents__item-duration"> 3 Min. 22 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-5-die-navigation-per-css-ausblenden?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Schritt 5: Die Navigation per CSS ausblenden </div> <div class="table-of-contents__item-duration"> 1 Min. 59 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/schritt-6-die-navigation-mit-dem-menubutton-einblenden?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Schritt 6: Die Navigation mit dem Menübutton einblenden </div> <div class="table-of-contents__item-duration"> 5 Min. 3 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-eine-horizontale-navigation-fur-breitere-viewports?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Eine horizontale Navigation für breitere Viewports </div> <div class="table-of-contents__item-duration"> 1 Min. 32 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-eine-horizontale-navigation-fur-breitere-viewports?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Eine horizontale Navigation für breitere Viewports </div> <div class="table-of-contents__item-duration"> 3 Min. 10 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. CSS-Grid: mehrspaltige Layouts mit display:grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 7. CSS-Grid: mehrspaltige Layouts mit display:grid <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-grid-ist-ein-raster-und-schafft-ordnung?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Ein Grid ist ein Raster und schafft Ordnung </div> <div class="table-of-contents__item-duration"> 1 Min. 58 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/mehrspaltige-layouts-nur-fur-moderne-browser-supports?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Mehrspaltige Layouts nur für moderne Browser: @supports </div> <div class="table-of-contents__item-duration"> 2 Min. 21 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-wichtigsten-begriffe-grid-container-grid-items-co?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die wichtigsten Begriffe: Grid-Container, Grid-Items & Co. </div> <div class="table-of-contents__item-duration"> 3 Min. 29 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/das-erste-grid-layout-die-infoboxen-nebeneinander-platzieren?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Das erste Grid-Layout: Die Infoboxen nebeneinander platzieren </div> <div class="table-of-contents__item-duration"> 5 Min. 8 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/flexbox-und-grid-sind-ein-gutes-team?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Flexbox und Grid sind ein gutes Team </div> <div class="table-of-contents__item-duration"> 4 Min. 10 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/grid-items-manuell-platzieren-1-mit-nummerierten-linien?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Grid-Items manuell platzieren: 1. Mit nummerierten Linien </div> <div class="table-of-contents__item-duration"> 4 Min. 48 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/grid-items-manuell-platzieren-2-mit-benannten-bereichen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Grid-Items manuell platzieren: 2. Mit benannten Bereichen </div> <div class="table-of-contents__item-duration"> 5 Min. 10 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/das-team-1-html-und-grundlegende-gestaltung-per-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Das Team: 1. HTML und grundlegende Gestaltung per CSS </div> <div class="table-of-contents__item-duration"> 3 Min. 15 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/das-team-2-ein-responsives-grid-ohne-media-query?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <icon class="table-of-contents__item-status table-of-contents__item-status--unlocked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/5jwhkytplzxiejvhzfu0t7m8l" data-svg-class-name="table-of-contents__item-status-svg--unlocked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Das Team: 2. Ein responsives Grid ohne Media Query </div> <div class="table-of-contents__item-duration"> 4 Min. 51 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-unregelmassiges-grid-layout-mit-unterschiedlich-breiten-spalten-und-zeilen?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Ein unregelmäßiges Grid-Layout mit unterschiedlich breiten Spalten und Zeilen </div> <div class="table-of-contents__item-duration"> 3 Min. 18 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/die-wichtigsten-grid-eigenschaften-auf-einen-blick?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Die wichtigsten Grid-Eigenschaften auf einen Blick </div> <div class="table-of-contents__item-duration"> 3 Min. 29 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/challenge-die-kontaktseite-per-grid-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Challenge: Die Kontaktseite per Grid gestalten </div> <div class="table-of-contents__item-duration"> 1 Min. 31 Sek. </div> </div> </a> </li> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/solution-die-kontaktseite-per-grid-gestalten?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Solution: Die Kontaktseite per Grid gestalten </div> <div class="table-of-contents__item-duration"> 3 Min. 8 Sek. </div> </div> </a> </li> </ul>  </div> </li> <li class="toc-section"> <div class="show-more-less"> <button class="show-more-less__button show-more-less__more-button show-more-less-button " aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 8. Ein Blick in die Zukunft von CSS <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> <button class="show-more-less__button show-more-less__less-button show-more-less-button show-more-less__button--hide" aria-expanded="false" data-tracking-control-name="learning-course_toc-section_show_more"> 8. Ein Blick in die Zukunft von CSS <icon class="show-more-less__button--chevron show-more-less-button-icon" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/4chtt12k98xwnba1nimld2oyg"></icon> </button> <ul data-max-num-to-show="0" class="show-more-less__list show-more-less__list--hide-after-0" data-impression-id="learning-course_toc-section_show-more-less"> <li class="toc-item"> <a data-tracking-control-name="learning-course_tocItem" data-tracking-will-navigate href="https://de.linkedin.com/learning/webtechniken-lernen-3-responsive-css-layouts-mit-media-queries-flexbox-und-grid/ein-kurzer-blick-in-die-zukunft-von-css?autoplay=true&trk=learning-course_tocItem" class="toc-item__link" aria-current="false"> <span class="a11y-text">(Gesperrt)</span> <icon class="table-of-contents__item-status table-of-contents__item-status--locked" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cfu0devb5o77ym5x8vv0oilfz" data-svg-class-name="table-of-contents__item-status-svg--locked"></icon> <div class="table-of-contents__item-details"> <div class="table-of-contents__item-title"> Ein kurzer Blick in die Zukunft von CSS </div> <div class="table-of-contents__item-duration"> 3 Min. 24 Sek. </div> </div> </a> </li> </ul>  </div> </li> </ul> </section> <section class="aside-section-container mb-4 subscription-value-props-aside-section"> <h2 class="aside-section-container__title section-title"> Enthalten: </h2>  <div class="aside-section-container__content break-words"> <ul>  <li class="subscription-value-props-aside-section__list-item"> <span class="subscription-value-props-aside-section__value-prop-label">Lernen auch unterwegs</span> <span class="subscription-value-props-aside-section__value-prop-sublabel">Zugriff via Tablet und Handy</span> </li>  </ul> </div> </section> <section class="aside-section-container mb-4 similar-courses-aside-section"> <h2 class="aside-section-container__title section-title"> Ähnliche Kurse anzeigen </h2>  <div class="aside-section-container__content break-words"> <ul> <li>  <a href="https://de.linkedin.com/learning/webtechniken-lernen-2-css-grundlagen-17200653?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative rounded-md h-[54px] w-[95px]"> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4D0DAQH0uGB75zNZXw/learning-public-crop_144_256/learning-public-crop_144_256/0/1651054295510?e=2147483647&v=beta&t=C3yhZuYp4Cx_wTjPRsxnOMe-lYoizGMuhxQNjhroilU"> <div class="aside-learning-course-card__duration duration">4 Std. 5 Min.</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> Webtechniken lernen 2: CSS-Grundlagen  </h3>      </div>  </a> </li> <li>  <a href="https://de.linkedin.com/learning/webtechniken-lernen-1-html?trk=learning-course_similar-courses" target="_self" data-tracking-control-name="learning-course_similar-courses" data-tracking-will-navigate class="base-card relative w-full hover:no-underline focus:no-underline base-card--link base-aside-card flex my-1.5 hover:show-play-button focus:show-play-button base-aside-card--link aside-learning-course-card">  <div class="base-aside-card__media flex-shrink-0 mr-0.5 overflow-hidden relative rounded-md h-[54px] w-[95px]"> <img class="base-aside-card__media-element w-[100px] h-full object-cover" alt data-delayed-url="https://media.licdn.com/dms/image/v2/C4D0DAQFPYdPx4sWq3A/learning-public-crop_144_256/learning-public-crop_144_256/0/1638362961748?e=2147483647&v=beta&t=Cs1_Pp6cjs-heU-4JP_ncbnXfanx44_rfArt5Ttz9-4"> <div class="aside-learning-course-card__duration duration">3 Std. 54 Min.</div> <icon class="base-aside-card__play-button w-auto play-button overlay-center" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/9n9raq7fmdu241tpsxwodsmcd" data-svg-class-name="base-aside-card__play-button-svg"></icon> </div> <div class="base-aside-card__info self-center pl-0.5 flex flex-col flex-1"> <h3 class="base-aside-card__title font-sans text-md font-bold text-color-text relative"> Webtechniken lernen 1: HTML  </h3>      </div>  </a> </li> </ul> </div> </section> <section class="aside-section-container mb-4"> <h2 class="aside-section-container__title section-title"> Kurse herunterladen </h2>  <div class="aside-section-container__content break-words"> <p>Sie können Kurse mit der LinkedIn Learning-App für iOS oder Android herunterladen und diese auch ohne Internetverbindung auf Ihrem Mobilgerät ansehen.</p> <div class="app-links-aside-section__link-container"> <a class="app-links-aside-section__link" href="https://itunes.apple.com/de/app/apple-store/id1084807225?ls=1&pt=10746&mt=8&ct=learning_course_app_links&trk=learning-course_apple-app-store" data-tracking-control-name="learning-course_apple-app-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Im App Store herunterladen" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/emczv26hz24woii2j4aleyry" height="42px" width="142px"> </a> <a class="app-links-aside-section__link" href="https://play.google.com/store/apps/details?id=com.linkedin.android.learning&referrer=utm_source=linkedinlearning&utm_medium=mobileWeb&utm_campaign=learning_guest&hl=de&ct=learning_course_app_links&trk=learning-course_google-play-store" data-tracking-control-name="learning-course_google-play-store" data-tracking-will-navigate rel="noopener noreferrer" target="_blank"> <img alt="Auf Google Play erhältlich" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/535kqf5rsexfx0lucb3t6palb" height="42px" width="142px"> </a> </div> </div> </section> </section> </main> <div class="pre-footer "> <section class="core-section-container my-3 price-disclaimer">    <div class="core-section-container__content break-words"> <p class="price-disclaimer__copy"> <sup class="price-disclaimer__copy--sup">*</sup>Der Preis ist abhängig vom beim Einloggen oder bei der Registrierung angegebenen Profil- und Rechnungsland. </p> </div> </section> <section class="tw-linkster bg-cool-gray-20 browse-map" data-impression-id="learning-course_linkster" data-js-module-id="linkster"> <div class="max-w-screen-content-max-w w-full flex justify-between my-0 mx-auto mamabear:px-3 babybear:px-2 babybear:flex-col"> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Themen der Kategorie „Business“ ansehen </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/fuhrung-und-berufliche-weiterentwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Berufliche Weiterentwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/business-software-und-tools?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Business-Software und Tools </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/diversity-equity-und-inclusion-dei?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Diversity, Equity, Inclusion und Belonging (DEIB) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/finanz-und-rechnungswesen?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Finanz- und Rechnungswesen </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/fuhrung-und-management-15955952?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Führung und Management </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/karriere-entwicklung-15962768?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Karriere-Entwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/kleinunternehmen-und-unternehmertum?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Kleinunternehmen und Unternehmertum </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/kundenservice-15962236?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Kundenservice </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/marketing-3?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Marketing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/personalwesen-15962946?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Personalwesen </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/projektmanagement-15955944?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Projektmanagement </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/training-und-bildung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Training und Bildung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/unternehmensanalyse-und-strategie?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Unternehmensanalyse und -strategie </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/verkauf-und-vertrieb-15961401?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Verkauf und Vertrieb </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="Alle Kurse anzeigen: Business" href="https://de.linkedin.com/learning/topics/business-2?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> Alle anzeigen </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Themen der Kategorie „Kreativität“ ansehen </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/animation-und-illustration?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Animation und Illustration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/architektur-ingenieur-und-bauwesen-aec?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Architektur-, Ingenieur- und Bauwesen (AEC) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/audio-und-musik?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Audio und Musik </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/bildbearbeitung-fotografie-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Bildbearbeitung und Fotografie </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/grafikdesign?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Grafikdesign </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/motion-design-und-visuelle-effekte?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Motion-Design und Visuelle Effekte </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/produkt-und-herstellung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Produkt und Herstellung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/user-experience-15995392?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> User Experience </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/video-audio-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Video </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/visualisierung-und-echtzeit-rendering?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Visualisierung und Echtzeit-Rendering </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/webdesign-und-ux?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Webdesign </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="Alle Kurse anzeigen: Kreativität" href="https://de.linkedin.com/learning/topics/kreativitat?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> Alle anzeigen </a> </div> <div class="flex-1 w-1/2 pt-2 pr-4 pb-4 pl-0 babybear:pb-2 babybear:w-full babybear:border-b-1 babybear:border-solid babybear:border-color-border-low-emphasis babybear:last:border-b-0"> <h3 class="text-md font-bold text-color-text leading-open"> Themen der Kategorie „Technik“ ansehen </h3> <ul class="my-1"> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/cloud-computing-16105209?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Cloud-Computing </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/data-science-15956724?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Data Science </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/datenbankverwaltung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Datenbankverwaltung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/devops-16105665?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> DevOps </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/hardware?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Hardware </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/it-support-2?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT-Helpdesk </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/informations-und-it-sicherheit?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> IT-Sicherheit und Cybersecurity </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/kunstliche-intelligenz-ki?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Künstliche Intelligenz (KI) </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/mobile-entwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Mobile Entwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/it-operations-und-it-sicherheit?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Netzwerk- und Systemadministration </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/softwareentwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Softwareentwicklung </a> </li> <li class="tw-link-column-item"> <a class="link tw-linkster-link" href="https://de.linkedin.com/learning/topics/webentwicklung?trk=learning-course_browsemap_link" data-js-module-id="link-column-link" data-tracking-control-name="learning-course_browsemap_link" data-tracking-will-navigate> Webentwicklung </a> </li> </ul> <a class="link tw-linkster-general-link" aria-label="Alle Kurse anzeigen: Technik" href="https://de.linkedin.com/learning/topics/technik?trk=learning-course_browsemap_general-link" data-tracking-control-name="learning-course_browsemap_general-link" data-tracking-will-navigate> Alle anzeigen </a> </div> </div> </section> </div> <footer class="li-footer bg-transparent w-full "> <ul class="li-footer__list flex flex-wrap flex-row items-start justify-start w-full h-auto min-h-[50px] my-[0px] mx-auto py-3 px-2 papabear:w-[1128px] papabear:p-0"> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <span class="sr-only">LinkedIn</span> <icon class="li-footer__copy-logo text-color-logo-brand-alt inline-block self-center h-[14px] w-[56px] mr-1" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/e12h2cd8ac580qen9qdd0qks8"></icon> <span class="li-footer__copy-text flex items-center">© 2025</span> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://about.linkedin.com?trk=d_learning_course_guest_footer-about" data-tracking-control-name="d_learning_course_guest_footer-about" data-tracking-will-navigate> Info </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/accessibility?trk=d_learning_course_guest_footer-accessibility" data-tracking-control-name="d_learning_course_guest_footer-accessibility" data-tracking-will-navigate> Barrierefreiheit </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/user-agreement?trk=d_learning_course_guest_footer-user-agreement" data-tracking-control-name="d_learning_course_guest_footer-user-agreement" data-tracking-will-navigate> Nutzervereinbarung </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/privacy-policy?trk=d_learning_course_guest_footer-privacy-policy" data-tracking-control-name="d_learning_course_guest_footer-privacy-policy" data-tracking-will-navigate> Datenschutzrichtlinie </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/cookie-policy?trk=d_learning_course_guest_footer-cookie-policy" data-tracking-control-name="d_learning_course_guest_footer-cookie-policy" data-tracking-will-navigate> Cookie-Richtlinie </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/copyright-policy?trk=d_learning_course_guest_footer-copyright-policy" data-tracking-control-name="d_learning_course_guest_footer-copyright-policy" data-tracking-will-navigate> Copyright-Richtlinie </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://brand.linkedin.com/policies?trk=d_learning_course_guest_footer-brand-policy" data-tracking-control-name="d_learning_course_guest_footer-brand-policy" data-tracking-will-navigate> Markenrichtlinine </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/psettings/guest-controls?trk=d_learning_course_guest_footer-guest-controls" data-tracking-control-name="d_learning_course_guest_footer-guest-controls" data-tracking-will-navigate> Einstellungen für Nichtmitglieder </a> </li> <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <a class="li-footer__item-link flex items-center font-sans text-xs font-bold text-color-text-solid-secondary hover:text-color-link-hover focus:text-color-link-focus" href="https://www.linkedin.com/legal/professional-community-policies?trk=d_learning_course_guest_footer-community-guide" data-tracking-control-name="d_learning_course_guest_footer-community-guide" data-tracking-will-navigate> Community-Richtlinien </a> </li>  <li class="li-footer__item font-sans text-xs text-color-text-solid-secondary flex flex-shrink-0 justify-start p-1 relative w-50% papabear:justify-center papabear:w-auto"> <div class="collapsible-dropdown collapsible-dropdown--footer collapsible-dropdown--up flex items-center relative hyphens-auto language-selector z-2">  <ul class="collapsible-dropdown__list hidden container-raised absolute w-auto overflow-y-auto flex-col items-stretch z-1 bottom-[100%] top-auto" role="menu" tabindex="-1"> <li class="language-selector__item" role="presentation">  <button aria-label="العربية (Arabisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ar_AE" data-locale="ar_AE" role="menuitem" lang="ar_AE"> العربية (Arabisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="বাংলা (Bengali)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-bn_IN" data-locale="bn_IN" role="menuitem" lang="bn_IN"> বাংলা (Bengali) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Čeština (Tschechisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-cs_CZ" data-locale="cs_CZ" role="menuitem" lang="cs_CZ"> Čeština (Tschechisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Dansk (Dänisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-da_DK" data-locale="da_DK" role="menuitem" lang="da_DK"> Dansk (Dänisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Deutsch ausgewählt" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link--selected" data-tracking-control-name="language-selector-de_DE" data-locale="de_DE" role="menuitem" lang="de_DE"> <strong>Deutsch</strong> </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Ελανεκα (Griechisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-el_GR" data-locale="el_GR" role="menuitem" lang="el_GR"> Ελανεκα (Griechisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="English (Englisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-en_US" data-locale="en_US" role="menuitem" lang="en_US"> English (Englisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Español (Spanisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-es_ES" data-locale="es_ES" role="menuitem" lang="es_ES"> Español (Spanisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="فارسی (Persisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fa_IR" data-locale="fa_IR" role="menuitem" lang="fa_IR"> فارسی (Persisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Suomi (Finnisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fi_FI" data-locale="fi_FI" role="menuitem" lang="fi_FI"> Suomi (Finnisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Français (Französisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-fr_FR" data-locale="fr_FR" role="menuitem" lang="fr_FR"> Français (Französisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="हिंदी (Hindi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hi_IN" data-locale="hi_IN" role="menuitem" lang="hi_IN"> हिंदी (Hindi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Magyar (Ungarisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-hu_HU" data-locale="hu_HU" role="menuitem" lang="hu_HU"> Magyar (Ungarisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Indonesia (Indonesisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-in_ID" data-locale="in_ID" role="menuitem" lang="in_ID"> Bahasa Indonesia (Indonesisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Italiano (Italienisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-it_IT" data-locale="it_IT" role="menuitem" lang="it_IT"> Italiano (Italienisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="עברית (Hebräisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-iw_IL" data-locale="iw_IL" role="menuitem" lang="iw_IL"> עברית (Hebräisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="日本語 (Japanisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ja_JP" data-locale="ja_JP" role="menuitem" lang="ja_JP"> 日本語 (Japanisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="한국어 (Koreanisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ko_KR" data-locale="ko_KR" role="menuitem" lang="ko_KR"> 한국어 (Koreanisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="मराठी (Marathi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-mr_IN" data-locale="mr_IN" role="menuitem" lang="mr_IN"> मराठी (Marathi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Bahasa Malaysia (Malaysisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ms_MY" data-locale="ms_MY" role="menuitem" lang="ms_MY"> Bahasa Malaysia (Malaysisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Nederlands (Niederländisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-nl_NL" data-locale="nl_NL" role="menuitem" lang="nl_NL"> Nederlands (Niederländisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Norsk (Norwegisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-no_NO" data-locale="no_NO" role="menuitem" lang="no_NO"> Norsk (Norwegisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ਪੰਜਾਬੀ (Punjabi)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pa_IN" data-locale="pa_IN" role="menuitem" lang="pa_IN"> ਪੰਜਾਬੀ (Punjabi) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Polski (Polnisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pl_PL" data-locale="pl_PL" role="menuitem" lang="pl_PL"> Polski (Polnisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Português (Portugiesisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-pt_BR" data-locale="pt_BR" role="menuitem" lang="pt_BR"> Português (Portugiesisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Română (Rumänisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ro_RO" data-locale="ro_RO" role="menuitem" lang="ro_RO"> Română (Rumänisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Русский (Russisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-ru_RU" data-locale="ru_RU" role="menuitem" lang="ru_RU"> Русский (Russisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Svenska (Schwedisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-sv_SE" data-locale="sv_SE" role="menuitem" lang="sv_SE"> Svenska (Schwedisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="తెలుగు (Telugu)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-te_IN" data-locale="te_IN" role="menuitem" lang="te_IN"> తెలుగు (Telugu) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="ภาษาไทย (Thai)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-th_TH" data-locale="th_TH" role="menuitem" lang="th_TH"> ภาษาไทย (Thai) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tagalog (Tagalog)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tl_PH" data-locale="tl_PH" role="menuitem" lang="tl_PH"> Tagalog (Tagalog) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Türkçe (Türkisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-tr_TR" data-locale="tr_TR" role="menuitem" lang="tr_TR"> Türkçe (Türkisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Українська (Ukrainisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-uk_UA" data-locale="uk_UA" role="menuitem" lang="uk_UA"> Українська (Ukrainisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="Tiếng Việt (Vietnamesisch)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-vi_VN" data-locale="vi_VN" role="menuitem" lang="vi_VN"> Tiếng Việt (Vietnamesisch) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="简体中文 (Chinesisch vereinfacht)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_CN" data-locale="zh_CN" role="menuitem" lang="zh_CN"> 简体中文 (Chinesisch vereinfacht) </button> </li> <li class="language-selector__item" role="presentation">  <button aria-label="正體中文 (Chinesisch traditionell)" class="font-sans text-xs link block py-[5px] px-2 w-full hover:cursor-pointer hover:bg-color-action hover:text-color-text-on-dark focus:bg-color-action focus:text-color-text-on-dark language-selector__link !font-regular" data-tracking-control-name="language-selector-zh_TW" data-locale="zh_TW" role="menuitem" lang="zh_TW"> 正體中文 (Chinesisch traditionell) </button> </li>  </ul> <button class="language-selector__button select-none relative pr-2 font-sans text-xs font-bold text-color-text-low-emphasis hover:text-color-link-hover hover:cursor-pointer focus:text-color-link-focus focus:outline-dotted focus:outline-1" aria-expanded="false" data-tracking-control-name="footer-lang-dropdown_trigger"> <span class="language-selector__label-text mr-0.5 break-words"> Sprache </span> <icon class="language-selector__label-chevron w-2 h-2 absolute top-0 right-0" data-delayed-url="https://static.licdn.com/aero-v1/sc/h/cyolgscd0imw2ldqppkrb84vo"></icon> </button> </div> </li> </ul>  </footer> <script src="https://static.licdn.com/aero-v1/sc/h/7itt46rafycxiwozfd111d2we" async></script>  <script src="https://static.licdn.com/aero-v1/sc/h/3iztwohxe2bmun1nouya4b56h" async defer></script> <script data-delayed-url="https://static.licdn.com/aero-v1/sc/h/zjknc3m26x2ha3j6ctgfqond" data-module-id="media-player"></script> <code id="trackingData" style="display: none"></code> <code id="alcOnlyData" style="display: none"></code>  </body> </html>

CINXE.COM

Onlinekurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid | LinkedIn Learning, früher Lynda.com