First, please download the required files:
1. 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.
Mac Users: Make sure that your MAMP PHP version is matching the package you are installing. You can set that in the MAMP window.
When you unzip the package, rename the folder to firstname-last-name-forq.
Now install the package in your development environment.
Be sure to add an admin account for yourself. For that admin account, use the following email address: walterwhite@kevinmc.ca.
This will ensure that a gravatar will show up in the exercise.
Assign all the posts in the site to your new admin account.
2. Additional Downloads
Upload the additional graphics files to your site.
Loom Video Demonstration
A short video description of the intended site look and behaviour.
Install Theme & Plugin, Update Duplicator
Install and activate the Blocksy theme.
Install the Blocksy Companion plugin. You may be prompted to do so by the theme.
Duplicator is already installed in the package. Please update it, if it is not current.
Install no other plugins.
Your Task
Study the screenshots to get a sense of the design of the site, and the form of the content that is output.
Basic Setup (4 pts)
- All type is set in the Poppins Google font, with a range of weights and sizes.
- The main accent color on the site is orange. This color is used for links and buttons, which turn blue when hovered over.
Articles Page (2 pts)
Make a page called Articles.
Designate this page as the repository of all posts.
Header (8 pts)
The header has
- Desktop: a logo, a menu, and a search icon
- Mobile: a login, and a hamburger menu
Okay, not the best UI, but forgive me for that.
The site favicon is the logo with the name cropped out, so we just have the salamander.
Footer (6 pts)
The footer has:
- Black background
- Four columns. In each column is the main menu.
(Yes, that is redundant, but the idea is that you would put other menus there). - A working back to top link with a spaceship icon.
Front Page (20 pts)
The front page has the following characteristics:
- It is set as a static home page
It has multiple sections.
Section One: CTA
- Image on left (desktop) or top (mobile).
- Four-word heading, with break
- Two paragraphs, with eleven and sixteen words of lorem impsum, respectively
- A button with Oh, Yes! as the text. That button links to the Articles page.
Section Two: Cards
- Two cards: Gochujang Party! and Send More Paramedics!
- One sentence each of lorem ipsum
- Image (supplied with graphics download)
- A link to nowhere (#).
Section Three: Speakers this Week
- Six images in a row.
Section Four: Category Links Boxes
- Four boxes.
- Each has the same supplied mountain image, but the focal point of each panel is different.
- Each has a link to a different Category archive.
- The link is centered vertically and horizonally
- The link is active over the entire box
- Hovering over the box does this:
Archive Pages (20 pts)
The four category archives have a heading area with
- archive title,
- category label,
- quotation (from supplied text file), and
- a screened background image.
Each post has a:
- title,
- feature image,
- meta data section (author, date, category) with icons
- excerpt
- read more link with arrow symbol
The archives also have a varied layout structure. See the screenshot of the large size to see what I mean here.
Single Posts (20 pts)
The single post views have this characteristic:
- Feature Image: full width
- Feature Image: an aspect ratio of 3:1.
- Meta: gravatar, date, category
- Centered text block
- Sharing icons (8 in total)
- Author info box
- Author gravatar
- Author biography
- Link to author archive
- Next &/or Previous Posts with thumbnail
- Related Posts: three, with Feature Image, Title, Date
When You Are Done
When you are done, make a Duplicator package of your site.
Download the installer.php and zip file Duplicator creates.
Do not rename either of them.
( Make sure that the two files you are handing in came from the same Duplicator package-making process. )
Put both of those files into a folder.
Rename that folder first-name-last-name-forq.
Zip that folder. Yes, that means you will have a zip file inside a zip file.
Check that your zip file is not only a few kilobytes. For you to get a mark, you must check that you are handing in your work in the correct form.