March 2021 - 420-2W6 - User Interfaces
Worth: 9% of your total grade (from the ‘Assignments’ evaluation component).
Due: Saturday, April 10th, 2021, at midnight (end-of-day).
Hand In: A .txt file in Moodle (under Assignment 3) containing your project’s Git commit Id code (from your private GitHub repository).
Late Policy: 3 cumulative “late days” during the course. Any work submitted after the 3 “late days” have been used will not be graded.
- To integrate Git and GitHub into your workflow and assignment submission.
- To clone a professional website using Grid and Flexbox.
- To create a responsive webpage for mobile, tablet and desktop formats using a mobile-first approach.
In this assignment you will clone the Pexels - Video website using a combination of Grid and Flexbox for the layout. Observing and mimicking is an important method of learning design skills.
It is important to formulate a plan before jumping into the implementation, so you will be asked to visually break-down the layout of your website.
In this assignment you will clone the Pexels - Video website using a combination of Grid and Flexbox for the layout.
Visually layout the relationships between grid containers and their grid items for each section of the desktop website that uses grid. Images for each section are provided in the layouts folder.
Clearly identify the following:
-
For Grid elements only:
- Grid containers should be identified with a solid colored border.
- Grid items should be identified with a dashed black border.
- A Grid item can also be a Grid container and will have a colored dashed border.
-
For each Grid container:
- Include a legend listing how the columns and rows will be setup.
-
Once you are done, provide your images in one of the following formats:
- A png image for each section using grid.
- A pdf file for each section using grid.
- All diagrams in a single Draw.io file.
You can choose to use any visual diagramming tool you would like (such as PowerPoint, Google Slides, Draw.io, LucidChart, etc).
Annex B describes an example if you were cloning YouTube’s homepage with the viewport between 870px and 1120px width.
You will implement the Pexels Video website using Grid and Flexbox for layout and positioning. Please note that it does not need to be a perfect copy, however, it should get very close.
There are two minor modifications from the official site, which are:
- The top navbar must be constantly shown at the top and should not change colors;
- The video Grid must only contain the first 3 rows.
You should simplify your website so that you don’t use any JavaScript, CSS animations or transitions.
Additional information for the navbar and the gallery sections are described below.
In the original website the navbar is initially transparent and then becomes dark-blue as you scroll down (see animation below).
For this assignment the navbar must be constantly shown at the top of the viewport and should not change colors. Use the navbar as shown after scrolling down (see image below).
We haven’t yet covered html forms in the course. In order to add the search bar to the navbar and hero section, use the code in this CodePen as a reference.
Clicking on the logo or any navigation link should take the user to the official Pexels site.
You must implement a video gallery using CSS Grid.
All the visual assets required to implement this page are provided in Annex A
The requirements for this section are:
- Unlike the original site, the videos in the gallery should not play on hover, they will be static images.
- The “Trending” dropdown menu should be present but does not need to open/activate.
- You are required to include only the top 3 rows.
- At the desktop format your gallery should have the structure illustrated below. Notice how one image spans 2 rows.
- When the user clicks on the play icon, they should be taken to the official video page.
Your website should be fully responsive and you must use a mobile-first approach.
Based on the original website, implement the following breakpoints:
- Mobile portrait: 594 px and below - Single column, hamburger menu.
- Tablet: 595px to 1076px - Double columns, three-dot menu, Join button.
- Desktop: 1077px and above - Three columns, full navbar.
(note: there are two additional breakpoints in the original site but you don’t need to add them)
For each video card in the gallery, an on-hover event should trigger the following:
-
Make the card details appear. The details should include:
-
- Author’s name and circle avatar (you can mock the avatar);
- The “plus” and the “heart” svg icons;
-
Display a tooltip text with the image description
-
No animations, transitions, or JavaScript should be used;
You can get all the information required from the original video’s Pexels page. The URL is included in the assets list. See the gif below for a demonstration:
You must submit a single .txt file in Moodle. In the .txt file please include:
- The commit id code (short version) to be grades and nothing else.
Below is a list of the visual assets required for the project.
For assets not listed, use the Dev Tools to get the source URL from the original site.
The navbar uses svg images for the logo and icons. You can treat svg images the same way you would handle an <img> element, however, their size must be explicitly defined.
You can copy-paste the svg images from this CodePen.
Note: the original website imports svg images using the font-awesome service. You can use it if you would like. If you are interested you can learn more about it here or on the course notes.
Background poster (the static version of the video)
Background video in mp4 format
Background video in webm format
Hint 1: add the static poster first as a placeholder, then replace it with the video.
Hint 2: use the Dev Tools to see how the original website plays the video in the background.
Image A (thunderbolt) - full video link
Image B (time lapse video of sky) - full video link
Image C (vast area of dry land) - full video link
Image D (motor vehicle traffic on a mountain road) - full video link
Image E (woman holding her dog) - full video link
Image F (underwater bubbles) - full video link
Image G (water crashing over the rocks) - full video link
Image H (people traveling in the desert) - full video link
Play button svg in white to be placed on top of the video thumbnails.
Hint 1: Use the link above as the src of an element. SVG images can shrink or grow indefinitely so do not forget to specify a width.
Hint 2: There are different ways to overlay an image on top of another image. I recommend using position absolute.
Consider that we would like to clone YouTube’s home page. Below is an image of the page with the viewport width between 870px and 1120px.
There are many possible ways to layout this site using Grid and Flexbox, what follows is one approach.
Starting with the overall site layout.
I would make most other sections of the website (such as the header and navbar) with either default block-level behaviour or Flexbox so they don’t need to be included.
Next section that will use grid is video suggestions section: