HTML und CSS ler­nen

SCREENGUIDE - - Inneres - TEXT: Jens Grocht­dreis

Ein Über­blick über On­li­ne-Kur­se und Tu­to­ri­als

Front­end­ent­wick­lung ist kom­plex und viel­schich­tig. Egal, ob Sie sich neu mit der Ma­te­rie be­schäf­ti­gen oder ein al­ter Ha­se sind: Es gibt im­mer wie­der Mög­lich­kei­ten, Neu­es zu ler­nen und Wis­sen zu ver­tie­fen. Glück­li­cher­wei­se fin­den Sie im Netz un­zäh­li­ge Quel­len, um sich fort­zu­bil­den. Im In­ter­net tum­meln sich je­de Men­ge Tu­to­ri­als, die Ih­nen HTML und CSS ver­mit­teln wol­len. Ge­ra­de An­fän­gern fällt es schwer, pas­sen­de Kur­se zu fin­den. Hier fin­den Sie ei­ne Aus­wahl an in­ter­es­san­tem Ma­te­ri­al.

WEB­DE­SIGN IN 4 MINUTES

In dem Kurs „Web­de­sign in 4 minutes” ent­wi­ckelt sich ei­ne Web­sei­te mit In­halt und Gestal­tung durch die In­ter­ak­ti­on mit dem Nut­zer [goo.gl/YtLhVg]. Der Le­ser klickt auf ei­nen Link am En­de des bis­her Ge­le­se­nen, und schon ver­än­dert sich die Sei­te. Auf die­se Wei­se ler­nen Sie spie­le­risch und an­ge­nehm, mit HTML und CSS um­zu­ge­hen. Tief­gang dür­fen Sie hier zwar nicht er­war­ten, aber durch­aus das wich­tigs­te Rüst­zeug. Und es ist zu­dem ein Er­leb­nis, ei­ne Web­sei­te Stück für Stück wach­sen und sich ve­rän­dern zu se­hen (Abb. 1 und 2). Das Tol­le an der Ver­mitt­lungs­me­tho­de ist, dass der Nut­zer sieht, wie sich die Web­sei­te mit ih­rem In­halt lang­sam ent­wi­ckelt. Hier ist nicht erst die Gestal­tung da und der In­halt wird in sie hin­ein­ge­presst. Bei die­sem Tu­to­ri­al exis­tiert erst der In­halt, und die­ser wird dann ge­stal­tet. So wie es sein soll­te.

HTML & CSS IS HARD

„HTML & CSS is hard (but it doe­sn’t ha­ve to be)” ist ein viel­ver­spre­chen­der Ti­tel [goo.gl/wNTX9e]. In ei­nem sehr schö­nen, luf­ti­gen De­sign ste­cken kom­pak­te In­for­ma­tio­nen (Abb. 3). Die in­halt­li­che Fül­le ist ge­lun­gen. Ne­ben den Grund­la­gen von HTML und CSS ler­nen Sie et­was über Flex­box, Re­s­pon­sive Web­de­sign, Re­s­pon­sive Images, For­mu­la­re und Web-Ty­po­gra­fie. Lei­der feh­len Aus­füh­run­gen zu Ta­bel­len. Die in­halt­li­che Struk­tur der Sei­te er­scheint nicht ganz lo­gisch. Schließ­lich wird se­man­ti­sches HTML erst am En­de, nach al­len De­sign-The­men, be­spro­chen. Am En­de je­des Ka­pi­tels ist ein Link zum nächs­ten Ka­pi­tel plat­ziert. Zum vor­he­ri­gen Ka­pi­tel ge­lan­gen Sie auf die­sem ein­fa­chen Weg al­ler­dings lei­der nicht. Denn es feh­len kon­zen­trier­te, wei­ter­füh­ren­de Links. In­ner­halb des Tex­tes wird le­dig­lich manch­mal zu MDN von Mo­zil­la ver­linkt. Der Ab­schnitt zu Floats ist sehr aus­führ­lich, mit vie­len Bei­spie­len. Für die Pra­xis sind die­se hilf­reich. Die Er­klä­rung der Spe­zi­fi­tät ist zwar um­fang­reich, aber nicht hun­dert­pro­zen­tig ge­glückt. Ein ech­tes Man­ko sind die klei­ne Schrift und der schlech­te Farb­kon­trast der Na­vi­ga­ti­on. So wird mit dem ei­ge­nen De­sign ge­zeigt, wie man das Ge­lern­te nicht an­wen­den soll­te.

LEARN TO CO­DE HTML & CSS

