Most of the tasks in this exercise can be accomplished in the Customizer. However, some Custom CSS will also be required.
If this is a test, there is one section you will not need to do.
If this is a test, the marks breakdown is listed with each section title below.
Do not install any plugins, except for the one you will install if this is not a test.
Starter Content & Theme Installation
For this exercise, first please download the following Duplicator package.
I’ve included two versions of the package (made while running different php versions).
First try version 8. If that doesn’t work, install version 7.
Make sure that your MAMP PHP version is matching the package you are installing.
When you unzip the package, rename the folder to firstname-lastname-petulant.
Then install the site in your development environment.
Install the Neve theme.
Screenshots & Graphics
Please download the screenshots and the additional graphic files required for the exercise:
Loom Video
Site Identity & Basic Structure (5 marks)
Set the logo of the site to use the file petulant-logo.png.
Set the favicon to the site to use the file problem-child.png.
Set the site name to petulant and the site tagline to music & politics.
Set the site to have a static home page.
Set the site’s posts to appear on a page called posts.
Typography (5 marks)
The font used throughout the site is Poppins.
Pay attention to the sizes, colors, and weights of individual type elements on all pages—particularly archives and single views if this is a test, and also the home page, if this is not a text.
Colors (5 marks)
Look at articles in one of the archive screenshots, then look at the dark and light mode search screenshots.
Configure the theme to use these colors in their respective modes.
Menu (5 marks)
Make a menu with links to home, politics, music, movies, food, and posts. Politics, music, movies, and food are categories.
Site Header (15 marks)
Configure the site header as in the screenshots. It will have the following elements:
- logo (linked to home)
- main menu
- dark – light mode switch
- search
As shown in the screenshots, the menu will be replaced by a hamburger at medium and small sizes.
The Logo (10 marks)
Compare the logo in dark mode and light mode screenshots.
Use CSS to create that color change.
Site Archives (10 marks)
Set up the archives layouts as they appear in the screenshots.
Archives Article Form (10 marks)
Look at form of articles in the archive screenshots. As precisely as possible, make your articles match them.
Posts/Blog Page (15 marks)
Make the following two articles show up at the top of the blog listing, formatted as in the blog screenshots:
- Et nihil pariatur
- Recusandae quis nam
Note that the posts page has pagination. See the screenshot.
Single Views of Posts (15 marks)
Configure the Single Views of posts to be as close as possible to the screenshots.
Try to ensure that the posts titles and meta information are readable, while making sure the images remain vivid.
It is OK if that text isn’t perfectly readable on a few posts.
Search Form (5 marks)
Make the modal search box no wider than 600px.
Make it centered.
Observe the focus colors in both light and dark mode.
Home Page, if Test
If this is an in-class test, the only thing you need to do with the home page is put a heading with the words “home page” on it, and make sure that the link in the menu goes to this page.
You do not need to do the next section. Skip down to What to Hand In.
Home Page, if Not a Test
For use in this part of the exercise, install the Stackable – Gutenberg Blocks plugin.
If this is an exercise, rather than a test, you must make the entire home page (as in the screenshots).
The individual components of the Home Page (non-test) are described below.
- Page Title:
Figure out how to make the page name not appear
- Banner Area:
Background Image: blurred-windows-reflection.webp
Title: The Home of Alternative Music
Note: this goes over two lines, but is one heading.
Text: Twenty words of lorem ipsum
- Heading Area
Text: Just Released: New Anna Calvi Single: Wish
Note: this goes over two lines, but is one heading.
- Live Performer Video
Use the Video Popup block from Stackable to insert the image anna-calvi-live.webp into the page.
Make sure that the image has a play icon in the center.
Enure that when the image is clicked, a video popup window plays this video:
- Home Page Sections
Use an appropriate block to create the alternating image-title-list-button content areas.
The buttons must link to their respective category archives.
Make sure that the image corners that “touch” do not separate at any size before the single-column phone view.
What to Hand In
When you are done, please make a Duplicator archive of your project. In doing so, please follow these guidelines:
- Do not rename the zip file that Duplicator makes, or you will break the package.
- The installer.php file must be the one that was created at the same time as the zip, or the package will not install. Installers cannot be reused, in other words.
- Make sure that your installer and archives are not aliases or shortcuts. Check that neither has an arrow in the icon, and make sure that the zip file is a reasonable size (with this project, it will likely be between 50 & 100 megabytes).
- Put the installer and ZIP archive in a folder with your name on it.
- ZIP that folder.
- Hand in that ZIP.