Wie man eine Website erstellt - HTML & CSS Tutorial für absolute Anfänger - Deutsch
Вставка
- Опубліковано 16 лип 2024
- Projekt auf Github: github.com/dev-planet-germany...
Visual Studio Code: code.visualstudio.com/download
Google Chrome: www.google.com/intl/de_de/chr...
Texte für das Projekt: raw.githubusercontent.com/dev...
Hintergrundtextur: raw.githubusercontent.com/dev...
Pikachu-Bild: raw.githubusercontent.com/dev...
Pokeball-Bild: raw.githubusercontent.com/dev...
Pokéwiki für Pikachu: www.pokewiki.de/Pikachu
In einer Zeit, in der fast alles digital abläuft, kommt fast jeder mal an den Punkt, an dem er eine Webseite erstellen will. Wenn man das komplett selbst übernehmen will, kommt man an HTML & CSS nicht vorbei und deshalb erfahrt ihr in diesem Video alles, was ihr wissen müsst, um mithilfe von HTML und CSS eine statische Website zu erstellen.
00:00:00 Intro
00:00:20 Warum HTML & CSS lernen?
00:01:00 Überblick über den Kurs
00:02:15 Benötigte Programme
00:02:38 Visual Studio Code
00:02:55 VSC auf Deutsch umstellen
00:04:40 Google Chrome
00:05:00 Was ist HTML?
00:05:40 Eine HTML Datei erstellen
00:07:15 Das HTML Grundgerüst
00:13:45 Die Abkürzung für das Grundgerüst
00:14:45 HTML Attribute
00:16:05 Festlegen der Sprache - Das lang Attribut
00:17:10 Texte einfügen
00:18:10 Überschriften in HTML (h Tags)
00:19:55 Absätze in HTML (p Tags)
00:21:30 Die Autoformatierung
00:22:50 Bilder in HTML (img Tags)
00:27:35 Abschnitte in HTML (section Tags)
00:29:03 Tabellen in HTML
00:34:35 Block-Level-Elemente und Inline-Elemente
00:36:11 Listen in HTML
00:38:00 Was ist CSS?
00:38:35 Das style Attribut
00:39:45 Das style Tag
00:40:27 Externes CSS (Der richtige Weg)
00:41:10 Eine CSS Datei anlegen
00:42:24 Der Aufbau einer CSS Zuweisung
00:44:12 Festlegen der Hintergrundfarbe
00:45:25 Einbinden einer CSS Datei (link Tags)
00:47:00 Farben in CSS
00:48:23 Hintergrundbilder in CSS
00:51:48 Behälterelemente in HTML (div & span)
00:54:50 Anpassen der Größe (width & height)
00:57:43 Die Chrome Entwicklertools
01:00:52 Das CSS Box Modell
01:01:40 Der Margin (Abstand um das Element herum)
01:10:00 Padding (Abstand zwischen Rahmen & Inhalt)
01:12:00 Schatten in CSS (box-shadow)
01:14:30 Festlegen der Schriftart in CSS
01:20:10 Festlegen der Zeilenhöhe in CSS
01:21:50 Gruppenselektoren (Auswahl mehrerer Elemente)
01:23:00 Festlegen der Schriftfarbe in CSS
01:23:30 Festlegen der Textausrichtung in CSS
01:25:25 Schatten für Texte in CSS (text-shadow)
01:26:32 Abgerundete Ecken in CSS (border-radius)
01:29:10 Bilder neben Texten in CSS (float)
01:32:13 Das class Attribut (Gruppieren von Elementen)
01:35:35 Rahmen in CSS (border)
01:39:20 Strecken von Tabellen-Zellen über mehrere Spalten (colspan)
01:41:20 Tabellen nebeneinander (Flexbox-Behälter & justify-content)
01:47:15 Farbverläufe in CSS (linear-gradient)
01:49:25 Gestalten der Liste
01:51:35 Festlegen des Listensymbols (list-style-type)
01:53:27 Pokebälle als Listensymbole
01:55:20 Größe von Hintergrundbildern
01:56:00 Wiederholung von Hintergrundbildern
01:56:30 Position von Hintergrundbildern
01:57:56 Responsiveness & Simulation von Displaygrößen
02:00:32 Media Queries (Bedingungen für Gültigkeit von CSS)
02:02:00 Anpassen der Mobilversion der Seite
02:11:36 Abschluss & Abonnieren nicht vergessen ;)
Was für ein Spaß! Wie eine 1.000 Teile Puzzle an einem Sonntagnachmittag. Für Anfänger total geeignet. Eine didaktisches Meisterleistung. Vielen Dank
Über 2 h ist der Wahnsinn. Danke für die aufwendige Arbeit. Also wer mit dem Thema anfangen will kann mit diesem Komplettpaket nichts falsch machen. Sehr gute Arbeit 🙏💚
Vielen Dank für dein Feedback :)
Habe eure beiden Kanäle erst diese Woche gefunden. Beide sind sehr gut.
Fdm
Von pipp
Ich belege seit 7 Monaten einen Kurs und war am verzweifeln, da nicht alles durch Selbststudium aufgenommen wird. Bin per Zufall auf dein sehr lehrreiches und informatives Video gestoßen.
Ich habe bereits in den 30 Minuten mehr gelernt, als im 7 Monaten teuren Selbststudium. Vielen Vielen dank für dieses Video.
Danke für dein Feedback! Es freut mich wirklich sehr, dass dir das Video gefallen und geholfen hat :)
Ich bin gerade dabei ein wenig HTML/CSS zu lernen um es an meine Tochter weitergeben zu können. Dabei schon viele Bücher durchgearbeitet und Videos. Dieses Video ist für mich das beste, unwahrscheinlich kompakt und trotzdem leicht verständlich und lehrreich. Vielen Dank für das video
Dieser Kurs ist Weltklasse! Habe mega viel gelernt! Meiner Meinung nach lernt man in solchen Demokursen viel mehr als in Kursen, in denen nur erklärt wird wie HTML etc. funktionieren! Learning by Doing ist eben am Besten! Vielen Dank für die Mühe!
Danke für dein Feedback! Es freut mich wirklich sehr, dass du etwas aus diesem Video lernen konntest - und keine Sorge, weitere Learning by Doing Projekte sind schon in Arbeit :)
Ganz toll! Danke Dir. Alles erklärt, jede Frage die aufkommt wird direkt beantwortet.
Weiter so!
Echt einfach nur genial und super gemacht. Vielen Dank für dieses Supertutorial - ich freue mich jetzt schon auf dein Nächstes.
Danke für das Lob! Es freut mich sehr, dass dir das Tutorial gefällt und wünsche dir viel spaß mit den anderen Videos :)
Noch einmal großes Lob für das Tutorial, ich bin in den 90ern aufgewachsen und da macht es definitiv mehr Spass mit Pokemon als Beispiel. Hatte schon bei Junus Ergin schon bisschen HTML gelernt aber mit diesem Projekt war es noch einmal einen Ticken ausführlicher.
Danke für das Feedback! Es freut mich sehr, dass dir das Video gefallen hat :)
Wow das Tutorial war wirklich perfekt, vorallem weil du die Vorgänge auch erklärt und nicht nur gezeigt hast :)
Vielen Dank! Ich denke, das Warum zu verstehen ist fast noch wichtiger, als zu sehen, wie etwas getan wird... nur dann kann man das Gelernte auch auf andere Situationen übertragen.
Klasse Video, von Anfang bis zum Ende spannend. Danke für deine Mühe! :)
Sehr sehr gutes tutorial 👌🏻 ich selbst bin absoluter Anfänger und hatte nichtmal Ahnung von der Programmier - Sprache, aber dadurch habe ich echt Fortschritte gemacht und mir einiges eingeprägt. Großes Lob an Dich, für Deine Mühe 😊
Danke für das super Tutorial. ich habe noch das Tab Icon geändert habe das auf Google gefunden. Ich habe einfach nochmal den Pokeball verwendet.
Dafür müsst ihr nur den folgenden Pfad ins Element schreiben:
Coole Idee, danke für's Teilen! :)
Danke für das toll durchdachte und strukturierte Lernvideo und die Arbeit die dahinter steckt.
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Klasse !
Ich danke Dir/euch vielmals, du erleichterst mir den einstieg unbeschreiblich.
Vielen Dank für die Mühe! Unglaublich lehrreich - bitte mehr davon 🙂
Danke für dein Feedback und die motivierenden Worte :)
Vielen Dank! Es ist einfach mega nice von dir, so ein Video zu machen! Respekt!
Vielen Dank!
Danke für die Mühe und das tolle Video!
Ein Riesen Dankeschön an Dich für Deine Mühe. Das beste Tutorial ever :-) Ohne Dich hätte ich aufgegeben!
Sehr gute Arbeit geleistet ! habe heute erst angefangen und muss sein das beste EInsteiger Video ,welches ich Gott sei Dank gefunden habe;D
Herzlichen Dank für diese großartige Eiführung.
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Ein super tolles Tutorial. Toll gesprochen und veranschaulicht. Es gibt nichts zu beanstanden, einfach Klasse. Vielen lieben Dank dafür!
Danke für das Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Wahnsinnig gutes Tutorial!! Von Beginn bis zum Ende verständlich erklärt, ebenso mit Zusatzinformationen, welche Wege alternativ möglich sind. Auch sprachlich top und das über zwei Stunden!! Vielen Dank dafür!
Wow genau nach so einem Tutorial habe ich gesucht. Da ist wirklich alles richtig gut erklärt. Vielen, vielen Dank ich bin gerade ein richtiger Fan deiner Tutorial-Videos geworden :)
Es freut mich riesig, das zu hören! Vielen Dank :)
Ein super Video! Sehr detailliert und einfach verständlich erklärt und gut übersichtlich gestaltet. Und trotz der Länge kein einziges Werbevideo. Vielen dank für die Mühe:)
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefallen hat :)
Das ist ja wunderbar! Vielen Dank!
Danke für das super Tutorial. Ich beschäftige mich erst seit ein paar Tagen mit dem Thema Programmieren und dein Video hat mir enorm weitergeholfen!
Danke für dein Feedback! Es freut mich sehr, dass ich dir helfen kann :)
Ich finde das Tutorial sehr gut und sehenswert. Man kann Dir sehr gut folgen und jeden Schritt gut nachvollziehen.
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Vielen Dank für das Tutorial! Super schön erklärt. MIr gefällt deine ruhige Art sehr!
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt! :)
Klasse Tutorial!
Gut strukturiert und verständlich erklärt. Bei der Länge dachte ich erst, das wird zu viel und langweilig, aber es ist überhaupt nicht langweilig und durchweg interessant und sehr informativ.
Vielen Dank für die Mühe!
Vielen Dank für dein Feedback und die motivierenden Worte! Es freut mich sehr, dass dir das Video gefällt :)
Hallo Dev Planet. Vielen Dank für diese Einführung. Bin grad dran responsives Webdesign zu lernen, da war das ganz hilfreich. Subscription und Like war natürlich Ehrensache. Ich fand das Tutorial sehr gelungen und auch nicht zu lang. Danke schön.
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Noch nie so ein klasse Tutorial gesehen. 😀 ...und ich habe schon viele gesehen....aber noch nie so ein - meiner Meinung nach - Pefektes. Danke für ihre Mühe👍
Vielen Dank für dein Feedback! Es freut mich sehr, dass dir das Video gefällt! :)
Super und klasse tutorial, danke für deine Mühe. Meine Auszubildende sind süchtig nach deinem Kanal.
Vielen Dank für das Feedback! Es freut mich sehr, dass ich bei der Ausbildung des Nachwuchs behilflich sein kann :)
Unglaublich gutes Tutorial!
Vielen Dank für die Unterstützung❤
Danke! Es freut mich, dass dir das Video gefällt :)
Viel mehr aufmerksamkeit verdient. Danke für dein extremst gutes Video, mach weiter :P
Danke für das Lob und die motivierenden Worte :)
Ich war komplett verzweifelt, wie man CSS und HTML miteinander verbindet aber du hasch mich mit diesem Video komplett gerettet, alles verständlich und perfekt erklärt. Du warscht der einzige bei dem ichs verstanden hab, ich bin dir für deine Arbeit sehr sehr dankbar :)
Vielen Dank für so ein cooles und aufwendiges Projekt!
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Endlich kapiert - schade, dass ich das Video erst jetzt entdeckt habe :-) Weiter so! 😊
Sehr sehr gutes video. Schaue schon ein bisschen länger nach einem guten tutorial wo alles kurz und knapp jedoch ausführlich zusammen gefasst ist. Trotzdem gehst du auf alles wichtige ein und gibst tipps. Und vorallem erklärst du sehr gut. Danke!
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefallen hat :)
Super erklärt! Dieses Tutorial ist zwar lang, aber für mich Top, weil alles sehr gut erklärt wird! Bitte, mehr Tutorials macht spaß mit dir zu Lernen! Dynamische Webseite wäre cool ;-)
Danke für das Feedback und die Anregung :)
Mega so macht Tutorial Spaß. Hab das gar nicht bemerkt, dass es 2 Stunden waren. Super Erklärung, Aufbau und Bild.
Vielen Dank für das Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Sehr gutes Video. Tolle 2 h, Danke für Deine Ausdauer und Kompetenz. Wird mir in vielen CSS Situationen eine wertvolle Hilfe sein. Dann warte ich mal auf Dein nächstes Video ...
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Souverän, wunderbar erklärt. So flüssig, so gut...Danke !
Danke für das Lob! :)
Extrem hohe Qualität, sehr sehr nice !
Freue mich schon auf das nächste Vid, wird dann einfach wegkonsumiert :'D
"Der kleine gelbe Nager...sieht riiichtiiig furchtbar aus" :DDDDD
Super Klasse Video! Sehr ausführlich bringst du mir Schritt für Schritt bei, meine Webseite zu verbessern :D Vielen dank, man!
Danke für dein Feedback! Es freut mich sehr, dass dir das Video geholfen hat :)
Selten so ein gutes Video auf gesamt UA-cam gesehen!
Vielen Dank für das Feedback! :)
Ich frage mich echt, warum du nur so wenige Abonnenten hast . Habe mir einige UA-camr zu den Themen angeschaut, aber du erklärst es echt ausführlich und am Besten. Bitte mach weiter und hör nicht auf !!! :D
Vielen Dank für dein Feedback und die motivierenden Worte :)
Gebe selten einen "Daumen hoch" aber hier sehr gerne!! Super Tutorial. Alles gut erklärt.
Herzlichen Dank dafür! Es freut mich sehr, dass dir das Tutorial gefällt :)
Grandios erklärt. vielen lieben Dank. Beste Erklärung ever 👍👏
Vielen Dank für dein Feedback :)
Klasse Tutorial!
ich wurde mehr für fortgeschritten empfehlen. Vielen Dank für die Mühe!
Die Erklärungen in diesem Video sind hervorragend. Ich habe selbst von etlichen Jahren eine Webseite erstellt im Learning by Doing-Verfahren, da hätte mir dieses Video wesentlich geholfen.
Was mir wichtig erscheint, da sich das Tutorial ja ausdrücklich an absolute Anfänger richtet. Es ist unbedingt darauf zu achten, im Programmtext die Dateinamen immer genau so zu schreiben, wie im Explorer (Groß/Kleinschreibung). Dies gilt auch beim kodieren in Java-Scriptdas in HTML-Text beim Schreiben von Variablen-Namen. Window-Anwender sind es gewöhnt, dass die Groß/Kleinschreibung von Dateinamen keihe Rolle spielt, im Internet jedoch sehr wohl, da alle Server unter Unix laufen.
Es wäre m.E. sinnvoll, diesen Hinweis ganz zu Beginn beim der Anlage der ersten Datei (index.html) zu geben.
Vielen Dank für dein Feedback und die motivierenden Worte! Es freut mich sehr, dass dir das Video gefällt :)
Mit deiner Anmerkung hast du natürlich Recht... Das ist eine der Sachen, die einem wahrscheinlich einfach so in Fleisch und Blut übergegangen ist, dass man überhaupt nicht mehr darüber nachdenkt. Das werde ich in Zukunft besser berücksichtigen und darauf hinweisen. Vielen Dank!
Super Doku. Ich interessiere mich jetzt auch dafür und du hast das echt prima erklärt. Hatte zuvor auch überhaupt keine Kenntnisse davon und habe echt alles verstanden. Vielen Dank nochmals dafür . Ich benutze unter Freebsd Code - OSS dafür, scheint ein Visual Clone zu sein, funktioniert denke ich fast gleich wie das von Microsoft.
Ich bin gerade bei Minute 19 und ich bin total begeistert, wie ausführlich, gut gesprochen und verständlich dieses Tutorial ist. Vielen Dank dafür. Ich brauche den Input um mehr die Probleme zu verstehen, die irgendwann auf mich zukommen könnten =)
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Danke hast meine Informatiknote gerettet, gutes video
Freut mich, dass ich helfen konnte :)
Supertolles Video! Als blutige Anfängerin habe ich es tatsächlich bis zum Ende geschafft! Eine tolle Motivation weiterzumachen mit dem Thema, freue mich sehr, dass ich Dank diesem Video meine erste Website erstellt habe! Vielen Dank für das Video :)
Danke für dein Feedback! Es freut mich sehr, dass dir das Video helfen konnte, in die Webentwicklung einzusteigen - bleib auf jeden Fall dran! :)
Sehr anschaulich und auch für Laien verständlich erklärt.
Freut mich, dass dir das Video gefällt :)
Bestes Tutorial,danke Mann
Sehr tolles Video!
Danke dafür :)
Danke für das Lob :)
ey die Stimme ist voll beruhigend. haha
Danke für das Tutorial, es hat mir sehr viel weitergebracht!
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
das hat mir aufjeden fall geholfen erst habe ich verzweifelt aber dann habe ich es gecheckt danke für das video
Vielen Dank für dein Feedback! Es freut mich sehr, dass dir das Video helfen konnte :)
Sehr gutes und sehr hilfreiches Tutorial!
Vielen Dank! Freut mich, dass es dir gefällt :)
ein absolut gutes Tutorial, dass einen den Einstig in HTML und CSS perfekt vorlegt.
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefallen hat :)
Mein Anfang der Programmierkarriere begann vor 1,5 Jahren hier xD. Danke vielmals
Es freut mich sehr, dass ich dir auf deinem Weg helfen konnte :)
Großartig gemacht. Bin Quereinsteiger der nichts bessere in Quarantäne zu tun hat als mal Programmieren zu lernen und Dank dir erfolgreich 😉.
Danke für das Lob und viel Erfolg bei deinem Vorhaben! :)
Sehr gelungen, wie für mich gemacht 👍
Das freut mich :)
OMG DANKKEE SUPER VIDEO ICH BIN JETZT SOZUSAGEN EIN PROFI😂❤
Vielen Dank... es freut mich, dass dir das Video gefallen hat :)
Hab mir jetzt auf der Arbeit das Video angeguckt. Von Anfang bis Ende.
Ich muss ehrlich sagen, dass du alles super erklärt hast und auch sehr klar zeigst, wofür was ist und auf alles eingehst, dass man dir auch als Laie super folgen konnte. Hab das alles nebenbei selbst mitgebaut und meine Seite sieht auch 1 zu 1 so aus wie bei dir im Video. Mit der Basis wollte ich mir jetzt n Pokedex basteln von 1 - 151. Sonst sitz ich 100 Jahre dran, alleine wegen den ganzen TM's & VM's
Hab aktuell nur html mit ein wenig css und viel PHP, js & Ajax gemacht, daher hatte ich auch noch nicht so viel Ahnung vom stylen mit css.
Daher war das Video sehr aufschlussreich und informativ. Danke dafür. :)
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt! :)
Dein Projekt klingt sehr spannend. Ich wünsche dir viel Spaß und Erfolg dabei!
@@DevPlanetGermany Danke für dein Video
Einfach erklärt!!! Vielen Danken.
Vielen lieben Dank!!!!! Super Video jetzt wird vieles klarer.
Danke für dein Feedback! :)
Vielen Dank bin gerade mit dem Tutorial fertig geworden, der Lerneffekt ist ausgezeichnet.
Freut mich sehr, danke für dein Feedback! :)
Erstmal 2 Stunden lang fleißig gelernt. Neben C++ und C# eine Sache wo Ich nicht tausend Pausen gebraucht habe, sondern nur eine Essenspause :D Top Tutorial ;)
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt! :)
Für dieses perfekte Video müsste ich 12x "Daumen hoch" geben. Und gerade deshalb stören mich die 7 Daumen runter sehr: was habe diese Querdenker auszusetzen? Der Lerninhalt einer komplexen Seite wurde erstklassig vermittelt. Meine ganze Seite, die ich mit geschrieben habe funktioniert und ich kann auf dieser Grundlage eine eigene Seite nach meinen Vorstellungen bauen. Was hätte man also besser machen können? Für mich lautet die Antwort eindeutig: NICHTS - NADA - NOTHING - NITSCHEWO
Vielen lieben Dank für dein Feedback und die motivierenden Worte! Es freut mich wirklich sehr, dass dir das Video gefällt :)
Mit den 7 Daumen runter kann ich ganz gut leben... Es ist halt jeder unterschiedlich und jeder lernt auf seine eigene Weise. Da ist es nur natürlich (aber deshalb nicht weniger schade), dass es auch Leute gibt, die mit meinen Tutorials nichts anfangen können. Deshalb freut es mich umso mehr, dass die Resonanz insgesamt so positiv ausfällt und dass es Leute wie dich gibt, denen ich helfen kann. Das motiviert ungemein :)
Super Video wirklich sehr hilfreich. Dankeschön für dieses Video Ehrlich!. Grüße :D
Danke für das Lob! :)
Besser gehts nicht! Danke.
Danke für das Lob! :)
Echt tolles Video ich habe nach 10 Minuten schon mehr verstanden als in dem halben Jahr bei meinem Dozenten
Danke für das Feedback! Es freut mich sehr, dass dir das Video gefällt :)
@@DevPlanetGermany was vielleicht fehlt wäre ein Grid-Container
Danke schön! und Danke für die Liste!
Danke für dein Feedback :)
Sehr schönes Tutorial. Gerade bei CSS denke ich oft zu kompliziert irgendwie. Auch das umsetzen der Seite auf Mobilegeräte ist sehr hilfreich. Vielen Dank und Daumen hoch.
Danke für dein Feedback! :) Bei CSS gibt es oft mehrere Wege, die zum selben Ziel führen... da kommt es wirklich darauf an, was einem selbst besser gefällt und liegt. Solange das Ergebnis am Ende stimmt, ist ja alles in Ordnung :)
Du bist doch mit sicherheit Ausbilder! ^^ Danke mal wieder was dazu gelernt :3
Kein Ausbilder... nur ein wissbegieriger Entwickler, der seine Erkenntnisse gerne teilt :)
pädagogisch sehr wertvoll!
Danke :)
gutes video danke und das schon vor 2Jahren
Vielen vielen Dank! :)
Ich finde du hast das super erklärt!
Habe bis jetzt (1:49:19) alles verstanden und es kam noch nicht einmal Werbung. Klasse von dir! :)
Bin gespannt welche Videos du noch gemacht hast und wünsche dir für die Zukunft alles Gute! :) Mach weiter so
LG
derLöwe
Dankeschön, es freut mich sehr, dass dir das Video gefällt :)
super geil, hab dir ein abo rausgehauen! grüsse aus Emskirchen
Danke für den Kommentar und das Abo :)
Sehr sehr gut!
Danke :)
Vallah richtig Strammes Video.
Du hast mir echt den Arsch gerettet hahaha das wird saaaaaffffe eine 1*
Freut mich, dass ich dir helfen konnte :)
das hat wirklich weiter geholfen und wenn ich nochmal fragen habe kann ich super zu diesem video zurück kommen wegen den genauen kapitel angaben
Danke für das Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Tipp um euch die Sachen besser zu merken:
Ihr könnt Kommentare schreiben. Die werden dann nicht vom Script berücktsichtigt aber für dich angezeigt.
In html macht ihr das mit
In css macht ihr das mit /* der Kommentar */
Da hast du recht, danke für den Hinweis :)
0:38:00 hahahhahahah bester Mann, sehr gutes Tutorial
Danke... Ich finde den Standardstil der Browser einfach nur furchtbar 😂
Daumen hoch und Abo dagelassen. Ich freue mich schon auf das nächste Tutorial.
Leider sind die Tabellen bei mir gleich lang. Habe den Fehler bislang nicht finden können.
Das liegt nicht an dir, sondern am Standardverhalten von Flexbox-Behältern. Hier wird der Inhalt normalerweise auf der Querachse (die nicht über justify-content geregelt wird) auf die volle Breite bzw. Höhe des Behälters gestreckt.
Da wir den Flexbox-Behälter nutzen, um die Elemente mit justify-content horizontal auszurichten, ist die Horizontale in unserem Fall die Hauptachse und die Vertikale ist die Querachse - und deshalb wird die kürzere Tabelle in ihrer Höhe so gestreckt, dass sie die gesamte Höhe des Behälters ausfüllt (die von der Höhe des höchsten Inhalts, also der längeren Tabelle abhängt).
Interessanterweise wurde genau dieses Standardverhalten von den meisten Browsern lange Zeit nicht so umgesetzt, weshalb es im Video funktionierte. Leider wurde das mittlerweile "behoben".
Willst du nicht, dass die Tabellen gestreckt werden, musst du dem CSS-Eintrag für die tabellenbehaelter Klasse folgende Zuweisung hinzufügen: align-items: flex-start;
Die align-items Eigenschaft bestimmt, wie mit den Elementen auf der Querachse verfahren wird. Leider ist der Standardwert für Flexbox-Elemente hier "stretch". Mit flex-start sagen wir, dass die Elemente einfach am Anfang der Querachse (also oben) positioniert und nicht gestreckt werden sollen.
Ich hoffe das hilft dir weiter :)
Langes aber hilfreiches Video xD
Danke für das Feedback! :)
Am anfang dachte ich ich werde nie sowas können aber mit dem programm und den abkürzungen ist das um so vieles einfacher- :) sogar ich noob schaffe sowas jz auch
Danke für dein Feedback! Es freut mich sehr, dass dir das Video helfen konnte, in die Webentwicklung einzusteigen - bleib auf jeden Fall dran! :)
Schönes Tutorial. Ich empfehle ja VSCodium zum Coden, weil es nahezu genauso wie VsCode ist, nur Opensource und ohne Microsoft Spyware.
Vorab erstmal vielen Dank für die Mühe was du dir mit diesem Tutorial gemacht hast, es ist unfassbar lehrreich.
Ich konnte sehr viel davon lernen und in Zusammenhang bringen wie das ganze funktioniert. Natürlich Bedarf es noch viel mehr Übung, aber immerhin ist ein Anfang gemacht. :D
Hab bis gerade eben dieses Tutorial durchgearbeitet, aber irgendwie will bei mir die Desktopansicht die Pokebälle und das hintergrund.jpg nicht mehr laden seit es runter zu @media (1200px) verschoben wurde =(
Auch ist meine "Durch Levelaufstieg" - Tabelle aus welchem Grund auch immer genau so lang geworden wie die "Durch TM/VM" - Tabelle. ^^
Muss ich mich morgen wohl nochmal auf Fehlersuche begeben. Evtl. finde ich ja selbst den Fehler.
Über Tipps bin ich aber dennoch dankbar, das Video ist ja nun doch schon älter und es wäre möglich, dass die Ursache in einer Neuerung liegt. Wer weiß =D
Hi!
KRASS aufwendiges Video!
Jedoch ein paar so kleine Kniffe kannte ich schon (z.B. mit Tabellen, % oder so ..) ;-)
Afgrund Deinses + anderen Tutorials hat es bei mir zig X-mal Klick gemacht! Aufgrund dessen fange ich meine (Asbach-)Homepage jetzt komplett neu an, wobei ich da verm. dann auch JS mehr brauchen werde ;-) !
Also da kömmt ne Mörderarbeit auf mich zu :-D
Denn als ich mit HTML begann (war glaube ich 2 oder 3, noch mit meinen Commodore Amigas), hatte ich damals schon begonnen, mich jedoch leider nicht weitergebildet! Da sind solche Tutorials mehr als hilfreich um sein Wissen nicht nur Aufzfrischen, sondern auch zu erweitern!!!!
Also sorry wenn ich da meine (ALTE inzwischen eher peinliche) Homepage hier nicht angebe !!! ;-)
Jedoch KNALLER, KRAASES VIDEO mit SEHR VIEL MÜHE ++++ !!!!!!!!
Sorry das Abo und Daumen war unumgänglich! ;-)
Vielen Dank für das Feedback, das Abo und den Daumen - es freut mich sehr, dass dir das Video so gut gefallen hat! :)
Dein Projekt klingt echt spannend, viel Erfolg dabei!
@@DevPlanetGermany Ja, denn ich bin ja nicht mehr der Jüngste und meine Gesundheit (nicht Covid ..) ist sowas von besch.... (pardon), ich halte halt nimmer so durch wie mit 20 oder so :-(
Zudem mache ich das ja jetzt nur noch für mich zum Zeitvertreib bzw. meinem priv. Spaß +
Ich spare mir von meinem Harz4 das für Glasfaser vom Mund ab :-( also nen Bezahlkurs könnte ich mir garnicht leisten :-(
Zudem ist es ja für mich auch (inzwischen) nur ein Hobby + Weiterbildung ;-)
Nochmal Zudem: ich hatte mal Videos gemacht (neuere), da war ich bei DSL (Kupfer) aber sowas von gekniffen :-( Für 1 Video brauchte ich mal 3 Tage für den Upload, HALLO, was n das denn?
Gut die ISP's konnten dafür nix (Sch... [pardon] Hauskupferverkabelung) für!
Jetzt mit FTTH wo = Flitz! Livestreams + das lüppert, da hab ich ne Auslastung selbst mit meinem lokalen (Microdoof) Webserver nahe zu 0% auslastung ;-)
Denn bei meinem alten DSL 16000 kam ich nur auf 11000 im Down! :-(
Jetzt im Up 50, also das X-Fache nur Sendeleistung! :-D
Ist doch (möchte ich mal sagen) ein gewaltiger Schied Unter :-D ?
(11000 Down zu 50000 Up und 250000 down) ... ;-)
Wenn meine Rechner im LAN/WLAN das noch packen würden, wenn ich ned
immer so viel div. anderes am laufen hätte. ++++
Darfst ja gerne auch auf meine E-Mail antworten ;-)
Jeoch, bin ma wech, brauch ma ne PA Use ;-) (nicht Beate Use) :-D
PS: ich möchte eh versuchen von Microdoof weg zu kommen! Verwende daher den Firefox ;-)
Auch hatte ich mal nen (auch asbach) 486er-Rechner mit damals noch kostenlos Suse aufgesetz, da konnte ich mit egal welches System den Server hoch fahren, das gab für alle (2 weitere) Rechner immer das selbe Bild mit Freigaben ++ die haben ned gespannt, auf welchem System der Server (+ auch Druckerserver) lief! :-D (95/98/2000/[SuSe glaube 7.1]) ...
Bevor das jetzt noch ein Roman (inkl. FISI) wird, mach ich jetzt wirklich mal PA USE ;-)
bis denne ;-)
danke
Ich danke dir fürs anschauen und kommentieren :)
Das hat sehr viel Spaß gemacht :) Danke für deine mühen. Meine erste Tabelle ist so Lang wie die zweite geworden (die Tabellen Zellen haben mehr platz für den Inhalt) allerdings habe ich nicht herausgefunden warum das bei mir so ist. Hast du ein Tipp?
Danke für dein Feedback! Es freut mich sehr, dass dir das Video gefällt :)
Zu deiner Frage: Dass die Tabellen gleich lang sind, liegt nicht an dir, sondern am Standardverhalten von Flexbox-Behältern. Hier wird der Inhalt normalerweise auf der Querachse (die nicht über justify-content geregelt wird) auf die volle Breite bzw. Höhe des Behälters gestreckt.
Da wir den Flexbox-Behälter nutzen, um die Elemente mit justify-content horizontal auszurichten, ist die Horizontale in unserem Fall die Hauptachse und die Vertikale ist die Querachse - und deshalb wird die kürzere Tabelle in ihrer Höhe so gestreckt, dass sie die gesamte Höhe des Behälters ausfüllt (die von der Höhe des höchsten Inhalts, also der längeren Tabelle abhängt).
Interessanterweise wurde genau dieses Standardverhalten von den meisten Browsern lange Zeit nicht so umgesetzt, weshalb es im Video funktionierte. Leider wurde das mittlerweile "behoben".
Willst du nicht, dass die Tabellen gestreckt werden, musst du dem CSS-Eintrag für die tabellenbehaelter Klasse folgende Zuweisung hinzufügen: align-items: flex-start;
Die align-items Eigenschaft bestimmt, wie mit den Elementen auf der Querachse verfahren wird. Leider ist der Standardwert für Flexbox-Elemente hier "stretch". Mit flex-start sagen wir, dass die Elemente einfach am Anfang der Querachse (also oben) positioniert und nicht gestreckt werden sollen.
Ich hoffe das hilft dir weiter, auch, wenn die Antwort etwas spät kommt :)
Wenn man am Anfang ein ! eintippt wird automatisch der ganze tag für Doctype erstellt nachdem man Enter drückt.
Ein sehr gutes Video hat bei mir auch fast alles geklappt. Außer ein paar Dinge die ich mal Aufzähle:
(Hab auch hin und her gespult beim Video aber ist alles genauso gemacht worden wie gezeigt)
Und zwar wenn ich den
body { background: hintergrund.jpg..... und den li { background: pokeball.jpg..... verschiebe in @media (min-width: 1200px) habe ich auch am PC keine Bilder mehr. Sobald ich diese aber wieder wo anders platziere. Z.b. vor @media oder außerhalb der { } ist alles wieder da. Denke hat sich irgendwie / wo ein Fehler eingeschlichen den ich aber absolut nicht finde... :-(
Und zum zweiten was bei mir anders ist bei dir ist die linke Tabelle " Durch Levelaufstieg" kleiner als die andere. Diese sind bei mir gleich groß. Nur das bei der linken halt dadurch das es viel weniger Spalten sind. Ziemlich große Spalten sind für die einzelnen Worte. Auch hier habe ich als mir das auffiel zurück gespult doch nix gefunden. (Habe ich bereits hin bekommen durch @Dev Planet Germany seine Hilfe danke dafür)
Trotz allem bin ich eigentlich mit meinem Gesamtergebnis zufrieden. Vielleicht kann mir ja jemand einen Tipp geben was ich falsch gemacht habe. :-)
Die nächsten Tage je nach dem wann ich es zeitlich schaffe wollte ich noch versuchen impressum und datenschutz einzufügen in das ganze. Muss man ja heutzutage auch beachten.
gg wp
ty
15:55 Hätte man auch die beiden meta-Zeilen zu einer meta-Zeile mit drei Attributen zusammenfassen können?
Hi erstmal vielen Dank für das tolle Video. Kennst du vll eine Seite wo die wichtigsten css befehle stehen. Mein Problem ist, das ich mir die befehle nicht so schnell merken kann. Muss ich mir alles auswendig lernen?
Hi, das ist überhaupt kein Problem. Ich kenne keinen Entwickler, der wirklich alles auswendig weiß. Viel wichtiger ist es, die groben Konzepte zu verstehen. Das, was man regelmäßig braucht, weiß man dann irgendwann auswendig - und alles andere schlägt man online nach, wenn man es gerade braucht. Das machen sogar die erfahrensten Entwickler so, also lass dich nicht davon entmutigen, dass du dir nicht alles sofort merken kannst :)
Wenn du etwas über HTML, CSS oder JavaScript nachschlagen möchtest, ist MDN häufig ein guter Anlaufpunkt (Für CSS zum Beispiel developer.mozilla.org/de/docs/Web/CSS)