Inhalte
[et_pb_section fb_built=“1″ _builder_version=“4.10.7″ _module_preset=“default“ background_color=“RGBA(0,0,0,0)“ global_colors_info=“{}“][et_pb_row _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_column type=“4_4″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text _builder_version=“4.10.7″ _module_preset=“default“ background_color=“#EDE3D3″ custom_padding=“10px|10px|10px|10px|false|false“ box_shadow_style=“preset2″ global_colors_info=“{}“]
In diesem Repository werde ich die Übungen, die wir gemeinsam machen und auch ggf später Lösungen zum Download zur Verfügung stellen: https://github.com/RebiRotti/abendkurs-2021/
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“Nachschlagenseiten“ _builder_version=“4.11.2″ _module_preset=“default“ background_color=“#EDE3D3″ custom_padding=“10px|10px|10px|10px|false|false“ box_shadow_style=“preset2″ global_colors_info=“{}“]
Nachschlagenseiten
- Wiki Selfhtml
- w3schools
- Markdown Cheatsheet
- CSS Befehle Übersicht
- CSS Browser Support
- Übersicht der Bild- & Grafikformate im Web
- CSS Coding Guidelines
nützliche Browserplugins
- Wappalyzer – Interested to know which websites use certain technologies?
Farbpicker
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text _builder_version=“4.10.7″ _module_preset=“default“ background_color=“#EDE3D3″ custom_padding=“10px|10px|10px|10px|false|false“ box_shadow_style=“preset2″ global_colors_info=“{}“]
Praktische Links
- Blind Text Generator
- Autoprefixer CSS online
- TinyPNG – Smart PNG and JPEG compression
- Cheat Sheet
Bilder, Icons
- Unsplash – kostenlose Fotos
- Grafikpower für dein Projekt: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts
- t3n: Die 15 besten Seiten für kostenlose Icons und Icon-Fonts
- Font Awesome
Spielerisch Lernen
- Flexbox Defense
- Flexbox Froggy
- Game: Dead Tired of Looking up Flexbox?
- Git Branching Game
- CSS Selektoren Game
- GRID GARDEN
- Übungsspiel zu Hexadezimal Werten für Farben
- Übungsspiel Pixactly
- Code Combat
- Silent Teacher
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“16. + 18.09.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
16. + 18.09.2021
- Kapitel 01 – Ziemlich beste Freunde: HTML und CSS
- Kapitel 02 – Beispiel für das HTML/CSS-Team
- Gestatten: die Beispielsite
- Der HTML-Code für die Beispielseite
- Einmal Gestaltung bitte – CSS-Code erklärt
- Kapitel 03 – Fremden Code untersuchen, eigenen besser verstehen
- Kapitel 04 – Ab ins Internet (self study)
- Grundprinzip verstehen
- Hosting – Begriffe und Fakten
- Fehler beheben und Probleme lösen
- Kapitel 05 – Gut strukturiert ist halb gewonnen
- Kopf und Rumpf
- Sprachangabe
- Zeichensatzangabe UTF-8
- Seitentitel – aber richtig
- Grundlegende Techniken
- Texte unterteilen
- Inline-Elemente
- Kopf und Rumpf
- Kapitel 06 – Bilder
- Mehr als Worte: Bilder
- Raster versus Vektor
- Eine Frage des (Bild-)Formats
- Das richtige Format für die richtige Situation
- Bilder einbinden
- Mehr als Worte: Bilder
- Kapitel 07 – Links und Pfade
- Verlinkungen
- An bestimmte Stellen auf Seiten verlinken
- Verlinkungen
- Kapitel 09 – HTML mit CSS zusammenbringen
- HTML und CSS verknüpfen
- Externe Datei
- Externe Datei
- HTML und CSS verknüpfen
- Kapitel 11 – Schriften, Absätze und Listen formatieren
- Schrift formatieren
- Webfonts
- Listen formatieren
- Schrift formatieren
- Kapitel 13 – Hintergrundbilder
- Hintergrundfarben und -bilder
- Bildschirmfüllendes Hintergrundbild
- Kapitel 15 – Flexbox
- Flexbox für Layouts und Navigationsleisten
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“]
Einstieg
- Character Entities
- HTML article, section, header, footer, nav
- HTML-Elemente und Semantik
- Block Elemente
- Inline Elemente
- Block- & Inline-Elemente in HTML
- Introduction to HTML
- This FREE course will teach you how to design a web page using HTML
Flexbox
- Flexible Ribbons mit CSS
- CSS Flexbox – Einführung in das Flexible Box Layout Module
- Flexbox: Mehrspaltige Liste von Boxen mit vertikal zentrierten Inhalten
- Flexbox – Responsive Layouts ohne Media Queries
- Learn Flexbox for free
Weitere Info
- Block- & Inline-Elemente in HTML
- Listen und Aufzählung
- Listen mit Unterpunkten (verschachtelte Listen)
- Definitionslisten
- Listen
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“25.09.2021″ _builder_version=“4.10.7″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
23.09.2021
- Kapitel 02 – Beispiel für das HTML/CSS-Team
- Anpassungen für kleine Screens
- Kapitel 05 – Gut strukturiert ist halb gewonnen
- Kopf und Rumpf
- Mehr meta
- Struktur im Groben
- Kopf und Rumpf
- Kapitel 06 – Videos
- Mehr als Worte: Bilder
- Bewegt: Videos
- iframes: die guten Frames
- Was auf die Ohren: Audio
- Mehr Objekte
- Kapitel 07 – Links und Pfade
- Verlinkungen
- Pfade – von hier nach dort und wieder zurück
- Kapitel 08 – Formulare (Teil 1 input-Felder)
- Von der Wiege bis zur Bahre – Formulare, Formulare
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“]
Querverweise
- Formular-Styling mit CSS – Select-Listen, Radio-Buttons und Checkboxen individuell gestalten
- Placeholder von input mit CSS stylen
- Generierter CSS-Content mit den Pseudoelementen ::before und ::after
- :is() und :where() CSS Pseudoklassen Selektor
- Automatische CSS Initialen (Drop Caps)
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“25.09.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
25.09.2021
- Kapitel 08 – Formulare
- Von der Wiege bis zur Bahre – Formulare, Formulare
- Kapitel 09 – HTML mit CSS zusammenbringen
- HTML und CSS verknüpfen
- Eingebettete Stylesheets
- Inline-Stile
- Externe Stylesheets mit @import einbinden
- Kommentare – in CSS (im Unterschied zu HTML)
- Die Qual der Wahl – Elemente auswählen
- Das Recht des Stärken – Spezifität verstehen
- HTML und CSS verknüpfen
- Kapitel 10 – CSS: Farben, Maßeinheiten und Vererbung
- Kapitel 11 – Schriften, Absätze und Listen formatieren
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“]
Farben
- Farbkombinationen von anderen Webdesignern
- Test für Kontrast zwischen Hintergrund und Textfarbe
- Einführung in die Farbenlehre: So wirken Farben
- YouTube: Die Bedeutung von Farben für Branding
- Die Grundlagen der Farbenlehre
- Accessible Colors
[/et_pb_text][et_pb_text _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“]
Querverweise
- Mit »box-sizing: border-box;« das CSS Box Model verändern
- Vererbung in CSS
- CSS-Spezifität
- box-Model
- :nth-Child
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“09.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
09.10.2021
[/et_pb_text][et_pb_text admin_label=“09.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
- Kapitel 08 – Tabellen
- Informationen in Reih und Glied – Tabellen
- Grundlegender Aufbau von Tabellen
- Tabellen fehlerfrei erstellen
- Weitere Strukturierungselemente bei Tabellen
- Informationen in Reih und Glied – Tabellen
- Kapitel 13 – Farbverläufe
- Farbverläufe erstellen
- Grundprinzip von Farbverläufen
- Code für ältere Browser
- Variationen für Farbverläufe
- Farbverläufe erstellen
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text _builder_version=“4.11.2″ _module_preset=“default“ global_colors_info=“{}“]
Querverweise
- Bildunterschriften mit CSS immer perfekt ausrichten
- Farbkombinationen von anderen Webdesignern
- Test für Kontrast zwischen Hintergrund und Textfarbe
Tabellen
CSS Grundlagen
- !!! CSS Spezifitäten – Kulturbanausen
- CSS Spezifitäten
- Pseudo Klassen
- Pseudo Elemente
- :is & :where Pseudoklassen
- :nth-child
Farbverläufe
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“14.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
14.10.2021
[/et_pb_text][et_pb_text disabled_on=“off|off|off“ admin_label=“14.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
- Kapitel 12 – Kästchen messen
- Kapitel 15 – Gridlayout
- Rasterlayouts leicht gemacht mit Gridlayout
- Erstes Raster
- Gridlayout mit benannten Bereichen
- Voll flexibles Raster
- Ausrichten mit Gridlayout und Abstände zwischen Rasterzellen
- Rasterlayouts leicht gemacht mit Gridlayout
- Kapitel 16 – Responsives Webdesign
- Kapitel 17 – Responsive Bilder
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text disabled_on=“off|off|off“ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
Querverweise
- Grid Garden
- A Complete Guide to Grid
- CSS Grid auto-fit / auto-fill – Responsive Layouts ohne Media Queries
- Scrimba: Learn CSS Grid for free
- CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module
- CSS Grid auto-fit / auto-fill – Responsive Layouts ohne Media Queries
- Interactive CSS Grid Generator
- CSS/Tutorials/Einstieg/Media Queries
- Media Queries – @media-Regel
- CSS/Media Queries/Medienabfragen einbinden
- CSS/Media Queries
- Responsive Web Design
- Responsive Images
- CSS/Tutorials/Print-CSS
- Responsive Images: Use Cases and Documented Code Snippets to Get You Started
- Scrimba: The Responsive Web Design Bootcamp
- Accessible Colors
- Einführung in die Farbenlehre: So wirken Farben
- Die Grundlagen der Farbenlehre
- YouTube: Die Bedeutung von Farben für Branding
- Learn UI Design Fundamentals
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“16.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
16.10.2021
[/et_pb_text][et_pb_text disabled_on=“off|off|off“ admin_label=“16.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
Einführung in JavaScirpt
- w3schools
- bestes JS Tutorial Ever
- Introduction to JavaScript
- Learn all the basic features of JavaScript, including making your website more interactive, changing website content, validating forms, and so much more.
- JavaScript Hero
- Debugging JavaScript – Chrome DevTools
- Learn modern JavaScript
- Learn Regular Expressions
- The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element.
- Introduction to ES6+
- HTML5 Canvas API Crash Course
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text disabled_on=“off|off|off“ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
CSS
- Einführung in CSS 3
- transform
- Die CSS calc()-Funktion – Berechnungen mit CSS
- Wortumbrüche/Zeilenumbrüche per CSS erzwingen
- Scrimba – Learn CSS Animations
- Wiederholung Scrimba: HTML & CSS Crash Course
- Wiederholung Scrimba: Introduction to CSS
- CSS-Elemente zum Ausprobieren
- Getippter Text mit CSS-Animationen
- Intro to CSS 3D transforms
- perspective
- CSS-FILTER
- BACKGROUND-BLEND-MODE: HINTERGRÜNDE MISCHEN (CSS3)
- CSS Keyframe-Animationen
- CSS3-Hintergrundmuster mit CSS3-Gradients erzeugen
- Schwebende Objekte mit CSS3 Keyframe-Animationen
- CSS Flip Animation – Objekte umdrehen
- CSS Filter-Effekte
- Stufenlos skalierende Texte und Schriftgrößen mit CSS calc()
- AUSSCHNEIDEN MIT CSS3 – CLIP-PATH
- CSS counter() – zählen mit CSS
- CSS-FILTER
- Zick-Zack-Linien mit CSS3
- Tag-Icons mit CSS gestalten
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“21.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
21.10.2021
[/et_pb_text][et_pb_text disabled_on=“off|off|off“ admin_label=“21.10.2021″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
Funktionen mit Übergabe- und Rückgabeparameter, Schleifen
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text disabled_on=“off|off|off“ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
Querverweise
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“12.02.2022″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
12.02.2022
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text disabled_on=“off|off|off“ _builder_version=“4.14.7″ _module_preset=“default“ hover_enabled=“0″ border_color_top=“#444444″ global_colors_info=“{}“ sticky_enabled=“0″]
Querverweise
- Farbkombinationen
- 7 Rules for Choosing A Website Color Scheme
- Die Grundlagen der Farbenlehre
- a clean & simple color picker for web designers
- Web Content Accessibility Guidelines (WCAG) 2.2
- Die WCAG 3.0
- APCA CONTRAST CALCULATOR
- SVG Animieren OnlineTool
- CSS mask – Elemente mit Bildern maskieren
- Figma
- SVG GENERATORS, TOOLS & RESOURCES
- Mobile Apps mit Angular entwickeln
- React Native
- PDF Designing for accessibility by Patricia
- PDF Barrierefreiheit
- PDF Geschichte Internet
- PDF Grundlagen
- PPTX Present your Project
- PDF Stile und Looks Teil 1
- PDF Stile und Looks 2 – Programmhinweise
- Web Content Accessibility Guidelines (WCAG) 2.2
- web-platform-tests documentation
- Markup Validation Service
- Marktanteile der führenden Browserfamilien an der Internetnutzung weltweit von Januar 2009 bis Januar 2022
- Pagespeed Optimieren
- Barrierefreiheit testen: Tools und Herangehensweisen
- APCA CONTRAST CALCULATOR
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“19.02.2022″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
19.02.2022
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text disabled_on=“on|on|on“ _builder_version=“4.14.7″ _module_preset=“default“ hover_enabled=“0″ border_color_top=“#444444″ global_colors_info=“{}“ sticky_enabled=“0″ disabled=“on“]
Querverweise
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“26.02.2022″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
26.02.2022
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“05.03.2022″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
05.03.2022
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][/et_pb_column][/et_pb_row][et_pb_row column_structure=“1_2,1_2″ _builder_version=“4.10.7″ _module_preset=“default“ border_width_top=“1px“ border_color_top=“#444444″ global_colors_info=“{}“][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][et_pb_text admin_label=“12.03.2022″ _builder_version=“4.11.2″ _module_preset=“default“ border_color_top=“#444444″ global_colors_info=“{}“]
12.03.2022
Start Vertiefung
[/et_pb_text][/et_pb_column][et_pb_column type=“1_2″ _builder_version=“4.10.7″ _module_preset=“default“ global_colors_info=“{}“][/et_pb_column][/et_pb_row][/et_pb_section]