├── .gitignore ├── README.md ├── _config.yml ├── agile.md ├── coding.md ├── css.md ├── git.md ├── html.md ├── images ├── 001.png ├── 002.png ├── 003.png ├── 004.png ├── 005.png ├── 006.png ├── 007.png ├── 008.png ├── 009.png ├── 010.png ├── 011.png ├── 012.png ├── 013.png ├── 014.png ├── 015.png ├── 016.png ├── 017.png ├── 018.png ├── 019.png ├── 020.png ├── 021.png ├── 022.png ├── 023.png ├── 024.png ├── 025.png ├── 026.png └── logos │ ├── logo-Interview.png │ ├── logo-agile.png │ ├── logo-coding.png │ ├── logo-css.png │ ├── logo-git.png │ ├── logo-html.png │ ├── logo-js.png │ ├── logo-react.png │ ├── logo-redux.png │ └── logo-webdev.png ├── javascript.md ├── react.md └── webdev.md /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | /source 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-End Web Development
Interview Questions 2 | 3 | ## 🔷 [General Web Development](webdev.md) 4 | 5 | ## 🔷 [Coding Challenges](coding.md) 6 | 7 | ## 🔷 [HTML](html.md) 8 | 9 | ## 🔷 [CSS](css.md) 10 | 11 | ## 🔷 [JavaScript](javascript.md) 12 | 13 | ## 🔷 [React](react.md) 14 | 15 | ## 🔷 [Git](git.md) 16 | 17 | ## 🔷 [Agile Methodologies](agile.md) 18 | 19 | ## 🔷 [Behavioral](behavioral.md) 20 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /agile.md: -------------------------------------------------------------------------------- 1 | ![Agile logo](images/logos/logo-agile.png) 2 | 3 | # Agile Methodologies Interview Questions 4 | 5 | Q. What is Agile? 6 | 7 |
Answer 8 | 9 | Agile is an approach or mindset in project management and software development. It emphasizes on building software incrementally while adapting and responding to changes as the product and requirements evolve. Agile was introduced as a flexible methodology in response to the rigidness of the traditional waterfall methodology. 10 | 11 |
12 | 13 | --- 14 | 15 | Q. How does Agile differ from the traditional Waterfall methodology? 16 | 17 |
Answer 18 | 19 | - Agile values adaptability and involvement; Waterfall values planning ahead. 20 | - Agile is an incremental and iterative approach; Waterfall is a linear and sequential approach. 21 | - Agile separates a project into sprints; Waterfall divides a project into phases. 22 | - Agile helps complete many small projects; Waterfall helps complete one single project. 23 | - Agile introduces a product mindset with a focus on customer satisfaction; Waterfall introduces a project mindset with a focus on successful project delivery. 24 | - Requirements are prepared everyday in Agile, while requirements are prepared once at the start in Waterfall. 25 | - Agile allows requirement changes at any time; Waterfall avoids scope changes once the project starts. 26 | - Testing is performed concurrently with development in Agile; testing phase comes only after the build phase in Waterfall. 27 | - Test teams in Agile can take part in requirements change; test teams in Waterfall do not get involved in requirements change 28 | - Agile enables the entire team to manage the project without a dedicated project manager; Waterfall requires a project manager who plays an essential role in every phase. 29 | 30 |
31 | 32 | --- 33 | 34 | Q. What are some potential drawbacks of using an Agile methodology? 35 | 36 |
Answer 37 | 38 | - Agile is simple to understand in principle but hard to do well in practice. It requires real commitment and first attempts are not likely to go very well. 39 | - The fact that Agile requires minimal planning at the beginning makes it easy to get sidetracked delivering new, unexpected functionality. 40 | - Agile demands more time and energy from everyone because developers and users (e.g. Product Owner) must constantly interact with each other. 41 | - There can be less of a blueprint of what the final deliverable will be. This can make it harder to gain commitment to the project by stakeholders at the early stage. 42 | - Agile can be challenging when there is a supplier-customer relationship. Customers typically want to know what they are getting for their money as early as possible. 43 | - Agile can be very challenging on much larger projects or where co-location is not possible (between developers and the business). 44 | - The agile approach often requires quick shifts from one aspect of a project to another. This may leave little time for doing the proper paperwork at each stage. Record-keeping is important, but it is often a casualty of agile working methods. 45 | - Features that are too big to fit into one or even several cycles might be avoided because they don't fit in nicely into the philosophy. 46 | 47 |
48 | 49 | --- 50 | 51 | Q. What is Scrum? 52 | 53 |
Answer 54 | 55 | Scrum is an agile framework for developing, delivering, and sustaining software products and services, although since its inception it has gained popularity in other fields as well such as research, sales, marketing and advanced technologies. 56 | 57 | The Scrum framework is designed for teams of ten or fewer members, who break their work into goals that can be completed within time-boxed iterations, called sprints, no longer than one month and most commonly two weeks. The Scrum Team track progress in 15-minute time-boxed daily meetings, called daily scrums. At the end of the sprint, the team holds sprint review, to demonstrate the work done, and sprint retrospective to improve continuously. 58 | 59 |
60 | 61 | --- 62 | 63 | Q. Are Agile and Scrum the same thing? 64 | 65 |
Answer 66 | 67 | No. Agile is a philosophy or mindset and a set of principles. It is an umbrella term used for a number of specific methodologies, one of which is Scrum. While Scrum is the most popular way to implement the agile framework, there are other popular agile methodologies out there such as Kanban and Extreme Programming (XP). 68 | 69 | ![image](images/005.png) 70 | 71 |
72 | 73 | --- 74 | 75 | Q. What is a Scrum Sprint? 76 | 77 |
Answer 78 | 79 | A Scrum Sprint is a recurring time-box of one month or less during which a "Done", useable, and potentially releasable product Increment is created. 80 | 81 | ![image](images/023.png) 82 | 83 |
84 | 85 | --- 86 | 87 | Q. What are the three Scrum artifacts? 88 | 89 |
Answer 90 | 91 | 1. **Product Backlog** 92 | The Product Backlog is an ordered list of everything that is known to be needed in a product. It is constantly evolving and is never complete. 93 | 94 | 2. **Sprint Backlog** 95 | The Sprint Backlog is a list of everything that the team commits to achieve in a given Sprint. Once created, no one can add to the Sprint Backlog except the Development Team. If the Development Team needs to drop an item from the Sprint Backlog, they must negotiate it with the Product Owner. During this negotiation, the ScrumMaster should work with the Development Team and Product Owner to try to find ways to create some smaller increment of an item rather than drop it altogether. 96 | 97 | 3. **Product Increment** 98 | At the end of every Sprint, the team must complete a product increment that is potentially releasable, meaning that meets their agreed-upon definition of done. 99 | 100 | ![image](images/024.png) 101 | 102 |
103 | 104 | --- 105 | 106 | Q. What are the four Scrum events or ceremonies? 107 | 108 |
Answer 109 | 110 | 1. **Sprint Planning** 111 | During Sprint Planning, the entire Scrum Team collaborates and discusses the desired high-priority work for the Sprint and defines the Sprint Goal. The ScrumMaster's role is primarily to facilitate the meeting. The Product Owner describes the objective of the Sprint and also answers questions from the Development Team about execution and acceptance criteria / criteria of satisfaction. The development team has the final say in how much of the high-priority work it can accomplish during the Sprint. 112 | 113 | 2. **Daily Scrum** 114 | The Development Team meets for 15 minutes (or less) every day of the Sprint to inspect progress toward the Sprint Goal. They describe for each other how their own work is going, ask for help when needed, and consider whether they are still on track to meet the Sprint Goal. This is not a status meeting but is instead an opportunity for the Development Team to inspect and adapt the product and process on a daily basis. 115 | 116 | 3. **Sprint Review** 117 | Sprint reviews focus on the product being developed, specifically on the potentially shippable product increment created during the sprint. During a sprint review, the Scrum Team invites stakeholders to discuss what was completed during the Sprint. They adapt the Product Backlog as needed based on this feedback. The Product Owner has the option to release any of the completed functionality. Though a demo might be part of this meeting, the primary purpose of the Sprint Review is the inspect and adapt capability provided by the discussion. 118 | 119 | 4. **Sprint Retrospective** 120 | Sprint retrospectives focus on the process. During a sprint retrospective the Scrum Team discusses what went right and areas for improvement in the Sprint. They make tangible plans for how to improve their own process, tools and relationships. 121 | 122 | ![image](images/022.png) 123 | 124 |
125 | 126 | --- 127 | 128 | Q. What is the role of the scrum master in a scrum team? 129 | 130 |
Answer 131 | 132 | The Scrum Master is accountable for a scrum Team's effectiveness. They focus on coaching the team members in self-management and cross-functionality, eliminating impediments to the team's progress and shielding them from outside interference, and making sure that all scrum events and ceremonies take place and are positive, productive, and kept within the alloted time. 133 | 134 | In addition to working with team members, scrum masters also work with project owners as well as stakeholders to ensure that everyone understands and follows scrum practices and is clear about what the team is working on and what the objectives are. 135 | 136 |
137 | 138 | --- 139 | 140 | Q. What Is a Sprint Burndown Chart? 141 | 142 |
Answer 143 | 144 | Sprint burndowns are a graphical way of showing how much work is remaining in the sprint, typically in terms of task hours. It is typically updated at the daily scrum. As the sprint progresses, the amount of work remaining should steadily decrease and should trend toward being complete on the last day of the sprint. Burndowns that show increasing work or few completed tasks are signals to the Scrum Master and the team that the sprint is not going well. Sprint burndown charts helps teams gauge whether they will complete the work of a sprint. Burndown charts also reinforce the Scrum values of commitment, focus and openness and one of the three pillars of empirical process control: transparency. 145 | 146 | ![image](images/026.png) 147 | 148 |
149 | 150 | --- 151 | -------------------------------------------------------------------------------- /coding.md: -------------------------------------------------------------------------------- 1 | ![Coding logo](images/logos/logo-coding.png) 2 | 3 | # Front-End Coding Challenges 4 | 5 | Q. Write a function that accepts an array of integers and counts the number of its unique values. Can you solve this in one line of code? 6 | 7 | ```js 8 | const countUniqueValues = arr => { 9 | // Your solution 10 | }; 11 | 12 | console.log(countUniqueValues([1, 1, 1, 1, 1, 2])); // 2 13 | console.log(countUniqueValues([1, 2, 3, 4, 4, 7, 7, 7, 13])); // 6 14 | console.log(countUniqueValues([-2, -1, -1, 0, 1])); // 4 15 | console.log(countUniqueValues([5])); // 1 16 | console.log(countUniqueValues([])); // 0 17 | ``` 18 | 19 |
Solution 20 | 21 | ```js 22 | const countUniqueValues = arr => { 23 | return new Set(arr).size; 24 | }; 25 | ``` 26 | 27 |
28 | 29 | --- 30 | 31 | Q. Write a function that takes two strings and checks to see if they are anagrams. Inputs consist of lower case alphanumeric letters or spaces. 32 | Further considerations: 33 | - You may **NOT** use the built-in `sort()` method. 34 | - If you need to create a new object, do **NOT** create more than one. 35 | - Expected performance: `O(n)` or better. 36 | 37 | ```js 38 | const validAnagram = (s1, s2) => { 39 | // Your solution 40 | }; 41 | 42 | console.log(validAnagram(' ', ' ')); // true 43 | console.log(validAnagram('s 7n', 'sn7 ')); // true 44 | console.log(validAnagram('cinema', 'iceman')); // true 45 | console.log(validAnagram('anagram', 'nagaram')); // true 46 | console.log(validAnagram('aza', 'zaz')); // false 47 | console.log(validAnagram('rat', 'cart')); // false 48 | ``` 49 | 50 |
Solution 51 | 52 | ```js 53 | const validAnagram = (s1, s2) => { 54 | if (s1.length !== s2.length) return false; 55 | 56 | const freq = {}; 57 | 58 | for (let letter of s1) { 59 | freq[letter] = (freq[letter] || 0) + 1; 60 | } 61 | 62 | for (let letter of s2) { 63 | if (!freq[letter]) { 64 | return false; 65 | } else { 66 | freq[letter]--; 67 | } 68 | } 69 | 70 | return true; 71 | }; 72 | 73 | console.log(validAnagram(' ', ' ')); // true 74 | console.log(validAnagram('s 7n', 'sn7 ')); // true 75 | console.log(validAnagram('cinema', 'iceman')); // true 76 | console.log(validAnagram('anagram', 'nagaram')); // true 77 | console.log(validAnagram('aza', 'zaz')); // false 78 | console.log(validAnagram('rat', 'cart')); // false 79 | ``` 80 | 81 |
82 | 83 | --- 84 | 85 | Q. Write a function that counts the number of duplicates (case-insensitive) in the input string. The input string can contain alphabets (both uppercase and lowercase) or numbers. Expected performance: `O(n)` or better. 86 | 87 | ```js 88 | const duplicateCount = text => { 89 | // Your solution 90 | }; 91 | 92 | console.log(duplicateCount('')); // 0 93 | console.log(duplicateCount('abcde')); // 0 94 | console.log(duplicateCount('aabbcde')); // 2 95 | console.log(duplicateCount('aabBcde')); // 2 96 | console.log(duplicateCount('aA11')); // 2 97 | console.log(duplicateCount('Indivisibility')); // 1 98 | console.log(duplicateCount('Indivisibilities')); // 2 99 | ``` 100 | 101 |
Solution 102 | 103 | ```js 104 | const duplicateCount = text => { 105 | const obj = {}; 106 | let count = 0; 107 | 108 | for (let letter of text.toLowerCase()) { 109 | obj[letter] = (obj[letter] || 0) + 1; 110 | if (obj[letter] === 2) count++; 111 | } 112 | 113 | return count; 114 | }; 115 | 116 | console.log(duplicateCount('')); // 0 117 | console.log(duplicateCount('abcde')); // 0 118 | console.log(duplicateCount('aabbcde')); // 2 119 | console.log(duplicateCount('aabBcde')); // 2 120 | console.log(duplicateCount('aA11')); // 2 121 | console.log(duplicateCount('Indivisibility')); // 1 122 | console.log(duplicateCount('Indivisibilities')); // 2 123 | ``` 124 | 125 |
126 | 127 | --- 128 | 129 | Q. Write a function that takes a string as input and returns true if the parentheses in the input string are 'balanced' and false otherwise. For the parentheses to be balanced, each open parenthesis must have a corresponding closing parenthesis, in the correct order. For example: 130 | - `((()))` is balanced 131 | - `(()(()()))` is balanced 132 | - `)(` is not balanced 133 | - `((()` is not balanced 134 | - `()))` is not balanced 135 | 136 | ```js 137 | const isBalanced = str => { 138 | // Your solution 139 | }; 140 | 141 | console.log(isBalanced('(){}')); // true 142 | console.log(isBalanced('({(()))}}')); // false 143 | console.log( 144 | isBalanced( 145 | '[{()()}({[]})]({}[({})])((((((()[])){}))[]{{{({({({{{{{{}}}}}})})})}}}))[][][]' 146 | ) 147 | ); // true 148 | ``` 149 | 150 |
Solution 151 | 152 | ```js 153 | const isBalanced = str => { 154 | const stack = []; 155 | 156 | for (let char of str) { 157 | if (char === '(' || char === '[' || char === '{') { 158 | stack.push(char); 159 | } else if (char === ')') { 160 | if (stack.pop() !== '(') return false; 161 | } else if (char === ']') { 162 | if (stack.pop() !== '[') return false; 163 | } else if (char === '}') { 164 | if (stack.pop() !== '{') return false; 165 | } 166 | } 167 | 168 | return !stack.length; 169 | }; 170 | 171 | console.log(isBalanced('(){}')); // true 172 | console.log(isBalanced('({(()))}}')); // false 173 | console.log( 174 | isBalanced( 175 | '[{()()}({[]})]({}[({})])((((((()[])){}))[]{{{({({({{{{{{}}}}}})})})}}}))[][][]' 176 | ) 177 | ); // true 178 | ``` 179 | 180 |
181 | 182 | --- 183 | 184 | Q. Write a function that determines if a string has all unique characters. 185 | 186 | ```js 187 | const isUnique = str => { 188 | // Your solution 189 | } 190 | 191 | console.log(isUnique('abcd')); // true 192 | console.log(isUnique('aabcd')); // false 193 | ``` 194 | 195 |
Solution 196 | 197 | ```js 198 | const isUnique = str => { 199 | let obj = {}; 200 | for (let char of str) { 201 | if (obj[char]) return false; 202 | obj[char] = true; 203 | } 204 | return true; 205 | } 206 | 207 | console.log(isUnique('abcd')); // true 208 | console.log(isUnique('aabcd')); // false 209 | ``` 210 | 211 |
212 | 213 | --- 214 | -------------------------------------------------------------------------------- /css.md: -------------------------------------------------------------------------------- 1 | ![CSS logo](images/logos/logo-css.png) 2 | 3 | # CSS Interview Questions 4 | 5 | Q. CSS stands for Cascading Style Sheets. What is Cascading? 6 | 7 |
Answer 8 | 9 | Cascading is the process of combining several style sheets and resolving conflicts between them. 10 | 11 | The rule used is chosen by cascading down from the more general rules to the specific rule required. 12 | 13 | Concepts such as **inheritance** and **specificity** are used to decide which styles get applied. 14 | 15 | For instance, 16 | - a more specific rule will override a less specific rule. 17 | - a rule defined in an external stylesheet is overruled by a style defined in the `` of the document, which, in turn, is overruled by an inline style within the element itself. 18 | 19 |
20 | 21 | --- 22 | 23 | Q. What were some new features that were introduced in CSS3? Which ones are your favorite? 24 | 25 |
Answer 26 | 27 | - Border radius and border images 28 | - Drop shadows, text shadows, linear and radial gradients 29 | - Animations, Transitions, and 3D Transformations 30 | - Flexbox and Grids 31 | - Web fonts 32 | - Media Queries 33 | - New pseudo-classes (e.g. `:nth-child(n)`, `:nth-of-type(n)`, `:last-child`) 34 | 35 | Pick your favorite(s) and be able to explain why. 36 | 37 |
38 | 39 | --- 40 | 41 | Q. Are you familiar with any CSS methodologies for writing modular and reusable code? 42 | 43 |
Answer 44 | 45 | The three most popular CSS methodologies are BEM, SMACSS, and OOCSS. See below for summary of each. 46 | 47 | The Block, Element, Modifier methodology (BEM) is a popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS in a given project. E.g. 48 | 49 | ```html 50 | 51 | $8.99 52 | Subscribe 53 | 54 | ``` 55 | 56 | ```css 57 | /* Block component */ 58 | .btn {} 59 | 60 | /* Element that depends upon the block */ 61 | .btn__price {} 62 | .btn__text {} 63 | 64 | /* Modifier that changes the style of the block */ 65 | .btn--big {} 66 | .btn--shadow {} 67 | ``` 68 | 69 | Scalable and Modular Architecture for CSS (SMACSS) is a style guide that focuses on separating CSS rules into five categories of Base, Layout, Module, State, and Theme. SMACSS is less opinionated about naming conventions than BEM. 70 | 71 | ‎Object Oriented CSS (OOCSS) is based on two major principles: Separation of structure (height, width, margins, etc.) and skin (colors, fonts, etc.), and Separation of container and content (elements such as images, paragraphs and div tags that are nestled within other elements, which serve as containers). 72 | 73 |
74 | 75 | --- 76 | 77 | Q. Describe the CSS Box model. 78 | 79 |
Answer 80 | 81 | All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around every HTML element and consists of margins, borders, padding, and the actual content. 82 | 83 | ![image](images/002.png) 84 | 85 |
86 | 87 | --- 88 | 89 | Q. Describe the CSS Box-sizing property 90 | 91 |
Answer 92 | 93 | The CSS box-sizing property defines whether the width and height of an element should include padding and borders. 94 | 95 | **content-box** 96 | This is the initial and default value as specified by the CSS standard. The width and height properties include the content, but does not include the padding, border, or margin. For example, `.box {width: 350px; border: 10px solid black;}` renders a box that is `370px` wide. 97 | 98 | **border-box** 99 | The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, `.box {width: 350px; border: 10px solid black;}` renders a box that is `350px` wide. 100 | 101 |
102 | 103 | --- 104 | 105 | Q. Have you heard of the Block Formatting Context or BFC? 106 | 107 |
Answer 108 | 109 | A new Block Formatting Context (BFC) is created whenever we use floats, absolutely positioned elements, inline-blocks, table-cells, elements with 'overflow' other than 'visible', etc. Once an element creates a BFC, everything is contained inside it. BFC is used to prevent margins collapsing, text wrapping, or to contain floats. 110 | 111 |
112 | 113 | --- 114 | 115 | Q. Are you familiar with CSS Combinators? 116 | 117 |
Answer 118 | 119 | A CSS combinator explains the relationship between the selectors. 120 | 121 | There are four different combinators in CSS: 122 | - The **descendant** selector (`space`) matches all elements that are descendants of a specified element. 123 | - The **child** selector (`>`) matches only those elements matched by the second selector that are the direct children of elements matched by the first. 124 | - The **adjacent sibling** selector (`+`) is used to select something if it is right next to another element at the same level of the hierarchy. 125 | - The **general sibling** selector (`~`) selects siblings of an element even if they are not directly adjacent. 126 | 127 | ```css 128 | div p { 129 | background-color: yellow; 130 | } 131 | 132 | div > p { 133 | background-color: yellow; 134 | } 135 | 136 | div + p { 137 | background-color: yellow; 138 | } 139 | 140 | div ~ p { 141 | background-color: yellow; 142 | } 143 | ``` 144 | 145 |
146 | 147 | --- 148 | 149 | Q. What are attribute selectors in CSS? 150 | 151 |
Answer 152 | 153 | Attribute selectors can be used to style HTML elements that have specific attributes. 154 | 155 | ```css 156 | a[target="_blank"] { 157 | /* style rules here */ 158 | } 159 | 160 | input[type="text"] { 161 | /* style rules here */ 162 | } 163 | 164 | [class^="top"] { 165 | /* style rules here */ 166 | } 167 | ``` 168 |
169 | 170 | --- 171 | 172 | Q. Is it possible to use an image as a border for an element? 173 | 174 |
Answer 175 | 176 | Yes, we can use the `border-image` CSS property to achieve that. The `border-image` property is a shorthand for five other CSS properties related to border images. 177 | 178 | ```css 179 | border-image: url(border.png) 30 round; 180 | ``` 181 | 182 |
183 | 184 | --- 185 | 186 | Q. When setting a box shadow in CSS, what is the difference between blur radius and spread radius? 187 | 188 |
Answer 189 | 190 | ```css 191 | box-shadow: (offset-x | offset-y | blur-radius(optional) | spread-radius(optional) | color(optional)); 192 | ``` 193 | 194 | `blur radius`: if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be, and the further out the shadow will extend. 195 | 196 | `spread radius`: positive values increase the size of the shadow, negative values decrease the size. Default is 0 (the shadow is same size as blur). 197 | 198 |
199 | 200 | --- 201 | 202 | Q. What does adding the `inset` keyword to the CSS box-shadow property do? 203 | 204 |
Answer 205 | 206 | The `inset` keyword changes the shadow from an outer shadow (outset) to an inner shadow. 207 | 208 | ![image](images/003.png) 209 | 210 |
211 | 212 | --- 213 | 214 | Q. What are some of the pros and cons of using CSS animations instead of doing them with JavaScript? 215 | 216 |
Answer 217 | 218 | CSS animations are preferred when we want to create small, self-contained states for UI elements. JavaScript is usually more appropriate when we want to have a greater control over the animations. 219 | 220 | While CSS animations tend to be faster than animation performance of jQuery, newer libraries such as GSAP tend to narrow that gap substantially. 221 | 222 | CSS keyframe animations are great for sequencing transitions however they only allow for percentages and not time. 223 | 224 |
225 | 226 | --- 227 | 228 | Q. What is the difference between block, inline, and inline-block when displaying elements? 229 | 230 |
Answer 231 | 232 | **Inline**: An inline element does not start on a new line and only takes up as much width as necessary. Some examples of inline elements are `` , ``, and ``. You can add space to the left and right of an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. Inline elements can appear within block elements. 233 | 234 | **Inline-Block**: Compared to `display: inline`, the major difference is that `display: inline-block` allows to set a width and height on the element. Also, the top and bottom margins/paddings are respected. Compared to `display: block`, the major difference is that `display: inline-block` does not add a line-break after the element, so the element can sit next to other elements. One common use for `display: inline-block` is to display list items horizontally instead of vertically. 235 | 236 | **Block**: Unlike inline or inline-block elements, a block-level element always starts on a new line and takes up the full width available. 237 | 238 |
239 | 240 | --- 241 | 242 | Q. What are the five possible values that can be assigned to the position property in CSS? 243 | 244 |
Answer 245 | 246 | `static`: Default value. Static doesn't mean much; it just means that the element will flow into the page as it normally would. 247 | 248 | `relative`: An element's original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work. So `left: 20px;` adds 20 pixels to the element's left position. Two things to note: Even if we don't set a z-index value, the relatively positioned element will now appear on top of any other statically positioned elements. In addition, a relatively positioned element limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. 249 | 250 | `absolute`: The element is removed from the normal document flow and no space is created for it in the page layout. It is positioned relative to its closest relatively positioned ancestor (if any), otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. 251 | 252 | `fixed`: The element is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled. It is out of the flow of the rest of the document. 253 | 254 | `sticky`: The element is positioned based on the user's scroll position. It basically acts like `position: relative` until an element is scrolled beyond a specific offset, in which case it turns into `position: fixed`. When it is scrolled back it gets back to its previous (relative) position. 255 | 256 |
257 | 258 | --- 259 | 260 | Q. Have you ever played around with blend modes in CSS? 261 | 262 |
Answer

