Assignment 05.05: Frameworks and Layout


The goal of this assign­ment is to plan, develop and present a series of HTML and CSS layouts.


The objec­tive of this assign­ment is to use an estab­lished frame­work to recre­ate a series of com­mon web page lay­outs from sam­ple images.



Using the Boot­strap frame­work, recre­ate in wire­frame form the sam­ple lay­outs below. Wire­frames pro­vide a usable sim­u­la­tion to check basic doc­u­ment seman­tics, markup and styled lay­out. Wire­frames serve as a more media appro­pri­ate, work­ing sketch, which can be used to check browser com­pat­i­bil­ity among other things.

Part One

Using the frame­work from its host, begin to cre­ate the lay­outs below. Cor­rectly orga­nize, markup and style the doc­u­ment using each of the images pro­vided below as a guide. Trans­fer the nota­tions from the sketches to the HTML files, adding addi­tional markup and dummy con­tent as needed, includ­ing the pro­vided place­holder images. The final solu­tion for each sam­ple should closely approx­i­mate the images below, but may not appear exactly the same. There are mul­ti­ple pos­si­ble solu­tions to the problem.

sample webpage layout Three Boxes
Fig­ure 1: Three Boxes
sample webpage layout Featured Graphic
Fig­ure Two: Fea­tured Graphic
sample webpage layout Five Boxes
Fig­ure 3: Five Boxes
sample webpage layout Headline and Gallery
Fig­ure 4: Head­line and Gallery
sample webpage layout Advanced Grid
Fig­ure 5: Advanced Grid

Ulti­mately, you will need to repeat the process, cre­ate indi­vid­ual css files for each solu­tion, and, if needed, dupli­cate the Boot­strap folder up to five times. Archive and upload the result­ing files and file struc­tures to the appro­pri­ate D2L dropbox.


  • The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 03.04: Frame­works and Layout


wire­fram­ing, mark up, tags, CSS, file organization,


Dreamweaver, source files, Boot­strap, sam­ple images via Joshua John­son, Design Shack, Pub­lished on Feb­ru­ary 16, 2011.


As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.