Wie kann ich das Wissen eines Kandidaten über HTML / CSS während eines Interviews bewerten? [geschlossen]

Ich versuche, einige gute Interviewfragen zu ermitteln, um die Fähigkeit von Personen zu beurteilen, die für einen HTML- / CSS-Job in Frage kommen. Dieses Thema ist jedoch sehr weit gefasst, und ich bin nicht sicher, welche Art von Fragen ich stellen kann, um das HTML / CSS Kenntnisse.

Welche Art von Fragen kann ich stellen, um die HTML / CSS-Fähigkeiten eines Kandidaten während eines Interviews zu bewerten?

Im Idealfall möchte ich ein paar Fragen stellen und ihnen dann ein reales Szenario zum Kampf geben.

HTML und CSS sind aus mehreren Gründen schwer zu interviewen:

1. Sie sind zu einfach im Vergleich zu einer Programmiersprache,

2. Sie hängen sehr stark vom Kontext des Jobs ab. Beispiele:

   • Wenn Sie Google-skalierte, extrem schnelle und optimierte Websites erstellen, können die Personen, die Sie für den Job interviewen, nicht ignorieren, was CSS-Sprites sind.

   • Wenn Sie XHTML W3C-gültige Websites erstellen, sollten Sie sicherstellen, dass die Kandidaten den Unterschied zwischen XHTML 1.0 und XHTML 1.1 kennen oder wissen, wofür die Attribute obligatorisch <img/>sind usw.

   • Wenn Sie schreckliche Websites voller Hacks erstellen, sollten Sie die befragten Personen fragen, wie sie den einen oder anderen Hack ausführen, wie sie unterschiedliche CSS für unterschiedliche Browser bereitstellen usw.

   • usw.

3. Wenn es sich um einen reinen HTML- und CSS-Job handelt, muss die Person einerseits mit Designern und andererseits mit Entwicklern zusammenarbeiten. Sie müssen HTML und CSS kennen, aber was viel wertvoller ist, ist ihre Fähigkeit, mit diesen Menschen zu interagieren und sowohl die Bedürfnisse der Designer als auch die Anforderungen der Entwickler und die Einschränkungen von HTML und CSS zu verstehen.

   Beispielsweise müssen sie wissen, wie sie ihr HTML so strukturieren, dass ein JavaScript-Entwickler später problemlos Interaktivität hinzufügen kann.

Möglicherweise möchten Sie mit einigen grundlegenden Fragen beginnen:

Was ist dein Lieblingsbrowser?

Wenn die Person mit "Internet Explorer" antwortet, beenden Sie das Interview sofort: Sie brauchen so jemanden nicht.

Nein ich mache nur Witze. Die Antwort ist irrelevant. Stattdessen können Sie Folgendes fragen:

Erzählen Sie mir von den Debug-Tools, die Sie in Ihrem bevorzugten Browser verwenden.

Ich arbeite hauptsächlich mit Chrome und täglich mit den Entwicklertools. Mit diesen Tools kann ich:

• Anzeigen der Anfragen von einer Seite,

• Untersuchen Sie die Zeit, die zum Laden einer Seite erforderlich ist, und die zugehörigen Ressourcen, insbesondere die DNS-Suche sowie die Warte- und Empfangszeiten.

• Untersuchen Sie die Header der gesendeten Elemente sowie den Cache-Indikator.

• Zeigen Sie das DOM an und untersuchen Sie, wie CSS-Selektoren angewendet werden.

Ich benutze auch YSlow, das mir als Checkliste für die Optimierung einer Website dient, die eine hohe Skalierbarkeit erfordert. YSlow ist auch ein gutes Tool, um festzustellen, ob der Server richtig konfiguriert ist (Senden der richtigen Header usw.).

In Firefox verwende ich Firebug, ein Tool, das den Developer Tools von Chrome sehr ähnlich ist. Entwicklertools sind auch in neuen Versionen von Internet Explorer verfügbar und ermöglichen mir den Wechsel zu IE7 zu IE10-Kompatibilitätsansichten. Diese letzte Funktion ist sehr hilfreich, da ich ohne sie gezwungen wäre, mehrere virtuelle Maschinen nur für Legacy-Tests zu installieren oder die kostenpflichtigen Dienste wie Litmus viel häufiger zu nutzen .

