IDA - Department of Computer and Information Science

# Lab assignment 2 In this lab assignment you will be working with dynamic content. Content will be added and removed to your page (by clicking the 4 different buttons in top of the layout). Your page layout should be able to handle that content is added or removed. ## Learning objectives The following concepts are important for this lab assignment. - use absolute and relative units in css; pros and cons - how and what the css attribute overflow is used for - HTML structure/hierarchy using terms such as: parent, sibling, children - how different layout methods (e.g. flexbox and grid) behave when items are added to them ## Checklist for review session Your review of your assignment should cover the bullet points below. - Show your wireframe for the layout. - Show your implementation of your layout in a web browser. - Explain how your chosen solution is able to deal with added content (more items) - Explain how your chosen solution is able to deal with content of varying size (e.g. more/less text) - Give an example of a layout strategy that *would not* be able to adapt to a varying number of items and varying size of the content items. ## Deliverable Upload your wireframes (PDF:s that show columns and content) + a zip-file with the files for your implementation to Lisam. **Please make sure you name your group correctly (i.e. A1, B3 etc) and add both members of the group to the Lisam submission.** ## Requirements for passing the assignment - Create wireframes that show how you intend the layout to respond to different amounts of content - Implement a layout according to your wireframes - Present and discuss your wireframes and your implementations during the oral assignment review # Assignment 1. [Draw column grid wireframes](#draw-column-grid-wireframes) 2. [Implement the layout](#implement-the-layout) **Draw your wireframes before starting with the implementation.** ## Draw column grid wireframes Create wireframe sketches *that use a column based grid with gutters* to create the layout in the image below. It is up to you if you want to use a digital tool or draw your wireframes using pen and paper. The sketch below is only a rough illustration. Feel free to adjust the following to your liking - relative proportions of the columns - whitespace - placement and size of image container in cards - placement and size of of text container in cards The layout sketch shows three areas for different kinds of cards with varying content: - cards in the Featured area will *always* have an image, a `h1` heading and multiple paragraphs of text - cards in the Secondary area will *sometimes* have an image and *always* have a `h2` heading and multiple paragraphs of text - cards in the Short area will *always* have an image and a `h3` heading - all headings (`h1`, `h2`, `h3`) will have a maximum of 50 characters ### Layout sketch  ### Wireframe requirements The "Featured", "Secondary" and "Short" areas should be positioned relative to each other as in the layout sketch, and your wireframes must show the column grid you are using. Create as many wireframes as you need to cover at least the following dynamic content aspects: - changes in the number of cards in the Featured area - changes in the number of cards in the Secodary area - changes in the number of cards in the Short area - cards in the Featured and Secondary area with varying amount of text - cards in the Secondary area with an image - cards in the Secondary area without an image ## Implement the layout After you have created your wireframe layout sketches, download the files below and implement your layout by writing the necessary CSS in CSS file. ### Implementation requirements - Implement the layout by creating one CSS-file. - Choose whether you want to use a fixed width layout, or a fluid layout. - The four buttons on top of the page will add or remove content from your page. (You don't need to write this functionality, this is already implemented for you). Your css-file should be able to handled dynamicly adding/removing content to your page. - Make sure that clicking the different buttons don't break you design. ### Files to download [Download the files for this assignment](lab2_files.zip) You may make minor changes to the HTML-files, but it is not necessary to do so.