Technical (HTML, CSS, JS)

Question 1

What is HTML?

Answer 1

Hyper Text Markup Language for creating web pages

Question 2

What is HTML tag?

Answer 2

Keyword surrounded by angle brackets, usually come in pairs; first tag in pair is opening tag, second is closing and have forward slash before the tag name

Question 3

What is JavaScript?

Answer 3

JS is a programming language that is used to add interactivity to web pages. It is a client-side language (executed on the user’s computer, not on server). Can be used to add animations, pop-ups, form validation, etc

Question 4

Where and how can you add JS code to HTML page?

Answer 4

There is internal and external JS code. Internal is inserted into HTML file between

 tags usually in body section. External JS is a separate file with JS code that is later linked to HTML file with 
 tag with src attribute, it's usually done in head section

Question 5

What is JS function? How is it executed? Why do we need to execute it?

Answer 5

Function is a block of code which only runs when it’s called. JS function is executed (called) by event only (button click, call within script or another function). Need to execute it so actions in function will be performed

Question 6

What is difference between == and === in JS?

Answer 6

== compares values, === compares values and types

Question 7

What are the specifics of web applications and how it affect your testing activities?

Answer 7

Content is always HTML, CSS, JS and it is dynamically loaded into browser so you don’t need to install or set up anything. Also in browser you have dev tools which you can use for some testing activities;
Browser, dev tools, networking, CSS, tags, almost always gray box

Question 8

Explain the basic structure of an HTML document.

Answer 8

Firstly there is Head where you specify page title, external JS and CSS files, etc;
then there is Body where all the main code located in form of DOM tree (parent and child elements structure); inside Body we have all tags which needed to display page (e.g.: div, span, p, img, a, h1..6, etc)

Question 9

Describe the difference between HTML elements and HTML tags

Answer 9

Element is a component of a web page, tells a web browser how to structure and interpret a part of the HTML document, consists of opening and closing tags, formatting instructions, semantic meaning and content, also element is exactly what displayed on a web page, e.g.: <p style..>This is element</p>
Tag is a building block of a web page, indicates to a web browser of how a web page should be displayed, usually exist in pairs of starting and ending tags, e.g.: <h1></h1>

Question 10

Explain the difference between inline elements and block-level elements

Answer 10

Inline elements don’t start new line (span); block-level elements start new line and takes the whole width of the page (div)

Question 11

Describe the attributes and usage of the <img></img> tag in HTML

Answer 11

<img src=’link’ alt=’text’ style=’’>
Usage - to add images to the web page. Attributes: src - link/path to the image location, alt - alternative text that will be shown if img won’t load, style - to add inline CSS properties

Question 12

How to create table in HTML?

Answer 12

<table>
<tr>
<td>text1</td>
<td>text2</td>
</tr>
<tr></tr>
</table>

Question 13

Explain difference between relative and absolute URLs in HTML

Answer 13

Absolute URL is path to the element from the top most directory; relative - from current

Question 14

How do you add submit button to HTML page?

Answer 14

Button tag with input type submit

Question 15

What is input validation in HTML forms?

Answer 15

Checking if the form field accepts correct amount (min/max), type, format, etc of the user input

Question 16

What is CSS?

Answer 16

Cascading Style Sheet. It is for styling HTML documents. CSS is a design language that describes how to present a document written in a markup language such as HTML or XML.
CSS is used to style and lay out webpages, and can be used to adjust content size, spacing, color, and font. CSS can also add decorative features such as animations or splitting content into columns

Question 17

What are different ways to include CSS in HTML doc?

Answer 17

Inline, internal and external

Question 18

Explain the concept of CSS selectors specificity

Answer 18

It is the way CSS selectors prioritized if any conflicts occurs. Inline styling has the highest priority, then id, then class or pseudo-class, then tag

Question 19

What are the CSS pseudo-classes, and provide examples of their usage

Answer 19

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
Pseudo-classes are used to add styles to selectors when those selectors meet certain conditions. For example, the pseudo-class :hover can be used to select a button when a user’s pointer hovers over the button. This selected button can then be styled.

Question 20

Describe CSS box model

Answer 20

Content, padding, border, margin - inside of each other

Question 21

What are differences between margin and padding in CSS?

Answer 21

Padding - between content and border; margin - outside border

Question 22

How do you center an element horizontally and vertically in CSS?

Answer 22

For text we use text-align:center, for most of other it’s easier to use margin or padding properties

Question 23

Describe the difference between relative, absolute, and fixed positioning in CSS.

Answer 23

Relative positioning is element positioned depending on something (page size or position of another element), absolute is element’s position is stated with absolute units, fixed is element’s position is stated and it won’t change at any circumstances

Question 24

What is the purpose of the z-index property in CSS?

Answer 24

To make elements be on top or under each other. The higher z-index property, the higher element will be

Question 25

How can you hide an element using CSS?

Answer 25

Visibility - hidden or display - none

Question 26

What are the different data types in JavaScript?

Answer 26

Types that can contain values: string, number, boolean, object, function.
Types of objects: Object, Date, Array, String, Number, Boolean.
Types that can’t contain values: null, undefined

Question 27

Explain the difference between let, var, and const in JavaScript

Answer 27

VAR are globally scoped (when declared outside of the function => if it’s declared globally it can be used in the whole window) or function(locally) scoped (when declared in the function => can be accessed only within that function), never block-scoped; it can be re-declared and updated (change the value assigned to the variable and create a new variable with the same name); it is hoisted to the top of their scope and initialized with the value of undefined (if we declare variable after statement that use it, it won’t show an error). E.g.:
(1)var greeter = “say hi”; // globally scoped, can be accessed from anywhere
function newFunction(){
var hello = “hello”;//locally scoped, can’t be accessed outside of the
//function
}
if(true){
var greeter = “hi”;//block scoped, doesn’t affect var, still can be
//accessed from anywhere
}
(2)var greeter = “hey”;
var greeter = “hello”;//this won’t show error, is a JS problem; re-declaration
greeter = “hi”;//also not an error; updating
(3)console.log(greeter);
var greeter = “say hey”;//won’t show error because it’s equal to:
var greeter;
console.log(greeter);//greeter undefined
greeter = “say hey”;
LET is block scoped so if it’s declared within a block it can’t be accessed outside of this block; can be updated but not re-declared (can change value, but can’t create variable with the same name), but if the same variable is defined in different scopes, there will be no error; is also hoisted to the top, but not initialized. E.g.:
(1)let greeting = “say hi”;//globally scoped
if(true){
let hello = “hi”;//block scoped, can’t be accessed outside of the block
}

(2)let greeting = “hello”;
greeting = “hi”;//updating is ok
let greeting = “say hi”;//re-declaration will return an error
(3)console.log(greeter);
var greeter = "hi"; //with var result will be undefined
console.log(hello);
 let hello = "hello"; //with let we have Reference Error CONST is for constant values; block scoped; can’t be updated or re-declared; hoisted to the top, but not initialized (like let)

Question 28

How do you create and call a function in JavaScript?

Answer 28

function functionName(parameters){code}//create a function
functionName//call a function

Question 29

How do you loop through an array in JavaScript?

Answer 29

for(i=0;i<=array.length-1;i++){
console.log(array[i]);}//output of all array values

Question 30

What is DOM?

Answer 30

Document Object Model. Way to represent the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

Question 31

Explain the concept of parent and child nodes in the DOM

Answer 31

Child elements are nested in the parent elements and inherit their properties