Goal

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

Objective

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

Background

• Rob­bins, Chap­ters 14, 15, 16, 17
• Adobe XD Tuto­ri­als https://​helpx​.adobe​.com/​x​d​/​t​u​t​o​r​i​a​l​s​.​h​tml
• Lynda​.com Adobe XD Tuto­ri­als https://​www​.linkedin​.com/​l​e​a​r​n​i​n​g​/​l​e​a​r​n​i​n​g​-​a​d​o​b​e​-xd and https://​www​.linkedin​.com/​l​e​a​r​n​i​n​g​/​a​d​o​b​e​-​x​d​-​e​s​s​e​n​t​i​a​l​-​t​r​a​i​n​i​n​g​-​p​r​o​t​o​t​y​p​e​-​a​n​d​-​s​h​are
• https://​xdresources​.co/​t​a​g​/​b​o​o​t​s​t​rap
• http://​get​boot​strap​.com
• http://​design​shack​.net/​a​r​t​i​c​l​e​s​/​l​a​y​o​u​t​s​/​1​0​-​r​o​c​k​-​s​o​l​i​d​-​w​e​b​s​i​t​e​-​l​a​y​o​u​t​-​e​x​a​m​p​l​es/
• http://​www​.lip​sum​.com/
• Boot­strap 4 Grid Tem­plate — Mobile, Tablet, Desktop

Exercise

Cre­at­ing an HTML page requires plan­ning and an under­stand­ing of the two sep­a­rate, yet con­nected sys­tems: HTML and CSS. With­out appro­pri­ate HTML struc­tural markup, the CSS ref­er­ences will not con­trol the posi­tion­ing. Only when the cor­rect code markup and lay­out posi­tion is achieved can appro­pri­ate cos­metic deci­sions begin.

Using the Boot­strap Frame­work as a ref­er­ence, recre­ate in wire­frame form the sam­ple lay­out 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

Cre­ate paper wire­frame dia­grams of each lay­out, using the Boot­strap sam­ples as a guide to label each sec­tion. Be sure to include nota­tions for HTML ele­ments and CSS classes.

Part Two

Trans­fer the nota­tions from your sketches to a dig­i­tal form, adding addi­tional markup notes and dummy con­tent as needed, includ­ing the pro­vided place­holder images. The Adobe XD frame­work down­load pro­vides sev­eral base grids for sketch­ing. Scan or pho­to­graph these sketches for assess­ment. 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.

 

 

 

 

Save the dig­i­tal sketches as a PDF and upload the both images and PDFs to the appro­pri­ate D2L dropbox.

Assessment

• The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Exer­cise Grading

Techniques

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

Supplies

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

Deadlines

Tues­day, Sep­tem­ber 15, 2020. Exer­cise Given.

Tues­day, Sep­tem­ber 29, 2020. Files uploaded to appro­pri­ate D2L Dropbox.