First, please download the starter files.
There is a folder of screenshots contained within the folder you download, as well as an HTML file and some image files.
Exercise Details
This document will describe what I’d like you to do in the exercise.
This Loom video will also demonstrate.
In this exercise, you will make the front page of a worldbeat music magazine.
You can use the internet and your notes.
If this is a Langara test, communicating with anyone other than me or the Instructional Assistant will result in you receiving a mark of zero.
The index file in the download has most of the text content of the file, and some HTML markup.
However, you will need to add additional HTML: use your judgement to create a semantic and easily styled page. You will definitely need to add DIVs and articles, etc. You can make any changes you want to the HTML.
About the Site Title
The screenshots show the entire page: they are not cut off. The heading text placement is intentional.
Images
The images are supplied in folders in the download, but are not included in the HTML. You need to write the code to include the images in the page. There are HTML comments in the file at each place where you need to include an image.
Feature Image
For the feature image (the big one at the top), use the first one in the images-feature folder. Make sure the following things occur with it:
- the image never gets wider than 1300px
- above 1300px screen width, it is always in the horizontal center
- the remaining space on the left and right has a black background
To illustrate, I’ve created a explanatory screenshot below with a border on the image:
Do not include the border in your work.
Fonts
The fonts used are from google: Work Sans and Noto Serif. You will need to look at the screenshots to decide which fonts, sizes, and weights to use.
The word “beats” at the top of the page is in the georgia, times, ‘times new roman’, serif font-stack.
The three icon symbols are from font-awesome. The links for facebook, twitter, and search will not show the actual words, but they need to remain accessible to search engines and the visually impaired.
Responsive States
Please study the screenshots and the loom movie for the three responsive states: small, medium, & large.
Menu States
The header and footer menus look identical at phone and tablet sizes, but look different at desktop size. Consult the screenshots.
The hover states of the menu items (which need to apply to both menus in the top and the bottom of the document) are shown below in separate screenshots. The hover background color is firebrick.
Revealed Artist Details
Do this part only if you are a Langara WMDD student, or if I asked you to when I gave you the exercise.
You will need to add in three boxes that sit at the bottom of each artist photo in the New Releases section:
- Country: enter a different country for each artist
- Albums: enter a number between 1 and 10
- Touring: use any month of the year
The screenshot below illustrates what I mean here.
These three pieces of information are originally hidden for each artist, but when a photo or name is clicked, the details for that artist are revealed, sliding up from below.
The pieces of information are revealed in sequence, with .25 seconds between each one appearing. In the screenshot above, items 2 & 4 have been clicked.
Those details become hidden again with a second click to the artist image or name.
Consult the Loom video and the screenshots for more information.
Search Form
Do this part only if you are a Langara WMDD student, or if I asked you to when discussing the assignment.
In this part, when the user clicks on the search icon, a search form slides down to cover the entire page—but the site title always remains visible.
Consult the Loom video and the screenshots for more information.
About The Screenshots
The screenshots show the feature image as being tinted. You do not not need to do this.
The screenshots show that some text flow is hyphenated. You do not need to worry about this either.
Those features are in the screenshots because I plan to use this exercise in a number of different classes.
What Each Part is Worth
If this is a test, the mark breakdown will be as follows:
| Header, Footer, Menus | 5 |
| Typography | 5 |
| Layout: Small | 5 |
| Layout: Medium | 5 |
| Layout: Large | 5 |
| Search Form (if required) | 2.5 |
| Artist Details (if required) | 2.5 |
If it’s just an exercise, the mark is out of 1, as usual.
If this is a Langara test, when you are done please rename the project folder to firstname-lastname-worldbeats, then zip it, and hand it into the handin folder on Brightspace.
If this is an Emily Carr test, please show me your work when you are done, or hand it into Moodle if asked.