一、HTML
【HTML related interview questions】
1、What is doctype? Why do u need it?
2、What is the use of data-* attribute?
3、How can you generate public key in html?【keygen】
4、How can u change direction of html text?【bdo】
5、How can u highlight text in html?【mark】
6、Can u apply css rule to a part of html document?【scoped】
7、Does the following trigger http request at the time of page load?【http request】
8、Does style1.css have to be downloaded and parsed before style2.css can be fetched?【download order】
9、What are optional closing tag? and why would u use it?【self closing tag】
10、What is the difference between span and div?【span vs div】
11、When should you use section, div or article?【div, section & article】
12、What are the difference between svg and canvas?【svg vs canvas】
13、How to serve a page content in multiple languages?【multiple languages】
14、Difference between standard/ strict mode and quirks mode?【standard & quirks mode】
15、What is semantic HTML?【semantic】
【Front-end-Developer-Interview-Questions中文】【Front-end-Developer-Interview-Questions】
16、你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
17、浏览器同一时间可以从一个域名下载多少资源？有什么例外吗？
18、请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。
19、什么是跨域资源共享 (CORS)？它用于解决什么问题？
20、浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
21、如果页面使用 'application/xhtml+xml' 会有什么问题吗？
22、请解释 <script>、<script async> 和 <script defer> 的区别。
23、为什么通常推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 之前？你知道有哪些例外吗？
24、什么是渐进式渲染 (progressive rendering)？
25、你用过哪些不同的 HTML 模板语言？
【Front-End-Developer-Interview-Questions（持续更新）】
26、你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗?
27、浏览器同一时间可以从一个域名下载多少资源？
28、请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间)
29、请写一个简单的幻灯效果页
30、什么是”白屏”？什么是 FOUC (无样式内容闪烁)？如何避免？
31、请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)
32、doctype(文档类型) 的作用是什么？
33、浏览器标准模式 (standards mode) 、几乎标准模式（almost standards mode）和怪异模式 (quirks mode) 之间的区别是什么？
34、HTML 和 XHTML 有什么区别？
35、如果页面使用’application/xhtml+xml’会有什么问题吗？
36、DOCTYPE 声明的作用、取值与区别
37、常见的 meta 标签有哪些？移动端呢？
38、关于 HTML 语义化知道哪些？
39、是否有关注 HTML 标准的演进？比较关注哪些方面？能否举一些例子？
【10 Typical HTML Interview Exercises】
40、Markup validation
41、The main element
42、WAI-ARIA
43、The small element
44、Subheadings 副标题
45、Images and accessibility 图像和可访问性
46、The time element
47、meter and progress
48、The longdesc attribute
49、The mark element
【12 Essential HTML5 Interview Questions】
50、What were some of the key goals and motivations for the HTML5 specification?HTML5规范的一些关键目标和动机是什么？
51、What are some of the key new features in HTML5?
52、What are “web workers”?
53、How do you indicate the character set being used by an HTML5 document? How does this differ from older HTML standards?您如何指定HTML5文档使用的字符集？ 这与旧的HTML标准有什么不同？
54、Discuss the differences between an HTML specification and a browser’s implementation thereof.讨论HTML规范和浏览器的实现之间的差异。
55、Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.
56、Can a <section> contain <article> elements? Can an <article> contain <section> elements? Provide usage examples.
57、Can a web page contain multiple <header> elements? What about <footer> elements?
58、Describe the relationship between the <header> and <h1> tags in HTML5.
59、Give a simple implementation of the <video> tag to embed a video stored at http://www.example.com/amazing_video.mp4.
60、Give the video a width of 640 pixels by 360 pixels. Provide the user with controls.
61、Write the code necessary to create a 300 pixel by 300 pixel <canvas>. Within it, paint a blue 100 pixel by 100 pixel square
62、with the top-left corner of the square located 50 pixels from both the top and left edges of the canvas.
63、What is HTML5 Web Storage? Explain localStorage and sessionStorage.
【35 Helpful HTML & HTML5 Interview Questions & Answers】
64、What are the limitations when serving XHTML pages?
65、How many HTML tags are should be used for the most simple of web pages?
66、How do you make comments without text being picked up by the browser?
67、What is the difference between linking to an image, a website, and an email address?
68、My hyperlink or image is not displaying correctly, what is wrong with it?
69、What is the syntax difference between a bulleted list and numbered list?符号列表和编号列表之间的语法差异是甚么？
70、What is the difference between <div> and <frame>?
71、what’s the real difference between HTML and HTML5?
72、What are the new image elements in HTML5?
73、What are some of the major new API’s that come standard with HTML5?
74、What is the difference in caching between HTML5 and the old HTML?
【40 important HTML 5 Interview questions with answers】
75、How to draw rectangle using Canvas and SVG using HTML 5 ?
76、What is the use of column layout in CSS?
77、What is the lifetime of local storage?
78、What is WebSQL?
79、Is WebSQL a part of HTML 5 specification?
80、So how can we use WebSQL ?
81、So how do we implement application cache in HTML 5 ?
82、What is fallback in Application cache?什么是应用程序缓存中的回退？
【HTML Interview Questions and Answers - Freshers & Experienced】
83、What are some of the common lists that can be used when designing a page?
84、What is the advantage of collapsing white space?
85、Is it possible to list elements straight in an html file?是否可以在html文件中直接列出元素？
86、Does a hyperlink apply only to text?
87、What hierarchy is being followed when in style sheets?
88、What happens if the list-style-type property is used on a non-list element like a paragraph?
89、What is the advantage of using frames?使用框架的优点是什么？
90、How can I hide my source?
91、How will you align a table to the right or left?
92、Why doesn't <TABLE WIDTH="100%"> use the full browser width?
93、How would you automatically transfer your visitors to a new web page?
94、You want only a vertical scrollbar and no horizontal scrollbar on your page. How would you do it?
95、How do you refer to the .css file in the web page?
96、What is a <dl> tag in HTML?
97、What are empty HTML elements?
98、How to create nest tables within tables in HTML?
99、Explain Non Breaking space in HTML.
100、How do I link to a location in the middle of an HTML document?锚点
101、Explain Cell Padding and Cell Spacing.
102、How to create a button which acts like a link?
103、What is difference between HTML and XHTML?
104、How many types CSS can be include in HTML?
105、What are new Media Elements in HTML5?
106、Explain various HTML list tags.
107、Explain HTML background.
108、What is the Use of SPAN in HTML and give one example?
109、What are the different way in which website layout can be made?
110、Differentiate different types of Doctypes from one another
111、Why it is important to set the meta information?
112、What are the different types of entities in HTML?
113、What does the elements mean in syntax given for URL in HTML?
114、How to add helper plug-ins on the webpage using HTML?如何使用HTML在网页上添加助手插件？
115、What is the purpose of iframe in HTML?
116、What is the purpose of canvas in HTML?
117、What are the different types of frames tags used in HTML?
118、Write a code to change the color of the background or text? Explain the elements involved in it.
119、What is the main function of <pre> tag in HTML?
120、How can tables be made nested in HTML?
121、How can tables be used inside a form? Explain with an example.表格嵌套表格
122、What are the different ways to use different colors for different links or same link?
123、How to upload files using HTML to website?
124、Write a program to include the custom button with the form编写程序以包含带有表单的自定义按钮
125、How to prevent the display of “Getting framed in HTML?如何防止显示“获取HTML框架？
126、How to include a frameset inside another frameset?
127、How to update two frames at the same time using HTML?如何使用HTML同时更新两个帧？
【Top 50 HTML Interview Questions & Answers】
128、What is HTML?
129、What are tags?
130、Do all HTML tags come in pair?
131、What are some of the common lists that can be used when designing a page?
141、How do you insert a comment in html?
142、Do all character entities display properly on all systems?
143、What is image map?
144、What is the advantage of collapsing white space?
145、Can attribute values be set to anything or are there specific values that they accept?
146、How do you insert a copyright symbol on a browser page?
147、Do older html files work on newer browsers?较旧的html文件在较新的浏览器上工作？
148、Does a hyperlink apply to text only?超链接是否仅适用于文字？
149、If the user’s operating system does not support the needed character, how can the symbol be represented?
150、How do you change the number type in the middle of a list?
151、How do you create multicolored text in a webpage?如何在网页中创建多彩文字？
152、Why are there both numerical and named character entity values?为什么有数字和命名的字符实体值？
153、What is the advantage of grouping several checkboxes together?
154、What will happen if you overlap sets of tags?如果您重叠标签集，会发生什么？
155、What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the html file?
156、Is it possible to set specific colors for table borders?
157、What other ways can be used to align images and wrap text?
158、Can a single text link point to two different web pages?
159、What is the difference between the directory and menu lists and the unordered list?
160、What are the limits of the text field size?
161、Do <th> tags always need to come at the start of a row or column?
162、What is the relationship between the border and rule attributes?
163、What is a marquee?
164、How do you create a text on a webpage that will allow you to send an email when clicked?
165、Are <br> tags the only way to separate sections of text?
166、Are there instances where text will appear outside of the browser?文本是否会出现在浏览器外面？
167、How are active links different from normal links?
168、Can several selectors with class names be grouped together?可以将具有类名称的几个选择器分组在一起吗？
169、Is audio tag supported in HTML 5?
170、What is the difference between progress and meter tag?
171、What is the use of figure tag in HTML 5?
172、What is button tag?
173、What does details and summary tag?
174、What is datalist tag?
175、How tags are migrated from HTML4 to HTML5?如何将标签从HTML4迁移到HTML5？
176、If I do not put <!DOCTYPE html> will HTML 5 work?
177、What is the use of required attribute in HTML5?
178、What are the new <input> types for form validation in HTML5?
179、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
180、HTML与XHTML——二者有什么区别
【Front End Developer Employer Questions】
181、Semantics fanatic or divs and spans as necessary?
182、Do you use WAI-ARIA?
183、Can you describe the difference between progressive enhancement and graceful degradation?
184、Explain what "Semantic HTML" means.
【Front-End Dev Interview Questions】
185、Are you familiar with Jade or Haml?
【Web Developer Interview Questions And Answers】
186、What is the advantage of collapsing white space?【HTML中只能用一个空格符】
【Frontend Interview Questions and Answers for experienced】
187、Why do we need to use W3C standard code?
【Front End Web Developer interview questions】
188、Why is HTML5 History API so essential for all single page applications?【History】
189、Why would you use <strong> instead of <b> ?
【Preparing for a Front-End Web Development Interview in 2017】
190、Accessibility concerns, for example, making sure an input checkbox has a larger responding area (use label “for”). Also, role=”button”, role=”presentation”, etc.【属性】辅助功能，例如，确保输入复选框具有较大的响应区域（使用标签“for”）。 另外，role =“button”，role =“presentation”等
二、CSS
1、What does float do?【float】
2、How can you clear sides of a floating element?【clear】
3、Does css properties are case sensitive?
4、Why css selectors mixed up with cases don't apply the styles?
5、Does margin-top or margin-bottom has effect on inline element?
6、Does padding-top or padding-bottom has effect on inline element?
7、Does padding-left or padding-right or margin-left or margin-right has effect on inline element?
8、If you have a <p> element with font-size: 10rem, will the text be responsive when the user resizes / drags the browser window?
9、The pseudo class :checked will select inputs with type radio or checkbox, but not <option> elements.
10、In a HTML document, the pseudo class :root always refers to the <html> element.
11、The translate() function can move the position of an element on the z-axis.
12、Which one would you prefer among px, em % or pt and why?【units】
13、How absolute, relative, fixed and static position differ?【position】
14、What are the differences between visibility hidden and display none?【display vs visibility】
15、What are the differences between inline, block and inline-block?【inline block】
16、What are the properties related to box model?【box model】
17、Does overflow: hidden create a new block formatting context?【overflow】
18、How could you apply css rules specific to a media?【media queries】
19、What is the use of only?
20、Does the screen keyword apply to the device's physical screen or the browser's viewport?
21、What are the some pseudo classed u have used?【pseudo class】
22、How do you align a p center-center inside a div?【vertical Center】
23、How do you optimize css selectors?【optimize selector】
24、How can you load css resources conditionally?【@import】
25、Why would you use sprites?【sprite】
26、What is specificity? How do u calculate specificity?【specificity】计算优先级
27、What is shadow DOM?【shadow DOM】
28、What do you know about transition?【transition】
29、What are the different css filter you can use?【filter】
30、What are the reasons to use preprocessor?【pre processor】
31、What would be the color of text "I am awesome" for he following rules?【see & tell】优先级
32、What will happen to the position of #myDude?【Position related】
33、On page load, will mypic.jpg get downloaded by the browser?【download resources】
34、What will this selector do?【read selector】
【Front-end-Developer-Interview-Questions中文】
35、请解释 CSS 动画和 JavaScript 动画的优缺点。
36、CSS 中类 (classes) 和 ID 的区别。
37、请问 "resetting" 和 "normalizing" CSS 之间的区别？你会如何选择，为什么？
38、请解释浮动 (Floats) 及其工作原理。
39、描述z-index和叠加上下文是如何形成的。
40、请描述 BFC(Block Formatting Context) 及其如何工作。
41、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？
42、有哪些的隐藏内容的方法 (如果同时还要保证屏幕阅读器可用呢)？
43、你用过栅格系统 (grid system) 吗？如果使用过，你最喜欢哪种？
44、你用过媒体查询，或针对移动端的布局/CSS 吗？
45、你熟悉 SVG 样式的书写吗？
46、如何优化网页的打印样式？
47、在书写高效 CSS 时会有哪些问题需要考虑？
48、使用 CSS 预处理器的优缺点有哪些？请描述你曾经使用过的 CSS 预处理器的优缺点。
49、如果设计中使用了非标准的字体，你该如何去实现？
50、请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
51、请描述伪元素 (pseudo-elements) 及其用途。
52、请解释你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
53、请解释 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处？
54、请罗列出你所知道的 display 属性的全部值
55、请解释 inline 和 inline-block 的区别？
56、请解释 relative、fixed、absolute 和 static 元素的区别
57、CSS 中字母 'C' 的意思是叠层 (Cascading)。请问在确定样式的过程中优先级是如何决定的 (请举例)？如何有效使用此系统？
58、你在开发或生产环境中使用过哪些 CSS 框架？你觉得应该如何改善他们？
59、请问你有尝试过 CSS Flexbox 或者 Grid 标准规格吗？
60、为什么响应式设计 (responsive design) 和自适应设计 (adaptive design) 不同？
61、你有兼容 retina 屏幕的经历吗？如果有，在什么地方使用了何种技术？
62、请问为何要使用 translate() 而非 absolute positioning，或反之的理由？为什么？
【Front-End-Developer-Interview-Questions（持续更新）】
63、CSS中类选择器和ID选择器的区别？
64、CSS选择器有哪些？
65、PNG,GIF,JPEG的区别及如何选？
66、CSS Hack原理及常用Hack
67、CSS特殊性计算
68、CSS中常用的颜色单位
69、如果设计中使用了非标准的字体，你该如何去实现？
70、块级元素的相关特点
71、CSS 有几种引入方式？各自的优缺点？
72、不同浏览器上的默认样式，如何处理？（normalize/sanitize）
73、盒模型、IE 6/7 与现代浏览器的区别、如何兼容
74、BFC 的概念
75、containing block 和 stacking context 的概念和计算
76、position 和 display 各有几种取值？说说他们的含义与用途
77、position: absolute 和 float 有什么区别
78、如何清除浮动？为什么要清除浮动？
79、选择器相关问题
80、specificity 的计算
81、伪类和伪元素的区分
82、选择器性能（浏览器如何进行匹配）
83、CSS3 和 CSS4 选择器知道哪些
84、CSS 优化
85、网络加载方面有哪些手段
86、渲染性能的方面呢
87、用过哪些 CSS 方面的工具
88、随便谈谈 CSS 工程化
89、CSS 实现元素的水平垂直居中
90、实现一个圣杯布局
【25 Helpful CSS Interview Questions and Answers】
91、Explain what a class selector is and how it’s used:
92、What are pseudo classes and what are they used for?
93、Explain the three main ways to apply CSS styles to a Web page:
94、What is grouping and what is it used for? 什么是分组？用于做什么？
95、What is an ID selector and how is it used?
96、What is a Class selector and how does it differ from an ID selector?
97、What are child selectors?
98、What are the different CSS properties used to change dimensions and what values can they accept?
99、How is the float property implemented in CSS?
100、What is the CSS Box Model used for? What are the elements that it includes?
101、How to restore the default property value using CSS?
102、What is the purpose of pseudo-elements and how are they made?
103、How are inline and block elements different from each other?
104、What is the purpose of the z-index and how is it used?
105、What are the advantages and disadvantages of External Style Sheets?
106、List the main CSS style sheet properties:
107、Which online resources do you refer to when having issues with CSS?
108、What are the various techniques for clearing floats?
109、Explain the difference between visibility:hidden and display:none
110、What are some of the new features and properties in CSS3?
111、Why shouldn’t I use fixed sized fonts ?
112、Which font names are available on all platforms ?
113、Do you use grid systems, and if so, what do you prefer?
114、What are the advantages/disadvantages of using CSS preprocessors? (SASS, Compass, Stylus, LESS)
115、Why and how are shorthand properties used? Give examples.
116、Effectively Communicating Your Skills
【CSS interview questions and answers】
117、What are different ways to integrate a CSS into a Web page?
118、If background and colour should always be set together, why do they exist as separate properties?
119、Explain external Style Sheet? How would you link to it?
120、What are the advantages and disadvantages of External Style Sheets?
121、What are the advantages and disadvantages of Embedded Style Sheets?
122、What are the advantages and disadvantages of Inline Styles?
123、How can you eliminate the blue border around linked images on web page?
124、What is CSS selector?
125、What is Tweening?
126、Explain RWD.
127、What is the use of CSS sprites?
128、What is the syntax to link external style sheet?
129、How embedded style can be linked with HTML documents?
130、Why imported is an easy way to insert the file?
131、How do I combine multiple sheets into one?
132、What are the rules in CSS ruleset?
133、What is the CLASS selectors used for?
134、What is the difference between class selector and ID selector?
135、What is contextual selector?
136、What do you understand by parent-child selector?
137、What is ‘important’ declaration used in CSS?
138、Is there any provision to include one or more declaration in a selector?
139、What is the use and syntax of class in CSS?
140、How grouping happens inside a CSS?
141、What is the purpose of pseudo-elements?
142、How pseudo-classes are different from pseudo-elements?
143、What does cascade and cascading order defines?
144、What are the different sorting methods used inside the cascading order?
145、How inline and block elements are different from each other?
146、How does inheritance work in CSS?
147、What are the advantages of the external over inline style methods?
148、How do you override the underlining of hyperlinks?
149、How to center the block-elements with CSS?
150、What will happen if we will use floats across the page with 100% width?
151、What is the Difference between id and class?
152、How to restore the default property value using CSS?
153、What is the purpose of Nesting Selectors?
154、How CSS float works?
155、What is the use of Media Types in CSS?
156、What are the different Media Types included in CSS?
157、Why CSS Box Model is used? What are the elements that it includes?
158、Write the css code showing the usage of all the background properties.
159、How are contextual selectors used in CSS?
160、How can the same properties be defined for different elements without repeating them again and again?
161、How can imported style sheets be linked? Explain with the help of an example?
162、Explain with the help of an example the usage of a parent-child selector.
163、Why should inline styles be used carefully?
164、How do hexadecimal color codes differ from RGB values?十六进制颜色代码与RGB值有何不同？
165、What is the use of a pseudo class? Explain with the help of an example?
166、How is a CSS executed in case of more than one conflicting rule?
167、Explain with the help of examples how the display property is used in CSS.
168、Explain what are image sprites and how are they used in css.
169、With the help of examples explain grouping and nesting of css selectors.
170、How can HTML elements be styled having specific attributes?
171、What are the different provision provided in css to define the dimension of an element?
172、Explain the concept of the box model in css.
173、How is the float property implemented in css?
174、What is the purpose of the z-index? Explain with the help of an example.
175、Explain the meaning of graceful degradation in reference to CSS.
176、What is the other alternative to graceful degradation?
177、How are shorthand properties are used in css? Give examples.
【CSS interview questions and answers】
178、How do you include comments in CSS?
179、Have you utilized any CSS libraries or frameworks?
【Interview Questions and Exercises About CSS】
180、Fix The Sidebar
181、Make this fixed width design fluid.
182、Replace this logo markup with an image.
183、Google how you would find out what the default value for backface-visibility is.
184、What is the "Box Model" in CSS? Which CSS properties are a part of it?
185、What are Sass, Less, and Stylus? Why do people use them? How does something like Compass relate to Sass?
186、Name some online resources that you reference when having CSS issues.
187、Describe what a “reset” CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?
188、What are the various techniques for clearing floats?
189、What are sprites and why would use them? How do you go about creating them? What are possible alternatives to sprites?
190、What are some accessibility concerns that come up in CSS?
191、What is the difference between inline, inline-block, and block?
192、What tools do you use for cross-browser testing?
193、What are some of your favorite web design workflow tools?
194、Say you found a rendering problem on one of your sites in Internet Explorer 8, which you have decided you are supporting.
195、How would you approach fixing it?IE出现渲染问题
196、What is responsive design all about?
197、Have you ever worked with a grid layout? What are your thoughts on that?
198、What are the benefits of SVG?
199、Have you ever created a print stylesheet for a website?
200、Say you were tasked with coding a design that used non-standard web fonts, how would you go about it?使用非标准字体
201、Explain to me what's going on in this CSS selector:
【Top 50 CSS & CSS3 Interview Questions & Answers】
202、What is CSS ?
203、What is the origin of CSS ?
204、What are the different variations of CSS ?
205、What are the limitations of CSS ?CSS的局限性
206、What are the advantages of CSS ?
207、What are CSS frameworks?
208、How block elements can be centered with CSS1?
209、Who maintains the CSS specifications?
210、In how many ways can a CSS be integrated as a web page?
211、What benefits and demerits do External Style Sheets have?
212、Discuss the merits and demerits of Embedded Style Sheets?讨论嵌入式样式表的优缺点？
213、What does CSS selector mean?
214、Enlist the media types CSS allows?
215、Differentiate logical tags from physical tags?
216、Differentiate Style Sheet concept from HTML?
217、Describe ‘ruleset’?
218、Comment on the Case-sensitivity of CSS ?
219、Define Declaration block?定义声明块
220、Enlist the various fonts’ attributes?列出字体的属性
221、How can the dimension be defined of an element ?
222、How can backward compatibility be designed in CSS?向后兼容
223、How can the gap under the image be removed?
224、Which among the following is more precedent: CSS properties or HTML procedures?优先CSS还是HTML程序
225、Are quotes mandatory in URL’s? URL中是否强制使用引号？
226、What is at-rule?
227、How can CSS be cascaded to mix with user’s personal sheet?
228、How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
229、Have you ever used a grid system, and if so, what do you prefer?
230、What are the different ways to visually hide content (and make it available only for screen readers)?
231、Explain how a browser determines what elements match a CSS selector?【CSS选择器原理】
【Front-End Dev Interview Questions】
232、What is a rem unit? When do you use them?
233、What are vendor prefixes?
234、Do you use bootstrap?
235、Using animations what CSS property do you use to increase/decrease the size of an element?
236、What is Responsive Design?
【CSS questions：Pseudo classes】
237、You have the following html code:【伪类】
<div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="button"></div> </div>
Describe what you will see on the screen after applying following style
.item { display: inline-block; width: 40px; height: 40px; margin-right: 10px; background-color: blue; } .item:last-of-type { background-color: red; }
238、You have rows in the page. Each row has number of items with the same classes. Amount of items differ from row to row.
239、Without adding new classes change color of elements, when there are exactly five in the row. 【伪类】
【CSS questions：Aligning elements】
240、You have two <div> elements side by side in the row.The right one has fixed width of 200px, the left one should take all the rest.【布局】
241、You have following html code. Please align text horizontally in the center and vertically in the middle. You have also item-base style, that shouldn't be changed.【水平垂直居中】
<div class="item-base item"> Some awesome text </div>
242、You have following html code. Please align element item-inner horizontally in the center and vertically in the middle. You have also item-base style, that shouldn't be changed.
<div class="item-base item"> <div class="item-inner">Some awesome text</div> </div>
【Most Common Technical Interview Question for FrontEnd Developers】
243、Have you used Sass? What's good about it?
【Top 20 Interview questions for front end Developers】
244、Explain Box Model in CSS, what is total width of DIV tag?
245、Browser behavior on below style and output?【优先级】
246、Which is most priority CSS in below code?【External Styles、Internal Styles、Inline Styles】
【Questions to ask frontend devs during an interview】
247、How to vertically align a block with unknown height in the center of another block with known height?【上下居中】
248、How to center several blocks standing side-by-side horizontally with unknown width within another block with known width.【左右居中】
249、Which actions may cause a reflow in a browser?【reflow】
250、Describe the difference between fixed, fluid, responsive and adaptive design. Name the pros and cons.【差异 命名利弊】
251、How to implement a menu with 5 items using flexbox? The first three items should float to the left, the other two - to the right.【flexbox】
252、Create a tooltip for an element without affecting HTML code【工具提示】
253、What is wrong with the following snippet?【行内元素】
【Frontend Interview Questions and Answers for experienced】
254、What is the purpose of the z-index and how is it used?【z-index】
255、What are some of the new features and properties in CSS3?
【Front End Web Developer interview questions】
256、Describe z-index and how stacking context is formed.【z-index】
257、How is responsive design different from adaptive design?响应式设计与自适应设计有何不同？
【Preparing for a Front-End Web Development Interview in 2017】
258、Layout – sitting elements next to each other and how to place elements in two columns vs three columns.【布局】
259、Responsive design – changing an element’s dimensions based on the browser width size.【响应式设计】
260、Adaptive design – changing an element’s dimensions based on specific break points.【自适应设计】
270、Specificity – how to calculate a selector’s specificity and how the cascade affects attributes特异性 - 如何计算选择器的特异性以及级联如何影响属性
271、Appropriate namespacing and naming of classnames.
三、JavaScript
【JS: Basics and Tricky Questions】
1、What are the differences between null and undefined?【null vs undefined】
2、What are the differences between == and ===?【== Vs ===】
3、How would you compare two objects in JavaScript?【Object Equality】
4、11+ true false related questions that will trick you.【True Lies】有11道小题
5、As [] is true, []==true should also be true. right?【Truthy isn't Equal to true】
6、How could you write a method on instance of a date which will give you next day?【Extend Core Object】日期API
7、If you want to use an arbitrary object as value of this, how will you do that?【bind】this
8、Write a simple function to tell whether 2 is passed as parameter or not?【arguments and call】
9、How could you use Math.max to find the max value in an array?【apply】
10、What the heck is this in JavaScript?【this】
11、What is typeof []，What is typeof arguments，If you have var y = 1, x = y = typeof x; What is the value of x?，What is the
12、value of typeof bar，What is the value of typeof null，typeof(NaN)
13、What is 2+true，What is '6'+9，What is the value of 4+3+2+"1"，What is the value of "1"+2+4， What is the value of +'dude'，Why .1+.2 != .3
14、for var a = (2, 3, 5); what is the value of a?
15、for var a = (1, 5 - 1) * 2 what is the value of a?
16、What is the value of !'bang'，What is the value of !!function(){};
17、What is the value of parseFloat('12.3.4')
18、What is the value of Math.max([2,3,4,5]);
19、3 instanceof Number，2 in [1,2]
20、null == undefined
21、If var a = 2, b =3 what would be value of a && b
22、What would be consoled var foo = 'outside'; function logIt(){console.log(foo); var foo = 'inside';} logIt();
23、What is -5%2
24、42..toString()，4.2..toString，42 . toString()
25、How could you set a prefix before everything you log? for example, if you log('my message') it will log: "(app) my message"【log prefix】伪数组和数组
26、What will you see in the console for the following example?【Scope and hoisting】作用域与提升
27、Look at the code below, you have a for loop if you have setTimeout inside it. If log the loop counter inside setTimeout, what will be logged?【Closures Inside Loops】
28、Look at the code below, I have a property in a object and I am creating a new object where I am setting it to a new value.
29、If I delete that property what will i get if I try to access that property?【delete can delete but】
30、Does JavaScript pass parameter by value or by reference?【Pass by value or by reference】传参，值与引用
31、How could you implement cache to save calculation time for a recursive fibonacci function?【memoization】斐波纳数 记忆法
32、How could you cache execution of any function?【缓存函数执行】
33、What if you are passing more than one argument?
34、If you need to implement the following chaining with call back, how will you implement it?【JQuery style chaining】链式调用
35、How could you implement moveLeft animation?【Animation】
36、How would you implement currying for any functions?【Currying】
【JS: Interview Questions 21+ DOM related interview questions】
37、Is there any difference between window and document?【window vs document】
38、Does document.onload and window.onload fire at the same time?【window.onload vs document.onload】
39、Is attribute similar to property?【attribute vs property】
40、What are the different ways to get an element from DOM?【DOM Query】
41、What is the fastest way to select elements by using css selectors?【Fastest way to Query DOM】
42、How come, I can't use forEach or similar array methods on a NodeList?【Use forEach on NodeList】
43、How could you solve this problem?
44、If you need to implement getElementByAttribute, how would you implement it?【getElementsByAttribute】
45、How would you add a class to an element by query selector?【add class】
46、How could I verify whether one element is child of another?【Check Descendant】检查后代
47、What is the best way to create a DOM element? Set innherHTML or use createElement?【innerHTML vs appendChild】
48、What is createDocumentFragment and why you might use it?【CreateDocumentFragment】
49、What is reflow? What causes reflow? How could you reduce reflow?【reflow】
50、What is repaint and when does this happen?【repaint】
51、How could you make sure to run some javaScript when DOM is ready like $(document).ready?【DOM ready】
52、What is event bubble? How does event flows?【Event bubble】
53、How would you destroy multiple list items with one click handler?【Event Delegate】
54、Create a button that is destroyed by clicking on it but two new buttons are created in it's place.【destroy button】在按钮的位置创建两个新按钮
55、How could you capture all clicks in a page?【Capture all click】委托
56、How can you get all the texts in a web page?【All text in a page】
57、What is defer and async keyword does in a script tag?【defer vs async】
58、How could you prevent a click on an anchor from going to the link?【阻止默认行为】
59、How could you stop further propagation of an event?【阻止冒泡】
60、Can you remove an event handler from an element?【取消事件】
61、How could you run event handler in the capturing phase not in bubble phase?【捕获模式】
62、How could you prevent multiple event handler to be fired for an event?【阻止同事件冒泡】
63、What are the cancelable events?
64、How could I check whether an event is cancelable or not?
65、Is there anything you have to be careful when using node.cloneNode()?
66、What are different nodeTypes?
67、What are the differences between node and element?
【Front-end-Developer-Interview-Questions】
68、请解释事件代理 (event delegation)。
69、请解释 JavaScript 中 this 是如何工作的。
70、请解释原型继承 (prototypal inheritance) 的原理。
71、你怎么看 AMD vs. CommonJS？
72、请解释为什么接下来这段代码不是 IIFE (立即调用的函数表达式)：function foo(){ }();.要做哪些改动使它变成 IIFE?
73、描述以下变量的区别：null，undefined 或 undeclared？该如何检测它们？
74、什么是闭包 (closure)，如何使用它，为什么要使用它？
75、请举出一个匿名函数的典型用例？
76、你是如何组织自己的代码？是使用模块模式，还是使用经典继承的方法？
77、请指出 JavaScript 宿主对象 (host objects) 和原生对象 (native objects) 的区别？
78、请指出以下代码的区别：function Person(){}、var person = Person()、var person = new Person()？
79、.call 和 .apply 的区别是什么？
80、请解释 Function.prototype.bind？
81、在什么时候你会使用 document.write()？
82、请指出浏览器特性检测，特性推断和浏览器 UA 字符串嗅探的区别？
83、请尽可能详尽的解释 Ajax 的工作原理。
84、使用 Ajax 都有哪些优劣？
85、请解释 JSONP 的工作原理，以及它为什么不是真正的 Ajax。
86、你使用过 JavaScript 模板系统吗？如有使用过，请谈谈你都使用过哪些库？
87、请解释变量声明提升 (hoisting)。
88、请描述事件冒泡机制 (event bubbling)。
89、"attribute" 和 "property" 的区别是什么？
90、为什么扩展 JavaScript 内置对象不是好的做法？
91、请指出 document load 和 document DOMContentLoaded 两个事件的区别。
92、== 和 === 有什么不同？
93、请解释 JavaScript 的同源策略 (same-origin policy)。
94、如何实现下列代码：[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
95、什么是三元表达式 (Ternary expression)？“三元 (Ternary)” 表示什么意思？
96、什么是 "use strict"; ? 使用它的好处和坏处分别是什么？
97、请实现一个遍历至 100 的 for loop 循环，在能被 3 整除时输出 "fizz"，在能被 5 整除时输出 "buzz"，在能同时被 3 和 5 整除时输出 "fizzbuzz"。
98、为何通常会认为保留网站现有的全局作用域 (global scope) 不去改变它，是较好的选择？
99、为何你会使用 load 之类的事件 (event)？此事件有缺点吗？你是否知道其他替代品，以及为何使用它们？
100、请解释什么是单页应用 (single page app), 以及如何使其对搜索引擎友好 (SEO-friendly)。
101、What is the extent of your experience with Promises and/or their polyfills?
102、使用 Promises 而非回调 (callbacks) 优缺点是什么？
103、使用一种可以编译成 JavaScript 的语言来写 JavaScript 代码有哪些优缺点？
104、你使用哪些工具和技术来调试 JavaScript 代码？
105、你会使用怎样的语言结构来遍历对象属性 (object properties) 和数组内容？
106、请解释可变 (mutable) 和不变 (immutable) 对象的区别。
请举出 JavaScript 中一个不变性对象 (immutable object) 的例子？
不变性 (immutability) 有哪些优缺点？
如何用你自己的代码来实现不变性 (immutability)？
107、请解释同步 (synchronous) 和异步 (asynchronous) 函数的区别。
108、什么是事件循环 (event loop)？请问调用栈 (call stack) 和任务队列 (task queue) 的区别是什么？
109、解释 function foo() {} 与 var foo = function() {} 用法的区别
110、问题：foo的值是什么？var foo = 10 + '20';
111、问题：如何实现以下函数？
add(2, 5); // 7 add(2)(5); // 7
112、下面的语句的返回值是什么？"i'm a lasagna hog".split("").reverse().join("");
113、window.foo的值是什么？( window.foo || ( window.foo = "bar" ) );
114、下面两个 alert 的结果是什么？
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
115、foo.length的值是什么？
var foo = []; foo.push(1); foo.push(2);
116、foo.x的值是什么？
var foo = { n: 1 }; var bar = foo; foo.x = foo = { n: 2 };
117、下面代码的输出是什么？
console.log("one"); setTimeout(function() { console.log("two"); }, 0); console.log("three");
【Front-End-Developer-Interview-Questions（持续更新）】
118、script元素中的属性及存放位置
119、相等(==)和全等(===)操作符判断相等的流程是怎样的？
120、JavaScript中有哪些方法定义对象？
121、<,>,<=,>=的比较规则？
122、+运算符的工作流程
123、JavaScript 有哪些基本类型
124、区分不同类型的方法有哪些，各有什么问题
125、闭包的概念 & 用途
126、apply 和 call 的用途和区别
127、原型继承的概念， prototype 和 __proto__ 的区别
128、JavaScript 如何实现继承？对象的几种创建方式？
129、是否碰到过内存泄露？能否说一下引起内存泄露的常见原因（网上大部分文章都是跟 IE 相关的，其实没什么必要了解，闭包方面有必要知道）？有什么工具可以调试？
130、JavaScript 设计模式知道哪些？Proxy 模式怎么用？
131、ES6 是否有了解
132、JavaScript 模块化（常见规范、工具、实现原理）
133、walkTheDOM 函数，从 <body> 标签起，遍历所有节点并打印标签名
134、addClass
135、实现一个简单的 pub-sub 库
136、实现 _.flatten()
137、object deep clone
138、isPrime
139、quick sort
140、merge sort
141、binary search
142、throttle & debounce
143、实现 Object.create()（不用完全遵循标准，实现蝴蝶书上的版本就够了）
144、Function.prototype.bind
145、carousel 组件
146、自动补全组件
147、overlay 组件
148、popup 组件
149、drag & drop 组件，分别用 jQuery、MVVM、React 和 RxJS 实现一遍
150、一小时之内写一个扫雷游戏
151、如果要你实现一个 AMD 加载器，你将如何实现？讲一下思路和需要注意的点，最好有伪代码
152、Sizzles （jQuery 的选择器模块）的实现思路
153、attribute 和 property 的区别
154、DOM 的事件机制
155、冒泡与捕获的概念，如何阻止冒泡
156、Delegation
157、鼠标点击 a 标签其中会有多少个事件产生
158、如何区分 dbclick 和 click
159、ajax 请求中 readyState 有哪些状态（这个问题我感觉太不常考了……但既然见到过那就收录进来了）
160、ajax 跨域
161、怎样算是跨域？
162、跨域的方法有哪些？实现原理是什么？兼容性如何？各自有什么缺点？
163、JSONP 如果页面编码和被请求的资源编码不一致如何处理
164、服务器端消息推送有哪些方法？实现原理？兼容性？缺点？
165、jQuery.ready() 实际上是 DOM 中的什么事件？
166、window.onload 和 $.ready() 事件有什么区别？
【21 Essential JavaScript Interview Questions】
167、What is the difference between undefined and not defined in JavaScript?
168、What will be the output of the code below?【假值，typeof】
var y = 1; if (function f() {}) { y += typeof f; } console.log(y);
169、What is the drawback of creating true private methods in JavaScript?在JavaScript中创建真正的私有方法的缺点是什么？
170、What is a “closure” in JavaScript? Provide an example
171、Write a mul function which will produce the following outputs when invoked:
console.log(mul(2)(3)(4)); // output : 24 console.log(mul(4)(3)(4)); // output : 48
172、How to empty an array in JavaScript?【数组】
173、How do you check if an object is an array or not?【toString】
174、What will be the output of the following code?
var output = (function(x) { delete x; return x; })(0); console.log(output);
175、What will be the output of the following code?
var x = 1; var output = (function() { delete x; return x; })(); console.log(output);
176、What will be the output of the code below?
var x = { foo: 1 }; var output = (function() { delete x.foo; return x.foo; })(); console.log(output);
177、What will be the output of the code below?
var Employee = { company: "xyz" }; var emp1 = Object.create(Employee); delete emp1.company; console.log(emp1.company);