Shaye Ho­we hat mit „Learn to Co­de HTML & CSS” [goo.gl/b1YV6] und „Learn to Co­de Ad­van­ced HTML & CSS” [goo.gl/lsOoh] zwei um­fang­rei­che und schön ge­stal­te­te Sei­ten ins Netz ge­stellt (Abb. 4 und 5). Wa­ren sie an­fangs nur als Web­sei­ten er­reich­bar, so gibt es sie mitt­ler­wei­le auch als Buch. Ho­we er­klärt kon­zen­triert und knapp und er­gänzt sei­ne Aus­füh­run­gen mit sche­ma­ti­schen Bil­dern und De­mons­tra­tio­nen auf Co­depen. Selbst für ba­na­le Din­ge wie ei­nen Link gibt es ei­nen Pen. Wei­ter­füh­ren­de Links er­gän­zen die ei­ge­nen Aus­füh­run­gen. Die neu er­lern­ten In­for­ma­tio­nen flie­ßen ka­pi­tel­wei­se in den Auf­bau ei­ner Bei­spiel-Web­sei­te, die zum Down­load be­reit­steht. So kön­nen Sie das Ge­lern­te tes­ten und ver­tie­fen. Bei­de Web­sei­ten zu­sam­men er­ge­ben ein um­fang­rei­ches und gu­tes Ab­bild der Ar­beit im Front­end. Auch Re­s­pon­sive Web­de­sign, Mi­cro­da­ta und WAI-ARIA kom­men vor. Ja­vaS­cript wird nicht kom­plett igno­riert, steht aber nicht im Fo­kus der bei­den Tu­to­ri­als. Es gibt zu­min­dest Ka­pi­tel zu jQu­e­ry und zu Po­ly­fills. Das Ka­pi­tel zu Floats ist nicht über­mä­ßig aus­ge­ar­bei­tet, aber die wich­tigs­ten In­fos wer­den ge­ge­ben. Die Plat­zie­rung der Floats in­ner­halb ei­nes Ka­pi­tels über Po­si­tio­nie­rung ist ge­nau­so ir­ri­tie­rend wie die Ver­wen­dung ei­nes IE6-Hacks im Co­de für den clear­fix-Hack, der mitt­ler­wei­le ob­so­let sein soll­te.

MARKSHEET

Marksheet bie­tet reich­hal­ti­ge In­for­ma­tio­nen zu HTML und CSS so­wie ein­füh­ren­de In­for­ma­tio­nen zu Sass [marksheet.io]. Die Sei­te fällt durch star­ke Far­ben und ein sehr de­tail­rei­ches De­sign auf (Abb. 6). Re­s­pon­sive Web­de­sign kommt lei­der nur als ein Ab­schnitt im Be­reich CSS vor. Es wer­den wich­ti­ge Baustei­ne er­klärt, ei­ne um­fang­rei­che­re Ab­hand­lung wä­re al­ler­dings an­ge­mes­se­ner ge­we­sen. Se­man­tik wird er­wähnt, aber die Be­deu­tung wich­ti­ger Ele­men­te kommt la­pi­dar und am Rand der Un­kor­rekt­heit da­her. Es gibt aber ein se­pa­ra­tes Ka­pi­tel über die For­ma­tie­rung von HTML-Co­de zur bes­se­ren Les­bar­keit beim Co­den. Ein in­ter­es­san­tes The­ma für ei­ne HTML-Ein­füh­rung, die sonst nie­mand bie­tet. Kas­ka­de und Spe­zi­fi­tät, im­mer­hin Grund­pfei­ler von CSS, wer­den sehr knapp und nicht be­son­ders pfif­fig er­klärt. Das schaf­fen an­de­re hier vor­ge­stell­te Ein­füh­run­gen we­sent­lich bes­ser. Bei Floats wird das Clea­ring schlecht er­klärt, ein Hin­weis auf das Clear­fix und ähn­li­che Lö­sun­gen fehlt lei­der voll­stän­dig. Marksheet scheint be­son­ders gut ge­eig­net zu sein, ober­fläch­li­ches Wis­sen in ei­ner an­ge­nehm de­sign­ten Um­ge­bung zu er­wer­ben. Es ist aber von­nö­ten, min­des­tens ei­ne wei­te­re Ein­füh­rung zu le­sen. Vom Au­tor stam­men auch Re­fe­ren­zen für HTML [html­re­fe­rence.io] und CSS [css­re­fe­rence.io], die Ih­nen da­bei hel­fen kön­nen, das Ge­lern­te zu ver­tie­fen und zu fes­ti­gen. Sie sind schlicht ge­stal­tet und be­inhal­ten vie­le klei­ne, hilf­rei­che De­mos.

CSS-WIS­SEN VER­TIE­FEN

