Responsive Portfolio Webseite mit HTML und CSS erstellen | Anfänger Tutorial Deutsch
Вставка
- Опубліковано 16 лип 2024
- 👉 Source Code auf unserer Webseite: coding-kurzundknapp.com
Hol dir bei Hostinger das beste Webhosting, um deine Webseite online zu stellen: www.hostinger.de/kurzundknapp
Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.
In diesem Video werden wir eine Portfolio-Webseite nur in HTML und CSS entwickeln. Bei diesem Praxisprojekt wirst du viele spannende und moderne CSS Konzepte lernen.
Unter anderem:
- Flexbox
- Grid-Layouts
- CSS Variablen
- Media Queries
- Responsive Webdesign.
und viele mehr.
Nach diesem Video wirst du also in der Lage sein eigene Webseiten zu erstellen, die sogar auf dem Handy gut aussehen.
************************************************************************
HTML5 Udemy Kurs: www.udemy.com/course/coding2g...
Wichtige Links und Ressourcen:
Links zu den Bildern (und Icons)
www.pexels.com/de-de/foto/man...
www.pexels.com/de-de/foto/por...
www.svgrepo.com/svg/271094/in...
www.svgrepo.com/svg/271091/te...
www.svgrepo.com/svg/126780/tw...
www.svgrepo.com/svg/134513/yo...
Visual Studio Code: code.visualstudio.com
Google Fonts: fonts.google.com/icons
Schriftart Poppins: fonts.google.com/specimen/Pop...
************************************************************************
Timestamps:
01:01 Endprodukt
03:04 Vorbereitungen
07:34 Header
28:26 Über mich
34:06 Dienstleistungen
41:49 Footer (mit Grid)
55:23 Code zum Vergleichen
************************************************************************
![3 basic responsive CSS/SCSS Layouts für Anfänger/Beginner [Tutorial/Deutsch]](http://i.ytimg.com/vi/o9MO_VdGAGs/mqdefault.jpg)
Hi, den Source Code gibt es ab jetzt auf unserer Webseite:
👉 coding-kurzundknapp.com
Lesezeichen für mich selber:
Navigation beginnt bei: 17:15
LG cooles Video :)
Sehr gutes Tut. Danke dir. Genau das, was ich gebraucht habe. Direkt mit durch gemacht. Jetzt wird ein Konzept erstellt und nach dem Tutorial eine eigene Seite gebaut. Vielen Dank!
Klasse Tutorial: gut und fundiert erklärt. Kann ich sehr gut für mein Projekt gebrauchen. Danke
absoluter Wahnsinn! Vielen Dank!
Endlich mal ein hilfreiches Video was man auch etwas angepasst für eine eigene Webseite verwenden kann .
Da hab ich auch grad Bock, Visual Code anzuschmeißen und es dir nachzumachen :). Schönes Tutorial.
Vielen Dank für dieses Tutorial.🙏 Es ist Gold wert und erspart eine Menge an Recherche.
Danke, freut uns sehr!
🥵 junge junge, ich hab den ganzen Sonntag damit verbracht das nach zu bauen. Verdammt gutes Tutorial. Musste deine Sprechgeschwindigkeit etwas runterkurbeln 😆 Vielen dank, daran wird dann weiter gebastelt 💪
sehr gut verständliches Tutorial Danke dafür :)
So viel toller Inhalt zum Lehrnen Nice
Richtig Geil, Danke dir
Vielen Dank, richtig gut gemacht 👍🏻
Sehr gutes Tutorial ❤
Tolles Video, kann ich nur empfehlen. Mach weiter so! Kuss geht raus😘
Vielen Dank😘
ich bin platt. Sehr gutes Tutorial, trotz das man den Speed in UA-cam auf 0.5 stellen muss, sonst hast du keine Chance. Habe sie nachgebaut und und spiele jetzt etwas damit herum um zu lernen.
Vielen Dank für deine Mühe. Mein Abo und Like hast du!!!
booo, nice! endlich ne ordentlichen channel gefunden!
weiter so!
Seeehr cooles Design :D
Ich glaube ich habe in der Stunde mehr gelernt und verstanden wie in den letzten 2 Monaten :D jetzt heißt es Ausprobieren :)
Ich bin eher jemand der nie irgendwas Kommentiert, jedoch muss ich es hier auslassen Ich danke dir für dieses Geile Tutoriel. Mega gut erklärt man ist Perfekt mit gekommen einwenig schnell :D aber dafür gibt es ja die Pause Funktion haha.
ganz stark :)
Wusste nicht dass du so am chillen bist
Super Tutorial, merci. Muss man aber erst noch sacken lassen
Top danke
Danke :)
top danke
echt nice erklärt, solltest Lehrer werden :D
Besser UA-camr
geiles video wird der code auch noch veröffentlicht?
Dein Video begeistert mich. Dafür gibts auch gleich ein Abo ;- Da bügelt man sich bootstrap und tailwind rein etc... aber ich glaube auf FWs kann ich jetzt bald verzichten, ich finde sie sind ja nichtmal einfacher.., oder wie siehst du das, sind die FWs auf den vielen Browsern & Endgeräten stabiler als Flex und Grid?... Muss mich einfach mehr mit nativem CSS beschäftigen, super Video, vielen Dank!
Freut mich, dass dir das Video gefallen hat 😄 Das mit den Frameworks sehe ich genauso. CSS frameworks sind sehr überbewertet und vor allem zum aktuellen Zeitpunkt überflüssig geworden. Das native CSS3 wird immer weiterentwickelt und es kommen ständig neue moderne Features wie Variablen dazu. Manche Bootstrap Komponenten können tatsächlich hilfreich sein; Sie sind aber sehr undurchsichtig und schwer zu modifizieren. In den meisten Fällen ist es besser, ein eigenes stabiles Layout mit Grid und Flexbox zusammen zu bauen. Es ist nämlich auch gar nicht so schwer, wenn man sich ein wenig damit auseinander setzt.
Gutes video
Frage welches Zeichen auf der Tastatur verwendet man für den leerstring bei min. 18:32.
und wo befindet sich dieses Zeichen auf der Tastatur? Weil wenn ich die Taste rechts neben dem Fragezeichen verwende sieht es bei mir leicht anders aus und visual studio code markiert mir die Zeichen.
Bro schreibe normale weise keine Kommentare aber das Video ist so gut danke dir
Vielen Dank ;)
Das ist ein sehr gutes Video Tutorial um mein HTML und CSS nach einigen Jahren nochmal aufzufrischen.
Ich stehe gerade vor dem Problem dass mir der "Über mich" Titel im Mediaquerry 800 nicht richtig angezeigt wird und ich komme nicht dahinter wo der Fehler liegt.
Kannst du deine Files vielleicht zum Download anbieten, damit ich meine Files mit deinen vergleich kann?
Super Tutorial. habe ich gerade alles nachgemacht. Danke hierfür. Leider sind bei mir die Buchen Buttons nicht so geworden, wie im Video so mit abstand außen rum und bei der Letzen Section ist das Icon daneben die h3 daneben Lorem Ipsum. Im Video ist ja neben dem Icon Überschrift und dadrunter Text. Ich habe einen Full HD Monitor.
Ist dein gezeigter Code hier Urheberrechtlich geschützt oder kann man den für Profit Projekte übernehmen?
Geniales Video, vielen Dank. Leider funktioniert .flex_container in services.css (36:14 min) bei mir nicht. Die Texte bleiben am linken Rand untereinander. Grüße
Hi. Das ist ein super gutes Tutorial! Und ein tolles Webseiten-Design!
Ich habe aber noch ein Problem. Und zwar in den Cards in der services_section.
Wenn der Text in den drei Cards unterschiedlich lang ist, dann ist zum Beispiel in der Card mit kurzem Text, die Überschrift in der Mitte der Card, bei dem längeren Text weiter oben, und bei einem ganz langen Text ganz oben. Außerdem befinden sich die "Buchen - Buttons" in unterschiedlicher "Höhe". Das sieht nicht sehr professionell aus. Wie kann man das einstellen, dass alle drei Überschriften, also in jeder Card, oben sind und dann der Text folgt, der dann die Cards natürlich unterschiedlich lang nach unten ausfüllt? Und dass die drei "Buchen - Buttons" auch in jeder Card gleich weit unten sind?
Hi, sehr gute Frage. Die Überschriften und Buttons rücken bei kürzerem Text in die Mitte der Card, weil die justify-content Eigenschaft von der Card auf center gesetzt ist. Somit wird der Karteninhalt vertikal zentriert. Wenn du justify-content stattdessen auf flex-start setzt, dann werden sie "ganz normal" von oben nach unten angeordnet. Das bewirkt, dass die Überschriften auf der selben Höhe sind, aber leider die buttons sofort nach dem Text kommen und somit bei unterschiedlicher Textlänge noch nicht auf einer Höhe sind. Wenn du auch die Buttons auf der selben Höhe haben möchtest, musst du quasi dafür sorgen, dass der Abstand automatisch zwischen dem Text und dem Button entsteht. Je nachdem, wie lang der Text ist. Du könntest dafür justify-content auf space-between setzen. Das bewirkt, dass das erste und das letzte Elemente in der Card immer ganz außen sein wird. Auf diese Weise werden die Überschriften auf einer Höhe sein. Und die buttons auf einer Höhe sein. Das Problem ist nur, dass nun unschöne Abstände um den Text in der Mitte entstehen. Das löst du, indem du ein div um die h3 und das p machst. Auf diese Weise gruppierst du die Überschrift und den Text, sodass zwischen ihnen kein Abstand entsteht, sondern nur zwischen dem div und dem buchen-button.
Der HTML-Code für die cards würde dann so aussehen:
Beratung
Lorem ipsum...
Buchen
Ich hoffe, dass ich dir damit weiterhelfen konnte. Viel Erfolg ;)
@@coding-kurzundknapp Hi Mr. Coding👍 Gerade ausprobiert, funktioniert super! Vielen lieben Dank dir!👍👍👍
Vielen Dank für das Tutorial. In der Section about me ist im padding 100px 0 angegeben. Ist das so gewollt? Denke das muss doch 100px 0px sein oder?
Mein Problem ist das ich keinen Rand auf dem Laptop oder dem Mac in der about me section habe. Wenn ich aber 100px 10px mache, habe ich einen riesigen Rand.
Wem dieses Video vielleicht zu schnell oder kompliziert erscheint kann gerne eine einfachere Version (wo auch langsamer gesprochen wird 😉) ausprobieren.
Hier der Link 👉ua-cam.com/video/X9l2SooDlck/v-deo.html
Hallo, bei mir positioniert flexbox die Elemente (Foto und Text) nicht nebeneinander, sondern unter sich (in 15:05 min). Ich kann keine Fehler finden, kann mir bitte jemand helfen?
Danke, sehr interessantes Video und ich werde es nachbauen. Allerdings habe ich eine Frage ! Im Zuge der "Abmahnwelle" mit Google Fonts und dem Verlinken zu Google, kann man, wie in Minute 23 das Icon nicht direkt herunterladen und über die Images einbinden? Vielen Dank für eine Antwort.
Ja, du kannst es dir auch herunterladen. Bei den Styles müsstest du dann darauf achten, dass die CSS-Eigenschaft auf ein Bild angepasst werden müssen (aktuell ist es ja so wie Text gestylt).
Hey mega geiles Tutorial! Es hat mir richtig spaß gemacht es anzuschauen und neben bei mit zu coden, am ende ist mit aber eine frage gekommen, leider habe ich im Internet nichts dazu gefunden und somit wollte ich fragen ob es möglich ist auf die Socials zu klicken um auf die jeweilige Seite zu gelangen.
Schön, dass dir das Tutorial gefallen hat. Wenn du Seiten verlinken möchtest, kannst du das Tag in HTML benutzen. Dort verweist du dann mit dem href=" " Attribut auf die Zielseite.
Es kommt dann nur noch drauf an, was du in das a Tag reinmachst. Wenn du zum Beispiel ein img reinmachst (z.B. ein Social Media Logo), dann wird das Bild der Link sein. Im href Attribut solltest du dann den entsprechenden Social Media Account angeben.
@@coding-kurzundknapp Danke dir! Funktioniert wunderbar und mach bitte weiter so!
Hallo, vielen Dank für deine Arbeit!
Du nutzt hier px statt em/rem und media querys für Schriftgrößen, statt clamp( ), was die Schrift ja direkt responsive machen würde. Hat das einen bestimmten Grund?
Klasse Video, aber eeeetwas langsamer zu sprechen wäre nice, insbesondere da es ja nicht deine echte Stimme ist. KeinmescnsprichtsoimechtenLeben
ist das mit Frameworks gemacht?
Hallo, bei mir wird der Lorem ipsum Text im nicht umgebrochen, woran kann das liegen?
OK - Hab's gefunden - bei Unterstrich im header.css vergessen........
Es wäre echt richtig cool, wenn Sie den Code hochladen würden, damit man in seinem eigenen Code die Fehler findet und diese Codes vergleichen kann. Dies wäre sehr hilfreich. Ich kann aber genauso gut verstehen, wenn Sie den Code nicht hochladen, damit nicht irgendwelche Leute kommen und ohne sich das Video anzuschauen, einfach den Code klauen und sich keine Mühe machen.
Irgendwie verschwindet mein Icon nicht, wenn ich auf der Pc ansicht bin.. Wie kann das sein?
Hey, also bei mior ist die Überschrift immer neben den Text und nicht über den text. Ich geben genau so ein wie du. Ich verstehe das nicht
Total tolles Tutorial. Ich hab heute mehr gelernt als je im Frontendunterricht. Ein Problem bleibt bei mir jedoch. Meine Cards werden untereinander angezeigt und nicht nebeneinander. Wie kann ich das Problem beheben?
Freut uns, dass wir dir helfen konnten.
Das Layout der Cards wird mit Flexbox erstellt. Daher benötigst du die flex-direction Eigenschaft, um die Richtung der Haupt-Achse zu bestimmen. Wenn diese auf "row" gesetzt wird, dann werden die Elemente nebeneinander angezeigt. Wenn du sie auf "column" setzt, dann untereinander. An dieser Stelle solltest du also den Wert überprüfen. Außerdem kann die "flex-wrap" Eigenschaft ebenfalls Einfluss darauf nehmen. Wenn die Bildschirmbreite zu klein wird, dann erzeugt es einen Zeilenumbruch und zeigt die Elemente untereinander an. "flex-wrap" kann die Werte "wrap" und "nowrap" annehmen.
Viel Erfolg!
Tolles Video! Zwei Fragen sind jedoch aufgekommen.
1. Wenn ich Google Fonts nutze, geh ich doch das Risiko ein, eine Abmahnung zu erhalten? Ich hab im vergangenem Jahr sehr häufig sowas gelesen, bin jedoch vollkommen unerfahren und will mir keinen Ärger einfangen.
2. Wenn „gap“ nicht funktioniert, gibt es noch eine andere Codierung, damit die Seite Gelaber aussieht und Abstände erhält?
Viele Dank im Voraus 😊
Warum sind Google Fonts verboten?
Dieser Datentransfer ist mit der sogenannten „Schrems II“-Entscheidung des europäischen Gerichtshofs (EuGH) nicht zulässig. Das Landgericht München hatte im Januar 2022 die Online-Nutzung von Google Fonts mit der Begründung verboten, dass dabei unerlaubt personenbezogene Daten an Google in die USA weitergegeben werden.
Das heißt solange du ein Portfolio für dich erstellst das dann Live setzt und in den Bewerbungen anhängst ist alles gut.
Was du nicht tun darfst ist dies für Kommerzielle zwecke z.B. für einen Kunden zu implementieren, weil hierbei beim Import ein Zugang für Google geschaffen wird.
Sehr gut! Wäre es nicht besser mit rm anstatt mit px zu arbeiten?
Gute Idee, In vielen Fällen kann es sich tatsächlich lohnen mit rem oder em zu arbeiten. Gerade, wenn man etwas in Abhängigkeit von der font-size skalieren möchte. 👍
Hallo zusammen, HILFE :)
bei mir übernimmt alles bis zum Navigationsleiste und hat alles funktioniert.
Alles was ich danach Coden habe hat nichts übernommen, egal was ich mache bleibe meine Seite immer die gleich.
Kann mir jemand helfen, danke
Ich bekomme meine Seite nicht zum Laufen. Habe über den Dateimanager alles hochgeladen. Als zip und auch als normale Dateien. Beides mal mit der default-datei und dann beides ohne. Alle 4 Varianten haben nicht funktioniert, auch nicht mit dem Zusatz hinter der url. Ich bin am Verzweifeln und die ganzen Anleitungen von Hostinger sind englisches Fachchinesisch für mich. Hast du eine Idee was ich noch versuchen könnte?
Hey! Wenn du versuchst, die Seite zu öffnen, was genau passiert dann? Erhältst du eine Fehlermeldung? Wenn die Seite nicht richtig funktioniert , sollte dies im Hostinger-Dashboard sichtbar sein.
Könntest du vielleicht versuchen eine einfache index.html Datei in den Dateimanager hochzuladen, und schauen, ob die Seite dann geladen wird?
Vielen Dank für das geniale Tutorial!
Könnte man bei 18:10 stattdessen auch so coden?
nav a {
color: var(--secondary-text-color);
text-decoration: none;
}
nav a:hover {
color: var(--text-color);
text-decoration: underline;
}
Ist sicher nicht ganz sauber aber das Resultat sollte dasselbe sein. Oder?
Ja das ist auch möglich. Dabei verwendest du die ganz normale text-decoration property. Der Vorteil vom ::after Element ist hierbei im Video jedoch, dass es sich beliebig verändern lässt. Man kann die Größe, Farbe, Form, etc. so bestimmen, wie man es selbst am besten findet. Auch Transitions und Animationen sind möglich, die bei der normalen text-decoration nicht möglich sind. Aber wenn du es ganz unkompliziert haben möchtest, geht natürlich auch super die text-decoration 👌
Trotz gleichem code ist bei mir beim Grid auf der rechten Seite ein zusätzlicher Rand. Weiß jemand, wie der weggeht?
Du könntest im Inspector deines Browsers nachschauen und das grid untersuchen. Eventuell wird dir da irgendwo ein margin/padding/gap angezeigt, was weg muss.
Super Tutorial, hab es zur Übung genau so wie im Video mit programmiert. Hab leider dennoch ein Problem bei Timestamp 36:12 - bei mir werden die cards nicht nebeneinander positioniert. Habs mit deinem Code auch noch mal verglichen und auch alle Zeichen sind da, aber er hat alle drei unter einander. Kannst du mir bitte helfen? Und woher hast du diese Anzeige "Farbpalette"?
hat der container wo die cards drinnen sind ein display flex?
und was meinst du mit farbpallette? also du meinst nicht die normalen farben die dir vscode anzeigt oder ?
@@aloblanko ja, "display: flex;" ist vorhanden. hatte es auch schon doppelt mit dem Script im Video verglichen und es steht alles genauso da. Und ich hab auch mit dem Visual Studio Code gearbeitet.
Ich meine mit Farbpalette was im Video bei 11:26 links unten angezeigt wird. 😅
@@lienesmum also diese Farbpalette die unten links zu sehen ist, die hat er wohl nachträglich zum Video hinzugefügt das ist seine ausgesuchte Farb Palette du kannst im Prinzip auch andere Farben nehmen. Das was du da siehst sind nur die Hex Codes für die einzelnen Farben die er so benutzen will. Dafür definiert er sie in variablen in der CSS Datei mithilfe von root.
Du kannst stattdessen auch einfach red, Blue, Green, oder yellow in die Zeil
„Backgrund-Color“ eingeben. Bei vscode selbst kannst du beim hovern mit der Maus auf diese Farbe dann auch selbst eine Farbe „wählen“. Hoffe das hilfst dir irgendwie 😇
@@lienesmum wenn du flex-Direktion: Column ; statt bei cards bei dem Flex Container reingeschrieben hast kann es daran liegen. Flex Wrap hat er auch dazu geschrieben das bewirkt das sich diese cards innerhalb des Containers nach dem Platzt den sie haben orientieren. Sie reihen sich unteranderem untereinander an. oder es kann auch daran liegen das Gap zu viel Abstand hat und sich das bei dir dadurch nach unten weg verschiebt. Kannst den Bildschirm ja breiter und kleiner ziehen um zu prüfen wie die Cards sich verhalten Kann man alles prüfen . Oder an der Width. Wenn du aber alles geprüft hast und es genau so ist wie im Video, würde ich tatsächlich den Code in einen validator schmeißen. Du kannst ebenfalls chatgpt fragen ob alles nötigen sytanx Regeln korrekt sind und nigens was fehlt. Manchmal übersieht man das ein „ ; „ fehlt. Ich kann also immer empfehlen die Selektoren durch zu gehen um zu sehen ob alles richtig angesprochen wird. Man kann zum Beispiel bei Schriften die Größe so verändern das der Unterschied sofort zu merken sein sollte, andern falls wird das Element falsch angesprochen in css. Also wie du siehst kann es an vielen gründen liegen und man muss so ein bisschen rum probieren bis es geht
Erstmal gutes Tutorial.
Und nun zur Frage! Bei 52min.
Werden die Grid's Im @media kopiert und bei mir werden die ( : ) als CSS Fehler angezeigt wieso?
Z.B. bei ( grid-template-colums: 1fr 1fr; )
🤘🏼
Danke für deinen Kommentar. Dadurch, dass in CSS normalerweise keine Fehlermeldungen kommen, gehe ich davon aus, dass es sich um einen Syntaxfehler im Code handelt.
Wie macht sich der Fehler deutlich?
Wird im Editor etwas rot unterstrichen? - > Dann liegt ein Syntaxfehler vor.
Falls der Fehler darin besteht, dass bestimmte CSS Regeln nicht übernommen werden (also die Webseite nicht das anzeigt, was du geschrieben hast), dann kannst du in den Developer-Tools deines Browser (Element untersuchen) den CSS Code überprüfen, wie ihn der Browser interpretiert hat.
Manchmal liegt der Fehler auch beim Live Server oder beim Browser. Versuche die Webseite in einem anderen Browser zu öffnen und evtl den Cache zu leeren. (Mit [STRG] + [Shift] + [R] kannst du einen harten Reload der Seite durchführen.
Viel Erfolg!
@@coding-kurzundknapp Ich habe den Fehler gefunden🤣 ich habe vergessen .grid_container{} mit zu kopieren also @media( ...){ .grid_container{...} } Danke für die Antwort. Es sind doch meist nur die banalen Fehler wo man schlicht und ergreifend was vergessen hat 👍😁
Hey, erstmal vielen Dank für das starke Tut! Hilft mir sehr!
Ein Problem habe ich aber --> die gap Funktion will bei mir nicht funktionieren. Weder bei der Navigation noch zwischen den divs im Header. Ich bin alles mehrmals durchgegangen, fine aber den Fehler nicht. Ist 'ne Ferndiagnose möglich?
Besten Dank!
p.s.: Der Abstand in der Navigation bleibt zwischen den einzelnen Rubriken sehr dicht und der Abstand nimmt nicht zu - egal welchen Abstand ich in die gap Funktion eintrage
Hi, gap ist eine Eigenschaft, die nur bei Elementen mit display: flex; oder display: grid; funktioniert. Hast du evt. auf Flexbox verzichtet, als du den Webseitenabschnitt gemacht hast? Außerdem könntest du überprüfen, ob sich eventuell ein HTML Element dazwischen befindet... Die gap Eigenschaft wirkt sich nämlich nur auf DIREKTE Kindelemente aus (und nicht auf alle Nachfahren). Wenn nichts von dem der Fall ist, könntest du auch den Abstand mit der margin Eigenschaft bestimmen.
Liebe Grüße,
Fabian von Coding - kurz und knapp
@@coding-kurzundknapp Vielen Dank für die schnelle Antwort. Also ich hab' das Problem leider noch nicht gelöst - habe sogar den kompletten Code nochmal nachgebaut und bin genau am selben Punkt wie beim ersten Versuch. Also die Funktion Flexbox habe ich gesetzt, und html code ist auch keiner dazwischen. Eine Frage noch? Wenn ich die Größe vom Browser verkleinere, verzerrt sich auch das Kreis mit dem Bild. Vom perfekten Kreis zur ovalen Ellipse. Hängt das evtl zusammen? ..sorry harte Anfängerfragen aber man muss ja Iwo anfangen :)
Danke
UPDATE: Ich habe einfach mal GoogleChrome anstatt Safari benutzt UND ES FUNKTIONIERT ! Also scheinbar abhängig vom Browser und der Fehler lag nicht bei mir :) Seltsame Kiste..egal..Danke nochmal für das tut!
wie lernt man bitte, welche Farbpaletten miteinander harmonieren bezüglich einer Homepage? Im jeden Tutorial was ich mir ansehe, sind die Farben perfekt abgestimmt. Überschrift, Text, Logo, Light what ever. etc etc.
Die gleiche Frage stelle ich mir auch bei den ganzen Abständen, Ränder, Text, Größe. Als Anfänger hängt man sich da total auf und kommt einfach nicht weiter :( wie/ wo lerne ich sowas? Das ist ja eigentlich neben das Programmieren selbst das a und o einer Website.
Vielen Dank, super Video - was aber bei mir viele Fragen aufwirft.
Sehr gute Frage. Das mit den Farbpaletten, Abständen, etc. ist eine Sache für man über die Zeit ein gutes Verständnis bekommt. Da gilt einfach: viel ausprobieren und schauen was gut aussieht. Wenn du in einem Team arbeitest ist es auch immer gut einen UI/UX-Designer zu haben, der sich damit auskennt. Diese Person wird dann in Adobe oder Figma einen reinen Design-Prototypen erstellen, den du als Web-Entwickler dann einfach nachbauen kannst. Generell ist es auch immer gut, bereits im Vorhinein mit einem Design-Programm wie AdobeXD ein fertiges Design zu erstellen, da es ja in CSS viel länger brauchen wird, Veränderungen vorzunehmen. Generell gibt es überall im Internet Design-Konzepte, die du dir abschauen kannst und für Farbpaletten empfehlen sich Webseiten wie Color Hunt, bei denen du harmonierende Farbpaletten findest. Bei margin und padding ist der genaue Wert nicht so wichtig, solange du durch das ganze Projekt hindurch dieselben Werte benutzt, damit es einheitlich bleibt. Ansonsten ist eine gute Faustregel: Der margin (oder gap) zu fremden Elementen sollte größer sein als das padding zum eigenen Element. Und das padding sollte größer sein als die Schriftgröße, um genügend freien Platz zu haben. Der Rest ist Geschmackssache. Hoffe, dass dir das weiterhilft.
Grüße
Super Video und Tutorial zu diesem Thema...erstmal danke dafür!
Das einzige Problem das bei mir auftaucht ist: Wenn ich beim header.css den #toggle_button { display: (auf) none; } stelle und das dann auf Smartphone-Grösse im Inspector anschaue, verschwindet er komplett. Wenn ich den Befehl wieder lösche, dann erscheint er wieder. Kann mir jemand bei diesem Problem helfen? Danke
Hab den Fehler gefunden und wieder was dazu gelernt! 😁
Sehr gut 👍
bei mir hat es mit dem css nicht funktioniert woran kann das liegen ?
Wir sind keine Hellseher
Ok ein Problem, ich kriege mein Bild nicht in den Kreis rein, ich habe alles richtig geschrieben, doch es funktioniert nicht, bitte um schnelle Hilfe
Es wird auch überhaupt kein Kreis, egal was ich mache
Alles gut, Problem hat sich gelöst. Ich habe einen frühen Fehler gemacht, es geht alles super! Danke für das Tolle Tutorial
Colör😂
Bro du musst doch erklären wieso weshalb warum und nicht einfach vorprogrammierten
Danke für dein Feedback. Wir mussten uns in diesem Video etwas kürzer fassen, weil das Projekt im Video schon sehr viel Zeit in Anspruch genommen hat. Mit genaueren Erklärungen wäre das Video deutlich länger. Daher haben wir an einigen Stellen auf andere Videos von uns verwiesen. Da gibt es dann auch präzisere Erklärungen. (Z.B. für Grid, Flexbox, Pseudoklassen und Transitions)
Kannst Du uns bitte den Code zur Verfügung stellen (vielleicht in github). Danke!
Hallo super Tutorial! Nur eine Frage: Sind die Codes validiert? Der Validator zeigt mir immer Fehler an wie beispielsweise beim :root { primary-color: #1e1e1e;
secondary-color: #450a02;
light-secondary-color: #5e0c01;
text-color: white;
secondary-text-color: #edd7c7;
}
Danke im Voraus.
Liebe Community, bei mir werden die setting welche unter general.setting.css eingefügt wurden, nicht übernommen. Weiss jemand an was das liegen könnte ?
Vermutlich ist beim Einbinden der CSS Datei in den HTML head etwas schief gelaufen. Stimmt der Wert im href Attribut des Link Tags 100% mit dem Dateinamen der CSS Datei überein?
@@coding-kurzundknapp Danke für die Antwort, genau das war der Fehler! Super Video!!