The main focus of this exercise will be the use of JavaScript in WordPress.
Setup
First, please download the starter package. When you unzip the file, you will find a Duplicator installer and archive.
Make a new database and install the site into your testing environment (most likely MAMP).
Make a new SASS-based theme called mais-henri-your-name and install it in your new site. Be sure to make it the active theme.
Tasks
Masonry JavaScript Setup
If you look at the posts, one thing you will notice right away is that the feature images are not all the same orientation: some are portrait, while some are landscape.
Since our homepage, archive listings, and search results will all show the feature images, this means that the heights of the articles will not be consistent.
For this reason, your first task is to enqueue and configure the very famous JavaScript library masonry.js.
Masonry is a JavaScript layout library that arranges page elements to fit available vertical space, like a mason does with bricks in a wall. You have likely seen many sites using the technique. Probably the first to make it really widely know was Pinterest.
Here is the front page resized a number of ways. The automatic arranging of the articles is what you need to use masonry.js to do:
Masonry, in fact, is so popular that, like jQuery, it is included with WordPress by default. This means that you do not have to download it.
Rather you list it as a dependency for your masonry configuration script.
Make sure that the masonry script is enqueued only on the front page, archive pages, and the search results.
Post Title Background Color
Next, make all post titles on the front-page, any archive pages, and the search results have a random background color set when the page loads.
Here is the page reloaded a number of times. Observe the background color of the article titles.
The color of each article title must be white. With your script, make sure that the background color is never so light that there is not sufficient contrast to read the title.
Menu Toggling
In the header of the site, put two buttons. One will have the word MENU and the other will have the word SOCIAL.
When the user clicks the MENU button, the main content area must move to the right enough to show the main menu.
When the user clicks the SOCIAL button, the main content area must move to the left enough to show the social menu.
Here are the menus in action:
Have fun.