채용시 HTML/CSS/Javascript 기술을 테스트하십시오.

Question

프런트 엔드 개발자를 고용 할 때 어떤 구체적인 기술과 습관을 테스트해야합니까? HTML, CSS 및 Javascript에서 자신의 기술을 평가하는 좋은 척도는 무엇입니까?

분명히 테이블이없는 의미 론적 HTML과 순수 CSS 레이아웃이 핵심 기술 일 것입니다. 그러나 특정 기술은 어떨까요? 멀티 컬럼 레이아웃을 쉽게 조롱 할 수 있어야합니까? CSS 스프라이트? 높이가 같거나 가짜 인 컬럼? HTML 태그 선택이 중요합니까 (예 : <div>에 너무 많이 의존)? 그들은 수레가 어떻게 작동하는지 (단어로) 설명 할 수 있어야합니까?

자바 스크립트 기술은 어떻습니까? 프레임 워크 경험이 얼마나 중요한가 (jQuery, Prototype 등). 오늘?

분명히 위치와 사이트의 세부 정보는 어떤 기술이 필요한지 가장 잘 보여줍니다. 그러나 나는 후보자를위한 시험을 만들 때 사람들이 거래가 (또는 제조사)라고 생각할 수있는 특정 기술을 궁금해합니다.

Answer 1

내가 클라이언트 측 개발자의 위치에 대한 사람들을 인터뷰 할 때 내가 알아 내기 위해 시도 :

이

 
1) Understanding DOM (what is that, how is it related to HTML etc) 
2) Understanding XML/namespaces 
3) Understanding JavaScript (object-oriented? what otherwise) 
4) Knowing approaches to componentization (XBL, HTC) - plus 
5) Understanding OO principles 
6) JavaScript closures 
7) Memory leaks in browsers 

이 유일한 간단한 테스트 케이스가 지금 당장 제공 :

 
<script type="text/javascript"> 
var a = 1; 
</script> 

I가 인터뷰를 제안 기술 용어로 그 선을 설명하십시오.

또한 웹 기술의 현재 상태에 대한 전반적인 인식을 확인합니다. 다른 질문 중에서 인터뷰 대상자가 자신의 새로운 브랜드에 넣을 기술을 선택하라는 웹 브라우저를 제안하고, 현재 클라이언트 측 플랫폼에서 누락되었을 수 있습니다.

Answer 2

적절한 HTML/CSS가 매우 간단해서 누구나 1 주일에 배울 수 있기 때문에 너무 많은 무게를주지 않을 것입니다.

그렇다면 포트폴리오를 검토하여 현재의 기술 수준을 결정하는 데 도움이 될 수 있습니다.

Answer 3

포트폴리오를 요청한 다음 팀과 검토하십시오. 그건 포스터와 "인터뷰를 잘 처리하지 못하는 사람들"을 처리합니다.

그 외에도, 나는 그 (것)들을 상대적으로 간단하게 비웃는 것을 제안하고 휴대용 퍼스널 컴퓨터는 "그것을 가지고있다."

어쩌면 웹 디자인에 대해 가장 좋아하는 것이 무엇인지, 그리고 가장 싫어하는 것이 있는지 물어보십시오. 수평선 (HTML 5, IE 8, Chrome 등)에 무엇이 있는지에 대한 의견을 물어 본 다음 나오는 내용을 확인하십시오.

좋아하는 JavaScript 프레임 워크가 있는지, 왜 그런지 물어보십시오. 어쩌면 그들이 JS에서 유명한 [fizz buzz] 문제를 코드화하게 할 수 있습니다.

Answer 4

세르게이와 swilliams 모두 큰 해답을 주었고, 특히 swilliams는 포트폴리오를 요구하는 언급이 중요합니다. 포트폴리오를 사용하면

• 과 같은 항목을 테스트 할 수도 있습니다. html 및 css 유효성 검사는 무엇입니까?
• 프레젠테이션이 여러 브라우저에서 일관되게 렌더링됩니까?
• 후보자가 자바 스크립트 오류를 ​​가지고 있습니까?만약 그렇다면, 사람들은 프리젠 테이션 레이어에 버블 링을 할 것인가? 아니면 최소한 try/catch 블록으로 잡을 것인가?
• JS의 관점에서 사람이 얼마나 고급입니까? 폼 검증을 할 수 있습니까? 그들은 정규식을 할 수 있습니까? 그들은 MM_Preloader에 의존하고 있습니까? (Yuck!)

