HTML und CSS3 üben?

5 Antworten

BetaOps
21.10.2019, 13:00

Als ich angefangen habe mit mit dem Web-programmieren auseinander zu setzen war ich etwas aufgeschmissen, da HTML und CSS nicht reicht um ein Projekt anzugehen

Die kostenlosen varianten im Internet sind nicht wirklich das richtige, zum "rein schnuppern" schon, aber es wird sehr viel ausgelassen und die zusammenhänge werden nicht deutlich, deshalb arbeite ich meistens mit Büchern oder (durch mein Grundwissen) mit Stackoverflow haha

Du musst JS können um im Frontend, auf dem Client, was gescheites basteln zu können
Am Backend, Server-seitig, solltest du PHP oder Node.js können

Die besten Bücher für Anfänger, finde ich, sind die vom Rheinwerk Verlag, die sind ausführlich und da du diese Frage gestellt hast vermute ich dass dein Buch dir nicht alles vermittelt hat was du wissen solltest (um auch eigenständig weiter zu arbeiten)
Woher ich das weiß:eigene Erfahrung
Programmierer94 
Fragesteller
 21.10.2019, 13:18

Danke,daran werde ich auch noch arbeiten, das steht vor mir🙂HTML und CSS3 sind nicht die einzigen Sprachen, die ich lerne/lernen möchte.

1
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, programmieren, CSS
22.10.2019, 02:28

An sich kannst du dir auch online Übungen suchen.