Bitte erklären Sie mir, worum es sich bei dem <dl/>Tag handelt. Was war der Verwendungszweck für dieses Tag? Wie wird es in der Praxis angewendet? Was halten Sie von dieser erweiterten Nutzung?

Hier soll die Person erklären können, dass <dl/>es sich um Wörterbücher handelt, indem sie einen Schlüssel <dt/>mit einem oder mehreren Werten verknüpft <dd/>. Während die primäre Verwendung dieses Tags ausschließlich mit der Semantik zusammenhängt, wurde es in der Praxis häufig zum Ersetzen von Tabellen verwendet. Ein gutes Beispiel hierfür ist PHPBB3. Dies ist eine gute Sache, wenn Tabellen das Rendern der Seite verlangsamen, aber es muss mit Vorsicht verwendet werden: Nicht nur Tabellen sind in vielen Fällen noch angemessen, um die Daten besser zu beschreiben, sondern es kann auch andere Mittel geben, wie z. B. gewöhnliche Listen, um den Inhalt zu beschreiben, ohne zu verwenden <dl/>.

Was ist der Unterschied zwischen festen und fließenden Layouts? Was sind die Vor- und Nachteile von jedem?

Das feste Layout hat vordefinierte Breiten der Elemente. Die Elemente eines flüssigen Layouts hängen von der Breite der Seite ab.

Das feste Layout erleichtert das Entwerfen der Seite, insbesondere wenn viele Grafiken in voller Breite vorhanden sind. Auch ohne Grafik ist es noch einfacher, weil Sie nur auf einen genauen Fall achten. Beispiel: Programmers.SE ist eine Website mit festem Layout. Die Spalte, in der die Fragen und Antworten angezeigt werden, ist immer gleich groß. Wenn ein flüssiges Layout für diese Spalte verwendet würde, würde dies ein Problem verursachen: Auf kleinen Bildschirmen wäre der Text nicht lesbar, da die Zeilen zu kurz wären, während auf großen Bildschirmen die Zeilen extrem groß wären, also der Text wäre auch unlesbar.

Das Problem mit dem festen Layout ist, dass es für einige der am häufigsten verwendeten Auflösungen gut funktioniert, aber für alles andere mehr oder weniger ausfällt. Dies ist besonders wichtig, da sehr große, breite Monitore zum Einsatz kommen und das Internet zunehmend auf kleinen, mobilen Geräten genutzt wird.

Das flüssige Layout hilft dabei, aber das Design ist für eine solche Website schwieriger. In einigen Szenarien mit schlecht verwalteten Projekten kann dies zu HTML- und CSS-Hacks, großen Seiten, geringer Wartbarkeit und während der Entwicklung zu höheren Kosten und Terminüberschreitungen führen.

Wie können Sie auf einer Seite mit fließendem Layout vermeiden, dass eine Textspalte zu groß wird, um lesbar zu bleiben?

Sie können die Breite eines Textbereichs mithilfe der max-widthEigenschaft einschränken .

Was denkst du über diesen Code <p color="Red" align="Center">Text here</p>:?

Der Code hat einen Fehler beim Mischen der Präsentationslogik in HTML. Präsentationslogik muss aus verschiedenen Gründen in CSS eingefügt werden:

• Es hilft bei der Trennung von Bedenken und sauberem Code, was später eine billigere Wartung bedeutet.
• Dadurch können die Stile von Seite zu Seite wiederverwendet werden. Dies stellt sicher, dass auf der gesamten Website dieselben Stile verwendet werden.
• Es hilft, die Bandbreite zu reduzieren, da CSS-Dateien zwischengespeichert werden.

Nach ein paar grundsätzlichen Fragen könnten Sie noch einige knifflige Fragen stellen:

Wie vermeidet man das Duplizieren von Farben oder Schriftarten in CSS, wenn diese Farben oder Schriftarten auf mehrere Elemente angewendet werden, die nicht von einem einzelnen Selektor ausgewählt werden können? Gibt es Nachteile?