포트폴리오는 또한 누군가가 웹 개발에 대해 얼마나 열정적인지 알 수 있습니다. 또한 다른 사람들을 위해 사이트를 만들었다면 후보자와 함께 여러 가지 이야기 할 수있는 기회가 주어졌습니다.

• UI를 개발하는 방법은 무엇입니까?
• 어떤 종류의 계획이 사이트에 들어 갔습니까?
• 사용자의 기대치는 어떻게 확인 되었습니까?
• 건설 중 어떤 어려움이 발생 했습니까?

이러한 항목 이외에도 고려해야 할 다른 방법 중 하나는 장래 채용을 할 수있는 개발자 테스트입니다. 1 일 이상 걸리지는 않겠지 만 CSS 또는 JS 문제를 해결할 수 있는지 알아보기에 충분합니다.

Answer 5

나는 이것이 훌륭한 대답은 아니지만 내가하는 첫 번째 일 중 하나는 단어 이력서의 형식을 폭로하는 것입니다. Word에서 제공하는 들여 쓰기 및 스타일을 사용하고 탭, 탭, 탭, 스페이스, 스페이스, 스페이스가 아닌 경우 더미 맨 위에 표시됩니다.

Answer 6

는 "

은 물론, 테이블 덜 의미 HTML 및 순수 CSS 레이아웃은 아마도 핵심 기술이다.

"

내가 그 문장을 이해하지 ...

마 테이블을 사용하는 것을 피하기 위해 복잡한 방식으로 테이블을 사용하는 간단한 작업을 수행하는 것이 더 낫다는 것을 의미합니다. -)

표 o 공포증 서버 사이드 지원없이 대규모 웹 사이트를 만드는 것만큼이나 어려운 질병입니다 ...

물론 지난 10 년간의 테이블 - 지옥은 흥미롭지 않지만 많은 작업이 테이블을 사용하지 않고 완료하는 것은 정말 어리 석습니다 ! ...

사용 easyist가 사용 tagnames에 상관없이 작업을 완료 html로 요소 -)

- 그리고 나는 '순수 CSS 레이아웃이'무엇인지 이해하지 않는다; 스타일 시트에서 레이아웃을 호스팅 할 html 요소가없는 html 페이지를 만드는 방법을 결코 알지 못했습니다.

Answer 7

브라우저가 다른 방법에 대한 이해도 중요합니다. 특히 IE. 그들이 IE 용으로 코딩 한 적이 있다면 조심하십시오! Vica Versa 역시 IE6/7에서 테스트 한 적이 없다면 얼마나 실패했는지 전혀 알 수 없습니다.

IE에서 실패하거나 해결 방법이 필요한 세 가지 이름을 지정할 수 있다면 공에 넣을 가능성이 큽니다. 그렇지 않으면 아직 충분한 크로스 브라우저 경험이 없습니다.

Answer 8

여러분 모두에게 감사드립니다. 그들은 확실히 좋은 충고입니다. 나는 받아 들여진 것으로 표시 할 준비가되지 않았다.내가 정말로 찾고 있던 것은 프런트 엔드 개발자가 테스트 환경에서 생성 할 수 있어야하는 구체적인 작업이었습니다. 즉, CSS 용 FizzBuzz는 무엇입니까?

저는 단호한 포트폴리오와 주제에 대해 지능적으로 말하기 능력이 아마도 테스트의 중요성을 최소화 할 것이라는 데 동의합니다. 다른 한편으로, 나는 우리 모두가 큰 말하기에 매우 능숙한 후보자를 알고 있다고 생각하지만 실제로 실용적인 지식을 실제로 보여줄 때까지는 부족합니다.

@JonathanHolland - 나는 동의하지 않는 경향이 있습니다. HTML/CSS는 확실히 쉽게 배울 수 있지만 몇 가지 빠른 자습서에서 얻은 지식은 수년간 레이아웃을 작성한 사람과 비교하면 아무 것도 아닙니다. 훌륭한 CSS 개발자가 테이블에 가져올 수있는 많은 기법과 사례가 있습니다.

