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.
• Flexbox layout.
• Units in CSS: px, pt, em, rem, %, vw, vh, etc.
• Positioning: static, relative, absolute and fixed positions.
• CSS transforms.

Instructions

1. Get the starting html-file by copying it from the course directory (/courses/729G87/assignments/assignment1/a1e1.html) or downloading it here (right-click and “Save link as…”).
2. Visit Erik Meyer’s CSS reset and either download Erik Meyer’s CSS reset, then link to CSS reset file from the a1e1.html file or link to the hosted version. 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 this 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.

Restrictions

• No changes except adding the links to the CSS-reset file and your CSS-file should be made to the provided html file, no other changes are allowed.
• Flexbox layout should be used when possible. Grid is allowed for the bold and the brave but is not necessary and is outside the scope of the course. Traditional display styles like block and inline should only be used when they are the default and no other layout is necessary (i.e. you should not use them explicitly).
• Absolute units (e.g. px, mm, pt) should be avoided and you should be ready to argue your case if you use them. Use relative units (e.g. em, rem, %, vw, vh) instead.
• Avoid redundant declarations in your CSS; i.e. do not repeat the same property-value pairs in multiple rules if you can avoid it.
• Think carefully about which rules should apply to which classes, don’t lump separate declarations together in one rule if the class names imply specific things.
• Keep your CSS file below 150 lines of code (including comments and blank lines).
• Organize the properties in each rule in a consistent order; e.g. group all layout properties together, all typography properties together, etc.
• Do not spend any time matching the exact typeface and size of the text, similar family and font properties is enough.
• Do not try to match the exact pixel size of elements in the mockup image.

Color values

Don’t spend any time matching the exact color of the elements. Seriously, don’t.

Addition: Since some people are still concerned about the exact colors used in the mockup, here are some specific color values you can use in your CSS, in alphabetical order: antiquewhite, black, darkgray, indigo, lightblue, tomato, white. No, you’re correct, it doesn’t match perfectly but that is not the point of the assignment so it doesn’t matter.

Hints

Click the text below for additional hints.

Hint 0: This hint isn’t even hidden because it is so strongly advised: Play through Flexbox Froggy (basics) and/or Flexbox Defense (intermediate) to get a good understanding of how Flexbox works before you start writing your CSS. It might seem like a waste of time, but it will save you a lot of time later on. Hint 1: Break down the layout problem into smaller problems; e.g. start with the layout of the cards, then move on to the layout of the container of the cards, etc.

Hint 2: Try to think what layout strategy suits the different layout problems; try to solve every problem with Flexbox first and remember positioning (e.g. relative, absolute, fixed); every layout problem in this assignment can be solved with Flexbox, though not always in a trivial way.

Hint 3: You can easily center elements both vertically and horizontally using Flexbox.

Hint 4: If you want to target elements that have two specific classes, you can use the selector .class1.class2.

Hint 5: The typical size of playing cards is 2.5 inches by 3.5 inches, what is the aspect ratio of that?

Hint 6: You can position elements relatively inside a Flexbox parent.

Hint 7: You can apply positioning to an 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 8: You can target elements by their parent or ancestor elements. If you can describe a unique DOM-path to an element or a set of classes that uniquely identify it, 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 any time on the following:

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.

• Colors, typography and 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 course directory (/courses/729G87/assignments/assignment1/a1e2/) or download this zip file. Edit style.css to replicate the mockup above. The directory 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