Dazu verwenden Sie CSS-Präprozessoren wie Sass oder LESS. Sie ermöglichen das Definieren von Farben, Schriftarten und anderen Teilen des Stils in Variablen, die Sie später in Ihren Stilen verwenden können.

Die Nachteile von CSS-Präprozessoren sind:

• Manchmal müssen sie den Entwicklungs- und Bereitstellungsworkflow ändern, um den aktuellen CSS-Code im Browser zu haben.

• Sie sind nur wenigen Entwicklern bekannt, weshalb es für eine neue Person schwieriger ist, dem Projekt später beizutreten oder es zu warten.

• Es gibt keine guten und schnellen IDEs für Sass oder LESS, und die Integration in die beliebtesten IDEs ist eher enttäuschend.

Geben Sie mir ein Beispiel für einen hrefWert eines Bildes, das sich auf CDN befindet, vorausgesetzt, dieses Bild wird auf einer Website angezeigt, auf die sowohl über HTTP als auch über HTTPS zugegriffen werden kann.

Da HTTPS benötigt, dass sich jede aufgerufene Ressource auch auf HTTPS befindet (andernfalls wird dem Benutzer in vielen Fällen eine Sicherheitswarnung angezeigt), ist es nicht möglich, den Link als anzugeben http://cdn.example.com/image.png. Um eine ordnungsgemäße Verknüpfung zum Bild herzustellen, //cdn.example.com/image.pngmuss verwendet werden. Der Browser wird dann voranstellen http:oder https:je nach Kontext.

Wie können Sie dem Benutzer den Eindruck vermitteln, dass die Website schneller ist, da die Größe der Seiten und die Anzahl der Anfragen auf einer Website nicht optimiert und der Inhalt nicht geändert oder AJAX hinzugefügt werden kann? Worum geht es aus HTML-Sicht?

Wenn HTTP 1.1 verwendet wird, kann die Seite wird gestückelt . Dies bedeutet, dass die ersten Teile schneller erscheinen und den Eindruck erwecken, dass die Website schneller ist als in der Realität. Chunked Transfer Encoding ist in HTTP 1.0 nicht möglich, was bedeutet, dass in diesem Fall nichts zu tun ist.

Um den aufgeteilten Inhalt bereitstellen zu können, müssen die Elemente aus HTML-Sicht neu angeordnet werden, wobei die kritischsten Elemente am Anfang der Datei stehen müssen (was nicht bedeutet, dass sie am oberen Rand der Seite angezeigt werden müssen). Wenn der Benutzer beispielsweise auf einer E-Commerce-Website die Details des Produkts anzeigen möchte, kann der erste Block die <head/>und die Produktdetails enthalten . Der nächste Abschnitt kann die Hauptelemente wie das Logo der Website, das Hauptmenü, das Urheberrecht usw. enthalten. Schließlich kann der letzte Abschnitt den Abschnitt "Kunden, die diesen Artikel gekauft haben, auch gekauft haben", die Kommentare und Bewertungen des Produkts enthalten. die "Share on Facebook" usw.

Schließlich können Sie den Kandidaten bitten, an einem realen Szenario zu arbeiten. Es kann sich um alles handeln, wie das einfachste unten, um die komplexen Szenarien, in denen die Person mit CSS-Sprites oder anderen fortschrittlichen Optimierungstechniken, mit Inkonsistenzen im Browser usw. umgehen muss.

Können Sie eine XHTML-Seite mit zwei Zonen erstellen: der linken mit einer Liste und der rechten mit Text? Zwei Zonen sind durch eine vertikale Linie voneinander getrennt, die sich von ganz oben bis ganz unten auf der Seite erstreckt. Liste und Text variieren in der Größe, Sie können nicht vorhersagen, welche die größte Höhe haben wird. Sie können <table/>s nicht verwenden .

