Frontend Junior - Technical Assessment

Candidate information

Full name

Email

Phone (optional)

Years of experience

CV / Resume Accepted formats: PDF, DOC, DOCX. Maximum 5MB

Knowledge questions

What is the main difference between `<section>`, `<article>`, and `<div>` in HTML5?

`<article>` is independent redistributable content, `<section>` groups thematically related content, and `<div>` has no semantic value whatsoever

`<div>` is the main semantic element of the document, while `<section>` and `<article>` are generic containers with no special meaning

All three elements are functionally interchangeable and only differ in the default styles that browsers apply when rendering them

`<section>` can only be used as a direct child of `<article>`, and `<div>` is mandatory as a wrapper for any semantic content

For a blog post displaying author, date, and comments, which combination of semantic elements is most appropriate?

`<div class="post">` with `<span>` for author and date is sufficient because screen readers interpret text content regardless of the element used

`<section>` as main container with `<p>` for all content, since `<section>` indicates it is a thematic part of the document

`<main>` as wrapper with `<footer>` for author and date, because `<main>` indicates primary content and `<footer>` document metadata

`<article>` with `<header>`, `<time datetime="...">`, `<address>` for author, and `<section>` for comments, providing maximum semantics and accessibility

Look at this CSS: `.container { display: flex; justify-content: center; } .child { align-self: center; }` — The child is NOT vertically centered. Why?

The `align-self` property is not compatible with the flexbox layout model and only works within a CSS Grid layout context

Should use `margin: auto` on the child instead of `align-self`, since `align-self` only works when there are multiple flex items in the container

The container has no defined `height`, so there is no vertical space available for `align-self: center` to center the element within

Missing `flex-direction: column` on the container, because `align-self` only operates on the main axis defined by flex-direction

What is the difference between `rem`, `em`, and `px` in CSS?

`px` is a unit relative to the physical screen resolution of the device, while `rem` and `em` are absolute units that do not change with context

`rem` is relative to the root element (`html`) font-size, `em` is relative to the parent element font-size, and `px` is an absolute unit independent of context

`rem` and `em` are functionally identical and only differ in syntax used, both are calculated relative to the document root element

`em` is calculated relative to the browser viewport, `rem` relative to the root element, and `px` relative to the nearest positioned parent container

What does this code print? `for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 100); }`

Prints 0, 1, 2, 3, 4 sequentially because each loop iteration captures the current value of `i` in the setTimeout callback closure

Prints undefined five times because the variable `i` goes out of scope of the for loop before the setTimeout callbacks execute in the event loop

5, 5, 5, 5, 5 — because `var` does not create block scope, and when callbacks execute after 100ms, the loop has finished and `i` equals 5

Prints 0, 0, 0, 0, 0 because setTimeout freezes the value of `i` at the moment of registering the callback, always capturing the initial value

What is event delegation and when is it useful?

A pattern where a single event listener is attached to the parent element and `event.target` is used to identify which child triggered the event; especially useful with dynamic lists

The process of delegating events to the backend server for asynchronous processing via WebSockets, reducing processing load on the client side

Assigning an individual event listener to each child element for more granular control over the behavior of each element in the DOM

A React-specific method for passing events between sibling components through the component tree using shared context

What are the essential meta tags for SEO and social media?

Only Open Graph tags are needed for SEO; the `<title>` element does not affect ranking because search engines prioritize visible content

`<meta name="robots">` and `<meta name="author">` are the only meta tags that modern search engines like Google use to index content

Only `<title>` and `<meta name="keywords">` are needed, since Google still uses keywords as the primary ranking factor in its algorithms

`<title>`, `<meta name="description">`, `<meta property="og:title">`, `<meta property="og:image">`, and `<meta property="og:description">` cover SEO and social sharing

In an interface, the "Delete" button has the same style, size, and color as the "Save" button. What UI/UX principle is being violated?

The Gestalt proximity principle is violated, which states that nearby elements are perceived as related and should have similar functions

Visual hierarchy and affordance — destructive actions should be visually differentiated from constructive ones to prevent user errors

Fitts's Law is violated, which states that the time to reach a target depends on the distance and size of the interactive element

Nielsen's consistency principle is violated, which requires all buttons in an interface to maintain exactly the same visual style

What is the difference between `dependencies` and `devDependencies` in package.json, and what does `package-lock.json` do?

There is no real functional difference between them, it is just visual organization. `package-lock.json` works as a backup of package.json in case of file corruption

`devDependencies` are installed first in priority order and `dependencies` after. `package-lock.json` stores the complete history of version changes

`dependencies` are for production, `devDependencies` only for development (testing, build tools). `package-lock.json` locks exact versions for reproducible builds

`dependencies` are optional packages and `devDependencies` are mandatory for operation. `package-lock.json` is a file generated exclusively by yarn

What is two-way data binding and how is it implemented in Angular and Vue?

Automatic bidirectional synchronization between model and view. In Angular it is implemented with `[(ngModel)]` and in Vue with the `v-model` directive on inputs

A pattern where data flows only from component to template unidirectionally. Uses `@Output` in Angular and `$emit` in Vue to notify changes

It only exists in React through the combination of `useState` for state and `onChange` to capture user input events in forms

An obsolete design pattern that has been completely replaced by reactive programming with streams and observables in modern frameworks

Coding challenge

Create a responsive product card component using semantic HTML and pure CSS (no CSS frameworks). The component must follow a mobile-first approach and be fully functional across different screen sizes.

Requirements

Use appropriate semantic HTML (article, figure, heading, etc.)
Mobile-first design with at least one breakpoint for desktop
Clearly visible hover and focus states for accessibility
Include product image, name, price, and action button
No CSS frameworks (Bootstrap, Tailwind, etc.) — only vanilla CSS

Examples

Input: { product: { name: "Bluetooth Headphones", price: 49.99, image: "headphones.jpg" } }

Output: Responsive card displaying the image, name, formatted price, and an "Add to cart" button with visible hover/focus states

Accepted technologies

HTML5
CSS3
Vanilla JavaScript
TypeScript

Solution submission

Repository URL * Supported platforms: GitHub, GitLab, Bitbucket Enter a valid repository URL (https://github.com, gitlab.com, or bitbucket.org followed by owner/repository)

Frontend - Junior