CSS-Design. Gibt es Tutorials?

Hallo 😇

Ich arbeite gerade an einer Webseite aus langweile und ich frage mich, wo ich das Designen beigebracht bekomme (hauptsächlich CSS).

Gibt es eine Seite/ Video, welches ihr weiterempfehlen könnt. 😊

Wäre dankbar

Irene 😁

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Webseite, CSS, Programmieren & Softwareentwicklung

04.09.2022, 10:23

Als Einstiegstutorial würde ich auf Media Event verweisen. Das komplette Inhaltsverzeichnis zur CSS-Sektion findest du am unteren Ende der Seite.

Eine komplette CSS-Referenz findest du auf MDN.

Auf W3Schools gibt es eine How To-Sektion, in der die Implementation einiger Anwendungsfälle (z.B. verschiedene Arten von Navigationsleisten, Modals oder Slider) präsentiert wird. Das kann ganz nützlich sein. Ebenso gibt es einige komponentenbasierte CSS-Frameworks (z.B. Bootstrap, Bulma, UIkit, ...), die bereits vorimplementierte Module mitliefern.

Wenn du tiefer in CSS eintauchen möchtest, schau auf CSS Tricks. Dort gibt es eine Vielzahl an Artikel, die sich mit verschiedenen CSS-Features oder spezifischen Anwendungsfällen in der Frontendentwicklung beschäftigen. Noch eine weitere nützliche Plattform, die bspw. bei der Optimierung der eigenen Seite helfen sollte, ist Google Web Fundamentals.

Die Konzeptionierung eines passenden Design ist allerdings nochmal ein ganz eigenes Thema für sich. CSS ist im Web nur eines der Werkzeuge für die technische Umsetzung.

Hierfür würde ich daher eher auf Bücher verweisen, wie:

Design Systems - Alla Kholmatova
Don't Make Me Think - Steve Krug
Rastersysteme für die visuelle Gestaltung - Josef Müller-Brockmann
Responsive Webdesign- Ethan Marcotte

Online kannst du auf folgenden Plattformen:

nach dem Stichwort Webdesign suchen.

Ein paar nützliche Learning Guides hat des Weiteren Envato in petto. Zum Beispiel:

Irene0014

Beitragsersteller

04.09.2022, 17:04

Dankeschön 🥰

schieberegler

03.09.2022, 22:51

n + 1 Tutorials und Videos.

Empfehlungen sind schwierig, da nur du deinen Wissensstand kennst.

Irene0014

Beitragsersteller

03.09.2022, 22:53

Ja der ist gerade so gut wie bei 0

Gegsoft

04.09.2022, 00:44

Es gibt das Standardwerk SelfHTML. Da gibt es ein Tutorial und bei W3C, der Website vom Erfinder von HTML gibt es auch ein Tutorial.

Das sind die kompetentesten CSS-Tutorials, die ich kenne. Es gibt aber noch mehr. Google einfach mal nach „css tutorial”, da findest Du viele.

regex9

04.09.2022, 10:34

Dein zweiter Link verweist ebenso auf SelfHTML, nicht zu einer Seite der W3C-Organisation. 😉 Die CSS-Referenzseite von Letzteren (mit Verweisen auf Einstiegstutorials, Spezifikationen, etc.) wäre hier.

Gegsoft

04.09.2022, 13:10

@regex9

Da habe ich wohl einen CopyPaste-Fehler gemacht. — Habe es jetzt korrigiert.

regex9

04.09.2022, 16:53

@Gegsoft

W3Schools ist keine Seite des W3C, sondern wurde von einem norwegischen Unternehmen (Refsnes Data) erstellt (in der Motivation, einfache Tutorials rund um die Webentwicklung anzubieten).

Ähnliche Beiträge

Wie macht man das?

Wenn ich eine Webseite mit Dunklem und Hellem design machen will, muss ich 2 CSS Dateien machen

...zum Beitrag

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zum Beitrag

Programmieren auf IPad?

Ich möchte mir bald ein IPad kaufen für die Schule. Jetzt frage ich mich ob ich damit auch programmieren kann. Ich habe auch einen Windows PC zuhause mit dem ich das mache aber so für unterwegs oder wenn die lehrer mich mal wieder mit ihrem Unterricht langweilen XD. Ich will übrigens Webseiten mit HTML,CSS und Javascript machen und eventuell auch noch C#

...zum Beitrag

CSS lädt bei XAMPP-Localhost-Webseite nicht?

Ich programmiere seit knapp einem Jahr mit XAMPP und hatte auch nie Probleme damit. Jedoch ist es seit einigen Tagen so, dass die die .css-Datei zwar in den Browser geladen wird, aber keine Änderungen an dem Design von der .php-Webseite vornimmt.

Ich habe schon Rechner-/Browserwechsel probiert, aber es will einfach nicht funktionieren.

Danke schon einmal im Voraus für die Antworten.

...zum Beitrag

css Rand entfernen

hey leute, ich beschäftige mich seit kurzem mit dem designen von webseiten und habe immer das problem dass ich wenn ich meine ganze seite mit css formatieren will so wie hier:

