In the first exercise, your task is to replicate the mockup shown below (click on the image for a larger version). You will need to learn the following to do this:

• 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

1. Download the starting html-file. Right-click and “Save link as..”.
2. Visit Erik Meyer’s CSS reset and download Erik Meyer’s CSS reset, then link to CSS reset file from the a1e1.html file. Note: The link does not point to the reset stylesheet, but to a page about the stylesheet. You need to visit the page and find the link there.
3. Create your own CSS file (e.g. style.css) and link to the CSS file from the a1e1.html file. Note: The link to your CSS file should come after the link to the CSS reset file.
4. Write rules in your new CSS file to make your html-file look like the mockup.

Note: No changes except adding the links to the CSS-reset file and your CSS-file should be made to the provided html file.

Hints

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 .class1.class2

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

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

In the second exercise, your task is to replicate the mockup shown below (click to see a larger version). 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 this zip file. Edit style.css to replcate the mockup above. The zip-file contains:

• the gray background image to use Note: 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

• Using CSS animations (MDN web docs)
• Using CSS transisions
• animation (CSS Tricks)
• 17 top CSS animation examples (Creative Bloq)

The topic of exercise 3 producing separate columns of text that look like the mockups below (click to see a larger version of the image).

For Excercise 3 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:

• three column layout css html

Below is the mockup image for Exercise 3.

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