面接中に候補者のHTML / CSSに関する知識を評価するにはどうすればよいですか？
Html/CSSジョブに参加する人々の能力を評価するために、いくつかの良いインタビューの質問を決定しようとしていますが、そのトピックは非常に広範であり、誰かのHTML /を適切に評価するためにどのような質問をすることができるかわかりません/ CSSの知識。
面接中に候補者のHtml/CSS能力を評価するためにどのような質問をすることができますか？
理想的には、いくつかの質問をしてから、実際のシナリオで戦闘に参加したいと思います。
HTMLとCSSはいくつかの理由でインタビューするのが難しいです：
それらは、例えばプログラミング言語に比べると、あまりにも基本的です。
彼らは仕事の文脈に非常に依存しています。例：
グーグル規模の非常に高速で最適化されたWebサイトを作成する場合、その仕事のために面接する人はCSSスプライトが何であるかを無視できません。
XHTML W3Cの有効なWebサイトを作成する場合、候補者がXHTML 1.0とXHTML 1.1の違い、または
<img/>などの必須属性を知っていることを確認する必要があります。ハッキングでいっぱいの恐ろしいウェブサイトを作成する場合は、インタビューする人に、ハッキングの方法やハッキングの方法、ブラウザごとに異なるCSSを提供する方法などについて尋ねる必要があります。
等.
それが純粋なHTMLとCSSの仕事であれば、その人は一方でデザイナーと、他方で開発者と協力しなければなりません。彼らはHTMLとCSSを知っている必要がありますしかし、はるかに価値があるのは、それらの人々と対話する能力であり、設計者の両方のニーズを理解することです。開発者の要件、およびHTMLとCSSの制約。
たとえば、JavaScript開発者が後で対話機能を簡単に追加できるようにHTMLを構造化する方法を知っている必要があります。
基本的な質問から始めたいと思うかもしれません：
好きなブラウザは何ですか？
その人が「Internet Explorer」と答えた場合は、インタビューをすぐに停止してください。そのような人は必要ありません。
いいえ、冗談です。答えは無関係です。代わりに、次の質問をすることができます。
お気に入りのブラウザで使用しているデバッグツールについて教えてください。
主にChromeを使用しており、毎日デベロッパーツールを使用しています。これらのツールにより、次のことが可能になります。
ページから行われたリクエストを表示し、
ページと関連リソースの読み込みにかかる時間、特にDNSルックアップ、待機時間と受信時間を調査します。
送信された要素のヘッダーとキャッシュインジケーターを確認します。
DOMを表示し、CSSセレクターがどのように適用されるかを調べます。
また、高いスケーラビリティを必要とするWebサイトの最適化のチェックリストとして役立つYSlowも使用しています。 YSlowは、サーバーが正しく構成されているかどうか（正しいヘッダーを送信するかどうかなど）を決定する際にも、優れたツールです。
Firefoxでは、Firebugを使用します。Firebugは、Chromeのデベロッパーツールに非常に似ています。開発者ツールはInternet Explorerの新しいバージョンでも利用でき、IE7からIE10の互換ビューに切り替えることもできます。この最後の機能は非常に役立ちます。これがないと、レガシーテストのためだけにいくつかの仮想マシンをインストールするか、または Litmus のような有料サービスを頻繁に使用する必要があるためです。
<dl/>タグの意味を教えてください。このタグの使用目的は何でしたか？実際にどのように使用されますか？この拡張された使用法についてどう思いますか？
ここでは、<dl/>は辞書用であり、1つのキー<dt/>を1つまたは複数の値<dd/>に関連付けて説明できるようにしたいとします。このタグの主な用途は純粋にセマンティクスに関連していましたが、実際にはテーブルを置き換えるために広く使用されていました。その良い例がPHPBB3です。テーブルがページのレンダリングを遅くしている場合、これは良いことですが、注意して使用する必要があります。多くの場合、データをより適切に説明するためにテーブルが適切であるだけでなく、通常のような他の手段もある場合があります。リスト、<dl/>を使用せずにコンテンツを説明します。
固定レイアウトと流動レイアウトの違いは何ですか？それぞれの長所と短所は何ですか？
固定レイアウトには、要素の幅が事前定義されています。流動レイアウトの要素は、ページの幅によって異なります。
固定レイアウトにより、特に全幅グラフィックが多数ある場合に、ページのデザインが容易になります。グラフィックスがなくても、正確なケースのみを気にするので、さらに簡単です。たとえば、Programmers.SEは固定レイアウトのWebサイトであり、質問と回答を表示する列は常に同じサイズです。この列に流動的なレイアウトを使用すると、問題が発生します。小さな画面では、行が短すぎてテキストが読めなくなりますが、大きな画面では、行が非常に大きくなるため、テキストあまりにも読めないでしょう。
固定レイアウトの問題は、ほとんどの使用されているいくつかの解像度ではうまく機能しますが、それ以外の場合は多かれ少なかれ失敗することです。これは、非常に大きなワイドモニターの採用と、小型のモバイルデバイスでのインターネットの使用の増加以来、特に重要になります。
流動的なレイアウトはそれを助けますが、そのようなウェブサイトではデザインを行うことがより困難になります。不適切に管理されたプロジェクトの一部のシナリオでは、これによりHTMLおよびCSSのハッキング、大きなページ、保守性の低下、開発中のコストの増加、期限の遅れにつながる可能性があります。
流動的なレイアウトのページで、テキストの列が大きくなりすぎて読みにくい状態になるのをどのように回避できますか？
max-widthプロパティを使用して、テキストのゾーンの幅を制限できます。
次のコードについてどう思いますか：
<p color="Red" align="Center">Text here</p>？
コードの一部には、HTML内でプレゼンテーションロジックを混在させる欠陥があります。プレゼンテーションロジックは、いくつかの理由でCSSに配置する必要があります。
- 懸念事項とクリーンなコードの分離に役立ちます。つまり、後でメンテナンスが安価になります。
- これにより、スタイルがページ間で再利用可能になり、（保守性の問題以外に）Webサイト全体で同じスタイルを確実に使用できるようになります。
- CSSファイルがキャッシュされるため、帯域幅の削減に役立ちます。
そのようないくつかの基本的な質問の後、あなたはいくつかのよりトリッキーな質問をするかもしれません：
単一のセレクターではターゲットにできない複数の要素にそれらの色またはフォントが適用される場合、CSSで色またはフォントの重複をどのように回避しますか？欠点はありますか？
これは、SassやLESSなどのCSSプリプロセッサを使用して行います。これらは、スタイルで後で使用できる変数内のスタイルの色、フォント、およびその他の部分を定義することを可能にします。
CSSプリプロセッサの欠点は次のとおりです。
ブラウザーに最新のCSSコードを表示するために、開発と展開のワークフローを変更する必要がある場合があります。
彼らは数人の開発者しか知らないため、新しい人が後でプロジェクトに参加したり、プロジェクトを維持するのが難しくなります
SassとLESSのどちらにも優れた高速IDEはありません。また、最も人気のあるIDE内での統合は期待外れです。
CDNにある画像の
href値の例を教えてください。この画像は、HTTPとHTTPSの両方からアクセスできるWebサイトに表示されます。
HTTPSでは、呼び出されるすべてのリソースもHTTPS上にある必要があります（そうでない場合、多くの場合、ユーザーにセキュリティ警告が表示されます）。リンクをhttp://cdn.example.com/image.pngとして指定することはできません。画像に正しくリンクするには、//cdn.example.com/image.pngを使用する必要があります。ブラウザーは、コンテキストに応じてhttp:またはhttps:を付加します。
ページのサイズとWebサイト上の要求の数を最適化できず、コンテンツを変更できない、またはAJAXを追加できない）とすると、Webサイトにどのような印象をユーザーに与えますかHTMLの観点から何が関係していますか？
HTTP 1.1が使用されている場合、ページは chunked になる可能性があります。つまり、最初の部分がより速く表示され、実際よりもWebサイトの方が速いという印象を与えます。 HTTP 1.0ではチャンク転送エンコーディングは不可能です。つまり、この場合は何もする必要がありません。
HTMLの観点から、チャンクされたコンテンツを提供できるようにするには、要素を並べ替え、最も重要なコンテンツをファイルの上部に配置する必要があります（これは、ページの上部に表示する必要があるという意味ではありません）。たとえば、eコマースのWebサイトで、ユーザーが製品の詳細を確認したい場合、最初のチャンクに<head/>と製品の詳細が含まれることがあります。次のチャンクには、ウェブサイトのロゴ、メインメニュー、著作権などの主要な要素が含まれる場合があります。最後に、最後のチャンクには、「これを購入した人も購入した」セクション、製品のコメントと評価が含まれる場合があります。 「Facebookでシェア」など.
最後に、候補者に実際のシナリオで作業するよう依頼することができます。以下の最も簡単なもののように、CSSスプライトやその他の高度な最適化手法、ブラウザーの不整合などに対処しなければならない複雑なシナリオには、何でもかまいません。
2つのゾーンを持つXHTMLページを作成できますか。左側にリストがあり、右側にテキストがあります。 2つのゾーンは垂直線で区切られており、ページの最上部から最下部まで伸びています。リストとテキストはサイズが異なるため、どれが最大の高さになるかを予測することはできません。
<table/>sは使用できません。
実際、それはかなり単純ですが、人が高さについて考える反射神経を持っているかどうかを示します。経験の浅い候補者はfloat:leftゾーンとborder-left:solid 1px #ccc;ゾーンを作成しますが、左側のゾーンに境界線を追加し、2つの境界線が同じ場所になるように拡張することを忘れます。
CSSについて私が尋ねる質問は次のとおりです。
- CSSボックスモデル。マージン、パディングなどIEモデルとW3Cモデル。2つをどのように切り替えることができますか？それらの利点と欠点は何ですか？
- CSSの配置。要素が「流れの中にある」と「流れの外にある」とはどういう意味ですか
inline-blockおよびその他の表示値。との差display: none;およびvisibility: hidden;（これは、CSSを初めて使う人にとっては良い簡単な質問です）inline-blockvsfloatレイアウト用。- セレクタ。
- CSSがリセットされます。なぜそれらが必要で、何を達成するのですか？
- メディアクエリとレスポンシブデザイン。
- スタイルを整理する方法とセレクターの数を少なく保つ方法。 LESS、Sass、およびその他のCSSプリプロセッサ。オブジェクト指向のCSS。
そして、HTMLに関するいくつかの質問：
- Doctypeおよびブラウザモード。
- 一部のタグが他のタグよりも望ましいのはなぜですか（たとえば、
emとi）。 - HTMLとCSSを管理しやすく、維持しやすくするために守るべき基本原則は何ですか？
CSSは、多くの人が把握し、効果的に使用するのが難しいと感じる領域であるため、一般的に強調します。履歴書に「CSS」を入力したが、それに関する質問に答えられない多くの候補者に出会います。ほとんどの人は、「いいえ、いいえ、私は知っている CSSで十分対応できますが、それについて話すには不十分です。」
面接担当者に簡単なタスクを完了させることをお勧めします。たとえば、複数の画面サイズをサポートし、それに応じて調整されるレイアウトとブロックスタイルを備えたシンプルなページをデザインします。それは約1、2時間かかるはずで、候補者は彼が何をしていて、その理由を説明する必要があります。
面接で頑張ってください！
ライブインタビューを実施する場合、最善の方法は、開発者にhtml/cssコードの記述を依頼することです。
例（実際の開発では非常に一般的）。開発者にページのhtml/cssコードを記述してもらいます：
- 流体の幅。
- 高さ100pxのヘッダー。
- ヘッダーの右隅にあるログインボタン
- 幅100px、高さ200pxの左側パネルと右側パネル。
- 記事テキストの中央パネル。
- 常に下部にあるフッター。記事は1行でも。
UPD：もちろん、開発者にdivのみ（テーブルなし）を使用してコードを書くように依頼してください。
次のようになります。
ただし、面接の前に、候補者をオンラインでテストすることをお勧めします。すべての候補者に時間を費やすよりも、オンラインで候補者をテストして面接に優秀な開発者だけを招待する方が簡単だからです。
私はいくつかのWebデザイナーのインタビューに参加しました、そして私たちがしたことは非常にシンプルに見えるブログのレイアウトを印刷するを紙に書いて、そして候補者にちょうどHTMLやコメントを書きます）ページ上のCSS 10分以上、コーディング方法の基本的な考え方を説明します。これにより、CSSを実際に知っているかどうかがわかります。フロート対テーブルなどの基本的なものを探していただけで、決して完璧である必要はないことを説明しました。
多くの人々がCSSでの長年の経験を主張しましたが、それを書き出すように強いられたとき、彼らは "_layout: floating; direction: up;_"または他のそのような意味不明なもののような野生の推測で書いていました。 「CSS忍者」が1つ以上あると、構文が正しくありませんでした。「div(margin=5)」です。それは私にとって、インタビューに真っすぐに嘘をついている人がどれだけいるのかを知るのに非常に目を見張るものでした。そして、CSSについては、まっすぐなコーディングよりも嘘をついているようです。 CSSについては理解できませんでしたが、グーグル操作を行うことで、適切な用語をすぐに利用できるようになりました。たとえば、OOPのような上位レベルの概念では、これを効果的に行うことはできません。
プログラミング言語とマークアップ言語に適用できるテストの1つは、コードレビューです。構文エラー、論理エラー、コーナーケース、間違いなく悪いスタイルが混在する小さなサンプル（20行または30行）を作成します...次に、候補者に、疑わしいと思われるものを特定するよう依頼します。
この種のテストを正しく使用することが重要です。面接の質問と同様に、候補者がタスクにアプローチする方法は重要であり、結果だけではありません。
テストを投稿するつもりはありませんが、これをCSSに適用するためのヒントがいくつかあります。
- 構文エラー：一部のセミコロンが欠落しています。おまけとして、いくつかのオプションのもの（引数のスタイル）を見逃して、候補者がコメントするかどうかを確認できます。
- 論理エラー：接頭辞のないプロパティの後に接頭辞付きのプロパティを置きます。これはまた、CSS3に精通していることをテストし、標準の開発方法についての議論を引き起こす可能性があります。
- コーナーケース：例3つの値を持つマージン-それが可能であることを多くの人々が知らないことに驚くでしょう。候補者がコメントしない場合は、無知ではなく知識から無視したことを確認するために、解釈の仕方を尋ねることができます。
- 別のコーナーケース：お気に入りの2つまたは3つのIE7バグを実行します。これにより、（少なくとも1つは発見する必要がある）戦闘痕がある人と、経験の浅い人やWebkitのみの人とが区別されます。
- スタイル：過度の特異性、
emやpxの欠如など。インタビューの構文を研究した人は、おそらくこれらの多くを理解できないでしょう。
個人的な経験から、他の開発者と協力して、HTMLとCSSに関する質問は、彼らが実際に何をしているのかを知っている人から、彼らが話していることを知っている人を選別することはないと思います。
あなたの会社のニーズの現実的な経験に基づく模擬テスト/プロトタイプをお勧めします。