it-swarm.com.de

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

Ich versuche, einige gute Interviewfragen zu ermitteln, um die Fähigkeit von Personen zu beurteilen, die für einen HTML/CSS-Job eintreten. Dieses Thema ist jedoch äußerst weit gefasst, und ich bin mir nicht sicher, welche Art von Fragen ich stellen kann, um den HTML-Code einer Person richtig zu bewerten. CSS-Kenntnisse.

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

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

44
webnoob

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

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

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

    • Wenn Sie sehr schnelle und optimierte Websites im Google-Maßstab erstellen, können die Personen, die Sie für den Job interviewen, die CSS-Sprites nicht ignorieren.

    • Wenn Sie gültige XHTML W3C-Websites erstellen, sollten Sie sicherstellen, dass die Kandidaten den Unterschied zwischen XHTML 1.0 und XHTML 1.1 kennen oder welche obligatorischen Attribute für <img/> Usw. erforderlich sind.

    • Wenn Sie schreckliche Websites voller Hacks erstellen, sollten Sie die von Ihnen interviewten Personen fragen, wie sie diesen oder jenen Hack ausführen, wie sie unterschiedliche CSS-Funktionen 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 beide Bedürfnisse der Designer zu verstehen. die Anforderungen der Entwickler und die Einschränkungen von HTML und CSS.

    Beispielsweise müssen sie wissen, wie sie ihren HTML-Code so strukturieren, dass es für einen JavaScript-Entwickler einfach ist, später Interaktivität hinzuzufügen.


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.

In erster Linie mit Chrome arbeite ich täglich mit Entwicklertools. Mit diesen Tools kann ich:

  • Zeigen Sie die Anforderungen einer Seite an.

  • Untersuchen Sie die Zeit, die zum Laden einer Seite benötigt wird, und die zugehörigen Ressourcen, insbesondere die DNS-Such-, Warte- und Empfangszeiten.

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

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

Ich verwende 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 korrekter Header usw.).

In Firefox verwende ich Firebug, das Tool, das den Entwicklertools von Chrome sehr ähnlich ist. Entwicklertools sind auch in neuen Versionen von Internet Explorer verfügbar und ermöglichen mir auch, zu Kompatibilitätsansichten von IE7 zu IE10 zu wechseln. 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 verwenden.

Bitte erklären Sie mir, worum es bei dem Tag <dl/> Geht. Was war die beabsichtigte Verwendung für dieses Tag? Wie wird es in der Praxis eingesetzt? Was halten Sie von dieser erweiterten Nutzung?

Hier möchten Sie, dass die Person erklären kann, dass <dl/> Für Wörterbücher ist, indem ein Schlüssel <dt/> Mit einem oder mehreren Werten <dd/> Verknüpft wird. 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 ist PHPBB3. Dies ist eine gute Sache, wenn Tabellen das Rendern der Seite verlangsamen, muss jedoch mit Vorsicht verwendet werden: In vielen Fällen sind nicht nur Tabellen noch geeignet, um die Daten besser zu beschreiben, sondern es kann auch andere Mittel geben, z. B. gewöhnliche Listen, um den Inhalt ohne Verwendung von <dl/> zu beschreiben.

Was ist der Unterschied zwischen festen und flüssigen Layouts? Was sind die Vor- und Nachteile von jedem?

Das feste Layout hat vordefinierte Breiten der Elemente. Die Elemente eines fließenden 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 sich nur um einen präzisen Fall kümmern. Beispielsweise ist Programmers.SE eine Website mit festem Layout. Die Spalte, in der die Fragen und Antworten angezeigt werden, hat immer die gleiche Größe. Wenn für diese Spalte ein flüssiges Layout verwendet würde, würde dies zu einem Problem führen: 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 wenige, am häufigsten verwendete Auflösungen gut funktioniert, aber für alles andere mehr oder weniger fehlschlägt. Dies ist besonders wichtig, da sehr große, breite Monitore eingesetzt werden und das Internet zunehmend auf kleinen Mobilgeräten genutzt wird.

Das flüssige Layout hilft dabei, aber das Design ist für eine solche Website schwieriger. In einigen Szenarien bei 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 einem fließenden Layout vermeiden, dass eine Textspalte zu groß wird, um lesbar zu bleiben?

