In this first assignment you will explore different aspects of structuring web content using HTML and layout using CSS. You will be using these skills in the remaining three assignments.
After this assignment, you should have gained knowledge about the following:
- HTML syntax: elements, tags and attributes
- CSS syntax: selectors, css properties
- publishing web pages
The first assignment consists of three separate excercises.
- Complete all three excercises to score 15 points for the assignment.
- To score 2O points, also animate one or more elements using CSS animation in Excercise 2.
- To score 25 points, you must fulfill the requirement for 20 points and complete the responsive web design task in Excercise 3.
The estimated time to complete Assignment 1 approximately 16 hours.
Points: No extra task for 20 or 25 points for Excercise 1.
In the first excercise, your task is to replicate the mockup shown below. You will need to learn the following to do this:
- basic HTML
- link a CSS to an HTML file
- CSS syntax
- colors, typography
- static, relative and fixed positions
- centering using the CSS margin property
Click the text below for additional hints.
Hint 1: Make one
div for each square, and one for the middle column.
Hint 2: Look up
relative CSS positioning.
Points: For 20 and 25 points, complete the additional CSS animation task.
In the second excercise, your task is to replicate the mockup shown below. You will need to learn the following to do this.
- box model: margin, border, padding, content
- background images
Use the files provided in this zip file as a starting point. The only changes to the HTML-file necessary is to link your CSS (which you have to create) to it. Besides this, you should not have to change anything in the HTML structure.
Optional task for 20 or 25 points
Animate one or more of the elements on your web page using CSS animation.
The topic of excercise 3 producing separate columns of text and, if you are aiming for a assignment score of 25, implement a responsive web design using CSS.
Today's modern web browsers offer several possible solutions to this layout problem. You are free to choose any solution except for solutions based on CSS columns (which is nice for columns of text, but not as a general layout tool) and CSS grid layout (which is not sufficiently supported by current browsers).
To get you started in finding a solution that you find attractive, here are a couple of Google searches:
Below is the mockup image for Excercise 3.
Optional task for 25 points
To score 25 points on the this assignment your task is to add responsive design to the web page you create in Excercise 3.
media queries, the layout of the page should switch to the layout
shown in the mockup below when the browser window is 400px wide or less.
Updated by: Jody Foo
Last updated: 2017-10-29