Nach­dem Sie HTML und CSS sys­te­ma­tisch er­lernt ha­ben, soll­ten Sie die Chan­ce wahr­neh­men, ei­ni­ge De­tails von CSS zu ver­tie­fen und die Spra­che zu er­kun­den. CSS-Tricks bie­tet dies für „54 Ei­gen­schaf­ten und Wer­te” [goo.gl/AKi­am4]. So er­fah­ren Sie et­was über die Ein­hei­ten all, vw und vmin so­wie über calc, box­de­co­ra­ti­on-break oder font-va­ri­ant. Es ist ei­ne bun­te Mi­schung. Die ein­zel­nen Ei­gen­schaf­ten und Wer­te wer­den kurz be­han­delt und an­hand von Co­depen de­mons­triert. So kön­nen Sie ein­fach und schnell sel­ber ex­pe­ri­men­tie­ren. Floats sind prin­zi­pi­ell ei­ne ein­fa­che Tech­nik, und doch be­rei­ten sie Webent­wick­lern im­mer wie­der Pro­ble­me. Bei CSS-Tricks gibt es ei­ne um­fang­rei­che Über­sichts­sei­te zu Floats: „All About Floats” [goo.gl/Yyuea8]. Las­sen Sie sich durch das Al­ter des Ar­ti­kels nicht täu­schen, denn die Tech­nik hat sich nicht ver­än­dert (Abb. 7). Es sind nur die Brow­ser aus­ge­stor­ben, die die meis­ten Ma­cken im Zu­sam­men­hang mit Floats hat­ten. Und ob­wohl wir heu­te mit Flex­box und so­gar schon mit Grids ar­bei­ten kön­nen, wer­den uns Floats si­cher noch ei­ne lan­ge Zeit be­glei­ten. Es scha­det nicht, sich mit ih­nen aus­zu­ken­nen. Guy Rout­ledge hat sei­ne vor Jah­ren be­gon­ne­ne Se­rie mit klei­nen Vi­deo­tu­to­ri­als zu CSS-Ei­gen­schaf­ten über­ar­bei­tet und er­wei­tert. Sie hat jetzt ei­ne neue Hei­mat beim aus­tra­li­schen Pu­blis­her Site­point ge­fun­den [goo.gl/K1o­z9r]. In kur­zen Ar­ti­keln und Vi­deo­tu­to­ri­als er­klärt Rout­ledge den z-in­dex, ver­ti­ka­les Zen­trie­ren von Icons, trans­for­miert Ob­jek­te mit „ro­ta­teY” und vie­les mehr (Abb. 8). Es gibt Tu­to­ri­als, die sich an Ein­stei­ger rich­ten. Ei­ni­ge sind aber auch für Fort­ge­schrit­te­ne und Pro­fis ein Ge­winn. Die Vi­de­os sind al­le­samt auch tran­skri­biert, so­dass Sie le­send den In­halt über­flie­gen und ein­schät­zen kön­nen.

EIN­FÜH­RUN­GEN IN FLEX­BOX

Es gibt zahl­rei­che Ein­füh­run­gen zu Flex­box. Au­ßer­dem noch Cheat­s­heets und Test­tools. Ei­ne der vie­len Ein­füh­run­gen wur­de auf der Platt­form Me­di­um ver­öf­fent­licht [goo.gl/OsViJ7]. Sie kön­nen den Text mit sei­nen vie­len Dia­gram­men auch als PDF her­un­ter­la­den. Al­le Ei­gen­schaf­ten und die Tech­nik selbst wer­den gut und knapp er­klärt. Lei­der feh­len ein­ge­bet­te­te Co­de­bei­spie­le, die sel­ber ma­ni­pu­liert wer­den kön­nen, wie bei Co­depen. Wenn Sie lie­ber an­hand von Vi­deo­tu­to­ri­als ler­nen, schau­en Sie sich am bes­ten „What the Flex­box” von Wes Bos an [flex­box.io]. Der Ka­na­di­er prä­sen­tiert das The­ma di­dak­tisch sehr gut auf­be­rei­tet in klei­nen Häpp­chen. Der Zu­gang zu den Vi­de­os er­for­dert ei­ne kos­ten­lo­se Re­gis­tie­rung, die aber kei­ne Unan­nehm­lich­kei­ten wie ei­nen News­let­ter nach sich zieht (Abb. 9).

SPIE­LE­RISCH LER­NEN

