Tag Eins

Was ist Coding?

Beim Coding (auf Deutsch: Programmieren) wird eine Computersprache angewendet, um Webseiten, Software oder Apps zu programmieren. Der benutzte Code sagt dem Gerät, dem Browser, dem Roboter oder der Künstlichen Intelligenz, was zu tun ist.

Es gibt allerdings nicht nur eine Programmiersprache, sondern ganz viele – momentan rund 500. Sie hören auf kryptische Namen wie Java, Python, PHC, C++, Ruby oder Javascript. Welche der Sprachen verwendet wird, hängt ganz von der Aufgabe und dem Zweck ab. Ein guter Coder beherrscht im Idealfall mehrere davon.

Im Rahmen des Coding Basic Moduls konzentrieren wir uns auf HTML, CSS und vielleicht ein wenig JavaScript. Das sind gleichzeitig auch die drei Sprachen, welche Kern praktisch jeder Website sind.

Was bedeutet Frontend Developement?

Frontend Development bezeichnet eine Hybridfunktion aus Webentwicklung und Screendesign. Das Frontend ist der für Nutzer sichtbare Teil einer Webseite oder Applikation. Im Gegensatz dazu ist das Backend der nicht sichtbare Teil, welcher Server, serverseitige Anwendungen und Datenbank(en) umfasst.

Was macht ein Frontend Entwickler?

Ein Frontend Entwickler setzt die Webapplikation designtechnisch und funktional um. Frontend Development ist wichtig für die Usability und Performance der Webseite. Der Entwickler sorgt dafür, dass die Webseite für alle Geräte und Bildschirmgrößen erreichbar, leicht nutzbar und performant ist.

Ein Backend Developer kümmert sich hingegen um die Wartung von Software und Datenbanken, den Betrieb des Servers und alle Abläufe, die sicherstellen, dass die Informationen bereitgestellt werden können, die im Frontend angezeigt werden sollen.

Zu den Aufgabenbereichen eines Frontend Entwicklers gehören

• HTML (Hypertext Markup Language) für die Struktur der Webseite.

• CSS (Cascading Style Sheets), mit welchem das Design, Layout, Schriften, Farben etc. sowie das Verhalten auf verschiedenen Bildschirmgrößen gesteuert wird.

• JavaScript, welches aus einer statischen Website etwas dynamisches macht.

Frontend Roadmap

Wie du aus einem Coding Novice ein Google Software Engineer wirst (werden kannst).

Hello World

Visual Studio Code

Visual Studio Code (kurz VS Code) ist ein kostenloser Quelltext-Editor von Microsoft und ist plattformübergreifend für die Betriebssysteme Windows, macOS und Linux verfügbar.

• VS Code: code.visualstudio.com

• Themes: medium.com/quick-code/the-best-vs-code-themes

Das HTML Grundgerüst / Boilerplate

Das Grundgerüst jeder Website. Dank in VS Code integriertem Emmet mit ! + Tab einfach aufrufbar

HTML Kommentare

Das HTML Element

Ein Element ist ein Teil einer Webseite und kann Daten, Text, Bilder, oder auch gar nichts enthalten. Ein typisches Element besteht aus einem öffnenden Tag mit einigen Attributen, dahinter etwas Text und einem schließenden Tag.

Elemente und Tags sind nicht dasselbe. Tags beschreiben ein Element im Quellcode, wobei ein Element ein Teil des DOM ist, dem Document Model, mit dessen Hilfe eine Seite im Browser angezeigt werden kann.

Die Liste von Tags und Attributen ist lang und ausführlich. Fürs erste lernen wir jedoch nur ein kleiner Teil davon kennen.

HTML Tags

Heading / Überschriften

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden.

Text-Absatz / Paragraph

Das p-Element definiert einen Textabsatz (engl. paragraph). Absätze dienen der Gliederung eines Textes.

Link

Das a-Element stellt einen Verweis, (Hyper-)Link auf eine (andere) Web-Adresse dar. Hier spielen erstmals Tags und Attribute in Kombination eine wichtige Rolle.

Listen

Aufzählungslisten sind z. B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden die Listeneinträge von grafischen Browsern standardmäßig mit einem Aufzählungszeichen (Bullet) versehen. Aufzählungslisten eignen sich sehr gut, um Navigationsleisten in Webseiten zu strukturieren.

Wir unterscheiden dabei zwischen unsortierten Listen (ul – unordered list) …

• Erster Listeneintrag

• Zweiter Listeneintrag

• Dritter Listeneintrag

… und sortieren Listen (ol – ordered list).

1. Erster Listeneintrag

2. Zweiter Listeneintrag

3. Dritter Listeneintrag

Bild Element (img)

Das img-Element ermöglicht es, Bilddateien in einem Dokument einzubinden und darzustellen.

Für die Darstellung eines Bildes brauchen wir bereits mehrere Attribute:

• src: Der Pfad zum effektiven Bild

• alt: Die Bildbeschreibung

Nesting

HTML-Elemente können verschachtelt werden, d. h. ein Element kann innerhalb eines anderen Elements platziert werden. Die Verschachtelung ermöglicht es , mehrere HTML-Tags auf einen einzigen Inhalt anzuwenden.

Quellenangabe