front-end-test.md

Front end test

A front end test intended for an entry level front-end developer

1. Create a layout like below using only CSS (difficulty level: medium)

-----------------------------------------------
|                              |              |
|  background color: yellow    |  background  |
|                              |    color:    |
|                              |    orange    |
|                              |              |
|   <------ 2/3 ----------->   | <-- 1/3 -->  |
|                              |              |
|                              |              |
|                              |              |
|                              |              |
-----------------------------------------------

Note: height of both should be same as the column which has more content inside it (use dummy text inside).

2. Create a fullscreen modal using CSS and javascript (difficulty level: hard)

The content inside the modal (a single paragraph) should be both vertically and horizontally aligned.

-----------------------------------------------
|                                             |
|                                         X   |
|                                             |
|                ------------                 |
|             ------------------              |
|               --------------                |
|            --------------------             |
|                                             |
|                                             |
|                                             |
-----------------------------------------------

3. Make the following layout using only CSS (difficulty level: easy)

On desktop, it should look like this:

---------- ---------- ----------
|        | |        | |        |
|        | |        | |        |
|        | |        | |        |
---------- ---------- ----------

On tablet (portrait mode), it should look like this

---------- ----------
|        | |        |
|        | |        |
|        | |        |
---------- ----------
----------
|        |
|        |
|        |
----------

On smartphone, it should look like this

----------
|        |
|        |
|        |
----------
----------
|        |
|        |
|        |
----------
----------
|        |
|        |
|        |
----------

Use dummy text and images inside these boxes.

(Assume All three boxes have same size of content)