Wie man die Fähigkeiten von Frontend-Entwicklern prüft - HTML und CSS

HTML und CSS sind zwei der grundlegendsten Fähigkeiten von Frontend-Entwicklern. Sie werden kaum einen Webentwickler finden, der nicht zumindest ein grundlegendes Verständnis dieser beiden Klassiker hat. Manche sind jedoch der Meinung, dass HTML und CSS nicht den gleichen Respekt wie andere Sprachen genießen sollten, da beide keine interne Logik erfordern. Das liegt daran, dass HTML und CSS deklarative Sprachen sind, die einen Webbrowser anweisen, Webseiten zu rendern, anstatt rechnerischen Code zu verwenden.

Entgegen der Meinung mancher, wird es für Entwickler immer wertvoller, tiefgreifende Kenntnisse und Expertise in diesen beiden Sprachen zu besitzen. Die Überprüfung der HTML- und CSS-Kenntnisse eines Entwicklers ist genauso wichtig wie die Überprüfung der Kenntnisse in Sprachen wie Java und C++. Sicherlich sollte jeder, der auch nur annähernd technisch versiert ist, ein Grundverständnis von HTML und CSS haben. Letztendlich ist das alles, was man braucht, richtig? Nicht ganz.

HTML und CSS bilden das Rückgrat der Frontend-Entwicklung zusammen mit JavaScript. In der Tat finden Sie auch eine ganze Reihe von Back-End-Entwicklern, die diese Sprachen regelmäßig verwenden. Sie werden zwar nie einen Entwickler finden, der ausschließlich diese Sprachen verwendet, aber HTML und CSS sind für die moderne Softwareentwicklung wichtig genug, um sicherzustellen, dass Frontend-Entwickler sind in der Lage, sie effektiv zu nutzen. Während sie für den Einstieg einfach sind, erfordern fortgeschrittene Anwendungen tiefgreifende Fähigkeiten und Verständnis. Vergewissern Sie sich unbedingt, dass Ihr Entwickler über dieses Verständnis verfügt.

Erfahren Sie mehr über die Eigenschaften eines Software-Ingenieur.

1. Was sind HTML und CSS und wofür werden sie verwendet?

1.1 Was ist HTML?

HTML oder HyperText Markup Language ist die Standard-Auszeichnungssprache für die Erstellung von Webseiten und Webanwendungen. Auszeichnungssprachen unterscheiden sich von Programmiersprachen dadurch, dass sie keine Logik ausführen. Stattdessen ist HTML darauf ausgelegt, ein strukturiertes Dokument mit Elementen wie Bildern, Formularen, Listen usw. zu erstellen. Es ist Aufgabe des Browsers, dieses Dokument zu interpretieren, um die Webseiten zu erstellen, die Sie am Ende sehen (wie die, die Sie gerade lesen).

1.2 Was ist CSS?

CSS oder Cascading Style Sheets bieten eine Standarddefinition dafür, wie die verschiedenen Elemente auf der Seite erscheinen sollen. Was ist damit gemeint? Stellen Sie sich vor, Sie möchten, dass ein Maler Ihr Haus streichen soll. Sie könnten ihm sagen, welche Farbe Sie für jede einzelne Wand wünschen. Das wäre ähnlich, wie wenn Sie Ihre Anweisungen nur mit HTML geben würden. Es würde eine Menge Anweisungen für Ihre Maler erfordern und würde länger dauern, sie zu schreiben.

Aber wenn Sie wie ich sind, möchten Sie, dass alle Wände Ihres Hauses die gleiche Farbe haben. In diesem Fall würden Sie Ihrem Maler sagen, dass er jede Wand in einer bestimmten Farbe streichen soll. Das wäre so, als würden Sie Anweisungen mit CSS geben. Mit CSS können Sie ein Standardaussehen eines Elements auf Ihrer Seite definieren, so dass jedes Mal, wenn Sie ein neues Element erstellen, alle Ihre Designstandards intakt sind. Es erfordert weniger Anweisungen und bedeutet, dass neue Elemente, wie Farben und Schriftarten, mit dem Rest der Seite konsistent sein werden.

1.3 Wofür werden HTML und CSS verwendet?

Zusammen verwendet, sind HTML und CSS die Eckpfeiler des World Wide Web. Sie sind beide sehr populär und die grundlegenden Konzepte sind einfach zu erlernen. Zusammen mit JavaScript sind sie zwei der drei wesentlichen Fähigkeiten eines Frontend-Entwicklers. Aber ein Frontend-Entwickler muss mehr als nur die grundlegenden Konzepte kennen, um einen guten Job zu machen.

