- 47
- 13 561
Web einfach machen
Germany
เข้าร่วมเมื่อ 23 พ.ค. 2022
Schau Dir auf meinem Kanal Tutorials zum Gestalten und Produzieren von Websites an. Du findest hier viel Wissenswertes unter anderem zu HTML und CSS, zum Thema responsive Webdesign, Animationen, Webframeworks oder Workflowoptimierung.
Die Kursmaterialien für viele Tutorials kannst Du Dir einfach und kostenlos von meinem Server www.web-einfach-machen.de/ runterladen. Du musst Dich dafür weder anmelden noch registrieren. In den Beschreibungen unter den TH-cam-Videos findest Du jeweils die direkten Links zu den dazugehörigen Aufgabenstellungen, Lösungshinweisen und Kursmaterialien.
Ich bin Stephan Franke, arbeite als Software-Trainer und berate Agenturen und Kunden aus dem Web-Umfeld.
Schreib gerne in die Kommentare, was Dich an weiteren Themen aus dem Bereich Web-Produktion interessiert.
Die Kursmaterialien für viele Tutorials kannst Du Dir einfach und kostenlos von meinem Server www.web-einfach-machen.de/ runterladen. Du musst Dich dafür weder anmelden noch registrieren. In den Beschreibungen unter den TH-cam-Videos findest Du jeweils die direkten Links zu den dazugehörigen Aufgabenstellungen, Lösungshinweisen und Kursmaterialien.
Ich bin Stephan Franke, arbeite als Software-Trainer und berate Agenturen und Kunden aus dem Web-Umfeld.
Schreib gerne in die Kommentare, was Dich an weiteren Themen aus dem Bereich Web-Produktion interessiert.
Wordpress-Tutorial für Einsteiger 08: Abschluss der Tutorialreihe
Mit diesem Video findet die Tutorialreihe zu Kadence ihren Abschluss. Es geht nochmal um das Thema Beiträge in Wordpress anzeigen bzw. filtern und um Geschwindigkeitsoptimierung durch bessere Bildkompression.
Kapitel in diesem Video
00:56 - Kleine optische Anpassungen
02:13 - Aktuellste Beiträge auf Startseite anzeigen
04:31 - Anfahrtsweg per Google Map
05:22 - Anzeige der Beiträge filtern
06:48 - Geschwindigkeitsoptimierung durch bessere Bildkompression
Literaturhinweise
Das fertige Beispiel findest Du auf web-einfach-machen.de/GrooveCraft/
Analyse-Werkzeug: pagespeed.web.dev/
PlugIn Empfehlungen: www.gruender.de/software-tools/wordpress-must-haves-plugins/ und th-cam.com/video/LwaDRiNSde8/w-d-xo.html
Beiträge in WordPress: wordpress.org/documentation/article/introduction-to-blogging/
Kapitel in diesem Video
00:56 - Kleine optische Anpassungen
02:13 - Aktuellste Beiträge auf Startseite anzeigen
04:31 - Anfahrtsweg per Google Map
05:22 - Anzeige der Beiträge filtern
06:48 - Geschwindigkeitsoptimierung durch bessere Bildkompression
Literaturhinweise
Das fertige Beispiel findest Du auf web-einfach-machen.de/GrooveCraft/
Analyse-Werkzeug: pagespeed.web.dev/
PlugIn Empfehlungen: www.gruender.de/software-tools/wordpress-must-haves-plugins/ und th-cam.com/video/LwaDRiNSde8/w-d-xo.html
Beiträge in WordPress: wordpress.org/documentation/article/introduction-to-blogging/
มุมมอง: 110
วีดีโอ
Wordpress-Tutorial für Einsteiger 01: Wordpress auf eigenem Webserver / eigener Domain installieren
มุมมอง 35110 หลายเดือนก่อน
Wordpress ist ein beliebtes Content Management System, um unkompliziert Websites zu erstellen. Im ersten Video dieser Tutorialreihe zeige ich Dir am Beispiel des Webhosters Netcup, wie Du Wordpress auf Deinem eigenen Webserver / Deiner eigenen Domain installierst. Die Installation demonstriere ich komplett mit Einrichten einer Datenbank und Hochladen der Installationsdateien. Kapitel in diesem ...
Wordpress-Tutorial für Einsteiger 02: Erste Schritte in Wordpress und Kadence
มุมมอง 54710 หลายเดือนก่อน
Hier zeige ich Dir, wie Du erste Seiten und Inhalte mit Hilfe von Wordpress und dem Theme Kadence erstellst. Von Kadence gibt es eine kostenlose und eine Pro-Version. In diesem Tutorial nutze ich die kostenlose Version des Themes. Kapitel im diesem Video: 01:01 - Das Dahboard von Wordpress 01:41 - Das Ziel, so soll es am Ende aussehen 02:52 - Eine erste Seite erstellen 03:36 - Grundlegende Eins...
Wordpress-Tutorial für Einsteiger 03: Layouteinstellungen in Kadence
มุมมอง 39210 หลายเดือนก่อน
In diesem Video zeige ich Dir die generellen Layout-Einstellungen für Beiträge und Seiten im Wordpress-Theme Kadence. Kapitel im diesem Video: 01:08 - Seitenlayout für normale Seiten 05:41 - Auch Beiträge und das Beitrags-Archiv lassen sich layouten 06:04 - Beiträge erstellen 08:31 - Beiträge anzeigen lassen und Beitragsseite definieren 09:42 - Seitenlayout für Einzelbeiträge 12:02 - Seitenlayo...
Wordpress-Tutorial für Einsteiger 04: Header und Footer in Kadence
มุมมอง 30511 หลายเดือนก่อน
Im letzten Video unserer Kadence-Tutorialreihe hatten wir uns um das generelle Layout von Seiten und Beiträgen gekümmert. In diesem Video geht es nun um den Header und Footer unserer Website. Kapitel im diesem Video: 00:40 - Gestaltungsbeispiele für Header 01:03 - Der aktuelle Zustand des Headers 01:36 - Den Header bearbeiten 03:11 - Elemente dem Header hinzufügen 04:03 - Den Header für untersc...
Wordpress-Tutorial für Einsteiger 05: Navigation und Menüs in Kadence
มุมมอง 25111 หลายเดือนก่อน
In unserer Kadence-Tutorialreihe hatten wir bereits erste Seiten angelegt; auch Header und Footer sind angepasst. In diesem Video erfährst Du nun, wie Du Navigationen und Menüs für diese Seiten in Wordpress einrichtest. Kapitel im diesem Video: 00:51 - Ein neues Menü erstellen 02:00 - Navigationspunkte einem Menü hinzufügen 03:32 - Reihenfolge und Namen der Menüpunkt ändern 04:32 - Ein Dropdown...
Wordpress-Tutorial für Einsteiger 06: Farben in Kadence
มุมมอง 14311 หลายเดือนก่อน
Mit dem Wordpress-Theme Kadence kannst Du einfach gut gestaltete Websites erstellen. In diesem Video erfährst Du, wie Du mit Farben in Kadence arbeiten kannst. Kapitel im diesem Video 01:27 - Verschiedene Stellen, um Farben festzulegen 02:27 - Die globale Farbpalette 06:19 - Weitere Farben für die Kadence-Blöcke festlegen 09:43 - Header und Footer einfärben 12:08 - Literaturhinweise Literaturhi...
Wordpress-Tutorial für Einsteiger 07: Typografie in Kadence
มุมมอง 13111 หลายเดือนก่อน
Mit dem Wordpress-Theme Kadence kannst Du einfach funktionierende und gut gestaltete Websites erstellen. In diesem Video geht es um die typografischen Möglichkeiten in Kadence. Kapitel im diesem Video 00:39 - Drei unterschiedliche Stellen für Typoeinstellungen in Kadence 02:12 - Schriften auf dem Google Fontserver auswählen 06:58 - Globale Schrifteinstellungen im Customizer 15:29 - Typografisch...
Scrollgesteuerte Animationen mit der IntersectionObserver API
มุมมอง 66ปีที่แล้ว
Mit einem IntersectionObserver kannst Du auf Deiner Webseite Animationen starten, wenn sie in den Viewport gelangen, also wenn der Anwender zur entsprechenden Stelle hinscrollt. Eine Alternative zum IntersectionObserver wäre die CSS-Eigenschaft scroll-timeline. Damit kannst Du ähnliche Effekte erzeugen. Scroll-timeline wird aber zur Zeit (Anfang 2024) nur in Chrome unterstützt. Links und Litera...
Wordpress lokal auf Deinem Computer installieren
มุมมอง 247ปีที่แล้ว
Um ein ContentManagementSystem wie Wordpress laufen zu lassen, brauchst Du einen Webserver mit PHP und eine Datenbank. Aber das geht auch ohne Provider - also einen externen Dienstleister. Du kannst das CMS auch bei Dir lokal auf Deinem heimischen Rechner installieren, wenn auf Deinem Rechner ein Webserver wie zum Beispiel XAMPP läuft … Kapitel in diesem Video: 00:19 - Hinweis auf XAMPP-Tutoria...
XAMPP auf Mac OS installieren
มุมมอง 603ปีที่แล้ว
Installiere Dir einen eigenen Webserver auf Deinem lokalen Computer! Zum Beispiel um PHP-Skripte laufen zu lassen oder um ein Content Management System zu testen. In diesem Video zeige ich Dir, wie Du so einen Webserver mit XAMPP unter Mac OS aufsetzt und wie Du mit ein paar kleinen Fallstricken bei der Installation fertig wirst. Links und Literaturhinweise: www.apachefriends.org/de/index.html
Grundlagen der Webproduktion, Teil 2 - CSS
มุมมอง 150ปีที่แล้ว
Im zweiten Teil dieser Tutorialreihe wird unsere bislang erstellte HTML-Datei mit CSS in Form gebracht. Kapitel in diesem Video: 00:00 - Intro; Was bislang geschah 00:56 - Ein Blick auf die Vorlage (das Screendesign) 01:15 - Kopfbereich formatieren, Schriften einbinden 03:08 - Externe CSS-Datei erstellen, Typo definieren 05:59 - CSS-Datei in HTML verlinken 06:45 - Navigation stylen, Listeneleme...
Grundlagen der Webproduktion, Teil 3 - Website fertigstellen
มุมมอง 85ปีที่แล้ว
Unsere Vorlage bekommt zum Abschluss das Feintuning. Und die beiden Seiten Kontakt und Angebote werden erstellt. Kapitel in diesem Video: 00:00 - Intro 00:59 - Website und Vorlage vergleichen mit der Browser-Erweiterung PerfectPixel 02:09 - Typo anpassen 02:53 - Ein Wort zum Thema pixelgenaue Umsetzung einer Vorlage 03:42 - Element untersuchen. Navigation und Logo-Unterzeile korrekt zentrieren ...
Grundlagen der Webproduktion, Teil 1 - HTML
มุมมอง 255ปีที่แล้ว
In dieser Tutorialreihe für Anfänger erstellst Du eine komplette Website. Im ersten Teil der Reihe geht es um das HTML-Grundgerüst, im zweiten Video-Tutorial wird alles per CSS gestaltet. Und im dritten Teil bekommt unsere Vorlage dann den Feinschliff, außerdem wird die Website mit zwei weiteren Seiten komplett gemacht. Kapitel in diesem Video: 00:00 - Intro, was musst Du an Vorwissen mitbringe...
Web-Formulare erstellen für Einsteiger
มุมมอง 350ปีที่แล้ว
Formulare werden auf Websites unter anderem für Bestellungen, für LogIns, eine Kontaktaufnahme und vieles mehr gebraucht. In diesem Video lernst Du die Grundlagen der Formularerstellung, die wichtigsten Formularelemente und ihre Attribute kennen. Kapitel in diesem Video: 00:10 - Was sind Webformulare? 01:31 - Das ist das Ziel (das fertige Formular) 02:12 - Formular erstellen: die Tags form, inp...
FTP-01: das FileTransferProtocol kurz und knapp erklärt
มุมมอง 110ปีที่แล้ว
FTP-01: das FileTransferProtocol kurz und knapp erklärt
FTP-02: Dateien auf dem Webserver veröffentlichen
มุมมอง 207ปีที่แล้ว
FTP-02: Dateien auf dem Webserver veröffentlichen
Einstieg in Wordpress - ein kurzer Überblick
มุมมอง 1.1Kปีที่แล้ว
Einstieg in Wordpress - ein kurzer Überblick
Wordpress installieren bei einem kostenlosen Webhoster
มุมมอง 333ปีที่แล้ว
Wordpress installieren bei einem kostenlosen Webhoster
Midjourney - der kreative Kick für Dein Webdesign!
มุมมอง 96ปีที่แล้ว
Midjourney - der kreative Kick für Dein Webdesign!
Lightbox mit der UIKit-Bibliothek erstellen
มุมมอง 79ปีที่แล้ว
Lightbox mit der UIKit-Bibliothek erstellen
hover auf Touchdevices mit JavaScript simulieren
มุมมอง 44ปีที่แล้ว
hover auf Touchdevices mit JavaScript simulieren
CSS-hover auf mobilen Touchdevices behandeln
มุมมอง 228ปีที่แล้ว
CSS-hover auf mobilen Touchdevices behandeln
Responsive Bildergalerie für Portfolioseite
มุมมอง 109ปีที่แล้ว
Responsive Bildergalerie für Portfolioseite
Responsive Webdesign 05: responsive Tabellen
มุมมอง 54ปีที่แล้ว
Responsive Webdesign 05: responsive Tabellen
Responsive Webdesign 04: Konzepte und Herangehensweisen
มุมมอง 94ปีที่แล้ว
Responsive Webdesign 04: Konzepte und Herangehensweisen
Responsive Webdesign 03: responsive Bilder
มุมมอง 992 ปีที่แล้ว
Responsive Webdesign 03: responsive Bilder
Responsive Webdesign 02: responsive Navigation
มุมมอง 812 ปีที่แล้ว
Responsive Webdesign 02: responsive Navigation
Das Video hat bisher nicht viele Aufrufe erhalten. Ich kann es jedoch wärmstens empfehlen. Die Anleitung zur Herstellung eines Templates mit kadence ist ausführlich und einfach umzusetzen. Wer eine wordpress homepage mit kadence aufsetzen möchte, wird hier bestens angeleitet.
Danke!!
Echt Wahnsinn was das Kadence Theme und die Kadence-Blocks zu schaffen in der Lage sind. Durch die Kadence-Blocks mutiert Gutenberg zum Pagebuilder, und die sticky und transparent header Funktionalität lassen sich andere Theme-Anbieter ordentlich vergolden. es scheint auch sehr gut gecoded zu sein. Neben Astra und Blocksy echt eines meiner Lieblingsthemes!
Sehr verständlich und anschaulich gemachte Reihe. Prima! Zudem auch mal nur auf die Free Version eingegangen wird. Leider wurde nicht gezeigt wie der Übergang als "Welle" zwischen Aktuelles aus der GrooveCraft-Musikschule und Über GrooveCraft erstellt wurde.
Ja stimmt. Die Website wird auch ab und zu weiterentwickelt. Und es kommen Funktionen hinzu, die ich in den bisherigen Videos noch nicht beschrieben habe. Die Welle habe ich erzeugt, indem ich dem Row-Layout-Block, der die drei Beiträge enthält einen „Trenner unten“ hinzugefügt habe. Dazu gehst Du in den Eigenschaften des Block in der rechten Seitenleiste auf Layout -> Trenner unten.
Wow, Kadence ist ja noch viel umfangreicher als gedacht und ermöglicht irre viele Einstellmöglichkeiten. Vielen Dank für das ausführliche Tutorial.
Mal wieder ein äußerst interessantes Video. Verstehe ich es richtig, dass der Server, für den du knapp 3€ p.M. zahlst, bei allinkl 99,95€ kosten würde???
Nicht wirklich. Auf all-inkl.com findest Du den Tarif „Privat“. Der kostet 4.95 € im Monat. Danke für das Lob und Gruß nach Köln.
Super, danke!
Super! Das Theme Kadence interessiert mich sehr und ich bin gespannt auf weitere Videos. Schön, dass du auch darauf eingegangen bist, welche Einstellungen global im Customizer im Gegensatz zum Textblock Sinn machen. Vielen Dank!
Aber gerne :-)
Vielen Dank vor allem das Ende hat mir sehr geholfen. Ich wusste nicht, dass man sich bei WordPress anmelden muss und auch nicht wie 😅 Danke
Das freut mich!
Ich bin auch beeindruckt und gerade etwas sprachlos. Danke schön!
Danke für die detaillierte Erklärung 👍
Habe grade zufällig dein Video angezeigt bekommen. Das nenne ich aber einen großartigen Zufall! Ganz toller Kanal seit 1 Jahr und das wird mein Lieblingskanal, weil ich mich grade mit dem Thema Webseitenerstellung befasse. Ich werde jetzt an Weihnachten alle Besucher wieder ausladen und mir stattdessen alle Videos reinziehen 😂 Vielen Dank für deine Mühe und schöne Weihnachten!
Vielen Dank für das Lob; wünsche Dir viel Erfolg mit der Webseitenerstellung!
Mehrere Groschen sind gefallen 😅 Danke für die ausführliche Anleitung.
Absolut Klasse! Danke für deine Arbeit die du hier reinsteckst, gerade für Anfänger ist das was du hier reinstellst mit Dateien, Bildern, Farbvorgaben wirklich sehr gut, man kann sich erstmal an deine Projekte halten, und was am Ende dabei rum kommt ist relativ(Kreativität ist ja ein breites Spektrum) 🤓viel zu wenige Daumen, ich hab hier direkt mal reinabonniert, in diesem Sinne erstmal nen schönen Tag gewünscht
Danke für das Lob und das Abo :-)
Sehr ausführliches Video. Dankeschön ❤
Freut mich, dass es geholfen hat :-)
Danke für diese tollen Videos. Bin jetzt bei Folge 9 angekommen. Man kann alles hervorragend nachvollziehen und das mit einer angenehmen, warmen Erklärstimme.
Danke für das Lob :-)
Hey! Machst Du noch aktive Videos, weil das letzte Video schon vor 2 Monaten gewesen ist ... :-) Finde den Content super wertvoll und gut gestaltet! Würde mich freuen über weitere Tutorials!
Vielen Dank für das Lob :-) Ja ich arbeite gerade an neuen Tutorials, aber das braucht alles etwas Zeit :-/ Als erstes werde ich die Reihe Webproduktion Grundlagen erneuern. Und dann gibt es demnächst noch ein paar Tutorials zu weiteren grundlegenden Themen. Mittelfristig mache ich dann ein paar Tutorials zu Wordpress.
@@web-einfach-machen Sehr cool! Ich hatte schon die Befürchtung, dass keine weiteren Videos mehr kommen, weil keine Zeit mehr da ist oder es nur wenig Views auf den Videos gibt. Das ist wie gesagt super wertvoller Content und echt wichtig, weil auf TH-cam auch viel Unsinn darüber geredet wird! Finde auch, dass Du einen guten roten Faden in so einem Tutorialvideo hast, wenn man das so sagen kann :-)
@@lordcorion429 Nein, keine Sorge, das geht weiter mit den Tutorials! Gibt es denn irgendwelche Themen aus dem Bereich Webproduktion, die Dich besonders interessieren würden?
@@web-einfach-machen Mich würde interessieren, wie man animierte Elemente auf Websites gestaltet, bzw. die gesamte Thematik rund um Frameworks und Libraries. Ich würde da den Fokus auf React oder VueJS bzw. Vuetify oder Electron setzen, um da mal ein paar Begriffe hineinzuwerfen 🙂 Aber grundsätzlich würde mich interessieren, wie man gut Elemente animiert und schöne saubere Übergänge, z.B. Scrolling Animationen wie es auf er Apple Website der Fall ist zu erstellen.
Ja, Animationen sind spannend. Bevor Du Dich mit Frameworks zu Animationen beschäftigst, würde ich aber erst mal versuchen, mit CSS einfache Animationen selber von Hand zu erstellen. Unter th-cam.com/play/PL-ct8huC3tV8vGOpJluGG9CZ2laE_966I.html habe ich eine kleine Playlist mit einfachen Animationstutorials zusammengestellt. Das lässt sich natürlich mit JavaScript anfetten. Aber auch da würde ich erstmal ohne Frameworks und Bibliotheken einsteigen. Unter web-einfach-machen.de/Kursmaterialien/Webproduktion/Ueber_die_Grundlagen_hinaus/Beispieldateien/intersection_observer.html findest Du ein Beispiel für eine scrollabhängige Animation mit intersection observer. Viel Erfolg :-)
Beeindruckend! Danke für diese Einführung, genau das brauchte ich für mein Formular 😊
Sehr gerne :-)
Danke - Hat Spaß gemacht! Für mich durchaus hilfreich weil ich Web Design jahrelang komplett links liegen gelassen habe... Vermeidet in Zukunft sicherlich viel Try & Error!
Freut mich, wenn es geholfen hat :-)
Danke für den Editor-Tipp "Visual Studio Code". Funktioniert sehr gut 👍
Gern geschehen!
Super Tutorial! Ich frische gerade meine HTML/CSS Kenntnisse auf und kann hier sehr gut folgen.