├── .all-contributorsrc ├── .editorconfig ├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml └── stale.yml ├── .gitignore ├── CONTRIBUTORS.md ├── LICENSE.md ├── README.md ├── config ├── deploy.sh └── eleventy.config.js ├── package-lock.json ├── package.json └── src ├── 404.njk ├── _data ├── contributors.json ├── maintainers.json ├── og.json ├── questions.json ├── site.json └── translations.json ├── _includes ├── assets │ ├── css │ │ ├── content.css │ │ ├── defaults.css │ │ ├── footer.css │ │ ├── header.css │ │ ├── navigation.css │ │ ├── prism.css │ │ └── variables.css │ └── js │ │ └── app.js ├── components │ ├── footer.njk │ └── navigation.njk └── layouts │ ├── default.njk │ └── page.njk ├── about.njk ├── assets └── images │ ├── apple-touch-icon.png │ ├── bg.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── gradient.svg │ └── og-image.png ├── index.njk ├── questions ├── coding-questions.md ├── css-questions.md ├── fun-questions.md ├── general-questions.md ├── html-questions.md ├── javascript-questions.md ├── network-questions.md ├── performance-questions.md └── testing-questions.md ├── sitemap.xml.njk ├── translations.njk └── translations ├── arabic └── README.md ├── bulgarian └── README.md ├── burmese └── README.md ├── chinese-traditional └── README.md ├── chinese └── README.md ├── croatian └── README.md ├── czech └── README.md ├── danish └── README.md ├── dutch └── README.md ├── farsi └── README.md ├── french └── README.md ├── german └── README.md ├── greek └── README.md ├── hebrew └── README.md ├── hindi └── README.md ├── hungarian └── README.md ├── indonesian └── README.md ├── italian └── README.md ├── japanese └── README.md ├── korean ├── README.md └── Reference.md ├── latvian └── README.md ├── polish └── README.md ├── portuguese └── README.md ├── romanian └── README.md ├── russian └── README.md ├── serbian └── README.md ├── slovakian └── README.md ├── slovenian └── README.md ├── spanish └── README.md ├── swedish └── README.md ├── turkish └── README.md ├── ukrainian └── README.md └── vietnamese └── README.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | education, socio-economic status, nationality, personal appearance, race, 10 | religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at rob@htmlcssjavascript.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Front-end Developer Interview Questions 2 | 3 | Please take a moment to review this document in order to make the contribution 4 | process easy and effective for everyone involved. 5 | 6 | Following these guidelines helps to communicate that you respect the time of 7 | the developers managing and developing this open source project. In return, 8 | they should reciprocate that respect in addressing your issue or assessing 9 | patches and features. 10 | 11 | 12 | ## Using the issue tracker 13 | 14 | The [issue tracker](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues) is 15 | the preferred channel for spelling mistakes, errors or any general feedback. Please respect the following restrictions: 16 | 17 | * Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others. 18 | 19 | * Please **do not** open issues or pull requests that involve including **answers** to any of the questions. 20 | 21 | 22 | ## Pull requests 23 | 24 | Please adhere to the coding conventions used throughout the project (spelling, indentation, punctuation etc.). 25 | 26 | Adhering to the following process is the best way to get your work included in the project: 27 | 28 | 1. [Fork](https://help.github.com/articles/fork-a-repo) the project, clone your fork, and configure the remotes: 29 | 30 | ```bash 31 | # Clone your fork of the repo into the current directory 32 | git clone https://github.com//Front-end-Developer-Interview-Questions.git 33 | # Navigate to the newly cloned directory 34 | cd Front-end-Developer-Interview-Questions 35 | # Assign the original repo to a remote called "upstream" 36 | git remote add upstream https://github.com/h5bp/Front-end-Developer-Interview-Questions.git 37 | ``` 38 | 39 | 2. If you cloned a while ago, get the latest changes from upstream: 40 | 41 | ```bash 42 | git checkout master 43 | git pull upstream master 44 | ``` 45 | 46 | 3. Create a new topic branch (off the main project development branch) to 47 | contain your feature, change, or fix: 48 | 49 | ```bash 50 | git checkout -b 51 | ``` 52 | 53 | 4. Locally merge (or rebase) the upstream development branch into your topic branch: 54 | 55 | ```bash 56 | git pull [--rebase] upstream master 57 | ``` 58 | 59 | 5. Set-up the website 60 | 61 | ```bash 62 | # install dependencies 63 | npm install 64 | # run the website and watch for changes (http://localhost:9090) 65 | npm start 66 | ``` 67 | 68 | Our website is made with [Eleventy](https://11ty.io). 69 | 70 | * If you are looking to edit infrastructure/templating files of the website and not sure how to, [check their docs](https://11ty.io/docs). 71 | * If you are looking to change a question/translation file, just change the markdown file you want and the website will be updated once it is deployed. 72 | 73 | 6. Squash your commits down to a single one (we want to keep the master branch nice and clean) 74 | 75 | 7. Push your topic branch up to your fork: 76 | 77 | ```bash 78 | git push origin 79 | ``` 80 | 81 | 8. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 82 | with a clear title and description. 83 | 84 | **IMPORTANT**: By submitting patches, you agree to allow the project owners to license your work under the terms of the [MIT License](../LICENSE.md). 85 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | The issue tracker is the preferred channel for feedback on the project, bugs relating to the publishing infrastructure (which is still a a work-in-progress) or other discussion points. 2 | 3 | Note: 4 | 5 | - *Please do not open issues or pull requests that involve including answers to any of the questions.* 6 | - *If you have a proposal for a new question or revision of an existing question, please just open a pull request.* 7 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 2 | 3 | Fixes # (issue) 4 | 5 | ## Type of change 6 | 7 | Please delete options that are not relevant. 8 | 9 | - [ ] New Question 10 | - [ ] Revision of an existing question 11 | - [ ] Infrastructure change (automation, etc.) 12 | - [ ] Other (please elaborate) 13 | 14 | 15 | # Checklist: 16 | 17 | - [ ] My content follows the style guidelines of this project 18 | - [ ] I have performed a self-review of my own content 19 | 20 | Pull requests should be thought of as a conversation. There will be some back and forth when trying to get code merged into this or any other project. With all but the simplest changes you can and should expect that the maintainers of the project will request changes to your code. Please be aware of that and check in after you open your PR in order to get your code merged in cleanly. 21 | 22 | Thanks! 23 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/" 5 | schedule: 6 | interval: weekly 7 | time: "03:00" 8 | open-pull-requests-limit: 10 9 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 30 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | - security 9 | - help-wanted 10 | # Label to use when marking an issue as stale 11 | staleLabel: wontfix 12 | # Comment to post when marking an issue as stale. Set to `false` to disable 13 | markComment: > 14 | This issue has been automatically marked as stale because it has not had 15 | recent activity. It will be closed if no further activity occurs. Thank you 16 | for your contributions. 17 | # Comment to post when closing a stale issue. Set to `false` to disable 18 | closeComment: This issue has been automatically closed because it has not had 19 | recent activity. Thank you for your contributions. 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | _site 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2012 - 2019 Contributors to https://github.com/h5bp/Front-end-Developer-Interview-Questions 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /config/deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ `git branch --list gh-pages` ] 4 | then 5 | git branch -D gh-pages 6 | git checkout -b gh-pages 7 | else 8 | git checkout -b gh-pages 9 | fi 10 | rm -f .gitignore 11 | npm run build 12 | git add _site 13 | git commit -m 'Update Website' 14 | git push upstream `git subtree split --prefix _site gh-pages`:gh-pages -f 15 | git checkout -f 16 | git checkout master 17 | -------------------------------------------------------------------------------- /config/eleventy.config.js: -------------------------------------------------------------------------------- 1 | const { DateTime } = require('luxon') 2 | const CleanCSS = require('clean-css') 3 | const UglifyJS = require('uglify-es') 4 | const htmlmin = require('html-minifier') 5 | const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight') 6 | const markdown = require('markdown-it')({ 7 | html: true, 8 | breaks: true, 9 | linkify: true, 10 | typographer: true 11 | }).use(require('markdown-it-anchor'), { 12 | level: [2], 13 | permalink: true, 14 | permalinkBefore: true, 15 | permalinkSymbol: '' 16 | }) 17 | 18 | module.exports = eleventyConfig => { 19 | eleventyConfig.addPlugin(syntaxHighlight) 20 | 21 | eleventyConfig.setLibrary('md', markdown) 22 | 23 | eleventyConfig.addFilter('cssmin', code => { 24 | return new CleanCSS({}).minify(code).styles 25 | }) 26 | 27 | eleventyConfig.addFilter('jsmin', (code) => { 28 | let minified = UglifyJS.minify(code) 29 | if (minified.error) { 30 | console.error('UglifyJS error: ', minified.error) 31 | return code 32 | } 33 | return minified.code 34 | }) 35 | 36 | // Minify HTML output 37 | eleventyConfig.addTransform('htmlmin', (content, outputPath) => { 38 | if (outputPath.indexOf('.html') > -1) { 39 | let minified = htmlmin.minify(content, { 40 | useShortDoctype: true, 41 | removeComments: true, 42 | collapseWhitespace: true 43 | }) 44 | return minified 45 | } 46 | return content 47 | }) 48 | 49 | eleventyConfig.addFilter('markdownify', str => { 50 | return markdown.render(str) 51 | }) 52 | 53 | eleventyConfig.addFilter('markdownify_inline', str => 54 | markdown.renderInline(str) 55 | ) 56 | 57 | eleventyConfig.addFilter('strip_html', str => { 58 | return str.replace(/|||<.*?>/g, '') 59 | }) 60 | 61 | // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string 62 | eleventyConfig.addFilter('html_date_string', dateObj => { 63 | return DateTime.fromJSDate(dateObj).toFormat('yyyy-LL-dd') 64 | }) 65 | 66 | eleventyConfig.addFilter('github_permalink', str => { 67 | return str.replace(/\/index.html/g, '.md') 68 | }) 69 | 70 | eleventyConfig.addFilter('permalink', str => { 71 | return str.replace(/\.html/g, '') 72 | }) 73 | 74 | eleventyConfig.addPassthroughCopy('src/assets') 75 | 76 | return { 77 | templateFormats: ['njk', 'md', 'html'], 78 | dir: { 79 | input: 'src', 80 | includes: '_includes', 81 | data: '_data', 82 | output: '_site' 83 | }, 84 | markdownTemplateEngine: 'njk', 85 | htmlTemplateEngine: 'njk', 86 | dataTemplateEngine: 'njk', 87 | passthroughFileCopy: true 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end-developer-interview-questions", 3 | "version": "1.0.0", 4 | "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.", 5 | "scripts": { 6 | "build": "eleventy --config=config/eleventy.config.js --pathprefix='Front-end-Developer-Interview-Questions/'", 7 | "deploy": "sh ./config/deploy.sh", 8 | "contributors:add": "all-contributors add", 9 | "contributors:generate": "all-contributors generate && cp .all-contributorsrc ./src/_data/contributors.json", 10 | "start": "eleventy --config=config/eleventy.config.js --serve --port 9090 --quiet" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/h5bp/Front-end-Developer-Interview-Questions.git" 15 | }, 16 | "keywords": [ 17 | "css", 18 | "front-end", 19 | "html", 20 | "interview", 21 | "js", 22 | "questions" 23 | ], 24 | "author": "H5BP", 25 | "contributors": [ 26 | { 27 | "name": "Cezar Augusto", 28 | "email": "boss@cezaraugusto.net" 29 | }, 30 | { 31 | "name": "Darcy Clarke", 32 | "email": "darcy@darcyclarke.me" 33 | } 34 | ], 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues" 38 | }, 39 | "homepage": "https://github.com/h5bp/Front-end-Developer-Interview-Questions#readme", 40 | "devDependencies": { 41 | "@11ty/eleventy": "^0.12.1", 42 | "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2", 43 | "all-contributors-cli": "^6.20.0", 44 | "clean-css": "^5.2.0", 45 | "html-minifier": "^4.0.0", 46 | "luxon": "^2.0.2", 47 | "markdown-it": "^12.2.0", 48 | "markdown-it-anchor": "^8.3.0", 49 | "uglify-es": "^3.3.9" 50 | }, 51 | "resolutions": { 52 | "axios": "0.18.1" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/404.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: 404 - Page not found 3 | description: Think this is wrong? [Open an issue](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues/new) 4 | permalink: /404.html 5 | excludeFromSitemap: true 6 | --- 7 | {% extends 'layouts/page.njk' %} 8 | 9 | {% set content %} 10 | {% endset %} 11 | 12 | {% block main %} 13 |
14 | {{ content | markdownify | safe }} 15 |
16 | {% endblock %} 17 | -------------------------------------------------------------------------------- /src/_data/maintainers.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "all": [ 4 | { 5 | "avatar": "https://avatars0.githubusercontent.com/u/459713?v=4", 6 | "name": "Darcy Clarke", 7 | "website": "https://darcyclarke.me", 8 | "github": "https://github.com/darcyclarke", 9 | "twitter": "https://twitter.com/darcy" 10 | }, 11 | { 12 | "avatar": "https://avatars0.githubusercontent.com/u/361421?v=4", 13 | "name": "Rob Larsen", 14 | "website": "http://htmlcssjavascript.com/", 15 | "github": "https://github.com/roblarsen", 16 | "twitter": "https://twitter.com/robreact" 17 | }, 18 | { 19 | "avatar": "https://avatars1.githubusercontent.com/u/6904368?v=4", 20 | "name": "Vasiliy Vanchuk", 21 | "website": "https://bit.ly/vvscodeli", 22 | "github": "https://github.com/vvscode", 23 | "twitter": "https://twitter.com/vvscode" 24 | } 25 | ], 26 | "legacy": [ 27 | { 28 | "avatar": "https://avatars0.githubusercontent.com/u/4672033?v=4", 29 | "name": "Cezar Augusto", 30 | "website": "https://cezaraugusto.net", 31 | "github": "https://github.com/cezaraugusto", 32 | "twitter": "https://twitter.com/cezaraugusto" 33 | }, 34 | { 35 | "avatar": "https://avatars0.githubusercontent.com/u/1245284?v=4", 36 | "name": "Righ Gilbank", 37 | "website": "https://richgilbank.com/", 38 | "github": "https://github.com/richgilbank", 39 | "twitter": "https://twitter.com/richgilbank" 40 | }, 41 | { 42 | "avatar": "https://avatars0.githubusercontent.com/u/21979?v=4", 43 | "name": "Bo-Yi Wu", 44 | "website": "https://about.me/appleboy", 45 | "github": "https://github.com/appleboy", 46 | "twitter": "https://twitter.com/appleboy" 47 | } 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /src/_data/og.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "all": [ 4 | 5 | { 6 | "avatar": "https://avatars0.githubusercontent.com/u/39191?v=4", 7 | "name": "Paul Irish", 8 | "website": "https://www.paulirish.com/", 9 | "github": "https://github.com/paulirish", 10 | "twitter": "https://twitter.com/paul_irish" 11 | }, 12 | { 13 | "avatar": "https://avatars0.githubusercontent.com/u/459713?v=4", 14 | "name": "Darcy Clarke", 15 | "website": "https://darcyclarke.me", 16 | "github": "https://github.com/darcyclarke", 17 | "twitter": "https://twitter.com/darcy" 18 | }, 19 | { 20 | "avatar": "https://avatars1.githubusercontent.com/u/85315?s=460&v=4", 21 | "name": "Ben Truyman", 22 | "website": "", 23 | "github": "https://github.com/bentruyman", 24 | "twitter": "https://twitter.com/bentruyman" 25 | }, 26 | { 27 | "avatar": "https://avatars1.githubusercontent.com/u/54051?s=460&v=4", 28 | "name": "Ben Alman", 29 | "website": "http://benalman.com/", 30 | "github": "https://github.com/cowboy", 31 | "twitter": "https://twitter.com/cowboy" 32 | }, 33 | { 34 | "avatar": "https://avatars1.githubusercontent.com/u/155599?s=460&v=4", 35 | "name": "Adam Sontag", 36 | "website": "http://ajpiano.com/", 37 | "github": "https://github.com/ajpiano", 38 | "twitter": "https://twitter.com/ajpiano" 39 | }, 40 | { 41 | "avatar": "https://avatars1.githubusercontent.com/u/96554?s=460&v=4", 42 | "name": "Alex Sexton", 43 | "website": "https://alexsexton.com/", 44 | "github": "https://github.com/slexaxton", 45 | "twitter": "https://twitter.com/slexaxton" 46 | }, 47 | { 48 | "avatar": "https://avatars1.githubusercontent.com/u/234160?s=460&v=4", 49 | "name": "Roger Raymond", 50 | "website": "http://asphyxia.com/", 51 | "github": "https://github.com/iansym", 52 | "twitter": "https://twitter.com/iansym" 53 | }, 54 | { 55 | "avatar": "https://avatars1.githubusercontent.com/u/58987?s=460&v=4", 56 | "name": "Rebecca Murphey", 57 | "website": "https://rmurphey.com/", 58 | "github": "https://github.com/rmurphey", 59 | "twitter": "https://twitter.com/rmurphey" 60 | }, 61 | { 62 | "avatar": "https://avatars1.githubusercontent.com/u/122117?s=460&v=4", 63 | "name": "Boaz Sender", 64 | "website": "http://boazsender.com/", 65 | "github": "https://github.com/boazsender", 66 | "twitter": "https://twitter.com/boazsender" 67 | }, 68 | { 69 | "avatar": "https://avatars1.githubusercontent.com/u/67283?s=460&v=4", 70 | "name": "Mike Taylor", 71 | "website": "https://miketaylr.com/", 72 | "github": "https://github.com/miketaylr", 73 | "twitter": "https://twitter.com/miketaylr" 74 | }, 75 | { 76 | "avatar": "https://avatars1.githubusercontent.com/u/128755?s=460&v=4", 77 | "name": "Vlad Filippov", 78 | "website": "https://vladfilippov.com/", 79 | "github": "https://github.com/vladikoff", 80 | "twitter": "https://twitter.com/vladikoff" 81 | }, 82 | { 83 | "avatar": "https://avatars1.githubusercontent.com/u/18397?s=460&v=4", 84 | "name": "Gianni Chiappetta", 85 | "website": "http://turnt.biz/", 86 | "github": "https://github.com/gf3", 87 | "twitter": "https://twitter.com/gf3" 88 | }, 89 | { 90 | "avatar": "https://avatars1.githubusercontent.com/u/188426?s=460&v=4", 91 | "name": "Jonathan Neal", 92 | "website": "https://jonneal.dev/", 93 | "github": "https://github.com/jonathantneal", 94 | "twitter": "https://twitter.com/jon_neal" 95 | }, 96 | { 97 | "avatar": "https://avatars1.githubusercontent.com/u/84644?s=460&v=4", 98 | "name": "Sam Breed", 99 | "website": "https://wookiehangover.com/", 100 | "github": "https://github.com/wookiehangover", 101 | "twitter": "https://twitter.com/sambreed" 102 | } 103 | ] 104 | } 105 | -------------------------------------------------------------------------------- /src/_data/questions.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "all": [ 4 | { 5 | "abbreviation": "General", 6 | "title": "General Questions", 7 | "url": "/questions/general-questions/", 8 | "external": false 9 | }, 10 | { 11 | "abbreviation": "HTML", 12 | "title": "HTML Questions", 13 | "url": "/questions/html-questions/", 14 | "external": false 15 | }, 16 | { 17 | "abbreviation": "CSS", 18 | "title": "CSS Questions", 19 | "url": "/questions/css-questions/", 20 | "external": false 21 | }, 22 | { 23 | "abbreviation": "JavaScript", 24 | "title": "JavaScript Questions", 25 | "url": "/questions/javascript-questions/", 26 | "external": false 27 | }, 28 | { 29 | "abbreviation": "A11y", 30 | "title": "Accessibility Questions", 31 | "url": "https://scottaohara.github.io/accessibility_interview_questions/", 32 | "external": true 33 | }, 34 | { 35 | "abbreviation": "Testing", 36 | "title": "Testing Questions", 37 | "url": "/questions/testing-questions/", 38 | "external": false 39 | }, 40 | { 41 | "abbreviation": "Performance", 42 | "title": "Performance Questions", 43 | "url": "/questions/performance-questions/", 44 | "external": false 45 | }, 46 | { 47 | "abbreviation": "Network", 48 | "title": "Network Questions", 49 | "url": "/questions/network-questions/", 50 | "external": false 51 | }, 52 | { 53 | "abbreviation": "Coding", 54 | "title": "Coding Questions", 55 | "url": "/questions/coding-questions/", 56 | "external": false 57 | }, 58 | { 59 | "abbreviation": "Fun", 60 | "title": "Fun Questions", 61 | "url": "/questions/fun-questions/", 62 | "external": false 63 | } 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /src/_data/site.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "title": "Front-end Job Interview Questions", 4 | "url": "https://h5bp.org/Front-end-Developer-Interview-Questions/", 5 | "description": "A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.", 6 | "keywords": "front-end, interview questions, css questions, js questions, html questions, performance questions, interview test", 7 | "language": "en_US", 8 | "twitter": "@h5bp" 9 | } 10 | -------------------------------------------------------------------------------- /src/_data/translations.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "all": [ 4 | { 5 | "language": "Arabic", 6 | "url": "arabic/" 7 | }, 8 | { 9 | "language": "Bulgarian", 10 | "url": "bulgarian/" 11 | }, 12 | { 13 | "language": "Burmese", 14 | "url": "burmese/" 15 | }, 16 | { 17 | "language": "Chinese", 18 | "url": "chinese/" 19 | }, 20 | { 21 | "language": "Chinese-Traditional", 22 | "url": "chinese-traditional/" 23 | }, 24 | { 25 | "language": "Croatian", 26 | "url": "croatian/" 27 | }, 28 | { 29 | "language": "Czech", 30 | "url": "czech/" 31 | }, 32 | { 33 | "language": "Danish", 34 | "url": "danish/" 35 | }, 36 | { 37 | "language": "Dutch", 38 | "url": "dutch/" 39 | }, 40 | { 41 | "language": "Farsi", 42 | "url": "farsi/" 43 | }, 44 | { 45 | "language": "French", 46 | "url": "french/" 47 | }, 48 | { 49 | "language": "German", 50 | "url": "german/" 51 | }, 52 | { 53 | "language": "Hebrew", 54 | "url": "hebrew/" 55 | }, 56 | { 57 | "language": "Greek", 58 | "url": "greek/" 59 | }, 60 | { 61 | "language": "Hindi", 62 | "url": "hindi/" 63 | }, 64 | { 65 | "language": "Hungarian", 66 | "url": "hungarian/" 67 | }, 68 | { 69 | "language": "Indonesian", 70 | "url": "indonesian/" 71 | }, 72 | { 73 | "language": "Italian", 74 | "url": "italian/" 75 | }, 76 | { 77 | "language": "Japanese", 78 | "url": "japanese/" 79 | }, 80 | { 81 | "language": "Korean", 82 | "url": "korean/" 83 | }, 84 | { 85 | "language": "Latvian", 86 | "url": "latvian/" 87 | }, 88 | { 89 | "language": "Polish", 90 | "url": "polish/" 91 | }, 92 | { 93 | "language": "Portuguese", 94 | "url": "portuguese/" 95 | }, 96 | { 97 | "language": "Romanian", 98 | "url": "romanian/" 99 | }, 100 | { 101 | "language": "Russian", 102 | "url": "russian/" 103 | }, 104 | { 105 | "language": "Serbian", 106 | "url": "serbian/" 107 | }, 108 | { 109 | "language": "Slovakian", 110 | "url": "slovakian/" 111 | }, 112 | { 113 | "language": "Slovenian", 114 | "url": "slovenian/" 115 | }, 116 | { 117 | "language": "Spanish", 118 | "url": "spanish/" 119 | }, 120 | { 121 | "language": "Swedish", 122 | "url": "swedish/" 123 | }, 124 | { 125 | "language": "Turkish", 126 | "url": "turkish/" 127 | }, 128 | { 129 | "language": "Ukrainian", 130 | "url": "ukrainian/" 131 | }, 132 | { 133 | "language": "Vietnamese", 134 | "url": "vietnamese/" 135 | } 136 | ] 137 | } 138 | -------------------------------------------------------------------------------- /src/_includes/assets/css/content.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | font-family: var(--font-family-body); 5 | font-weight: 400; 6 | font-size: 1.2rem; 7 | line-height: 2; 8 | color: var(--color-text); 9 | } 10 | 11 | section + section { 12 | padding-top: 2rem; 13 | } 14 | 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6 { 21 | font-family: var(--font-family-heading); 22 | color: var(--color-heading); 23 | font-style: normal; 24 | line-height: 1.2; 25 | font-weight: 600; 26 | } 27 | 28 | section + section { 29 | padding-top: 2rem; 30 | } 31 | 32 | a { 33 | color: inherit; 34 | text-decoration: none; 35 | color: var(--color-secondary); 36 | transition: color ease-out var(--transition-duration); 37 | } 38 | 39 | a.current, 40 | a:hover:not(.skip-link), 41 | a:focus:not(.skip-link) { 42 | color: var(--color-primary); 43 | } 44 | 45 | a:not(.navigation-anchor)[rel~='external']:after { 46 | content: ' ➚' 47 | } 48 | 49 | ul:not(.navigation):not(.inline-list) { 50 | list-style: none; 51 | } 52 | 53 | ul:not(.navigation):not(.inline-list) li::before { 54 | content: "\25A0"; 55 | color: var(--color-primary); 56 | font-weight: bold; 57 | display: inline-block; 58 | width: 1em; 59 | margin-left: -1em; 60 | } 61 | .rtl ul:not(.navigation):not(.inline-list) li::before{ 62 | margin-right: -1em; 63 | margin-left: initial; 64 | } 65 | 66 | li { 67 | margin-bottom: 0.6rem; 68 | } 69 | 70 | strong, 71 | b { 72 | font-weight: 600; 73 | } 74 | 75 | time { 76 | display: inline-block; 77 | color: var(--color-gray-70); 78 | } 79 | 80 | [tabindex='-1'] { 81 | outline: 0; 82 | } 83 | 84 | img, 85 | svg { 86 | vertical-align: middle; 87 | } 88 | 89 | img { 90 | display: block; 91 | max-width: 100%; 92 | border-radius: var(--border-radius-default); 93 | } 94 | 95 | code { 96 | font-family: var(--font-family-code); 97 | color: var(--color-code); 98 | font-style: normal; 99 | font-size: 1rem; 100 | } 101 | 102 | blockquote:not([class]) { 103 | padding-left: 1rem; 104 | margin-left: -1rem; 105 | border-left: 2px solid var(--color-primary); 106 | color: var(--color-gray-70); 107 | font-style: italic; 108 | } 109 | 110 | code[class*=language-], 111 | pre[class*=language-] { 112 | font-size: 0.9rem; 113 | font-style: normal; 114 | } 115 | 116 | p + pre[class*=language-] { 117 | margin-bottom: 1.8rem; 118 | } 119 | 120 | mark { 121 | color: var(--color-highlight); 122 | background-color: transparent; 123 | } 124 | 125 | dt { 126 | font-weight: 700; 127 | } 128 | 129 | dd + dt { 130 | padding-top: 0.5rem; 131 | } 132 | 133 | abbr[title], acronym[title] { 134 | background: var(--color-gray-opacity); 135 | border: 1px solid var(--color-gray-opacity); 136 | cursor: help; 137 | } 138 | 139 | .container { 140 | max-width: 66rem; 141 | padding: 1.5rem 2rem 2rem; 142 | margin-right: auto; 143 | margin-left: auto; 144 | } 145 | 146 | @media (min-width: 30rem) { 147 | .container { 148 | padding: 3rem 4rem 4rem; 149 | } 150 | } 151 | 152 | .content li:not(:last-of-type) { 153 | margin-bottom: 1.2rem; 154 | } 155 | 156 | .content h2 { 157 | max-width: 33rem; 158 | } 159 | 160 | .content > *:not(:last-child) { 161 | margin-bottom: 2rem; 162 | } 163 | 164 | .content *:not(hr) + h2, 165 | .content *:not(hr) + h3 { 166 | padding-top: 1rem; 167 | } 168 | 169 | .content ul:not(.inline-list), 170 | .content ol:not(.inline-list) { 171 | padding-left: 1.2rem; 172 | } 173 | 174 | .content-simple li:not(:last-of-type) { 175 | margin-bottom: 0.5rem; 176 | } 177 | 178 | .content-edit { 179 | text-align: right; 180 | margin-top: 2rem; 181 | } 182 | 183 | .inline-list { 184 | padding: 0; 185 | list-style: none; 186 | display: flex; 187 | flex-wrap: wrap; 188 | } 189 | 190 | .inline-list li { 191 | padding: 0 5px; 192 | display: inline-block; 193 | vertical-align: middle; 194 | text-align: center; 195 | } 196 | 197 | .inline-list li::before { 198 | content: ''; 199 | margin-left: 0; 200 | } 201 | 202 | .inline-list li img { 203 | display: block; 204 | margin: auto; 205 | margin-bottom: 0.6rem; 206 | } 207 | 208 | .inline-list li a { 209 | display: inline-block; 210 | vertical-align: middle; 211 | margin: 0 0.15rem; 212 | } 213 | 214 | .inline-list-contributors li a, 215 | .inline-list-original li a { 216 | font-size: 1rem; 217 | } 218 | 219 | .avatar { 220 | max-width: 12rem; 221 | } 222 | 223 | hr { 224 | border: none; 225 | bacground: none; 226 | border-bottom: 1px solid #efefef; 227 | } 228 | -------------------------------------------------------------------------------- /src/_includes/assets/css/defaults.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | outline-color: var(--color-primary); 6 | } 7 | 8 | ::selection { 9 | background: var(--color-primary); 10 | color: var(--background-default); 11 | } 12 | 13 | ::-moz-selection { 14 | background: var(--color-primary); 15 | color: var(--background-default); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /src/_includes/assets/css/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding-top: 3rem; 3 | } 4 | 5 | .footer-text { 6 | font-size: 0.8rem; 7 | } 8 | -------------------------------------------------------------------------------- /src/_includes/assets/css/header.css: -------------------------------------------------------------------------------- 1 | .topbar { 2 | width: 100%; 3 | height: 0.18rem; 4 | background: var(--color-gradient); 5 | } 6 | 7 | .skip-link { 8 | position: absolute; 9 | top: 0; 10 | left: 0; 11 | padding: 0.5rem 1rem; 12 | background-color: var(--color-primary); 13 | color: #fff; 14 | text-decoration: none; 15 | transform: translateY(-100%); 16 | } 17 | 18 | .skip-link:focus { 19 | transform: none; 20 | } 21 | 22 | .header { 23 | margin-bottom: 2rem; 24 | } 25 | 26 | .header-big-title { 27 | font-size: 2.3rem; 28 | line-height: 1.06; 29 | margin: 1.4rem 0 0.7rem; 30 | color: var(--color-primary); 31 | word-break: break-word; 32 | } 33 | 34 | .rtl .header-big-title{ 35 | text-align: right; 36 | } 37 | 38 | @media (min-width: 30em) { 39 | .header-big-title { 40 | margin: 1.4rem 0 0.7rem; 41 | font-size: 4.6rem; 42 | } 43 | } 44 | 45 | @media (min-width: 60em) { 46 | .header-big-title { 47 | margin: 2.1rem 0 0.7rem; 48 | font-size: 5.4rem; 49 | } 50 | } 51 | 52 | @supports (mix-blend-mode: lighten) { 53 | .header-big-title { 54 | display: inline-block; 55 | position: relative; 56 | color: #000; 57 | background: #fff; 58 | mix-blend-mode: multiply; 59 | } 60 | .header-big-title::before { 61 | content: ''; 62 | display: block; 63 | position: absolute; 64 | top: 0; 65 | right: 0; 66 | bottom: 0; 67 | left: 0; 68 | background-image: url('https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/gradient.svg'); 69 | background-size: cover; 70 | pointer-events: none; 71 | } 72 | .header-big-title::before { 73 | mix-blend-mode: screen; 74 | } 75 | } 76 | 77 | .header-heading { 78 | font-size: 2.3rem; 79 | text-transform: uppercase; 80 | } 81 | 82 | .header-big-description { 83 | font-size: 1.2rem; 84 | line-height: 1.4; 85 | padding: 1rem 0; 86 | } 87 | 88 | @media (min-width: 30em) { 89 | .header-big-description { 90 | font-size: 1.5rem; 91 | } 92 | } 93 | 94 | @media (min-width: 60em) { 95 | .header-big-description { 96 | font-size: 1.8rem; 97 | } 98 | } 99 | 100 | .header-description { 101 | padding-top: 1rem; 102 | } 103 | -------------------------------------------------------------------------------- /src/_includes/assets/css/navigation.css: -------------------------------------------------------------------------------- 1 | .nav { 2 | padding: 1rem 0; 3 | position: relative; 4 | font-family: var(--font-family-heading); 5 | } 6 | 7 | .nav li { 8 | word-wrap: none; 9 | white-space: nowrap; 10 | } 11 | 12 | .navigation { 13 | list-style: none; 14 | display: flex; 15 | flex-wrap: wrap; 16 | font-size: 1rem; 17 | } 18 | 19 | .navigation-questions-label { 20 | margin-right: auto; 21 | } 22 | 23 | @media (min-width: 60em) { 24 | .navigation-questions-label { 25 | margin-right: 0; 26 | } 27 | } 28 | 29 | .navigation-toggle { 30 | display: inline-block; 31 | appearance: none; 32 | border: 0; 33 | font-size: 1rem; 34 | font-weight: 600; 35 | cursor: pointer; 36 | background: transparent; 37 | } 38 | 39 | .navigation-toggle::after { 40 | content: '\25BE'; 41 | padding-left: 0.3rem; 42 | display: inline-block; 43 | font-size: 1.2rem; 44 | font-weight: bold; 45 | color: var(--color-primary); 46 | transform-origin: center; 47 | } 48 | 49 | .navigation-toggle:hover::after, 50 | .navigation-toggle:active::after, 51 | .navigation-toggle:focus::after { 52 | color: var(--color-secondary); 53 | } 54 | 55 | .navigation.open .navigation-toggle::after { 56 | transform: scaleY(-1) translateY(-0.25em); 57 | } 58 | 59 | @media (min-width: 60em) { 60 | .navigation-toggle { 61 | color: var(--color-text); 62 | pointer-events: none; 63 | cursor: default; 64 | } 65 | 66 | .navigation-toggle::after { 67 | display: none; 68 | } 69 | } 70 | 71 | .navigation-questions-list { 72 | padding: 0.5rem 1rem; 73 | display: flex; 74 | flex-direction: column; 75 | position: absolute; 76 | top: calc(100% - 1rem); 77 | left: 0; 78 | z-index: 1; 79 | opacity: 0; 80 | transform: scale(0.5, 0); 81 | transform-origin: center top; 82 | transition: opacity .1s, transform .2s ease-out; 83 | background-color: #fff; 84 | box-shadow: 0 0 0 1px var(--color-secondary), 0 2px 4px -1px var(--color-text); 85 | } 86 | 87 | .navigation.open .navigation-questions-list { 88 | opacity: 1; 89 | transform: none; 90 | } 91 | 92 | .navigation.no-motion .navigation-questions-list { 93 | transition: none; 94 | } 95 | 96 | @media (min-width: 60em) { 97 | .navigation-questions-list { 98 | padding: 0; 99 | flex-direction: row; 100 | position: static; 101 | opacity: 1; 102 | transform: none; 103 | transition: none; 104 | background-color: transparent; 105 | box-shadow: none; 106 | } 107 | 108 | .navigation-questions-list li { 109 | margin: 0; 110 | } 111 | } 112 | 113 | .navigation-questions-anchor { 114 | visibility: hidden; 115 | } 116 | 117 | .navigation.open .navigation-questions-anchor { 118 | visibility: visible; 119 | } 120 | 121 | @media (min-width: 60em) { 122 | .navigation-questions-anchor { 123 | visibility: visible; 124 | } 125 | } 126 | 127 | .navigation-item-emoji { 128 | width: 100%; 129 | font-size: 1rem; 130 | line-height: 1rem; 131 | padding-bottom: 1.5rem; 132 | margin-bottom: 1.5rem; 133 | vertical-align: top; 134 | align-content: flex-start; 135 | border-bottom: 1px solid #efefef; 136 | } 137 | 138 | .navigation-item-home { 139 | border-bottom: none; 140 | padding-bottom: 0; 141 | font-weight: 600; 142 | } 143 | 144 | @media (min-width: 60em) { 145 | .navigation-item-emoji { 146 | width: 50%; 147 | margin-bottom: 2rem; 148 | border-bottom: 1px solid #efefef; 149 | } 150 | } 151 | 152 | .navigation-item-emoji em { 153 | font-style: normal; 154 | margin-right: 0.5rem; 155 | } 156 | 157 | .navigation-item-translations { 158 | text-align: left; 159 | } 160 | 161 | @media (min-width: 60em) { 162 | .navigation-item-translations { 163 | text-align: right; 164 | } 165 | } 166 | 167 | .navigation-item-home em { 168 | color: #835eff; 169 | } 170 | 171 | .navigation-item-emoji a { 172 | text-decoration: none; 173 | display: inline-block; 174 | vertical-align: middle; 175 | } 176 | 177 | @media (min-width: 60em) { 178 | .navigation-item:not(:last-of-type) { 179 | margin-right: 0.8rem 180 | } 181 | } 182 | 183 | .navigation-anchor[rel~="external"]::after { 184 | content: ' ➚'; 185 | color: var(--color-highlight); 186 | } 187 | 188 | .navigation-anchor.current { 189 | border-bottom: 2px solid var(--color-highlight); 190 | padding: 0 0 5px 0; 191 | } 192 | -------------------------------------------------------------------------------- /src/_includes/assets/css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * atom-dark theme for `prism.js` 3 | * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax 4 | * @author Joe Gibson (@gibsjose) 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #c5c8c6; 10 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 11 | font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: 1em; 32 | margin: .5em 0; 33 | overflow: auto; 34 | border-radius: 0.3em; 35 | } 36 | 37 | :not(pre) > code[class*="language-"], 38 | pre[class*="language-"] { 39 | background: #370b44; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: .1em; 45 | border-radius: .3em; 46 | } 47 | 48 | .token.comment, 49 | .token.prolog, 50 | .token.doctype, 51 | .token.cdata { 52 | color: #7C7C7C; 53 | } 54 | 55 | .token.punctuation { 56 | color: #c5c8c6; 57 | } 58 | 59 | .namespace { 60 | opacity: .7; 61 | } 62 | 63 | .token.property, 64 | .token.keyword, 65 | .token.tag { 66 | color: #96CBFE; 67 | } 68 | 69 | .token.class-name { 70 | color: #FFFFB6; 71 | text-decoration: underline; 72 | } 73 | 74 | .token.boolean, 75 | .token.constant { 76 | color: #99CC99; 77 | } 78 | 79 | .token.symbol, 80 | .token.deleted { 81 | color: #f92672; 82 | } 83 | 84 | .token.number { 85 | color: #FF73FD; 86 | } 87 | 88 | .token.selector, 89 | .token.attr-name, 90 | .token.string, 91 | .token.char, 92 | .token.builtin, 93 | .token.inserted { 94 | color: #A8FF60; 95 | } 96 | 97 | .token.variable { 98 | color: #C6C5FE; 99 | } 100 | 101 | .token.operator { 102 | color: #EDEDED; 103 | } 104 | 105 | .token.entity { 106 | color: #FFFFB6; 107 | /* text-decoration: underline; */ 108 | } 109 | 110 | .token.url { 111 | color: #96CBFE; 112 | } 113 | 114 | .language-css .token.string, 115 | .style .token.string { 116 | color: #87C38A; 117 | } 118 | 119 | .token.atrule, 120 | .token.attr-value { 121 | color: #F9EE98; 122 | } 123 | 124 | .token.function { 125 | color: #DAD085; 126 | } 127 | 128 | .token.regex { 129 | color: #E9C062; 130 | } 131 | 132 | .token.important { 133 | color: #fd971f; 134 | } 135 | 136 | .token.important, 137 | .token.bold { 138 | font-weight: bold; 139 | } 140 | .token.italic { 141 | font-style: italic; 142 | } 143 | 144 | .token.entity { 145 | cursor: help; 146 | } 147 | -------------------------------------------------------------------------------- /src/_includes/assets/css/variables.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --font-family-heading: sans-serif; 3 | --font-family-body: Georgia, serif; 4 | --font-family-code: Menlo, Monaco, 'Courier New', monospace; 5 | --color-primary: #835EFF; 6 | --color-secondary: #FF008D; 7 | --color-safe: #8338EC; 8 | --color-gradient: linear-gradient(to right, var(--color-primary), var(--color-secondary)); 9 | --color-highlight: var(--color-primary); 10 | --color-gray-opacity: rgba(39,39,39,0.04); 11 | --color-heading: #23231A; 12 | --color-text: #23231A; 13 | --background-default: #F9F9F9; 14 | --border-radius-default: 5px; 15 | --box-shadow-default: 0 2rem 4rem rgba(0,0,0,.15); 16 | --transition-duration: 0.27s; 17 | } 18 | body.rtl{ 19 | --font-family-body: Arial, Helvetica, sans-serif; 20 | } -------------------------------------------------------------------------------- /src/_includes/assets/js/app.js: -------------------------------------------------------------------------------- 1 | console.log( 2 | '%cA black belt is a white belt that didn\'t quit.', 3 | 'color: #fff; font-size: 20px; text-shadow: 1px 1px 1px #000; font-family: serif;' 4 | ) 5 | 6 | var navToggle = document.getElementById('navigation-toggle') 7 | var nav = document.getElementById('navigation') 8 | 9 | navToggle.addEventListener('click', function() { 10 | nav.classList.toggle('open') 11 | }) 12 | 13 | window.addEventListener('resize', function() { 14 | if (document.width > 960) { 15 | // Remove `active` class if viewport shows full menu 16 | nav.classList.remove('active') 17 | } else { 18 | // Temporarily add class to prevent visible motion after resize 19 | nav.classList.add('no-motion') 20 | setTimeout(function () { 21 | nav.classList.remove('no-motion') 22 | }, 250); 23 | } 24 | }) 25 | -------------------------------------------------------------------------------- /src/_includes/components/footer.njk: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/_includes/components/navigation.njk: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /src/_includes/layouts/default.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if title and page.fileSlug != '' %}{{ title }} ★ {% endif %}{{ site.title }} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | {% set css %} 41 | {% include "assets/css/prism.css" %} 42 | {% include "assets/css/variables.css" %} 43 | {% include "assets/css/defaults.css" %} 44 | {% include "assets/css/navigation.css" %} 45 | {% include "assets/css/header.css" %} 46 | {% include "assets/css/content.css" %} 47 | {% include "assets/css/footer.css" %} 48 | {% endset %} 49 | 50 | 51 | 52 |
53 |
54 | 55 | {% include "components/navigation.njk" %} 56 |
57 | {% block pageTop %}{% endblock %} 58 | {% block main %}{% endblock %} 59 |
60 | {% include "components/footer.njk" %} 61 |
62 | {% set js %}{% include "assets/js/app.js" %}{% endset %} 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/_includes/layouts/page.njk: -------------------------------------------------------------------------------- 1 | {% extends 'layouts/default.njk' %} 2 | 3 | {% block pageTop %} 4 |
5 | {% if heading and heading === true %} 6 |

{{ title }}

7 | {% else %} 8 |

{{ title }}

9 | {% endif %} 10 | {% if description %} 11 |

{{ description | markdownify_inline | safe }}

12 | {% endif %} 13 |
14 | {% endblock %} 15 | 16 | {% block main %} 17 |
18 | {{ content | safe }} 19 |
20 |
21 | 22 | Edit this page 23 | 24 |
25 | {% endblock %} 26 | -------------------------------------------------------------------------------- /src/about.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | permalink: /about/index.html 4 | --- 5 | {% extends 'layouts/page.njk' %} 6 | 7 | {% set content %} 8 | ## Overview 📦 9 | 10 | This project started in 2009 by [Darcy Clarke](https://darcyclarke.me), releasing in [2012](http://web.archive.org/web/20120909134303/http://darcyclarke.me/development/front-end-job-interview-questions) to the public. Many of the initial questions were sourced from a shared **etherpad** document started by [Paul Irish](https://twitter.com/paul_irish). 11 | 12 | At its core, the project contains a number of front-end questions that can be used when vetting potential candidates, test yourself or used as a guide for concepts you may want to learn. It is by no means recommended to use these questions verbatim, nor expected that someone would know all the "answers". These questions are intentionally written to be open-ended and hopefully lead to interesting discussions that tell you more about a person's thought process then reference memory. 13 | 14 | #### This project was featured on [The Changelog](https://changelog.com/podcast/143) – Episode #143 (Feb 21, 2015) 15 | 16 | 17 | 18 | ## Current Maintainers 🦄 19 | 20 | 34 | 35 |
36 | 37 | ## Maintainers Emeriti 🐴 38 | 39 | 53 | 54 |
55 | 56 | ## Original Contributors ✨ 57 | 58 | 72 | 73 |
74 | 75 | ## All Contributors 🌏 76 | 77 |
    78 | {% for person in contributors.contributors %} 79 |
  • 80 | 81 | {{ person.name }} 82 |
    • 83 | {% endfor %} 84 |
85 | 86 | Saw something wrong? Want to add a question? suggest something? Check our [contributing guidelines](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/.github/CONTRIBUTING.md), open a pull-request or [fill a bug](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues/new). 87 | 88 | {% endset %} 89 | 90 | {% block main %} 91 |
92 | {{ content | markdownify | safe }} 93 |
94 | {% endblock %} 95 | -------------------------------------------------------------------------------- /src/assets/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayatoullah/Front-end-Developer-Interview-Questions/dd6ba7a845ec80ad4d21dd5c4c8d137b83de1197/src/assets/images/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayatoullah/Front-end-Developer-Interview-Questions/dd6ba7a845ec80ad4d21dd5c4c8d137b83de1197/src/assets/images/bg.png -------------------------------------------------------------------------------- /src/assets/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayatoullah/Front-end-Developer-Interview-Questions/dd6ba7a845ec80ad4d21dd5c4c8d137b83de1197/src/assets/images/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/images/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayatoullah/Front-end-Developer-Interview-Questions/dd6ba7a845ec80ad4d21dd5c4c8d137b83de1197/src/assets/images/favicon-96x96.png -------------------------------------------------------------------------------- /src/assets/images/gradient.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ayatoullah/Front-end-Developer-Interview-Questions/dd6ba7a845ec80ad4d21dd5c4c8d137b83de1197/src/assets/images/og-image.png -------------------------------------------------------------------------------- /src/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Front-end Developer Interview Questions 3 | permalink: /index.html 4 | rtl: false 5 | --- 6 | {% extends 'layouts/default.njk' %} 7 | 8 | {% block pageTop %} 9 |
10 |
11 |

{{ title }}

12 |

13 | A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore. Read more about it here. Better in your language? See one of our translations. 14 |

15 |

16 | Since this project begun, thousands of questions were added by an amazing group of people, and translated to more than 30 different languages. Want to contribute? See our contribute guide. 17 |

18 |
19 | {% endblock %} 20 | {% block main %}{% endblock %} 21 | -------------------------------------------------------------------------------- /src/questions/coding-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Coding Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/coding-questions/index.html 5 | --- 6 | 7 | Question: What is the value of `foo`? 8 | ```javascript 9 | var foo = 10 + '20'; 10 | ``` 11 | 12 | Question: What will be the output of the code below? 13 | ```javascript 14 | console.log(0.1 + 0.2 == 0.3); 15 | ``` 16 | 17 | Question: How would you make this work? 18 | ```javascript 19 | add(2, 5); // 7 20 | add(2)(5); // 7 21 | ``` 22 | 23 | Question: What value is returned from the following statement? 24 | ```javascript 25 | "i'm a lasagna hog".split("").reverse().join(""); 26 | ``` 27 | 28 | Question: What is the value of `window.foo`? 29 | ```javascript 30 | ( window.foo || ( window.foo = "bar" ) ); 31 | ``` 32 | 33 | Question: What is the outcome of the two alerts below? 34 | ```javascript 35 | var foo = "Hello"; 36 | (function() { 37 | var bar = " World"; 38 | alert(foo + bar); 39 | })(); 40 | alert(foo + bar); 41 | ``` 42 | 43 | Question: What is the value of `foo.length`? 44 | ```javascript 45 | var foo = []; 46 | foo.push(1); 47 | foo.push(2); 48 | ``` 49 | 50 | Question: What is the value of `foo.x`? 51 | ```javascript 52 | var foo = {n: 1}; 53 | var bar = foo; 54 | foo.x = foo = {n: 2}; 55 | ``` 56 | 57 | Question: What does the following code print? 58 | ```javascript 59 | console.log('one'); 60 | setTimeout(function() { 61 | console.log('two'); 62 | }, 0); 63 | Promise.resolve().then(function() { 64 | console.log('three'); 65 | }) 66 | console.log('four'); 67 | ``` 68 | 69 | Question: What is the difference between these four promises? 70 | ```javascript 71 | doSomething().then(function () { 72 | return doSomethingElse(); 73 | }); 74 | 75 | doSomething().then(function () { 76 | doSomethingElse(); 77 | }); 78 | 79 | doSomething().then(doSomethingElse()); 80 | 81 | doSomething().then(doSomethingElse); 82 | ``` 83 | 84 | Question: What will the code below output to the console and why? 85 | ```javascript 86 | (function(){ 87 | var a = b = 3; 88 | })(); 89 | 90 | console.log("a defined? " + (typeof a !== 'undefined')); 91 | console.log("b defined? " + (typeof b !== 'undefined')); 92 | ``` 93 | 94 | Question: Consider the two functions below. Will they both return the same thing? Why or why not? 95 | ```javascript 96 | function foo1() 97 | { 98 | return { 99 | bar: "hello" 100 | }; 101 | } 102 | 103 | function foo2() 104 | { 105 | return 106 | { 107 | bar: "hello" 108 | }; 109 | } 110 | ``` 111 | -------------------------------------------------------------------------------- /src/questions/css-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/css-questions/index.html 5 | --- 6 | 7 | * What is CSS selector specificity and how does it work? 8 | * What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why? 9 | * Describe Floats and how they work. 10 | * Describe z-index and how stacking context is formed. 11 | * Describe BFC (Block Formatting Context) and how it works. 12 | * What are the various clearing techniques and which is appropriate for what context? 13 | * How would you approach fixing browser-specific styling issues? 14 | * How do you serve your pages for feature-constrained browsers? 15 | * What techniques/processes do you use? 16 | * What are the different ways to visually hide content (and make it available only for screen readers)? 17 | * Have you ever used a grid system, and if so, what do you prefer? 18 | * Have you used or implemented media queries or mobile specific layouts/CSS? 19 | * Are you familiar with styling SVG? 20 | * Can you give an example of an `@media` property other than `screen`? 21 | * What are some of the "gotchas" for writing efficient CSS? 22 | * What are the advantages/disadvantages of using CSS preprocessors? 23 | * Describe what you like and dislike about the CSS preprocessors you have used. 24 | * How would you implement a web design comp that uses non-standard fonts? 25 | * Explain how a browser determines what elements match a CSS selector. 26 | * Describe pseudo-elements and discuss what they are used for. 27 | * Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models. 28 | * What does ```* { box-sizing: border-box; }``` do? What are its advantages? 29 | * What is the CSS `display` property and can you give a few examples of its use? 30 | * What's the difference between inline and inline-block? 31 | * What's the difference between the "nth-of-type()" and "nth-child()" selectors? 32 | * What's the difference between a relative, fixed, absolute and statically positioned element? 33 | * What existing CSS frameworks have you used locally, or in production? How would you change/improve them? 34 | * Have you used CSS Grid? 35 | * Can you explain the difference between coding a web site to be responsive versus using a mobile-first strategy? 36 | * Have you ever worked with retina graphics? If so, when and what techniques did you use? 37 | * Is there any reason you'd want to use `translate()` instead of *absolute positioning*, or vice-versa? And why? 38 | * How is clearfix css property useful? 39 | * Can you explain the difference between px, em and rem as they relate to font sizing? 40 | * Can you give an example of a pseudo class? Can you provide an example use case for a pseudo class? 41 | * What is the difference between a block level element and an inline element. Can you provide examples of each type of element? 42 | * What is the difference between CSS Grid and Flexbox? When would you use one over the other? -------------------------------------------------------------------------------- /src/questions/fun-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Fun Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/fun-questions/index.html 5 | --- 6 | 7 | * What's a cool project that you've recently worked on? 8 | * What are some things you like about the developer tools you use? 9 | * Who inspires you in the front-end community? 10 | * Do you have any pet projects? What kind? 11 | * What's your favorite feature of Internet Explorer? 12 | -------------------------------------------------------------------------------- /src/questions/general-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: General Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/general-questions/index.html 5 | --- 6 | 7 | * What did you learn yesterday/this week? 8 | * What excites or interests you about coding? 9 | * What is a recent technical challenge you experienced and how did you solve it? 10 | * When building a new web site or maintaining one, can you explain some techniques you have used to increase performance? 11 | * Can you describe some SEO best practices or techniques you have used lately? 12 | * Can you explain any common techniques or recent issues solved in regards to front-end security? 13 | * What actions have you personally taken on recent projects to increase maintainability of your code? 14 | * Talk about your preferred development environment. 15 | * Which version control systems are you familiar with? 16 | * Can you describe your workflow when you create a web page? 17 | * If you have 5 different stylesheets, how would you best integrate them into the site? 18 | * Can you describe the difference between progressive enhancement and graceful degradation? 19 | * How would you optimize a website's assets/resources? 20 | * How many resources will a browser download from a given domain at a time? 21 | * What are the exceptions? 22 | * Name 3 ways to decrease page load (perceived or actual load time). 23 | * If you jumped on a project and they used tabs and you used spaces, what would you do? 24 | * Describe how you would create a simple slideshow page. 25 | * If you could master one technology this year, what would it be? 26 | * Explain the importance of standards and standards bodies. 27 | * What is Flash of Unstyled Content? How do you avoid FOUC? 28 | * Explain what ARIA and screenreaders are, and how to make a website accessible. 29 | * Explain some of the pros and cons for CSS animations versus JavaScript animations. 30 | * What does CORS stand for and what issue does it address? 31 | * How did you handle a disagreement with your boss or your collaborator? 32 | * What resources do you use to learn about the latest in front end development and design? 33 | * What skills are needed to be a good front-end developer? 34 | * What role do you see yourself? 35 | * Explain the difference between cookies, session storage, and local storage? 36 | -------------------------------------------------------------------------------- /src/questions/html-questions.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTML Questions 3 | layout: layouts/page.njk 4 | permalink: /questions/html-questions/index.html 5 | --- 6 | 7 | * What does a `doctype` do? 8 | * How do you serve a page with content in multiple languages? 9 | * What kind of things must you be wary of when designing or developing for multilingual sites? 10 | * What are `data-` attributes good for? 11 | * Consider HTML5 as an open web platform. What are the building blocks of HTML5? 12 | * Describe the difference between a `cookie`, `sessionStorage` and `localStorage`. 13 | * Describe the difference between `