2. Was ist für einen IT-Recruiter wichtig, um die Fähigkeiten eines Frontend-Entwicklers in HTML und CSS zu kennen?

2.1 Normen

Das World Wide Web Consortium (W3C) ist die internationale Standardisierungsorganisation, die HTML- und CSS-Standards erstellt. Die neueste Version von HTML ist jedoch HTML5, die nicht dem W3C-Standard, sondern dem WHATWG-Standard (dem sogenannten HTML Living Standard) folgt. Es gibt keine einheitliche Version von CSS, da es seit CSS 3 in Module unterteilt ist, und jedes Modul wird unabhängig versioniert.

Fast jeder Entwickler, geschweige denn ein Frontend-Entwickler, sollte zumindest ein Grundverständnis von HTML und CSS haben. Ein HTML- oder CSS-Entwickler ist selten eine eigenständige Position. Meistens ist es nur eine der Fähigkeiten eines Frontend- oder Full-Stack-Entwicklers oder eines Grafik-/Webdesigners.

Standards ändern sich nicht sehr oft. Allerdings kommen regelmäßig neue Funktionen hinzu, sodass Entwickler auf dem Laufenden bleiben müssen. In den letzten Jahren gab es einen konstanten Fluss neuer CSS-Funktionen und -Updates. So sehr, dass Backend-Entwickler sich vielleicht gar nicht bewusst sind, wie leistungsfähig die Technologie geworden ist.

2.2 Werkzeuge

Jeder Browser interpretiert CSS und HTML auf eine etwas andere Weise. Der Entwickler sollte die Unterschiede zwischen verschiedenen Browsern und deren Unterstützung verschiedener HTML/CSS-Versionen kennen. Außerdem sollte der Entwickler wissen, welche Tools er verwenden kann, um browserübergreifende HTML/CSS-Inhalte zu erstellen.

Frontend-Entwickler, die JavaScript-Frameworks verwenden, arbeiten in der Regel mit Bibliotheken, die voller gebrauchsfertiger Komponenten sind. Die Erstellung einer produktionsreifen Anwendung erfordert jedoch eine Stilanpassung für das Design des Produkts. Diese Art der Anpassung erfordert oft fortgeschrittene Kenntnisse in CSS.

Um Webseiten zu vereinfachen und zu beschleunigen, verwenden Entwickler oft zusätzliche Tools wie Frontend-Frameworks (z. B. Bootstrap) oder Stylesheet-Sprachen (z. B. LESS oder SCSS).

2.3 Benutzererfahrung (UX)

UX ist eine wichtige Komponente von Front-End-Entwicklung. A kompetent Frontend-Entwickler sollte die Fähigkeit besitzen, Webseiten oder Anwendungen aus der Perspektive des Nutzers zu betrachten. Das bedeutet, die UX ganzheitlich zu optimieren. Verbesserungsvorschläge für die Anwendung, wie das Entfernen unnötiger Klicks oder die Verbesserung der Performance durch Optimierung der Seitenladegeschwindigkeit, sind zwei Beispiele für die Optimierung.

Responsive Web Design (RWD) ist eine weitere wichtige Technik, die Front-End-Entwickler für UX berücksichtigen müssen. Es ist der Ansatz, der vorschlägt, dass Design und Entwicklung auf das Verhalten und die Umgebung des Benutzers basierend auf Bildschirmgröße, Plattform und Ausrichtung reagieren sollten.

Schließlich wird a11y (eine Abkürzung des Begriffs "Barrierefreiheit") zu einer viel diskutierten Bewegung in Tech-Kreisen und zu einer weiteren wichtigen UX-Überlegung. Es bezieht sich nicht auf einen bestimmten Standard, eine Messung oder ein Gesetz, das mit Technologie zu tun hat, sondern eher auf eine Änderung der Art und Weise, wie Webseiten gebaut werden, um Menschen mit Behinderungen zu berücksichtigen. Das Projekt zielt darauf ab, Webseiten verdaulicher, aktueller und verzeihender für diejenigen zu machen, die eine Behinderung haben, sei es eine Sehbehinderung oder eine andere Form von Unpässlichkeit.

Quelle: Unsplash. Safar Safarow

3. Überprüfung der HTML- und CSS-Kenntnisse eines Frontend-Entwicklers anhand seines Lebenslaufs

