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 25 points, you must also complete the advanced level task in Excercise 3. The estimated time to complete Assignment 1 approximately 16 hours.
Publishing web pages @ IDA
- Create the directory
www-pubin your home directory.
- All files (with correct read permissions) and directories (with correct read and executable permissions) put into this directory are made available by web server at IDA for the student domain.
www-pubdirectory is accessed via a web browser at the URL
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.
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.
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.
Advanced level task
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-20