Wo finde ich Übungsaufgaben zu CSS?

[Martina]

Hallo zusammen,

kann mir jemand sagen wo ich Übungsaufgaben zum Thema CSS finde? Ich soll meinen Kollegen CSS beibringen und dafür bräuchte ich auch einige Übungsaufgaben die einigermaßen anspruchsvoll sind.

Ich könnte mir da natürlich auch was überlegen aber ich bin da leider nicht so kreativ. Außerdem ist die Zeit etwas knapp.

Ich stelle mir das Themenbezogen vor. z.B. zum Thema Kaskade oder zum Thema Selektoren, Schriftformatierung...usw.

Falls jemand zufällig so was kennt würde ich mich freuen wenn er/sie mir weiterhelfen könnte.

Verbindlichtsen Dank im Voraus

Gruss
Martina K.

[Mastershrimp]

Heyho!

Ich könnte mir da natürlich auch was überlegen aber ich bin da leider nicht so kreativ. Außerdem ist die Zeit etwas knapp.

Sowas geht doch in 5 Minuten!
Blätter einfach mal durch selfhtml und pick ab und zu ein paar Begriffe heraus, nach denen du fragst oder die deine Leute anwenden sollen.

Bsp.: Was macht man mit background-color? Geben Sie mindestens 3 Anwendungsbeispiele an.

Oder: Was passiert hier: <span style="font-size:10pt; color:#000000">Test</span>?

Oder: Erstellen Sie einen großen, roten, kursiven Text in der Schrift-Art "Times New Roman".

Also ehrlich: sowas denkt man sich besser selber aus. Du kannst aber mal in Google schauen. Vielleicht gibts da was.

Gruß

Mastershrimp

[Bernd]

Hallo,
wie wärs mit den guten alten Karteikarten. Einfach font-size: Wert; Einheiten... auf die eine Seite und Schriftgröße auf die andere. Wenn mach die Karten einmal kann, könnte man an Beispiele gehen.

mfg Bernd

[Cheatah]

Hi,

kann mir jemand sagen wo ich Übungsaufgaben zum Thema CSS finde?

http://www.csszengarden.com/ :-)

Ich soll meinen Kollegen CSS beibringen und dafür bräuchte ich auch einige Übungsaufgaben die einigermaßen anspruchsvoll sind.

Nimm Dir am besten Elemente der Site Deines Arbeitgebers vor und lasse sie mit semantischem Markup (evtl. von Dir vorgegeben) und CSS neu gestalten. Praxisbezug schafft immer einen guten Zugang.

Ich stelle mir das Themenbezogen vor. z.B. zum Thema Kaskade oder zum Thema Selektoren, Schriftformatierung...usw.

Die Kaskade kann man IMHO schwer üben[1], da helfen ein paar Grundsätze vielleicht eher (nach dem Motto "beginne einen Selektor immer mit einer ID" oder so), und Selektoren sind eigentlich immer dabei (sprich: beginne strukturell einfach). Positionierung ist ein riesiges Thema, die meisten anderen kann man beinahe schon versteckt üben (ich habe in meiner letzten Schulung z.B. die Grundsätze des Box-Models in der ersten Übung zum Floating untergebracht).

Falls jemand zufällig so was kennt würde ich mich freuen wenn er/sie mir weiterhelfen könnte.

Sorry, ich hab's immer selbst gebaut.

Cheatah

[1] Naja, die Spezifität schon. Gib 'ne Handvoll Regeln mit unterschiedlichen Selektoren und widersprüchlichen Deklarationen an, die die selben Elemente betreffen, und frage, welche Eigenschaften dort gelten. Denk auch an widersprüchliche Angaben in der _selben_ Regel, hier eignet sich z.B. border sehr gut, aber auch das Thema Hacks.

[Martina]

Hi Cheatah, danke für die Antwort

Nimm Dir am besten Elemente der Site Deines Arbeitgebers vor und lasse sie mit semantischem Markup (evtl. von Dir vorgegeben) und CSS neu gestalten. Praxisbezug schafft immer einen guten Zugang.

das wird wohl zu umfangreich werden, höchstens als abschließende Übung, wenn den Teilnehmern schon alles bekannt ist. Dann kann man die Seite vielleicht Schritt für Schritt mal mit CSS umsetzen.