Der erste Hinweis, den viele Recruiter auf die HTML- und CSS-Kenntnisse eines Frontend-Entwicklers haben, ist das, was im Lebenslauf des Kandidaten steht. Über die einfachen HTML- und CSS-Kenntnisse hinaus (die für jeden Frontend-Entwickler selbstverständlich sein sollten), ist es wichtig zu sehen, wie gut der Kandidat mit dem Frontend-Tech-Stack vertraut und auf dem neuesten Stand ist. Hier ist ein Glossar der Fähigkeiten, auf die Sie achten sollten, und eine Übersicht über alles, was Ihr Kandidat wissen sollte, um Ihnen zu helfen, besser zu verstehen, wonach Sie bei einem Frontend-Entwickler suchen sollten.

3.1 HTML- und CSS-Glossar für technische Recruiter

Frontend-Frameworks	Bootstrap, Foundation, Semantische Benutzeroberfläche, Pure, UIkit, Bulma
CSS-Präprozessoren	Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
HTML5-Frameworks	Skeleton, HTML KickStart, Montage, SproutCore, Zebra,
Animationen	Reaktionsfähiges Webdesign (RWD)
Erreichbarkeit	A11Y
Konventionen	Blockelement Modifikator
Werkzeuge	CSS-Bausteine, CSS in JS
Sonstiges/Sonstiges	HTML5 Boilerplate

3.2 HTML-Standards - Arten von HTML

• HTML 4 - die 1997 vom W3C empfohlene Basisversion von HTML
• XHTML - eine Erweiterung von HTML4, nur eine strengere Version von HTML 4. Es integrierte einige Funktionen von XML in HTML.
• HTML5 - neueste Version des HTML-Standards. Die am weitesten verbreitete.

3.3 CSS-Normen

• CSS 2 - CSS-Spezifikation der Stufe 2, veröffentlicht vom W3C im Jahr 1998
• CSS 2.1 - CSS Stufe 2 Revision 1, behobene Fehler in CSS2
• CSS 3 - teilt die Spezifikation in verschiedene Abschnitte auf, die Module genannt werden, eine wichtige Änderung. CSS 3 führte viele neue Funktionen wie neue Selektoren, neue Eigenschaften, Änderungen am Box-Modell und vieles mehr ein.

3.4 HTML- und CSS-Frameworks

Grundlegendes HTML und CSS sind einfach zu programmieren, aber der Grad der Komplexität, der in modernen Websites zu finden ist, kann sehr zeitaufwendig sein, um alles zu programmieren. Glücklicherweise müssen Entwickler nicht alles von Grund auf neu erstellen. Es gibt Frameworks, die Hilfe mit fertigen Komponenten bieten und eine einfache Möglichkeit bieten, das Aussehen einer Seite anzupassen.

Die beliebtesten Frameworks, nach denen Sie suchen sollten, sind:

• Bootstrap (v4)
• Foundation (neueste Version 6)

3.5 Andere Bereiche von HTML und CSS, über die Ihr Frontend-Entwickler Bescheid wissen sollte

Während die CSS-Grundlagen recht einfach zu erlernen sind, gibt es einige Bereiche von CSS, die zusätzlichen Aufwand erfordern, um von Entwicklern effizient genutzt zu werden. Dazu gehören:

• CSS Flexbox-Modell
• CSS-Raster
• CSS-Box-Modell
• Layout-Elemente mit absoluter Positionierung
• Layout-Elemente mit Floats
• CSS-Animationen

4. HTML/CSS-Interview Fragen und Antworten

Diese und weitere Fragen finden Sie hier.

4.1 HTML-Interview-Fragen und Antworten

Was macht ein Doctype?

Doctype bestimmt, auf welche Version von HTML sich das Dokument bezieht.

Auf welche Dinge sollten Sie achten, wenn Sie für mehrsprachige Websites entwerfen oder entwickeln?

Die Antworten eines Kandidaten auf diese Frage sollten zeigen, ob er Erfahrung mit der Erstellung von großen Websites aus verschiedenen Regionen der Welt hat oder nicht. Antworten, die die folgenden Themen beinhalten, sind ein guter Hinweis auf einen informierten Kandidaten: Unterstützung von Unicode für die Kodierung, links-nach-rechts vs. rechts-nach-links, Automatisierung der Übersetzung von Währungen, Datumsangaben und Pluralform sowie Parametrisierung übersetzter Strings

Beschreiben Sie den Unterschied zwischen