Website mit HTML und CSS erstellen 2022 | Tutorial für Anfänger
Вставка
- Опубліковано 4 лип 2024
- Es ist soweit. In diesem Video erkläre ich euch, wie ihr eine eigene Website mit HTML und CSS bauen/programmieren könnt.
Das Video zeigt euch folgende Dinge:
- Welcher Editor gut geeignet ist
- Wie man ein HTML & CSS Webseiten Projekt aufsetzt
- Wie man Seiten intern und extern verlinkt
- Wie man eine Webseite responsiv optimieren kann
Dieses Video ist für absolute Anfänger geeignet! :)
Hier findet ihr den HTML und CSS Code:
stackblitz.com/edit/web-platf...
Hier findet ihr den Editor:
code.visualstudio.com/
Wenn ihr die Webseite auf einen Server hosten wollt, dann empfehle ich Digitalocean. Benutze den Service seit 2017 selber und bin meeega zufrieden:
m.do.co/c/820a7dc79dc8
* Das ist ein Empfehlungslink/Affiliatelink, damit bekommt ihr 100$ bei der Registrierung - wuhuuu!
Hier findet ihr die wichtigsten Kapitel im Video:
00:00:00 - Einleitung
00:01:16 - Texteditor
00:02:40 - Editor Visual Studio Code
00:04:48 - Website Grundstruktur
00:10:29 - head Bereich
00:18:57 - Website bauen mit HTML und CSS
Outro Musik:
metr - we should tell the truth - Наука та технологія
Geht es euch zu schnell oder zu langsam? Dann stellt einfach die Wiedergabegeschwindigkeit (klickt auf das kleine Zahnrädchen unten rechts) auf 0.5 oder 1.5. Viel spaß! :)
Ich liebe deine Videos! Die sind wirklich gut erklärt! Gerne mehr davon, auch gerne zu fortgeschritten Themen rund um Websites. LG 😊
Hab mir den ganzen Guide reingezogen. Meisterhaftes Einstiegstutorial. Respekt!
hab jetzt erst 7 min geschaut muss aber gleich kommi abgeben du kommst so sympathisch rüber und erklärst gut einfach und knapp so muss das sein danke!
Was ein unfassbar gutes Tutorial, Hut ab! Hab vor kurzem erst angefangen und hat mir mega geholfen :)
Wie immer klasse Video und einfach erklärt.
Der erste, der mir erklärt, was der Unterschied zwischen padding und margin is statt es einfach nur zu benutzen und mich zu verwirren, vielen vielen Dank! ~
Hallo Basti, das Video ist super. Da ich Anfänger bin und mir meine eigene Webseite Bauen will hat das mir sehr gut geholfen. Danke für deine Zeit.
Oh man Basti...Danke Dir 🙂
Du hast in 1 Std. und 13 min. geschafft mir mehr Grundverständnis für das Programmieren beizubringen, als mein damaliger Prof. in zwei Semester Informatik (Java und C+) in meinem Maschinenbaustudium. Daumen oben und abonniert. TOP!!!
Danke für dieses tolle Tutorial, konnte endlich durchblicken und meine website erstellen :)
Muss mal ein Lob da lassen: Ganz tolles Video! Du hackst es nicht nur runter, sondern erklärst immer alles so super anschaulich. Danke!!
Danke dir!! :)
Hey Basti,
Ich habe mir nun sehr viele HTML/CSS Tutorials angeschaut und finde deins echt stark. :D Gerade mit der Erklärung zum theoretischen Aufbau am Anfang und auch, wie du mehr Qualität rein bringst durch die Differenzierung von Sektionen (nicht nur sondern auch ).
Vielen Dank und gerne mehr☺
Wirklich sehr gut erklärt und einfach, sowas brauchen wir vielen dank
Klasse Video! Echt super erklärt.
Super erklärt, vielen Dank!
Habe den Kanal zufällig entdeckt. Super tutorial.
Vielen Dank für deine tollen Videos einfach erklärt.
MoinMoin,
Ich habe dein Tutorial wirklich sehr genossen - es ist auf einmal 4 Uhr morgens, aber dafür habe ich auch meine erste Website erstellt und es hat mir wirklich super viel Spaß gemacht dir zuzuhören, gleichzeitg auszuprobieren und mich durch die Einfachheit einiger fancy Funktionen begeistern zu lassen!
Deine Art zu beschreiben und zu erklären ist sehr authentisch und deine Stimme sehr sehr angenehm - andere Tutorials hier auf UA-cam sind mitlerweile immer sehr laut oder überzogen, zu langsam oder nicht ausfühlich/kleinschrittig genug. Bei dir stimmte einfach alles: schön zackig auf den Punkt kommend und zielstrebig - einfach wunderbar!
Jetzt werden direkt erstmal deine anderen Videos geguckt - abboniert und gedaumt! :)
Sehr cool erklärt. Freu mich auf weiter...
Klasse vielen Dank sehr gut erklärt
Das war wundervoll ♥ Danke
Hallo Basti, dein Tutorial ist wie immer perfekt erklärt und sehr hilfreich. Es macht mir immer Spaß dir zuzuschauen und html besser zu verstehen.
Kannst du noch ein Video dazu machen wie man eine svg Datei macht?
Sehr gut! Ich mache seit Januar ein Fernstudium Webdesign aber in diesem Video wurde es verständlich und kompakt erklärt und ich habe mehr gelernt als in den letzten 6 Monaten. Danke sehr!
Hast einen Job gefunden ? Ernstgemeinte Frage
Super Video :)
Einfach mal grad nachgebaut .. bisschen optimiert.. und zack .. fang ich an meine eigene Seite weiter auszubauen :P
Es ist eine tolles Video und super gut erklärt. Vielen Dank. Gerne mehr davon.
Danke dir!!
sehr gut erklärt. Danke Dir.
Gratulation ;) du kannst GUT erklären !!!
Hallo Basti, Thank you so much you explain so simple and right on point.👍
Hallo Basti,
Ich finde das Video super für Anfänger.
Das hätte ich vor 5 Jahren auch gebrauch, als ich meine Homepage erstellt habe.
Wenn ich das so sehe ist meine Seite sehr kompliziert geschrieben.
Hatte nur Texteditor 😊 benutzt.
Und ganz viele Internet Tipps.
Mach weiter so 👍.
mfg
Super erklärt. Danke.
Dankeschön für das Video. Super erklärt. Bin ein Anfänger und hoffe du machst weiter so tolle Videos!
Daaanke für das tolle Feedback 🤩
@@BastiKlein Gerne!
Hast eventuell einen Tipp wo ich einen Frontend-Webentwickler-Kurs machen kann da es zahlreiche Anbieter gibt. L.G.
Sehr gutes Video! Vielen Dank ;-)
Was für eine tolle Anleitung.
Ich bin total begeistert, vielen Dank dafür 🙂
Danke für das Tutorial!! Was mir echt davor unklar war, dass man HTML immer mit Bitte mach das und das ansprechen muss :D Ne Spaß bei Seite, hat mir sehr geholfen, ich probiere jetzt auf Grundlage von diesem Tutorial eine Portfolio Website zu machen für Praktika
Hahahaha :D man muss immer lieb mit HTML sprechen, dann macht es auch das, was man möchte :D
Schönes Video. Noch ein paar Tipps vom Anfänger: Nutzt die Erweiterung Prettier Code Formatter, der formatiert alles, wenn man in den Einstellungen aktiviert, dass es beim Speichern alles sortiert. Sehr praktisch.
Dann noch Live Server, den kann man mit Chrome gut nutzten, er übernimmt das aktualisieren der Seite.
Lorem kann auch ein Befehl sein z.B. Lorem15 fügt 15 Wörter hinzu.
Vielen Dank für deine tollen Videos! Du erklärst es immer so, dass es auch Anfänger verstehen.
Kommen auch noch weitere JS Videos? =)
Lerne schon fleißig, da ich Programmierer werden möchte.
Toll! Leibe Grüße aus Ägypten..
Vielen Dank
MEGA VIDEO!!
Danke für deine herrlichen Videos ich höre sie mir immer gerne an und finde sie haben einen großen Informationswert Bitte auch auf digitale Barrierefreiheit eingehen und das Wort behindert nicht in einen negativen Kontext verwenden
ich bin 62 jahre alt und bin traurig das ich nicht mehr so aufnahmefähig bin wie mit 20. Mit Pc kann man soviel ideen verwirklichen. Doch ich bin nicht mehr so aufnahmefähig doch deine Anleitung ist trotz meiner Dummheit, gaaaaanz toll erklährt.
Danke! ☺️
Hallo Basti, super Tutorial! Dankeschön! Hast du einen Tipp, mit welchen input-Elementen man am besten mehrfach Übungseinheiten (Sätze/ Fragen mit einer Box, in die man die richtige Antwort tippen muss, samt Lösungsbutton) kreiert?
Gutes Video
Servus, top Tutorial. Ist evtl auch ein tutorial geplant wie man eine anmelde Maske erstellt? Würde mich mega interessieren wie man eine richtige anmelde Maske mit Datenbank etc. macht und wie man einen Bereich einrichtet den nur registrierte und/oder angemeldete Benutzer sehen können
Tolles Video, ich habe mit dem Video aus 2020 mit HTML angefangen und finde es toll, dass du hier noch weitere Features mit eingefügt hast👍🏼
Ich hätte jetzt aber noch eine Frage.
Wieso genau funktioniert die Verlinkung jetzt nur noch über die Live Preview und nicht über normales debuggen?
Nur wegen den \ und # Zeichen oder gibt es da noch einen anderen Grund?
einfach NUR #danke
Moin Basti,
ich habe dein Tutorial sehr genossen und du konntest alles sehr verständlich und einfach erklären, danke dir! Ich habe ne kurze Frage zu deinem Setup: Wie machst du das, dass du so schnell wechselst zwischen Mauszeiger und Stift? Hast du ein extra Tablet verbunden, machst du das über ein Convertible oder gibts da noch eine andere Möglichkeit?
Danke
Moin, kompaktes informatives Video. Jedoch habe ich eine Frage wie heißt das Programm wo du gemeldet hast auf Sachwarzen Hintergrund
Hallo Basti, ich finde du erklärst das wirklich super, danke dafür.
Kann man dir auch eine PN schicken, würde gerne noch mehr zu einem sehr ähnlichen Thema fragen.
Klar, schreib mir ne PN direkt bei Telegram: t.me/+SHUWO3aa9xLHaB39
Schöne Erklärung :)
Allerdings anstatt 4 Zeilen css zu schreiben um margin sowir padding zurückzusetzen und dann wieder padding mit 2 zeilen zu setzen, kann man auch alles in 2 Zeilen schreiben, margin auf 0 und padding 24px 0, die erste zahl steht für oben/unten die zweite für links/rechts AUSSER man hat 4 zahlen werte, dann ist es oben rechts unten links werte - ist einfacher, schneller und weniger code am ende :)
Genau so wie Thema Sektion in die Mitte zu packen, du hast das super erklärt, aber um es zu optimieren, schneller zu sein, anstatt 2 zeilen mit margin left right, eibfach: margin: 0 auto & hat den selben effekt, selbes prinzip wie bei padding
Danke für dein Video, hat mir sehr geholfen :)
Hätte eine Frage
Wie kann man bspw. Icons oder so etwas hinzufügen. Also so eine Baufirma nur jetzt so als Beispiel, die verschiedene Bereiche bietet, wie Straßenbau und die ganzen verschiedenen Sachen und dann halt zu jedem Thema so ein Icon Bild was halt passt. Wenn man da drauf klickt wird man weitergeleitet und dann steht darüber wieder etwas also was die Firma genau in diesem Gebiet macht etc. zusammengefasst ist meine Frage nur eigentlich wenn man zum Beispiel auf “Über Uns” klickt das man dann auf eine andere Seite weitergeleitet führt so wie das die ganzen professionellen Seiten machen.
👌👌👌👌👌👌
Basti das Video ist wirklich gut, nur wie mache ich vorher nachher Bilder dazu?
Mit welcher Software nimmst du dein Bildschirm auf? Super Video, danke für die gute Erklärung.
OBS benutze ich. Funktioniert wie ein Träumchen 🤩
Besten Dank. Damit gelingt auch meine Homepage.
Wie kann man bei 1:10:03 die Überschrift (Unsere Services) sichtbar mchen, wenn man auf Services klickt ? Man müsste alles etwas nach unten schieben, damit
die Überschrift lesbar ist.
hey basti, bei minute 24:56 verstehe ich nicht wie du das mit dem bild (logo) reinfügst und es automatisch in ein code umwandelt
👍👍🙂
Der Teaser / Header passt sich ja mit dem Befehl automatisch an den jeweiligen Bildschirm / Auflösung an, kann man das auch irgendwo so einstellen, dass der Teaser sich nicht ganz so extrem streckt ?
servus. habe eine website erstellt und danach dein video reingezogen, wie man seine website hostet! Danke für das Video, es war sehr gut erklärt! Jetzt bin ich fast fertig... Das einzige Problem: Ich habe meine Website nur für den PC erstellt und jz weiß ich nicht, wie ich das ändern kann. also, dass meine internetseite auf jedem gerät ein gutes und strukturiertes format hat... kannst du mir bitte helfen! Danke schonmal im voraus
Moin, wirklich klasse erklärt, danke dafür!
Aber darf man die Vorlage, die du uns in diesem Video zur verfügung stellst, auch für kommerzielle Webseiten wie z.B. von Kleinunternehmen, nutzen?
Aber na klar! Benutz das Ding für alles was du willst.
@@BastiKlein Super, danke Dir! :)
Sehr gutes Video , auch sehr gut erklärt. Andere gehen immer sehr schnell vor und erklären die einzelnen Begriffe nicht so genau. Dauert das lange bis man HTML und CSS verinnerlicht hat also wann man was benötigt ?
Verstehen kann ich das alles , ich frage mich immer nur wie kommt man darauf was man jetzt gerade benötigt ;)
Danke dir! :) als ich mit dem programmieren angefangen habe, dachte ich auch immer ‘wie kommt man darauf’ haha Aber du wirst sehen - programmieren ist wie puzzeln. Mit der Zeit ergibt es Sinn und die einzelnen Teile kannst du immer schneller legen.
@@BastiKlein Danke für deine Schnelle Rückmeldung , ich setzte mich jeden Tag eine bis zwei Stunden hin um das zu lernen.
Spricht man bei CSS schon von Programmieren ? HTML wird ja immer geschrieben das dies keine Programmiersprache ist.
@@noofuu2208 CSS zählt nicht zu den Programmiersprachen, genauso wenig wie HTML. Das einzigen Programmiersprachen, welche du auch mit HTML und CSS verwendest, sind PHP und JavaScript.
Bei 1:05:14 mit dem nav{ Position: sticky;…..} Befehl hat’s bei mir nicht funktioniert. Also das Problem ist, dass der direkt ohne, dass ich runter scrolle die Fläche unscharf macht. Aber wenn ich dann runter scrolle und der nav Container bleiben sollte geht er ganz normal mit und verschwindet vom Bild. Kann mir da einer weiterhelfen ?
Hallo Basti
Tolle Videos die Du da produzierst und auf UA-cam veröffentlichst.
...vielleicht hast Du ja auch mich eine Lösung für mein Anliegen?
Ich möchte "nur", dass sich ein Bild mit "mouseover" auswechselt!
Vielen Dank im voraus.
Liebe Grüsse
Marc
Hi, ist denn diese Seite DSGVO konform ? Wie sieht es denn aus braucht man keinen Cookies Banner oder eine "Meldung", die der Nutzer bestätigen muss. Hier drohen ja bei Verstoß keine geringfügigen Strafen
hey danke für das mega video! was hälst du von adobe dreamweaver? bin selber noch blutiger anfänger und gerade beim responsiv design hab ich schwierigkeiten, womit ich aber keine schwierigkeiten in zukunft haben möchte, ist, dass ich auf ein besseres/effektiveres programm umsteigen muss und erstmal "baff" bin sozusagen
Dreamweaver ist nicht super ideal für Anfänger, da die Community darum klein ist. Mit VSCode, Sublime, Atom, JetBrains bist du langfristig besser aufgehoben. Bei der Web Entwicklung hat VSCode derzeit den größten Marktanteil. :) danke für dein tolles Feedback!
Servus Basti also erstmal danke für das wirklich gute erklärte Video allerdings habe ich da noch ein paar problem damit vlt kannst du dir meine Website mal anschauen wäre mega!
Na klar! Wie lautet deine Domain? :)
@@BastiKlein ich meinte den Code meiner Website
Super erklärt danke..
Darf ich dazu noch eine Frage stellen.
Wie kann ich Fotoflayer mit einem Link versehen die zu meiner Webseite beim anklicken führt.
Ich sehe diese Fotoflayer in den Social Media.
Ein Deutscher Clip dazu wie man sowas umsetzten kann würde vielen unter UA-cam helfen.
Danke.
Hey lieber Basti,
bei 11:40 habe ich um ehrlich zu sein nicht genau verstanden, wie du das mit „Müller“ umgesetzt hast. Wenn ich grundsätzlich eine Website auf deutsch machen möchte, aber ein Wort z.B. dévoué als Titel haben möchte, was eben Französisch ist. Wie macht man das dann?
Lg
Hallo Basti, Danke auch von mir für Deine Mühe. Hast Du auch schon ein Video, wie man im VSC eine Schriftart hinzufügt? Finde massenweise Anleitungen auf englisch, die den Fira code hinzufügen, aber ich möchte einfach nur eine "Handschrift" z.B. von Google Fonts "Shadows in the Dark" hinzufügen. In die Json Settings habe ich schon die Copy der CSS Dateien eingefügt, aber wenn ich dann in der "Styles CSS" meine h2 mit einer neuen Schriftart definieren möchte, dann findet VSC die Font-family nicht.... *Ächts*. Kannst Du helfen?
bei Minute 21:48 kopierst du die Zeilen, wie geht das ?
hallo kannst du mir vielleicht kurz erklären wie man ein solches logo erstellt also der dateityp danke villmal
Moin wie sieht es aus wenn ich in der Navigation ein Liste haben will? Also ich möchte das bei Kontakt eventuell noch 3 weiter Punkte angezeigt werden, wenn ich drauf klicke. ✌️
hey was geht hab nh problem bei meinen zewiten bild weil ich habe es versucht auch bissel alleine zu coden hat acuh gut geklappt abre rmein bild will einfach nicht laden hab auch geschaut was es sein kann aber will einfach nicht hab eig alles gleich wie du bei dem bild deswegen versethe ichs net genau lol aber sonst bombe wirklich kuss du hilfst mir so viel weiter weil ich gerade auch am einteigen bin wirklich danke
Wenn man auf beispielsweise auf Services drückt, ist die Überschrift in dem geblurten Bereich. Wie lässt sich das beheben?
Guter Punkt! Hab auf Stackblitz die .sektion und nav CSS Parameter aktualisiert. Jetzt klappt es
wie speichert man das ab?
Hallo, ich habe eine Frage. Meine Navbar ist zwar sticky mit diesem Blur effekt aber wenn beim scrollen ein bild kommt, verschwindet es hinter dem Bild. Wie kann ich das beheben ?
Erhöhe einmal den z-index von deiner Navbar :)
Bei mir lasst sich das bild nicht an woran kann das liegen
Wie kann ich mir das selber beibringen
Ich hab’s irgendwie nicht hin bekommen😢 wie speichert man das versuche es schon die ganze Zeit außerdem öffnet sich bei mir keine neue seite
Hallo Basti,
bin gerade dabei eine website zu erstellen, nur hänge ich beim Logo. Das Logo (mein Logo ist etwa so groß wie der Teaser) passt sich nicht der Bildschirmgröße an - woran könnte das liegen?😀
Dann pack einfach ein width mit rein. :)
Super video aber wenn ich denn code meta name="viewport" contect="width... eingebe wird der nicht ausgeführt
Das Video hat mir endlich CSS verständlich gemacht! Darf ich diese Webseite angepasst für mich selbst öffentlich benutzen? Ich bin Soloselbstständiger und habe schon versucht was ähnliches zu bauen, ist mir bislang aber nicht so gut gelungen, vor allem wegen der Mobile-Ansicht. Das wäre genau was ich gesucht habe... Danke!
Aber na klar!! ♥️
@@BastiKlein Vielen Dank! Muss ich an den Datenschutzrichtlinien noch was ändern?
@@TechSergeant Naja, den Lorem Text solltest du nicht stehen lassen 😅
Hallo, ich habe schon eine webseite erstellt es funktioniert, aber beim zweiten funkt. Es nicht ich habe den name index .html verpasst abel es zeigt mit keinen webbrowser symbol an.
Ah, dann lade dir Visual Studio Code herunter und erstelle dort die index.html Seite. Dann müsste dein Browser diese erkennen
das meta name viewport geht ned
Hey, sehr cooles Tutorial hat alles super geklappt nur funktioniert bei mir das Verlinken der anderen Seiten nicht😅
Was hast du in deinen href=“…” reingeschrieben? 😊
@@BastiKlein In meinen Fall href="/projekte.html"
Hallo wie speichert man das ganze falls man später arbeiten möchte
Tut mir sehr leid keine Ahnung?
Hi dank dir hab ich den anfang der website aber ich frage mich wie ich die http: mache und wie ich links hinzufüge von youtube kanal oder von nem partnerprogramm wär echt cool wenn du da helfen könntest
Links kannst du ganz einfach mit Ich bin ein Link hinzufügen. Ich lade heute oder morgen ein Video hoch, wie du deine Seite kostenlos ins Internet veröffentlichen kannst. :)
Basti bei mir stellt sich nichts mittig ein
Justify content und das andere funktioniert nicht
cooles tutorial, wie kann ich die hintergrundfarbe ändern?
Danke! Pack einfach ein background: red; in deinen body {…} CSS
@@BastiKlein Vielen Dank!
beim link zum code ist nur der html code da nicht der css code.#
Musst mal links schauen, da kannst du auf die Dateien klicken :)
Geht das in Notepad++ genau gleich?🦎
Jap genau gleich :)
Ich bin gerade dabei eine Website für die Band meines Vaters zu erstellen und würde auch gerne ein ähnliches Logo dafür haben könntest du mir erklären wie das funktioniert?
Das Logo habe ich mithilfe von Figma.com (Gratis Designtool) erstellt. Lass mich gerne wissen, wenn du hierzu Fragen hast. :)
@@BastiKlein Alles klar danke werde ich mal ausprobieren
Habe deine alte website auf brackets nachgebaut, kann man sie nicht mehr verwenden? Habe alles gleich, nur alles ist verschoben
Fehlt eventuell ein text-align: center?
@@BastiKlein ich habe die minecraft website nachgebaut.
Alles genau wie du im Video. Nur bei mir wird das bild zb einfach nicht angepasst. der text nicht verschoben und vieles mehr
Schick mir mal ein Screenshot auf Telegram, dann kann ich dir besser helfen :) t.me/+SHUWO3aa9xLHaB39
Hi. Habe Ihnen letzte Woche eine E Mail gesendet. Rufen Sie diese noch ob?
Danke
Gerade beantwortet! :)
Sorry aber ich verstehe nicht warum du das viedo gepostet hast ich mein du hast das gleiche vor 2 Jahren schon mal erklärt was ist hier anderst?
Hallo ich hätte mal ne frage Würden sie mir helfen einen shop zu machen Wie beispiel Instant gaming will auch so psn cards und so verkaufen wers möglich das man dich bezahlen kann das du mir das komplet nach wunsch aufbaust?
Meld dich einfach per Telegram :)
@@BastiKlein mach ich
div steht für division nicht für divider =)