Sie können die Breite einer Textzone mithilfe der Eigenschaft max-width Begrenzen.

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

Der Code weist einen Fehler beim Mischen der Präsentationslogik in HTML auf. Die Präsentationslogik muss aus mehreren 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, was (außerhalb der Wartbarkeit) dazu beiträgt, dass Sie auf der gesamten Website dieselben Stile verwenden.
  • Dies hilft, die Bandbreite zu reduzieren, da CSS-Dateien zwischengespeichert werden.

Nach ein paar grundlegenden Fragen wie diesen können Sie einige schwierigere Fragen stellen:

Wie vermeiden Sie das Duplizieren von Farben oder Schriftarten in CSS, wenn diese Farben oder Schriftarten auf mehrere Elemente angewendet werden, auf die kein einzelner Selektor abzielen kann? Gibt es Nachteile?

Dazu verwenden Sie CSS-Präprozessoren wie Sass oder LESS. Mit ihnen können Sie Farben, Schriftarten und andere Teile des Stils in Variablen definieren, 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, was es für eine neue Person schwieriger macht, sich dem Projekt später anzuschließen 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 href -Wert eines Bildes auf CDN, da dieses Bild auf einer Website angezeigt wird, auf die sowohl über HTTP als auch über HTTPS zugegriffen werden kann.

Da für HTTPS jede aufgerufene Ressource auch für HTTPS erforderlich ist (andernfalls wird dem Benutzer in vielen Fällen eine Sicherheitswarnung angezeigt), kann der Link nicht als http://cdn.example.com/image.png Angegeben werden. Um eine ordnungsgemäße Verknüpfung zum Bild herzustellen, muss //cdn.example.com/image.png Verwendet werden. Der Browser stellt dann je nach Kontext http: oder https: voran.

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? Was beinhaltet es aus HTML-Sicht?

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

Um den Chunk-Inhalt bereitstellen zu können, müssen die Elemente aus HTML-Sicht neu angeordnet werden, wobei die kritischsten Elemente oben in der Datei platziert werden müssen (was nicht bedeutet, dass sie oben auf 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 den <head/> Und die Produktdetails enthalten. Der nächste Block kann die Hauptelemente wie das Logo der Website, das Hauptmenü, das Urheberrecht usw. enthalten. Schließlich kann der letzte Block den Abschnitt "Personen, die dies gekauft haben, haben auch gekauft", die Kommentare und Bewertungen des Produkts enthalten. die "Auf Facebook teilen" usw.


Schließlich können Sie den Kandidaten bitten, an einem realen Szenario zu arbeiten. Es kann alles sein, wie das einfachste unten, für die komplexen Szenarien, in denen die Person mit CSS-Sprites oder anderen fortgeschrittenen Optimierungstechniken, mit Browser-Inkonsistenzen 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 getrennt, die sich vom oberen bis zum unteren Rand 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 keine <table/> S verwenden.

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

87

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

  1. CSS-Box-Modell. Ränder, Polsterung 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-block und andere Anzeigewerte. Unterschied zwischen display: none; und visibility: hidden;(dies ist eine gute und einfache Frage für CSS-Neulinge)
  4. inline-block vs float für Layouts.
  5. Selektoren.
  6. CSS wird zurückgesetzt. Warum werden sie gebraucht und was erreichen sie?
  7. Medienabfragen und responsives Design.
  8. So organisieren Sie Stile und halten die Anzahl der Selektoren klein. WENIGER, Sass und andere CSS-Vorprozessoren. Objektorientiertes CSS.

Und einige Fragen zu HTML:

  1. Doctype- und Browsermodus.
  2. Warum sind einige Tags vorzuziehen als die anderen (z. B. em vs i)?
  3. Was sind die Grundprinzipien, die befolgt werden sollten, um HTML und CSS überschaubar und einfach zu pflegen zu halten?

Im Allgemeinen lege ich mehr Wert auf CSS, da es der Bereich ist, den viele Menschen nur schwer erfassen und effektiv nutzen können. Ich treffe viele Kandidaten, die "CSS" in ihren Lebenslauf aufnehmen, aber keine Fragen dazu beantworten können. Die meisten Leute sagen nur direkt "Nein-nein, ich weiß 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 zu geben und den Befragten zu erledigen. Entwerfen Sie beispielsweise eine einfache Seite mit Layout und Blockstil, die mehrere Bildschirmgrößen unterstützt und entsprechend anpasst. Es sollte ungefähr ein 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, bitten Sie den Entwickler am besten, einen 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 Seite mit 100px Breite und 200px Höhe;
  5. Mittelteil für den Artikeltext.
  6. Fußzeile, die immer unten sein wird. 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:

css / html test

Vor dem Live-Interview würde ich Ihnen jedoch 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 mit jedem Kandidaten zu verbringen.

8
Joseph

Ich nahm an einigen Webdesigner-Interviews teil und wir haben drucken Sie ein sehr einfach aussehendes Blog-Layout aus auf Papier == und bitten Sie den Kandidaten, einfach etwas HTML und/oder aufzuschreiben) CSS auf der Seite über 10 Minuten oder so, um uns eine grundlegende Vorstellung davon zu geben, wie sie es codieren würden. Dies ließ uns wissen, ob jemand CSS tatsächlich kannte oder nicht. Wir suchten nur nach grundlegenden Dingen wie Floats vs Tables oder was auch immer und erklärten, dass es keineswegs perfekt sein musste.

