Hide menu

Assignment 1

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.

Learning outcomes

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

Excercises

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.

Submit your completed assignment before the deadline. Submission instructions can be found on the main assignment page.

Publishing web pages @ IDA

  1. Create the directory www-pub in your home directory.
  2. 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.
  3. Your www-pub directory is accessed via a web browser at the URL https://www-und.ida.liu.se/~yourliuid.

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

Assignment 1, mockup 1

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.

Excercise 2

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.

Assignment 1, mockup 2

Excercise 3

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.

Assignment 1, mockup 3a

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.

Using e.g. 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.

Assignment 1, mockup 3b


Updated by: Jody Foo
Last updated: 2017-10-20