Webdesign Grundkurs – HTML & CSS

Neues Webdesign-Seminar im Oktober 2019 in der VHS Reutlingen

Grundlagen der Webseitenerstellung

In diesem Webdesign Grundkurs erlernen Sie alle notwendigen Kenntnisse zum Erstellen Ihrer ersten Webseite. Die Sprachen HTML und CSS bilden dafür die Basis.
Nützliche Programme, die das Erstellen Ihrer Homepage erleichtern, werden vorgestellt.

Vorkenntnisse: Sicherer Umgang mit dem PC, Windows und Internet

3 Abende, 08.10.2019 – 22.10.2019
Dienstag, wöchentlich, 18:15 – 21:30 Uhr, 15 Min. Pause
3 Termin(e)
Achim Siegmund
Dv4418
Haus der Volkshochschule, Spendhausstraße 6, 72764 Reutlingen, Raum: 212, DV, 2. OG
99,00 €
Fachkursförderung: ja (mehr Infos hier)

Anmeldung auf den Seiten der VHS Reutlingen:

https://www.vhsrt.de/Veranstaltung/cmx5cc0480d87e85.html

Responsive embed Youtube Video

Da sich Youtube-Videos am einfachsten per iframe einbetten lassen, ist die responsive gestaltete Website schnell gar nicht mehr so richtig responsive. Dieses Problem läßt sich durch einen CSS-gestylten Container beseitigen. Dazu wrappt man das iframe-Element mit einem div-Container folgendermaßen:

<div class="video-container-name">.....</div>

und stylt den Container mit folgenden CSS-Anweisungen:


.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das Ergebnis könnt Ihr hier ausprobieren (einfach das Browserfenster verkleinern):

Sass – dynamische Erzeugung von CSS

Webdesigner werden in letzter Zeit immer öfter mit den Begriffen Sass, Less und Stylus konfrontiert. Bisher habe ich mich noch nicht eingehender mit diesen Style-Sheet Sprachen beschäftigt. Das könnte sich ändern, denn im nachfolgenden Video wird auf einfache Weise erklärt, was es z.B. mit Sass auf sich hat und wie es sinnvoll eingesetzt werden kann.

Weiter Infos zu Sass:
http://sass-lang.com/
http://de.wikipedia.org/wiki/Sass_(Stylesheet-Sprache)