Interview tasks

Couple of tasks for checking experience of the candidate

by kontrach

HTML

<!-- [start] Uncomment for task 4 -->
<div class="main" style="color: purple !important;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
<div>
<!-- [end] Uncomment for task 4 -->
<span>hello there</span>
Position 
and display
attributes' values,
tags, 
weight of selectors, 
pseudo-classes and elements, 
box model, relative and absolute values,
em vs rem, semantic, semantic tags, etc.

CSS

div.main {
  color: red !important;
}

.main {
  color: blue !important;
}

JavaScript

// Task 1. 
// Please, use HTML to implement this layout
// Just markup without any styling
/*

------------------------------------------
| logo image           link1 link2 link3 |
------------------------------------------
|           |  Article topic   |         |
|topic      |                  | Adverti |
| subtopic1 |  article body    | sement  |
| subtopic2 |                  | images  |
|           |                  |         |
|           |                  |         |
|           |                  |         |
|________________________________________
| Contacts                      Copyright|
|   																		 |
-----------------------------------------
*/

// Task 2
// Style markup according to design from the task 1.

// Task 3
// What changes are required to make this layout look good on any device?

// Task 4
// a) put inner divs in one line;
// b) first div should have red color, last - green, third - blue
// If familiar with flexbox
// f a) there should be only 3 divs per row and 4-th of them on the first position
// f b) style header with flexbox.
// if familiar with grids
// g a) style markup from task 1 using grids

// JS