Ein paar Übungsaufgaben, die mir spontan einfallen (HTML + CSS gemischt):

  • Kreiere eine leere Webseite, bei der der Webbrowser im Tab Hallo Welt ausgibt.
  • Erstelle ein HTML-Dokument mit folgendem Text: Zwei Astronauten kauten und kauten während sie blaugrüne Mondsteine klaubten. Schau dir die Datei in der Windows 10 Preview an (HTML-Datei im Ordner selektieren und oben unter Ansicht die Option Vorschaufenster aktivieren). Der Text sollte genau so, wie vorgegeben aussehen.
  • Erstelle verschachtelte Listen (z.B. für eine Speisekarte, die in drei Gänge aufgeteilt ist und zu jeder Wahl die Zutaten angibt). Auf erster Ebene sollen die Auflistungen römisch nummeriert sein. Auf zweiter Ebene alphabetisch (Kleinbuchstaben) und in der untersten Ebene sollen quadratische Aufzählungszeichen verwendet werden.
  • Binde eine CSS-Datei in dein Dokument ein und ändere für das komplette Dokument die Schriftgröße auf 10px, die Schriftfarbe auf grün und zentriere jeglichen Text.
  • Bau dir die Tabelle nach, die du auf folgender Webseite sehen kannst. Unterteile die Tabelle folgend noch in Kopf, Körper und Fuß und fülle diese mit Inhalt.
  • Überlege / recherchiere, welche HTML-Elemente so infrage kommen könnten, um die Bücher einer Bibliothek aufzulisten. Jedes Buch hat einen Titel, ein Erscheinungsjahr und einen Autor.
  • Ermittle den Unterschied zwischen <b> und <strong>.
  • Ermittle den Unterschied zwischen span, div und article.
  • Suche dir eine kostenlos herunterladbare Schriftart (z.B. hier), binde sie in deine Seite ein und nutze sie für verschiedene Texte.
  • Schau dir einmal diese Bildersammlung an und recherchiere, wie man diese (Bild + Bildunterschrift) am besten mit HTML beschreiben könnte.
  • Füge Links auf einer Webseite ein, die auf andere Seiten verweisen. Besuchte Links sollen in oranger Schriftfarbe ausgegeben werden. Während des Klicks auf einen Link soll dessen Text in Großbuchstaben angezeigt werden.
  • Lege eine Seite mit Sprungmarken an. Sprungmarken sind Links, die auf andere Elemente einer Seite verweisen. Ein Beispiel (auch zum Nachmachen) kannst du auf Artikelseiten von Wikipedia finden (s. Links des Inhaltsverzeichnis).
  • Erstelle eine Webseite, mit verschiedenen Boxen. Jede Box soll andersfarbig sein - z.B. einfarbig oder mit einem Farbverlauf. Als Hintergrund wählst du irgendein Bild aus, welches sich selbst bei einer Dokumenthöhe von 3000px nicht wiederholt und zudem beim Scrollen seine Position nicht verändert.
  • Löse folgende Frage selbstständig.
  • Auf der Startseite von Wikipedia gibt es einzelne Teaser. Suche nach dem mit den meisten unterschiedlichen Formatierungen (kursive Texte, fette Texte, ...) und bau diesen selbst nach. Auf welche Seiten du die Links verweisen lässt, ist ziemlich egal und du musst auch keinesfalls alle Links einbinden. Es wäre aber schön, wenn du auch das Popup einblenden lassen würdest, wenn man sich mit der Maus auf einem Linktext befindet.
  • Erstelle ein Bestellformular (das Produkt könnte diverser Schmuck sein; Angaben: Name, Adresse, E-Mail, Geschlecht, Land (begrenze es auf eine Auswahl von 3-5 Ländern), Telefonnummer, Kommentar für individuelle Fragen und Wünsche). Das Formular sollte nach Möglichkeit die Angaben schon im Browser prüfen (ob Pflichtfelder ausgefüllt wurden, ob die gegebene E-Mail und die Telefonnummer valid sind).
  • Füge auf einer deiner Webseiten ein Video hinzu. Die Videodatei sollte auf deiner Festplatte liegen.
  • Versuche, eine Webseite wie Google oder gutefrage.net in eine Seite von dir einzubinden.
  • Versuche, ein PDF-Dokument in einer Seite von dir einzubinden.
  • Erstelle eine horizontale Navigation. Wie hier bei gutefrage.net sollte die Navigation mitlaufen, sobald man nach unten scrollt.
  • Bau eine neue horizontale Navigation. Wenn sich das Browserfenster in der Breite verkleinert, sollten die Navigationselemente bei ca. <=480px Breite vertikal aufgelistet werden. Bei <=800px soll die Hintergrundfarbe der Navigation ausgetauscht werden.
  • Erstelle eine dreispaltige Seite (so ähnlich wie auf https://www.nytimes.com/). Tabellen für die Umsetzung sind tabu. Schau, welche Lösungsoptionen es gibt.
  • Rotiere eine Box (mit Text) um 45°. Nach Laden der Farbe soll sie einmal kurz ihre Farbe ändern (z.B. von rot zu grün).
  • Jetzt musste ich aber etwas suchen... geh auf eine Seite wie diese: https://www.monrow.com/, https://gwens-nest.com/ oder diese: https://www.faber-castell.de/. Es geht um den Popup, der mit der Zeit aufploppt. Bau einmal so einen Popup nach - es geht dabei nur um den geöffneten Zustand. Das heißt, wenn du deine Seite lädst, hast du von Anfang an so einen Popup offen, zentriert, mit Abdunklung, etc.. Schließen lassen muss er sich nicht. Ein Tipp dazu: Beschäftige dich mit dem Webinspektor von deinem Webbrowser, falls du nicht weiterkommst.
  • Erstelle ein Akkordeon-Element (Tipp dazu: Schau dir die Pseudoklasse :checked an).
  • Gestalte die Druckansicht einer Webseite (die mehrere Bilder, Texte, bunte Farben, etc. beinhaltet). Blende Bilder aus, nutze nur Schwarz als Schriftfarbe.

All diese Aufgaben solltest du nur mit HTML und CSS lösen. Andere Techniken sind nicht notwendig.

Des Weiteren kannst du dir folgend weitere Webseiten suchen, von denen du einfach nur einzelne Elemente / Subseiten / o.ä. nachmachst. Schau in jedem Fall, wie du dein Ziel leicht und ausdrucksstark erreichst. Ja - du wirst auch öfter auf Webseiten stoßen, die in ihrem Markup zehn Ebenen tiefe div-Verschachtelungen haben. Lasse dich aber davon nicht beeinflussen, versuche es mit wenigen Elemente zu lösen. Statische Lösungen reichen für den Anfang aus.

Nutze als Nachschlagewerke diese Seiten:

Und überprüfe dein HTML und CSS stets mit diesen Validatoren:

Bei Fragen hast du ansonsten ja hier eine Plattform.
FinnB132
21.10.2019, 11:19

Wie wäre es mal mit JavaScript lernen? wenn du Webentwicklung machen willst kommst du kaum um JavaScript herum.

https://www.w3schools.com/js/

LG
Woher ich das weiß:Studium / Ausbildung
Programmierer94 
Fragesteller
 21.10.2019, 11:54

Hey, klar, das steht noch vor mir :D Aber danke im Voraus! Erstmal möchte ich mit HTML und CSS3 anfangen. Und dann hole ich mir wieder das Buch von Paul Fuchs zum JavaScript lernen. Das gibt es von ihm auch.

0
expdesigns
21.10.2019, 12:22

Diese Buchreihen haben mir vor 6 Jahren geholfen. Heute bin ich selbständig und erstelle mit meinem Team professionelle Websites für Kunden. Ich habe die Bücher nie zu Ende gelesen, fang ab einen gewissen Punkt einfach an paar Websites zu erstellen (Learning by doing).

Du kannst dir später beispielsweise eine Zeitschrift nehmen und versuchen die Strukturen nachzubauen. Das ist eine tolle Übung die ich mir selbst nahegelegt hatte.

Lerne evtl. auch Photoshop und Illustrator damit du auch deine Grafiken bearbeiten / Erstellen kannst.

https://m.ebay.de/itm/Schr-dinger-lernt-HTML5-CSS3-und-JavaScript-Das-etwas-Buch-Zustand-gut/133160421465?ul_ref=https://rover.ebay.com/rover/1/707-53477-19255-0/1?ff3=2&pub=5575376664&toolid=10001&campid=5338268676&customid=Cj0KCQjwrrXtBRCKARIsAMbU6bH3NIf12a-YRLLEGjNbOuJQpgQFjuYRdx3J0KG55LSbl1baBwclRcsaAqmvEALw_wcB&lgeo=1&item=133160421465&srcrot=707-53477-19255-0&rvr_id=2151586730629&rvr_ts=edd32f5116d0aa48c1849c5ffff19a07&_mwBanner=1&_rdt=1&ul_noapp=true&pageci=9994d4cd-d48a-469b-91d5-8e913f432379&epid=165303251
Woher ich das weiß:eigene Erfahrung