Responsive Portfolio Webseite mit HTML und CSS erstellen | Anfänger Tutorial Deutsch

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 ธ.ค. 2024

ความคิดเห็น • 108

  • @coding-kurzundknapp
    @coding-kurzundknapp  10 หลายเดือนก่อน

    Hi, den Source Code gibt es ab jetzt auf unserer Webseite:
    👉 coding-kurzundknapp.com

  • @KhawaschArsna
    @KhawaschArsna 28 วันที่ผ่านมา

    Habs noch nicht ganz durch, aber bisher das beste Tutorial, was ich gesehen habe ! Danke.

  • @StixxLetsPlay
    @StixxLetsPlay 2 ปีที่แล้ว +14

    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!

  • @siegfriedhaack517
    @siegfriedhaack517 10 หลายเดือนก่อน

    Endlich mal ein hilfreiches Video was man auch etwas angepasst für eine eigene Webseite verwenden kann .

  • @kallyptrav4425
    @kallyptrav4425 ปีที่แล้ว +2

    🥵 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 💪

  • @cfo3049
    @cfo3049 2 ปีที่แล้ว +5

    Vielen Dank für dieses Tutorial.🙏 Es ist Gold wert und erspart eine Menge an Recherche.

  • @ReneSobeckMedia
    @ReneSobeckMedia 2 ปีที่แล้ว +2

    booo, nice! endlich ne ordentlichen channel gefunden!
    weiter so!

  • @IT-Johnny
    @IT-Johnny 6 หลายเดือนก่อน

    Lesezeichen für mich selber:
    Navigation beginnt bei: 17:15
    LG cooles Video :)

  • @Taruil
    @Taruil 2 ปีที่แล้ว +4

    Da hab ich auch grad Bock, Visual Code anzuschmeißen und es dir nachzumachen :). Schönes Tutorial.

  • @ch_ruda
    @ch_ruda ปีที่แล้ว +1

    ich bin platt. Sehr gutes Tutorial, trotz das man den Speed in TH-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!!!

  • @stikorino
    @stikorino ปีที่แล้ว +2

    absoluter Wahnsinn! Vielen Dank!

  • @phoenixoncode6547
    @phoenixoncode6547 ปีที่แล้ว

    Ich glaube ich habe in der Stunde mehr gelernt und verstanden wie in den letzten 2 Monaten :D jetzt heißt es Ausprobieren :)

  • @hey_Quandale_Dingle_here
    @hey_Quandale_Dingle_here ปีที่แล้ว

    Wusste nicht dass du so am chillen bist

  • @einfach_paddi
    @einfach_paddi 2 ปีที่แล้ว +6

    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.

  • @aboutanonym2201
    @aboutanonym2201 2 ปีที่แล้ว +4

    Tolles Video, kann ich nur empfehlen. Mach weiter so! Kuss geht raus😘

  • @NeroBerg
    @NeroBerg ปีที่แล้ว +3

    Klasse Tutorial: gut und fundiert erklärt. Kann ich sehr gut für mein Projekt gebrauchen. Danke

  • @lw817
    @lw817 หลายเดือนก่อน +1

    Bei Minute 55:00 hat sich das Bild die h3 und der p text selbst angeordnet, bei mir stehen die einfach nebeneinander. Wie schaffe ich es, dass das Bild auf links und h3 und p untereinander rechts daneben stehen?
    PS: Super Video!!

  • @heikowuerfel
    @heikowuerfel ปีที่แล้ว

    So viel toller Inhalt zum Lehrnen Nice

  • @graeysheep
    @graeysheep 2 ปีที่แล้ว +2

    Richtig Geil, Danke dir

  • @ETCraft-x9n
    @ETCraft-x9n ปีที่แล้ว +1

    Sehr gutes Tutorial ❤

  • @guevenovic6351
    @guevenovic6351 2 ปีที่แล้ว +8

    echt nice erklärt, solltest Lehrer werden :D

    • @Massai07
      @Massai07 ปีที่แล้ว

      Besser TH-camr

  • @TobCraft
    @TobCraft 2 ปีที่แล้ว +1

    Seeehr cooles Design :D

  • @JoPuF
    @JoPuF ปีที่แล้ว

    Super Tutorial, merci. Muss man aber erst noch sacken lassen

  • @T4TTOoKing
    @T4TTOoKing ปีที่แล้ว

    Vielen Dank, richtig gut gemacht 👍🏻

  • @chrismaan1737
    @chrismaan1737 ปีที่แล้ว

    sehr gut verständliches Tutorial Danke dafür :)

  • @tolgawow6665
    @tolgawow6665 ปีที่แล้ว

    ganz stark :)

  • @j-race1885
    @j-race1885 ปีที่แล้ว

    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.

  • @marianblazo3976
    @marianblazo3976 ปีที่แล้ว

    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?

  • @psychedelic-chi
    @psychedelic-chi ปีที่แล้ว

    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!

    • @coding-kurzundknapp
      @coding-kurzundknapp  ปีที่แล้ว +1

      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.

  • @nummer2204
    @nummer2204 ปีที่แล้ว

    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

  • @tortugapeluga
    @tortugapeluga ปีที่แล้ว

    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?

    • @coding-kurzundknapp
      @coding-kurzundknapp  ปีที่แล้ว

      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 👌

  • @MR.GXMING
    @MR.GXMING 2 ปีที่แล้ว +3

    geiles video wird der code auch noch veröffentlicht?

  • @x2ucasx939
    @x2ucasx939 ปีที่แล้ว

    Bro schreibe normale weise keine Kommentare aber das Video ist so gut danke dir

  • @rech4883
    @rech4883 2 ปีที่แล้ว +3

    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?

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว +2

      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 ;)

    • @rech4883
      @rech4883 2 ปีที่แล้ว

      ​@@coding-kurzundknapp Hi Mr. Coding👍 Gerade ausprobiert, funktioniert super! Vielen lieben Dank dir!👍👍👍

  • @lienesmum
    @lienesmum ปีที่แล้ว

    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"?

    • @aloblanko
      @aloblanko ปีที่แล้ว

      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 ?

    • @lienesmum
      @lienesmum ปีที่แล้ว

      @@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. 😅

    • @aloblanko
      @aloblanko ปีที่แล้ว

      @@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 😇

    • @aloblanko
      @aloblanko ปีที่แล้ว

      @@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

  • @coding-kurzundknapp
    @coding-kurzundknapp  ปีที่แล้ว

    Wem dieses Video vielleicht zu schnell oder kompliziert erscheint kann gerne eine einfachere Version (wo auch langsamer gesprochen wird 😉) ausprobieren.
    Hier der Link 👉th-cam.com/video/X9l2SooDlck/w-d-xo.html

  • @Andi-zs7no
    @Andi-zs7no 2 ปีที่แล้ว +2

    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?

  • @b0snaX
    @b0snaX ปีที่แล้ว

    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.

  • @frankklein1915
    @frankklein1915 11 หลายเดือนก่อน

    Hallo, bei mir wird der Lorem ipsum Text im nicht umgebrochen, woran kann das liegen?

    • @frankklein1915
      @frankklein1915 11 หลายเดือนก่อน

      OK - Hab's gefunden - bei Unterstrich im header.css vergessen........

  •  2 ปีที่แล้ว

    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.

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      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).

  • @MalcomJPrince
    @MalcomJPrince 2 ปีที่แล้ว +1

    Top danke

  • @fritzmorison2960
    @fritzmorison2960 ปีที่แล้ว

    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.

  • @Г1алг1аМага
    @Г1алг1аМага ปีที่แล้ว

    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

  • @emojiofficial9581
    @emojiofficial9581 ปีที่แล้ว

    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 😊

    • @Defzan
      @Defzan 11 หลายเดือนก่อน

      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.

  • @VirginiaWomitso
    @VirginiaWomitso ปีที่แล้ว

    ist das mit Frameworks gemacht?

  • @react673
    @react673 ปีที่แล้ว

    Irgendwie verschwindet mein Icon nicht, wenn ich auf der Pc ansicht bin.. Wie kann das sein?

  • @AnumalieFotografie
    @AnumalieFotografie 8 หลายเดือนก่อน

    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?

    • @coding-kurzundknapp
      @coding-kurzundknapp  8 หลายเดือนก่อน

      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?

  • @oelki9
    @oelki9 ปีที่แล้ว

    Sehr gut! Wäre es nicht besser mit rm anstatt mit px zu arbeiten?

    • @coding-kurzundknapp
      @coding-kurzundknapp  ปีที่แล้ว

      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. 👍

  • @ieonard2508
    @ieonard2508 10 หลายเดือนก่อน

    Trotz gleichem code ist bei mir beim Grid auf der rechten Seite ein zusätzlicher Rand. Weiß jemand, wie der weggeht?

    • @coding-kurzundknapp
      @coding-kurzundknapp  10 หลายเดือนก่อน

      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.

  • @NeoSmooth
    @NeoSmooth ปีที่แล้ว

    Ist dein gezeigter Code hier Urheberrechtlich geschützt oder kann man den für Profit Projekte übernehmen?

  • @skourer8107
    @skourer8107 ปีที่แล้ว

    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.

    • @coding-kurzundknapp
      @coding-kurzundknapp  ปีที่แล้ว

      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

  • @mietzi-mietz
    @mietzi-mietz ปีที่แล้ว

    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?

    • @coding-kurzundknapp
      @coding-kurzundknapp  ปีที่แล้ว

      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!

  • @kajita2048
    @kajita2048 ปีที่แล้ว +2

    Klasse Video, aber eeeetwas langsamer zu sprechen wäre nice, insbesondere da es ja nicht deine echte Stimme ist. KeinmescnsprichtsoimechtenLeben

  • @djordjevukolic6563
    @djordjevukolic6563 ปีที่แล้ว

    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

  • @user-pz8eu
    @user-pz8eu 2 ปีที่แล้ว

    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.

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      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.

    • @user-pz8eu
      @user-pz8eu 2 ปีที่แล้ว

      @@coding-kurzundknapp Danke dir! Funktioniert wunderbar und mach bitte weiter so!

    • @black_bat_depr
      @black_bat_depr 2 ปีที่แล้ว

      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?

  • @johannesdillmann5864
    @johannesdillmann5864 2 ปีที่แล้ว

    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!

    • @johannesdillmann5864
      @johannesdillmann5864 2 ปีที่แล้ว

      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

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      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

    • @johannesdillmann5864
      @johannesdillmann5864 2 ปีที่แล้ว

      @@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

    • @johannesdillmann5864
      @johannesdillmann5864 2 ปีที่แล้ว

      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!

  • @ebruoezkanli
    @ebruoezkanli ปีที่แล้ว

    bei mir hat es mit dem css nicht funktioniert woran kann das liegen ?

    • @Defzan
      @Defzan 11 หลายเดือนก่อน

      Wir sind keine Hellseher

  • @ogproductions9756
    @ogproductions9756 2 ปีที่แล้ว

    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

    • @ogproductions9756
      @ogproductions9756 2 ปีที่แล้ว

      Es wird auch überhaupt kein Kreis, egal was ich mache

    • @ogproductions9756
      @ogproductions9756 2 ปีที่แล้ว

      Alles gut, Problem hat sich gelöst. Ich habe einen frühen Fehler gemacht, es geht alles super! Danke für das Tolle Tutorial

  • @PCJJCP
    @PCJJCP 2 ปีที่แล้ว

    Danke :)

  • @VINOstarYT
    @VINOstarYT 2 ปีที่แล้ว

    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; )
    🤘🏼

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      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!

    • @VINOstarYT
      @VINOstarYT 2 ปีที่แล้ว

      @@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 👍😁

  • @noname-rj8li
    @noname-rj8li 2 ปีที่แล้ว

    top danke

  • @leyley3330
    @leyley3330 20 วันที่ผ่านมา

    Wie wären die Media-Queries mit anderen Grössen?

    • @leyley3330
      @leyley3330 19 วันที่ผ่านมา

      Also im Header z.B.

  • @filzlii
    @filzlii 2 ปีที่แล้ว

    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

    • @filzlii
      @filzlii 2 ปีที่แล้ว

      Hab den Fehler gefunden und wieder was dazu gelernt! 😁

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      Sehr gut 👍

  • @stroboduese
    @stroboduese ปีที่แล้ว

    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.

  • @Torge_hmb
    @Torge_hmb 2 ปีที่แล้ว +1

    Bro du musst doch erklären wieso weshalb warum und nicht einfach vorprogrammierten

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      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)

  • @puzzlingtuber645
    @puzzlingtuber645 ปีที่แล้ว

    Kannst Du uns bitte den Code zur Verfügung stellen (vielleicht in github). Danke!

  • @unleakedbeats1606
    @unleakedbeats1606 7 หลายเดือนก่อน

    Colör😂

  • @wernerbaewer9746
    @wernerbaewer9746 2 หลายเดือนก่อน

    kannste noch schneller reden? dann versteht man noch weniger ...

  • @vujosevicalexandra8300
    @vujosevicalexandra8300 2 ปีที่แล้ว

    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 ?

    • @coding-kurzundknapp
      @coding-kurzundknapp  2 ปีที่แล้ว

      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?

    • @vujosevicalexandra8300
      @vujosevicalexandra8300 2 ปีที่แล้ว

      @@coding-kurzundknapp Danke für die Antwort, genau das war der Fehler! Super Video!!