[1] Naja, die Spezifität schon. Gib 'ne Handvoll Regeln mit unterschiedlichen Selektoren und widersprüchlichen Deklarationen an, die die selben Elemente betreffen, und frage, welche Eigenschaften dort gelten. Denk auch an widersprüchliche Angaben in der _selben_ Regel, hier eignet sich z.B. border sehr gut, aber auch das Thema Hacks.

»»
genau so hatte ich mir das vorgestellt. Ich gebe einfach mehrere Regeln zu einem HTML-Element an (z.B. mal externes Stylsheet, dann im HTML-Dokument selbst u.s.w.) und dann sollen die mir sagen welche Farbe die Schrift dann z.B. haben wird.

Die Kaskade kann man IMHO schwer üben[1], da helfen ein paar Grundsätze vielleicht eher (nach dem Motto "beginne einen Selektor immer mit einer ID" oder so), und Selektoren sind eigentlich immer dabei (sprich: beginne strukturell einfach).

»»
was meinst Du mit "beginne strukturell einfach?

»»
 Positionierung ist ein riesiges Thema

sehe ich genau so.

Sollte für jeden Bereich im CSS Übungen mit einbauen?
z.B. jeweils für die Bereiche: Schrift, Rahmen, Abstände, Listen, Farben u.s.w? Vielleicht wird das zu langweilig wenn ich denen ne Aufgabe gebe: "Erstellen Sie eine 500px breite Box mit einem roten Rahmen. Die Box soll einen Abstand von 30px vom linken Browserrand haben."

Gruss
MK

[Cheatah]

Hi,

Nimm Dir am besten Elemente der Site Deines Arbeitgebers vor [...]
das wird wohl zu umfangreich werden,

mit "Elemente" meinte ich "Stücke" :-) also z.B. die Navigation. Eine ganze Seite ist wirklich 'ne Menge - ich habe daraus eine eigenständige Übung gemacht.

[1] Naja, die Spezifität schon. [...]
genau so hatte ich mir das vorgestellt. Ich gebe einfach mehrere Regeln zu einem HTML-Element an (z.B. mal externes Stylsheet, dann im HTML-Dokument selbst u.s.w.) und dann sollen die mir sagen welche Farbe die Schrift dann z.B. haben wird.

Ja. Witzig ist es auch, etwas in folgender Richtung zu machen:

... {
    color: yellow;
    color: gold;
    border-color: red;
    border: 1px solid;
}

und die Leute dann raten zu lassen, welche Farbe der Text in welchem Browser hat, und wie die Rahmenfarbe ist.

was meinst Du mit "beginne strukturell einfach?

Arbeite in den ersten Übungen mit sehr simplen HTML-Codes.

Sollte für jeden Bereich im CSS Übungen mit einbauen?

Abwechslung tut gut, falls Du das meintest.

z.B. jeweils für die Bereiche: Schrift, Rahmen, Abstände, Listen, Farben u.s.w? Vielleicht wird das zu langweilig wenn ich denen ne Aufgabe gebe: "Erstellen Sie eine 500px breite Box mit einem roten Rahmen. Die Box soll einen Abstand von 30px vom linken Browserrand haben."

Ja, deswegen meinte ich auch, Du solltest die einfacheren Dinge in den schwierigen mit verpacken. Zum Thema Floating habe ich meinen Leuten beispielsweise ein HTML-Dokument mit fünf <div>s in einem weiteren <div> gegeben, welchem ich schon eine Größe und einen Rahmen gegeben habe, und ihnen dann das Ziel an die Wand projeziert, welches Farben, Rahmen etc. hatte.

Cheatah

[Martina]

Nachtrag zu meiner vorigen Nachricht: wo gibt es denn Übungsaufgaben bei http://www.csszengarden.com/?

Gruss
mk

[Cheatah]

Hi,

Nachtrag zu meiner vorigen Nachricht: wo gibt es denn Übungsaufgaben bei http://www.csszengarden.com/?

der CSS-Zengarden _ist_ die Übungsaufgabe ;-)

Cheatah

[Danny]

Hi,

fast noch wichtiger als Übungsaufgaben ist das Bewußtsein für HTML / CSS. Versuche zu vermitteln, dass man mit HTML idealerweise nur die logische Struktur abbildet und das Layout mit CSS...

freundlichen Gruß
Danny