@roenving - 아마도 중복되었습니다. "pure-css"로, 나는 table-less를 의미했다. 레이아웃 방법론으로 테이블을 사용하지 않는다는 점에서 테이블이없는 것을 의미했습니다. 그러나 이것은 div-vs-table 레이아웃 토론에 대한 질문이 아닙니다. here을 시도하십시오. 비록 대부분의 고용주가 요즘 개발자가 테이블을 사용하지 않고 레이아웃을 (방법론으로) 할 수 있는지 묻고 있습니다.

Answer 9

사람들이 사용하는 도구, 코드 작성 방법, 즉 Dreamweaver, BBEdit, emacs 등을 사용하는지 묻습니다. 그들은 단지 한 단어의 답을 제공하지 않는다고 가정 할 때 일반적으로 우선 순위가 무엇인지, 코드를 작성하는 방법 등을 일종의 아이디어로 얻습니다.

그런 다음 코드의 유효성을 검사하는 방법을 묻습니다.

실제로 앉아서 페이지를 망가 뜨리면서 테스트 한 것 외에, 내가 한 일의 구체적인 예와 문제를 어떻게 해결했는지 물어볼 것입니다. 예를 들어

, 일에 당신은는 "당신이 엄격한 마감 어디 일에 대해 말해"라고하거나 말 "정말 실망 문제에 대해 우리에게 당신이 그것을 극복하는 방법" 또는 " 당신이 최근에 해왔 던 것, 당신이 가장 자랑스러워하는 것이 무엇입니까? "

당신은 그들이했던 일의 종류에 대한 통찰력을 많이 얻을 그런 식으로, 자신의 문제 해결 능력과 경험, 그들은 스트레스와 좌절, 그리고 물론, 여부를 자신의 해결 방법/코너 절단을 처리하는 방식 조치는 똑똑하거나 바보입니다.

Answer 10

우리는 일정 시간 내에 일할 수 있도록 간단한 브리핑을 설정하거나 경우에 따라 그 일을 계약하고 어떻게 진행되는지 살펴 보았습니다.

누군가가 인터뷰 룸의 랩톱에 앉아서 해결책을 강구하는 것에 대해 걱정하지 않았습니다. 그런 환경은 정상적인 근무 조건과 매우 흡사하지 않기 때문입니다.

요약의 정확한 성격은 찾고있는 스킬 셋에 따라 크게 달라질 수 있습니다. 일부 상점에서는 프런트 엔드 개발자가 일정한 간격으로 디자인을 채우거나 디자인 "바이브"를 구현할 때 "브랜드 경찰"직무를 수행해야합니다.
이러한 경우, 타이포그래피의 미세한 부분과 기타 작은 세부 사항과 관련하여 간략한 내용에 구멍을 남기면 그러한면에서 자신의 능력에 대한 힌트를 얻을 수 있습니다.
자바 스크립트 프레임 워크를 선택하게하고, 작업에 가장 적합한 프레임 워크 또는 그들이 알고있는 프레임 워크를 선택 했습니까? (주관적인 질문, 네.하지만 datepicker 및 일부 메뉴 애니메이션을 위해 도장을 당기는 것은 과도 함일 수 있습니다.)

CSS 기반 레이아웃을 구현할 수있는 사람을 찾고 싶지만 레거시 프로젝트를 다룰 때 필요한 경우 테이블 기반 레이아웃에서 실제로 작업 할 수 있습니다. . 잘못된 표식 레이아웃의 세부 정보 중 일부는 항상 쉬운 것은 아닙니다.

이러한 유형의 작업에서 가장 중요한 것은 세부적인 사항에주의를 기울여서 인쇄를위한 스타일 규칙 집합을 추가하고, 적절한 이미지 크기 및 형식을 사용하고, 깨끗하고 유효한 코드를 생성했으며, 실제로 금 때문에 사용했기 때문입니다 직업을 원하고, 그것을 얻기 위해 조금씩 늘어날 준비가되어 있습니다.

당신이 그들에게 여분의 시간을 주었기 때문에, 이상한 책상에 두었고 그것을 놓으라고 말하는 스트레스가 많은 시나리오보다는 인상을 주려고 노력하는 것이 공평합니다. 따라서 현실적이며 매 작업마다 매일 강박 적으로 완벽한 작업을 기대하지는 않지만이 상황에서 저는 금을 찾고 있습니다. 적어도 금이 목표 였음을 증명합니다.

