Skip to content
729G87 - Interaction Programming
GitLab

Assignment 1

This assignment is not final. Changes to the assignment are still possible.

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.

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

Learning outcomes

After this assignment, you should have learned about the following:

  • HTML syntax: elements, tags and attributes
  • CSS syntax: selectors, css properties
  • publishing web pages

Assignment points

  • 1 point: Complete all required parts of all exercises.
  • 2 points: Complete all required tasks, task 5 and one optional task from task 1 - 4.

Submit one URL per Exercise, check that they work. Write in the submission comments how many points you are aiming for and which optional tasks you have done. More information: Submitting your assignments.

Exercises

The first assignment consists of three separate exercises. All exercises should be accessible on the web. See Publishing web pages.

Usefull resources

Case matters. The LiU Linux filesystem is case-sensitive; i.e. the filename assignment1.html does not refer to the same file as the filename Assignment1.html. This is important to you because you will be publishing your assignments on servers using such a filesystem.

To avoid future headaches, save your files using lower-case filenames without any spaces or non-ASCII characters.

  • Bad: Övning 1.html
  • Good: exercise1.html

Exercise 1

  1. Clone your repository (see publish).
  2. Change the file in pubic/assignment_1/exercise_1/index.html that it displays Exercise 1: complete.
  3. Complete should be in green.
  4. Use git to commit and push your website to gitlab. Goto deploy ▶ pages and open the link to the exercise. Make sure it is update and shows Exercise 1: complete as well.

Git

Remember:

  • Use git add -A . to add everything you changed to the stage.
  • Use git commit -m "my commit message" to commit your changes locally.
  • Use git push to push your changed to the server.
  • Wait some time, the server takes some minutes to refresh the content.

Exercise 2

Register to Codecademy and start the CSS course. Complete the lessons:

  • 1: Syntax and Selectors
  • 4: Display and Position

Only complete the lessons, not the quiz or projects, etc.

Provide a screenshot (one per group) that shows you completed the required lessons. The screenshot should be visible in public/assignment_1/exercise_2/.

Exercise 3

In this exercise, 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
  • CSS drop shadows
  • positioning of background images of elements (i.e. the background image of the header element)

Instructions

Use the files provided in the respository.

  • A gray background image to use
    • This should be the background of the body element.
    • The element with the id wrapper should have a white background.
  • header image
  • images for the two posts
  • index.html file with all content to use
  • an empty style.css

Optional task 2

Animate one or more of the elements on your web page using CSS animation. Examples:

  • have the posts fade in when the page loads
  • slide the titles of the posts from left to right when the page loads

Restrictions

  • Only edit style.css
  • Do not modify index.html, except to add Eric Meyer’s CSS reset
  • Do not “zoom out” the web browser view, i.e. the zoom level of the browser should be kept at 100%.

Hints

Click the text below for additional hints.

Hint 1:

Style the background property of the header element

Hint 2:

Style width and height of the img elements

Resource tips

Exercise 4

The topic of exercise 3 producing separate columns of text that look like the mockups below.

For Excercise 4 use any layout strategy you want.

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 Exercise 4.

Instructions

  1. Create your HTML and CSS files.
  2. Link to Erik Meyer’s CSS Reset from your HTML-file (either download, and link or link directly to the file online).
  3. Link to your CSS from your HTML-file.
  4. Write HTML and CSS to replicate the mockup image above.

Optional task 3

Add responsive design to the web page you created in Exercise 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.

Tip: Use the Responsive Design Mode of your brower: Google Chrome, Firefox

Exercise 5 (optional)

In the optional exercise, your task is to replicate the mockup shown below. Concepts you might want to use:

  • Add basic HTML
  • link a CSS to an HTML file
  • CSS syntax
  • colors, typography
  • positioning: static, relative, absolute and fixed positions
  • flexbox layout
  • CSS transforms

Instructions

In this exercise, you are allowed to modify the provided HTML structure with additional wrappers around existing elements, as well as moving elements to within the DOM.

Hints

Destructure the layout in sub-layouts. Image what could be a flexbox,

Click the text below for additional hints.

Hint 1:

Try to think what layout strategy suits the different layout problems; positioning (e.g. relative, absolute, fixed), use of flexbox(distribute elements in a row/column)

Hint 2:

You can easily center elements both vertically and horizontally using flexbox

Hint 3:

If you want to target elements that have two specific classes, you can use the selector <code>.class1.class2 </code>

Hint 4:

You can position elements relatively inside a flexbox parent.

Hint 5:

You can apply positioning to a element that is a flexbox parent. I.e. display: flex affects the children of an element and e.g. position: absolute effects the element it is added to

Hint 6:

If you can describe a unique hierarchy to an element, you can select a specific element even though it has no id
Hint 7:Position absolute takes elements out of the document flow. This becomes handy for the grey boxes left and right.

Hint 8:

Use the given css file as a starting point.
Hint 9:css translate and position relative might become handy for the elements inside the white cards.

Optional task 1

Write your CSS so that the sizes of the elements respond to changes in size of the browser window; but the squares should remain squares and the “cards” should retain their proportions.

Design issues to be aware of

A mockup image does not capture the non-static nature of web pages such as:

  • browser window size
  • how the layout is affected by different aspect ratios between width and height of the users’ web browser
  • It is OK if the number of cards on the rows change depending on the browser size, but it should be possible to achieve the same card layout as in the mockup image.

Do not spend to much time on the following:

  • the exact color of the elements
  • the exact type-face of the text
  • trying to match the exact pixel size of elements in the mockup image