Eigentlich ist es ziemlich einfach, zeigt aber, ob die Person den Reflex hat, über Höhen nachzudenken. Ein unerfahrener Kandidat erstellt die float:leftZone und die border-left:solid 1px #ccc;Zone. Vergessen Sie jedoch, den Rand zur linken Zone hinzuzufügen und ihn so zu erweitern, dass sich zwei Ränder an derselben Stelle befinden.

Hier sind einige Fragen, die ich zu CSS stellen würde:

1. CSS-Box-Modell. Ränder, Polster usw. IE-Modell vs. W3C-Modell. Wie kann man zwischen den beiden wechseln? Was sind ihre Vor- und Nachteile?
2. CSS Positionierung. Was bedeutet es für ein Element, "im Fluss" und "außerhalb des Flusses" zu sein?
3. inline-blockund andere Anzeigewerte. Unterschied zwischen display: none;und visibility: hidden; (dies ist eine gute und einfache Frage für CSS-Neulinge)
4. inline-blockvs floatfür Layouts.
5. Selektoren.
6. CSS wird zurückgesetzt. Warum werden sie gebraucht und was leisten sie?
7. Medienanfragen und Responsive Design.
8. Wie man Stile organisiert und wie man die Anzahl der Selektoren klein hält. LESS, Sass und andere CSS-Vorprozessoren. Objektorientiertes CSS.

Und ein paar Fragen zu HTML:

1. Doctype- und Browser-Modi.
2. Warum sind einige Schlagworte mehr bevorzugt als die anderen ( emvs izum Beispiel)?
3. Welche Grundprinzipien sollten beachtet werden, um HTML und CSS handhabbar und leicht zu pflegen zu halten?

Im Allgemeinen lege ich mehr Wert auf CSS, da es für viele Menschen schwierig ist, es zu erfassen und effektiv zu nutzen. Ich treffe viele Kandidaten, die "CSS" in ihren Lebensläufen eintragen, aber keine Fragen dazu beantworten können. Die meisten Leute sagen nur klar : "Nein, nein, ich kenne CSS gut genug, um damit umzugehen, aber nicht gut genug, um darüber zu sprechen."

Manchmal ist es eine gute Idee, nur eine einfache Aufgabe für den Befragten zu geben. Entwerfen Sie beispielsweise eine einfache Seite mit Layout und Blockstil, die mehrere Bildschirmgrößen unterstützt und sich entsprechend anpasst. Es sollte ungefähr eine oder zwei Stunden dauern und der Kandidat sollte erklären, was er tut und warum.

Viel Glück beim Interviewen!

Wenn Sie ein Live-Interview führen, sollten Sie den Entwickler bitten, HTML- / CSS-Code zu schreiben.

Beispiel (sehr häufig in der realen Entwicklung). Bitten Sie den Entwickler, den HTML / CSS-Code der Seite zu schreiben mit:

1. Flüssigkeitsbreite.
2. Header mit einer Höhe von 100px;
3. Anmeldeschaltfläche in der rechten Ecke der Kopfzeile
4. Linke und rechte Seitenwand mit einer Breite von 100 Pixel und einer Höhe von 200 Pixel;
5. Mitteltafel für den Artikeltext.
6. Fußzeile, die immer unten steht. Auch wenn Artikel 1 Zeile hat.

UPD: Bitten Sie den Entwickler natürlich, den Code nur mit divs (ohne Tabellen) zu schreiben.

Es sollte so aussehen:

Aber vor dem Live-Interview würde ich Ihnen empfehlen, die Kandidaten online zu testen. Weil es einfacher ist, Kandidaten online zu testen und nur gut ausgebildete Entwickler zum Interview einzuladen, als Ihre Zeit für jeden Kandidaten aufzuwenden.

Ich habe ein paar Webdesigner-Interviews mitgemacht , und wir haben ein sehr einfach aussehendes Blog-Layout auf Papier ausgedruckt und dann den Kandidaten gebeten, über etwa 10 Minuten hinweg HTML und / oder CSS auf der Seite zu notieren, um etwas zu geben uns eine Grundidee, wie sie es kodieren würden. Dies ließ uns wissen, ob jemand tatsächlich CSS kannte oder nicht. Wir waren nur auf der Suche nach grundlegenden Dingen wie Floats gegen Tische oder was auch immer, und wir erklärten, dass es keineswegs perfekt sein musste.