그들이 전에 한 일이없는 커브 볼을 던지십시오. 서둘러서 얼마나 잘 가져갈 수 있는지보십시오. 경험은 좋지만 빠른 속도로 변화하는 지역에서는 빨리 배울 수있는 능력이 더 중요합니다.

Answer 11

우리 회사에서는 테스트를 수행하지 않으며 포트폴리오가 더 중요합니다. 특히 프런트 엔드 개발에 대한 후보자의 개인적인 동기와 열정을 보려는 경향이 있습니다.

하지만 고용하기 전에 후보에게 테스트를 제공해야하는 경우, 그것에 대해 이런 식으로 갈 것 : 아래의 명확한 의미 컴포넌트 트리를 나타내는 포토샵 웹 페이지의 프린트 아웃을 통해

손을. html로 결과에 어떻게 올지를 사람에게 물어보십시오. 그 사람에게 크게 생각하도록 요청하십시오. 페이지를 볼 때 머리를 뚫어서 개발해야한다는 것을 알고 있습니다.

그러면 후보자가 취하는 접근 방식이 나옵니다.

특정 HTML 섹션마다 가장 적합한 마크 업을 선택하는 것은 중요한 측면이지만 경험 많은 사람들과 함께 새로운 직원을 안내 할 수 있습니다. 설계를 의미 적 구성 요소로 적절히 분해 할 수 있기 때문에 섹션을 식별하고 기본 및 보조 컨텐츠를 탐색에서 분리하는 것이 수학 또는 과학이 아니므로 테스트하기가 어렵습니다. 그러나 페이지를 무너 뜨리는 접근 방식에 대한 대화는 경험 많은 사람들을 초보자와 분리시킬 수 있습니다.

하지만 첫 번째 줄에서 말한 것처럼 블로그, 게임 또는 데모와 같이 자유 시간에 어떤 웹 관련 작업을 수행했는지 묻습니다. 아무 것도하지 않으면 그 사람은 대개 프론트 엔드 개발에 능숙하거나 배우고 적응하기를 열망했습니다.

Answer 12

필자는 채용 경험이 없지만 웹 개발자 인터뷰를 많이 읽었으며 경험과 관련이 있습니다.

내 인터뷰 중 진정한 재능을 발굴하는 가장 좋은 방법은 하나의 방법 밖에 없습니다. 나는 내가 전문가가 아니란 것을 인정할 것이다. 그리고 이것은 아마도 내가 직업을 갖지 못한 이유 일 것이다. 그러나 이것은 유능한 사람들과 훌륭한 사람들을 제적시키는 환상적인 방법이었다.

우리는 DOM, 객체 지향, 클로저, XML 네임 스페이스 및 일반 웹 디자인에 대해 몇 가지 질문을 받았다. 그런 다음 인근 강 건너편의 멋진 경치를 볼 수있는 조용한 사무실에 들어가서 몇 가지 예를 작성했습니다. 우리의 능력을 보여 주려고. 우리는 혼자 였지만 브라우저를 사용해야 할 경우 소스 코드와 브라우저 기록을 볼 수 있다고 들었습니다.우리는 다음과 같은 사용하여 회사 인트라넷을하게했다 :

• 간단한 3 열 레이아웃
• 사용할 수는 있지만 잘 생긴 네비게이션 바 CSS
을 사용
• 잘 생긴 테이블. 당신은 정말이 물건을 할 수있는 사람을 만나게을이 작업을 수행하는 시간의 작은 금액을 감안하면 XML과 자바 스크립트

를 사용

동적 로딩. 어쩌면 그들의 예가 항상 다른 응용 프로그램에 비해 더 좋거나 더 적합 할 수 있지만, 개발자의 기술을 보여줄 수있는 가장 좋은 방법은 이 무엇인가를 만들도록하는 것입니다. 당신이 당신의 물건을 알고 있고 그들의 물건을 알고 있다면 그들의 코드는 좋을 것입니다.

Answer 13

HTML, CSS 및 JavaScript가 함께 포함 된 온라인 테스트를 제안 할 수 있습니다.

http://tests4geeks.com/test/html-css-javascript

그것은 (각 주제에 대한 20) (60) 질문이 있습니다. 그리고 후보자가 시험을 끝내면 이메일을 통해 보고서를 받게됩니다.