<body>
<div id="default">
<h1>Inhalt</h1>
</div>
</body>

dann bleibt immer ein weißer rand oben, unten, rechts und links von meinen in css definiertten hintergrundbild

bitte nicht die methode mit 'margin' vorschlagen die funktoniert nicht...

danke für hilfreiche antworten ;)

...zum Beitrag

Welche Programmiersprache lernen nach HTML & CSS?

Hallo,

ich kenne mich jetzt schon gut in HTML und in CSS aus.

Welche Programmiersprache sollte ich als Nächstes lernen. (Ich möchte Webseiten und Apps programmieren.)

Danke im Voraus

Ps.: Bitte dazuschreiben was die Programmiersprache macht/kann und wie man sie am besten lernt (zB. YT-Video/Webseite)

...zum Beitrag

Meine Html/Css Webseite sieht auf dem Handy anders aus als auf meinem PC?

Ich habe eine Webseite gecoded und diese dann per Netlify hochgeladen um u sehen wie es auf dem Handy ist. Da viel mir auf dass auf dem Handy sehr vieles anders ist. z.B. Lauft das Video wo ich in den Hintergrund gepackt habe nicht und man sieht nur standbild, die Schrift ist anders, die Blur filters werden nicht angezeigt. Kann mir da jemand helfen?

...zum Beitrag

Gute Webseiten oder PDF Docs, um PHP, Javascript, CSS und HTML zu lernen?

Video Tutorials beanspruchen viel Zeit. Deshalb bräuchte ich Webseiten oder PDF Docs für die oben genannten Programmier- und Skriptsprachen. Wichtig wäre, dass sie marktorientiert sind, also genau die Dinge zeigen, die man im realen IT Markt anwendet.

...zum Beitrag

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zum Beitrag

Wix verschiedene Webseiten Editor?

Hallo zusammen,

ich frage mich, ob es verschiedene Editoren für die Erstellung einer Webseite auf Wix gibt, da mein Editor anders aussieht als in vielen YT-Tutorials, gibt es da eine Art Premium Editor und eine Free Version. Es geht mir hauptsächlich um das rechte Bearbeitungspanel, das ich nicht finde. Folgendes fehlt bei mir:

Bei mir sieht das so aus:

Danke im Voraus

...zum Beitrag

Wieso wird CSS nicht übernommen?

Ich habe gerade ein Problem, das soo frustrierend ist. Ich bin HTML & CSS Anfänger und wollte eine Webseite aus einem Tutorial Video nachbauen. Die Inhalte und Struktur im HTML habe ich hinbekommen. Nun scheitere ich aber am CSS. (Browser Chrome) Für mich sieht alles richtig aus. CSS ist eigentlich eingebunden, aber die Eigenschaften werden nicht übernommen. Ich habe schon etliche Seiten durchforstet und keine Lösung hat funktioniert. (Cache leeren brachte nichts, Bei den anderen Browsern Firefox, Explorer und Safari besteht das gleiche Problem( ich habe auch keine Schusselfehler entdeckt). Die beiden Dateien liegen auch im selben Ordner. Liegt es vielleicht an meinem Laptop oder an den Browsern? Ich bin ratlos. Ich hoffe jemand kann mir irgendwie helfen.

Ich habe screenshots von der HTML-Datei und CSS-Datei beigefügt.

...zum Beitrag

HTML und CSS HILFEEE?

Hilfe!!! kann mir jemand der sich mit HTML auskennt erklären warum meine Webseite (wenn ich sie in einen verzippten Ordner speicher) nicht mehr so anggezeigt wird wie ich eigentlich will. Bilder sind alle verschwunden und CSS-Design wird nicht übernommen... ich brauche dringends hilfe!! :...(

Bild 1: eigentliche Webseite

Bild 2: eingezippte, gleiche Webseite

...zum Beitrag

CSS/ HTML Text ist unsichtbar?

Hallo,

ich bin gerade dabei, eine Webseite zu programmieren und bin dabei auf folgendes Problem gestoßen: Ich arbeite derzeit mit 2 Dateien, einer .html (Webseite) und einer .css(Design der Webseite) und auf einmal seh ich meinen Text nicht mehr. Ich habe ein paar Änderungen am Code getroffen und suche nun vergeblich nach dem Fehler. Hier ein Screenshot des Codes:

links HTML/ rechts CSS

Es wäre cool, wenn mir jemand helfen könnte.

Danke schonmal im Vorraus :D

...zum Beitrag

Politik Halbkreis selber erstellen? Welche(s) Programm(iersprache)?

Ich bin sehr Politik interessiert und vor allem Sitzverteilungen und Koalitionen interessieren mich.

Ich versuche seit Ewigkeiten immer wieder so einen Halbkreis zu machen - siehe Bild (hier Österreich als Bsp.)

Habe es schon mit HTML und CSS probiert, bin aber an der Form gescheitert und um das alles (Code und Webseite) zu verbinden.

Weiß da jemand mehr bzw. kann mir jemand helfen und mich glücklich machen?

egal ob YT Video, oder sonst was.

Danke schonmal im Voraus

...zum Beitrag