263 | 264 | There are two properties that allow us to blend colors together in CSS: `mix-blend-mode` and `background-blend-mode`. With mix-blend-mode, we define the blending between the element and the elements that are behind it. With background-blend-mode, we define the blending between the element's background image and its background color. Some common blend modes are darken, multiply, overlay, screen and soft-light. 265 | 266 | ```css 267 | .cover { 268 | background-image: url(blend-mode-example.jpg); 269 | background-color: #51B7D3; 270 | background-blend-mode: luminosity; 271 | } 272 | ``` 273 | 274 | ![background-blend-mode example](images/010.png) 275 | 276 | ```html 277 | 283 | 284 |

285 | 286 | 287 |
288 | ``` 289 | 290 | ![mix-blend-mode original](images/011.png) 291 | 292 | ![mix-blend-mode blended](images/012.png) 293 | 294 |

295 | 296 | --- 297 | 298 | Q. Are you familiar with the HSL color model and why one would want to use it in their CSS? 299 | 300 |
Answer 301 | 302 | HSL (hue, saturation, lightness) is an alternative representation of the RGB color model. 303 | 304 | Hue ranges from 0 to 360 degrees on the color wheel. 0 is red, 120 is green, 240 is blue. Saturation and Lightness are percentages. 0% saturation means a shade of gray and 100% is the full color. 100% lightness is white, 0% lightness is black, and 50% lightness is "normal." 305 | 306 | ![image](images/018.png) 307 | 308 | Using HSL is a great way of making a color scheme for a website using complementary colors. e.g. 309 | 310 | ```css 311 | hsl(0, 100%, 50%); /* base colour */ 312 | hsl(90, 100%, 50%); 313 | hsl(180, 100%, 50%); 314 | hsl(270, 100%, 50%); 315 | ``` 316 | 317 | ![image](images/019.png) 318 | 319 |
320 | 321 | --- 322 | 323 | Q. When would you use a mixin in Sass? 324 | 325 |
Answer 326 | 327 | Mixins are blocks of code that can be re-used throughout the stylesheet. 328 | 329 | A mixin is defined with the `@mixin` directive. To use a mixin, we simply use `@include` followed by the name of the mixin and a semi-colon. 330 | 331 | ```scss 332 | @mixin reset-list { 333 | margin: 0; 334 | padding: 0; 335 | list-style: none; 336 | } 337 | 338 | @mixin horizontal-list { 339 | @include reset-list; 340 | 341 | li { 342 | display: inline-block; 343 | margin: { 344 | left: -2px; 345 | right: 2em; 346 | } 347 | } 348 | } 349 | 350 | nav ul { 351 | @include horizontal-list; 352 | } 353 | ``` 354 | 355 |
356 | 357 | --- 358 | 359 | Q. When would you make use of CSS variables in your code? 360 | 361 |
Answer 362 | 363 | CSS variables contain specific values to be reused throughout a CSS document. They are set using custom property notation that begins with a double hyphen e.g. `--main-color: black;` and are accessed using the `var()` function e.g. `color: var(--main-color);`. 364 | 365 | CSS variables can have a global or local scope. Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared. To create a variable with global scope, declare it inside the `:root` selector. To create a variable with local scope, declare it inside the selector that is going to use it. 366 | 367 | ```css 368 | :root { 369 | --blue: #6495ed; 370 | --white: #faf0e6; 371 | } 372 | 373 | body { 374 | background-color: var(--blue); 375 | } 376 | 377 | h2 { 378 | border-bottom: 2px solid var(--blue); 379 | } 380 | ``` 381 | 382 |
383 | 384 | --- 385 | 386 | Q. What is the difference between pseudo-classes and pseudo-elements in CSS? 387 | 388 |
Answer 389 | 390 | A pseudo-class is a selector that selects existing elements that are in a specific state, e.g. hovered over, checked, focused, etc. Pseudo-classes start with a colon `:`. Some common pseudo-classes are `:active`, `:checked`, `:enabled`, `:first-child`, `:first-of-type`, `:focus`, `:hover`, `:last-child`, `:last-of-type`, `:nth-of-type`, `:visited`, etc. 391 | 392 | ```css 393 | article a:hover { 394 | font-size: 120%; 395 | font-weight: bold; 396 | } 397 | ``` 398 | 399 | Pseudo-elements behave in a similar way, however they act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements. Pseudo-elements start with a double colon `::`. Most common pseudo-elements are `::after`, `::before`, `::first-letter`, and `::first-line`. 400 | 401 | ```css 402 | article p::first-line { 403 | font-size: 120%; 404 | font-weight: bold; 405 | } 406 | ``` 407 | 408 |
409 | 410 | --- 411 | 412 | Q. Are you aware of any accessibility concerns when using CSS pseudo-elements such as `::before` and `::after`? 413 | 414 |
Answer 415 | 416 | Due to the inconsistencies in how assistive technologies (such as screen readers) interpret pseudo-elements, they may be either completely ignored or misunderstood, causing confusion for users. 417 | 418 | W3C recommends using these elements for decorative purposes only, and not for inserting meaningful content into the DOM. 419 | 420 |
421 | 422 | --- 423 | 424 | Q. How do the `rem` and `em` CSS units differ from each other? 425 | 426 |
Answer 427 | 428 | rem (root em) is relative to the html (root) font-size. This means `1rem` is always equal to the font-size defined in ``. For instance, if the font size defined in the root of the document is `16px`, 429 | 430 | ```css 431 | h1 { 432 | font-size: 2rem; /* 2rem = 32px */ 433 | margin-bottom: 1rem; /* 1rem = 16px */ 434 | } 435 | 436 | p { 437 | font-size: 1rem; /* 1rem = 16px */ 438 | margin-bottom: 1rem; /* 1rem = 16px */ 439 | } 440 | ``` 441 | 442 | em is relative to the font-size of its direct or nearest parent: 443 | 444 | ```css 445 | h1 { 446 | font-size: 2em; /* 1em = 16px */ 447 | margin-bottom: 1em; /* 1em = 32px */ 448 | } 449 | ``` 450 | 451 | The above phenomenon occurs because `1em` is equal to its current font-size. Since the font-size in `

` is now set to `2em`, other properties computed with em in `

` would see that `1em = 32px`. 452 | 453 | ```css 454 | p { 455 | font-size: 1em; /* 1em = 16px */ 456 | margin-bottom: 1em; /* 1em = 16px */ 457 | } 458 | ``` 459 | 460 |

461 | 462 | --- 463 | 464 | Q. What is the difference between RGB and RGBA? 465 | 466 |
Answer 467 | 468 | They are both functions that define colors in the Red-Green-Blue (RGB) model. RGB is a 3-channel format containing data for Red, Green, and Blue. RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha. E.g. `background-color:rgba(255,0,0,0.3);` 469 | The value for A (alpha) is from `0` completely transparent, to `1` completely opaque. 470 | 471 |
472 | 473 | --- 474 | 475 | Q. Using CSS, what style can we add to the selector below to position the circles seen in the first image, in the center of the page like the second image? 476 | 477 | ![image1](images/020.png) 478 | 479 | ![image2](images/021.png) 480 | 481 | ```css 482 | .circles { 483 | /* Your code here */ 484 | } 485 | ``` 486 | 487 |
Answer 488 | 489 | ```css 490 | .circles { 491 | min-height: 100vh; 492 | display: flex; 493 | align-items: center; 494 | justify-content: center; 495 | } 496 | ``` 497 | 498 | You may also achieve this using the translate function: 499 | 500 | ```css 501 | .circles { 502 | position: absolute; 503 | left: 50%; 504 | top: 50%; 505 | transform: translate(-50%, -50%); 506 | } 507 | ``` 508 | 509 |
510 | 511 | --- 512 | 513 | Q. We commonly come across the following code at the beginning of the primary styles for a page. What does this piece of code do and why is it used? 514 | 515 | ```css 516 | * { 517 | padding: 0; 518 | margin: 0; 519 | } 520 | ``` 521 | 522 |
Answer 523 | 524 | This is known as the universal reset. Since we are using the universal selector (`*`), it resets the margins and padding of all HTML elements to 0. 525 | 526 | CSS resets are used to override the default stylesheets that modern browsers use. Because each browser uses a different stylesheet, certain elements (submit buttons, links, etc) don't always have consistent styling across all browsers. A CSS reset will wipe out some of the browser's default styling and allows us developers set our own. 527 | 528 |
529 | 530 | --- 531 | 532 | Q. How does resetting browser default styles differ from normalizing them in CSS? 533 | 534 |
Answer 535 | 536 | All browsers come with a set of default styles. With resetting, we remove (reset) those default styles and start from scratch on a blank slate. With normalizing, we keep the default styles but modify some of them to make them look consistent across different browsers. 537 | 538 | For example, with resetting, all headings (H1 to H6) can become the same font size, whereas with normalizing, the H1 tags will have the same font size across different browsers and will be larger than for example H2 tags. 539 | 540 |
541 | 542 | --- 543 | 544 | Q. What is the difference between `display: none` and `visibility: hidden` in CSS? 545 | 546 |
Answer 547 | 548 | `display: none` removes the element from the layout flow whereas `visibility:hidden` hides it but leaves the space. 549 | 550 | ![image](images/025.png) 551 | 552 |
553 | 554 | --- 555 | 556 | Q. What do we mean by mobile first design? 557 | 558 |
Answer 559 | 560 | Mobile first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: mobile. Designing for mobile is often times more challenging due to the limited space on small screens, which forces designers to focus on the content and essential features. Once the mobile design questions are answered, designing for other devices tends to be easier. 561 | 562 |
563 | 564 | --- 565 | -------------------------------------------------------------------------------- /git.md: -------------------------------------------------------------------------------- 1 | ![Git logo](images/logos/logo-git.png) 2 | 3 | # Git Interview Questions 4 | 5 | Q. How does Git differ from SVN? 6 | 7 |
Answer 8 | 9 | Subversion(SVN) is a centralized version control system. This means that the remote repository is the only true central place of storage and exchange. The project's commit history is saved there - and only there! In cases when this central remote repository is not available (offline or broken), people will not be able to work. 10 | 11 | Git is a distributed version control system. This means that every developer / collaborator has a full-blown version of the project on their machine, including all commit history. With a decentralized VCS, you can work offline and make commits to your own local repository - and then decide when you want to share and upload your work to a shared remote repository. 12 | 13 | ![image](images/004.png) 14 | 15 |
16 | 17 | --- 18 | 19 | Q. Are Git and GitHub the same thing? 20 | 21 |
Answer 22 | 23 | Not quite. Git is installed locally, whereas GitHub is a web-based hosting service for git repositories. GitHub also offers additional features such as issue tracking, user management, and hosting web pages. 24 | 25 |
26 | 27 | --- 28 | 29 | Q. What is the difference between `git pull` and `git fetch`? 30 | 31 |
Answer 32 | 33 | `git fetch` is the command that tells your local git repository to retrieve the latest metadata info from a remote repository, but it doesn't integrate any of this new data into your working files. It's more like just checking to see if there are any changes available. `git pull` on the other hand does that AND brings a copy of those changes from the remote repository and updates your current HEAD branch. 34 | 35 |
36 | 37 | --- 38 | -------------------------------------------------------------------------------- /html.md: -------------------------------------------------------------------------------- 1 | ![HTML logo](images/logos/logo-html.png) 2 | 3 | # HTML Interview Questions 4 | 5 | Q. Can a webpage contain multiple `
` or `