Tonnen von Leuten gaben an, jahrelange Erfahrung mit CSS zu haben, aber als sie zum Abschreiben gedrängt wurden, schrieben sie mit wilden Vermutungen wie " layout: floating; direction: up;" oder anderem solchen Unsinn. Mehr als 1 "CSS Ninja" hat nicht einmal die richtige Syntax gefunden, a la " div(margin=5)". Das war sehr aufschlussreich für mich, zu sehen, wie viele Leute gerade in Interviews liegen. Und es scheint einfacher zu sein, über CSS zu lügen, als über direktes Codieren. Sie konnten nichts über CSS wissen, aber googeln Sie ein bisschen und finden Sie die richtige Terminologie schnell heraus. Das kann man mit übergeordneten Konzepten wie beispielsweise OOP nicht wirklich effektiv machen.

Es gibt einen Online-Test, in dem Sie die HTML-Tags oder die CSS-Eigenschaften in 5 Minuten auflisten müssen .

Obwohl dies kein vollständiger Test ist, können Sie hier erfahren, ob der Kandidat mit HTML / CSS vertraut ist.

Zu der Frage können Sie einen Test mit Beispielcode durchführen und ihn bitten, Syntax- / Strukturfehler zu erkennen.

Was das reale Szenario betrifft, hängt alles davon ab, woran der Kandidat in Ihrem Unternehmen arbeiten wird. Wenn Sie nur ein Front-End-Entwickler möchten, können Sie ein Website-Design zu einem zufälligen Thema anfordern.

Eine Art von Test, der für Programmiersprachen und Auszeichnungssprachen anwendbar ist, ist eine Codeüberprüfung. Erstellen Sie eine kleine Stichprobe (20 oder 30 Zeilen) mit einer Mischung aus Syntaxfehlern, Logikfehlern, Eckfällen und einem möglicherweise schlechten Stil. Bitten Sie dann den Kandidaten, alles zu identifizieren, was sie als verdächtig erscheinen lässt.

Es ist wichtig, diese Art von Test richtig anzuwenden: Wie bei jeder Interviewfrage ist es wichtig, wie sich der Kandidat der Aufgabe nähert, und nicht nur die Ergebnisse.

Ich werde meinen Test nicht veröffentlichen, aber einige Tipps, wie man das auf CSS anwendet:

• Syntaxfehler: Einige Semikolons fehlen. Als Bonus können Sie einige optionale (fragwürdiger Stil) verpassen und sehen, ob der Kandidat Kommentare abgibt.
• Logikfehler: Fügen Sie eine vorangestellte Eigenschaft nach der nicht vorangestellten ein. Dies testet auch die Vertrautheit mit CSS3 und kann eine Diskussion über die Art und Weise, in der der Standard entwickelt wird, anregen.
• Eckfälle: zB ein Spielraum mit 3 Werten - Sie wären überrascht, wie viele Leute nicht wissen, dass es möglich ist. Wenn der Kandidat keinen Kommentar abgibt, können Sie ihn fragen, wie er interpretiert wird, um zu überprüfen, ob er ihn aus Wissen und nicht aus Unwissen ignoriert hat.
• Ein weiterer Eckfall: Trainieren Sie Ihre bevorzugten zwei oder drei IE7-Bugs. Dies unterscheidet diejenigen mit Kampfnarben (die mindestens eine von ihnen erkennen sollten) von unerfahrenen oder reinen Webkits.
• Stil: exzessive Spezifität, fehlende emund pxusw. Jemand, der die Syntax für das Interview studiert hat, wird wahrscheinlich nicht viele davon erfassen.

Aus eigener Erfahrung und in Zusammenarbeit mit anderen Entwicklern denke ich, dass Fragen zu HTML und CSS die Leute, die wissen, wovon sie sprechen, nicht von denen unterscheiden, die wissen, was sie tatsächlich tun.

Ich würde einen Mock-Test / Prototyp empfehlen, der auf der realistischen Erfahrung der Anforderungen Ihres Unternehmens basiert.