Unzählige Leute gaben jahrelange Erfahrung mit CSS an, aber als sie dazu gedrängt wurden, schrieben sie in wilden Vermutungen wie "layout: floating; direction: up;" Oder einem anderen solchen Quatsch. Mehr als 1 "CSS Ninja" hat nicht einmal die richtige Syntax erhalten, a la "div(margin=5)". Das hat mir sehr die Augen geöffnet, um 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 und in der Lage sein, die richtige Terminologie ziemlich schnell herumzuwerfen. Mit übergeordneten Konzepten wie OOP kann man das nicht wirklich effektiv machen.

4
Graham

Eine Art von Test, der auf Programmiersprachen und Auszeichnungssprachen anwendbar ist, ist eine Codeüberprüfung. Erstellen Sie ein kleines Beispiel (20 oder 30 Zeilen) mit einer Mischung aus Syntaxfehlern, Logikfehlern, Eckfällen und einem wohl schlechten Stil. Bitten Sie den Kandidaten dann, alles zu identifizieren, was ihn als verdächtig empfindet.

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

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

  • Syntaxfehler: Einige Semikolons fehlen. Als Bonus können Sie einige optionale (fraglicher Stil) verpassen und sehen, ob der Kandidat Kommentare abgibt.
  • Logikfehler: Setzen Sie eine vorangestellte Eigenschaft nach die nicht vorangestellte. Dies testet auch die Vertrautheit mit CSS3 und kann eine Diskussion darüber anregen, wie der Standard entwickelt wird.
  • Eckfälle: z.B. Ein Spielraum mit 3 Werten - Sie wären überrascht, wie viele Menschen nicht wissen, dass dies möglich ist. Wenn der Kandidat keinen Kommentar abgibt, können Sie fragen, wie er interpretiert wird, um zu überprüfen, ob er ihn aus Wissen und nicht aus Unwissenheit ignoriert hat.
  • Ein weiterer Eckfall: Trainieren Sie Ihre zwei oder drei bevorzugten IE7-Fehler. Dies unterscheidet diejenigen mit Kampfnarben (die mindestens eine von ihnen erkennen sollten) von den unerfahrenen oder nur dem Webkit.
  • Stil: übermäßige Spezifität, fehlende em und px usw. Jemand, der die Syntax für das Interview studiert hat, wird wahrscheinlich nicht viele davon fangen.
2
Peter Taylor

Es gibt einen Online-Test, bei 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 wissen, ob der Kandidat mit HTML/CSS ausreichend vertraut ist.

Über die Frage könnten 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 einen Front-End-Entwickler möchten, können Sie nach einem Website-Design zu einem zufälligen Thema fragen.

2
XGouchet

Aus persönlicher 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.

0
DAVIEAC