Practical tasks to perform and ensure that the basis of the chapter has been understood.
Assignment 1 (mandatory)
Create a list optimized for mobile
Create an html file with a list of at least five product names. Choose whatever names you like. Use any html elements you like (ul/ol and li is not mandatory, you can just as well use a div element for each item in the list). Style the list with CSS. Each item should expand to the full width of the browser window up until a maximum of 800 pixels. Each item should also have a gradient background. Use at least five CSS style properties in total. Exactly what you use and how it looks is up to you. For example, use CSS style properties box-shadow, background-image, font-size, border and padding. The page should have a viewport that specifies a one-to-one pixel ratio between the viewport and the screen of the mobile device.
Assignment 2 (optional)
Add images to the list items
Continue on the previous assignment. Add an image to each of the items (products) in the list. The image should appear next to the item text on the left side. Merge the images into a single image file and use image sprites to show each individual image next to the item. Also add a media query so that the images are hidden for widths below 480 pixels.
Assignment 3 (optional)
Add title to the list and
Continue on the previous assignment. Add a title to the list, consisting of any suitable text and an image. The title should always remain visible, even when there are so many items in the list that scrolling down is possible. Research the "fixed" style property on your own to solve this (other solutions might work and are fine). The chosen image should be inserted as an inline image with Base64-encoded data inside the html file. Use a media query so that the title image is shown above the title text in portrait orientation, but to the left of the title text in landscape orientation.