Prä­fe­rie­ren Sie den spie­le­ri­schen Zu­gang zum Er­ler­nen von Neu­em? Dann ist „CSS Di­ner” das Rich­ti­ge, um die Grund­la­gen des Se­lek­tie­rens mit CSS zu er­ler­nen [flukeout.github.io]. Sie müs­sen da­bei in ei­nem Fens­ter Co­de edi­tie­ren, da­mit die Tel­ler und Tas­sen auf ei­nem klei­nen Tisch kor­rekt se­lek­tiert wer­den (Abb. 10). Sie kön­nen über das Me­nü in der rech­ten obe­ren Ecke di­rekt zu ein­zel­nen Ka­pi­teln sprin­gen. Für den spie­le­ri­schen Zu­gang zu Flex­box gibt es „Flex­box Frog­gy” [flex­box­frog­gy.com]. Hier müs­sen Sie Frö­sche über 24 Le­vel in der ge­wünsch­ten Form ar­ran­gie­ren (Abb. 11). Da­bei ler­nen Sie al­le nö­ti­gen Flex­box-Ei­gen­schaf­ten von ju­s­ti­fy-con­tent über or­der hin zu flex-wrap ken­nen. Die Idee gleicht dem CSS Di­ner. Der Er­schaf­fer von Flex­box Frog­gy nahm sich auch der neu­es­ten Lay­out­me­tho­de, der CSS Grids, an (Abb. 12): Im „Grid Gar­den” müs­sen Sie Ka­rot­ten mit Was­ser ver­sor­gen und Un­kraut ver­nich­ten [css­grid­gar­den.com]. Dies­mal kommt da­für die Syn­tax der CSS Grids zum Ein­satz, ver­teilt auf 28 Le­vel.

GRID-EIN­FÜH­RUNG VON CO­DROPS

CSS-Grids sind ei­ne sehr neue Spe­zi­fi­ka­ti­on, mit der Web­wor­ker end­lich ein rich­ti­ges Lay­out­mo­dul in­ner­halb von CSS be­sit­zen. Al­le ak­tu­el­len Brow­ser un­ter­stüt­zen die­se Tech­nik. Al­ler­dings müs­sen Sie für den In­ter­net Ex­plo­rer 11 und Edge ei­ne äl­te­re Ver­si­on der Spe­zi­fi­ka­ti­on samt Pre­fix nut­zen. Mi­cro­soft ar­bei­tet be­reits dar­an, Edge auf die neue Syn­tax an­zu­pas­sen. Es gibt fast täg­lich neue Ar­ti­kel und De­mos zum The­ma. Ei­ne aus­führ­li­che und gut ge­mach­te Er­klä­rung von CSS-Grids bie­tet Co­drops [goo.gl/a62LEJ]. Am En­de der sehr lan­gen Sei­te gibt es auch wei­ter­füh­ren­de Links. Die Er­läu­te­run­gen wer­den von Co­de­bei­spie­len be­glei­tet, die Co­depen-ähn­lich prä­sen­tiert wer­den (Abb. 13). Die­se Bei­spie­le sind auch edi­tier­bar, so­dass Sie selbst recht ein­fach ex­pe­ri­men­tie­ren kön­nen.

JA­VAS­CRIPT-WIS­SEN VER­TIE­FEN

Auch zu Ja­vaS­cript gibt es Vi­deo­tu­to­ri­als von Wes Bos. Der Ka­na­di­er ist auf die­se Form der Wis­sens­ver­mitt­lung spe­zia­li­siert. Vie­le sind kos­ten­pflich­tig. Sei­ne 30 Tu­to­ri­als mit klei­nen Ja­vaS­cript-Pro­jek­ten hin­ge­gen sind kos­ten­los [ja­va­script30.com]. Sie er­for­dern auch hier ei­ne Re­gis­trie­rung. Oh­ne den Rück­griff auf Frame­works oder Bi­blio­the­ken de­mons­triert Bos z.B. die Er­stel­lung ei­ner Uhr, pro­gram­miert ei­nen klei­nen Sound­ge­ne­ra­tor oder spielt mit der Web­cam her­um. Um die­se Web­sei­te hat sich ei­ne klei­ne Com­mu­ni­ty ge­bil­det, die die ei­ge­nen Er­geb­nis­se teilt.

FA­ZIT

Die hier vor­ge­stell­ten Ein­füh­run­gen in HTML und CSS ha­ben al­le un­ter­schied­li­che Stär­ken und Schwä­chen. Ihr di­dak­ti­scher Auf­bau ist sehr in­di­vi­du­ell. Des­halb lohnt es sich, aus al­len die be­nö­tig­ten In­for­ma­tio­nen her­aus­zu­zie­hen. Je­der Kurs bie­tet in­ter­es­san­te Fa­cet­ten. Für An­fän­ger emp­feh­le ich „Learn to Co­de HTML & CSS” so­wie des­sen Nach­fol­ge­pro­jekt. Pro­fis soll­ten sich die Vi­de­os von Wes Bos an­schau­en.

Abb. 3: Mit auf­ge­räum­ter Op­tik prä­sen­tiert sich „HTML & CSS is hard”.

Abb. 2: Er­klä­ren­der Text und CSS wur­den im drit­ten Schritt er­gänzt.

Abb. 4: Al­le wich­ti­gen The­men gibt es bei „Learn to Co­de HTML & CSS” für den ers­ten Ein­blick.

Abb. 5: Die In­hal­te von „Learn to Co­de HTML & CSS” wer­den auf­ge­räumt prä­sen­tiert.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.