Goal

The goal of the exer­cise is to under­stand the con­ven­tions and prac­ti­cal appli­ca­tion of frame­works in the accel­er­ated con­struc­tion of web pages and sites.

Objective

Using the guid­ance and instruc­tion pro­vided with an estab­lished frame­work, cre­ate a valid and cor­rectly marked up HTML doc­u­ment rep­re­sent­ing a basic webpage.

Background

• Rob­bins, Chap­ter 11,14,15, 16, 17
• http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​g​e​t​t​i​n​g​-​s​t​a​r​t​e​d​/​d​o​w​n​l​o​a​d​/​#​s​o​u​r​c​e​-​f​i​les
• http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​g​e​t​t​i​n​g​-​s​t​a​r​t​e​d​/​i​n​t​r​o​d​u​c​t​i​o​n​/​#​s​t​a​r​t​e​r​-​t​e​m​p​l​ate

Assignment

Cre­at­ing a sam­ple html wire­frame page from the avail­able doc­u­men­ta­tion. Read­ing and imple­ment­ing the code will allow fur­ther explo­ration of the appli­ca­tion of HTML and CSS knowl­edge. Proof­read, val­i­date and edit the cre­ated doc­u­ments to cor­rect any seman­tic or tech­ni­cal errors.

Part One

Down­load the source files and save to appro­pri­ate loca­tion. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​g​e​t​t​i​n​g​-​s​t​a​r​t​e​d​/​d​o​w​n​l​o​a​d​/​#​c​o​m​p​i​l​e​d​-​c​s​s​-​a​n​d​-js

Copy the starter tem­plate from the page and make a new doc­u­ment. This pro­vides basic head and sup­port­ing high end details. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​g​e​t​t​i​n​g​-​s​t​a​r​t​e​d​/​i​n​t​r​o​d​u​c​t​i​o​n​/​#​s​t​a​r​t​e​r​-​t​e​m​p​l​ate. Save the file as index.html in the folder adja­cent to the Boot­strap CSS and JS folders.

Add con­tainer to the starter tem­plate. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​l​a​y​o​u​t​/​o​v​e​r​v​i​e​w​/​#​c​o​n​t​a​i​n​ers

Visit the brands sec­tion to copy and paste .navbar-brand as a link into the con­tainer. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​c​o​m​p​o​n​e​n​t​s​/​n​a​v​b​ar/

Visit navs sec­tion. Choose “Right-aligned with .justify-content-end:” Copy and paste into doc­u­ment just before the clos­ing </nav> tag. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​c​o​m​p​o​n​e​n​t​s​/​n​a​v​s​/​#​h​o​r​i​z​o​n​t​a​l​-​a​l​i​g​n​m​ent

Wrap a set of <header> tags around the <nav> elements.

Visit grid sec­tion. Under “How it works” add the code to cre­ate the three col­umn lay­out. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​l​a​y​o​u​t​/​g​r​id/

<div> tags are used as struc­tural ele­ments. Most often they con­tain addi­tional ele­ments. Using the .row class with <div> is vitally impor­tant to hav­ing columns flow prop­erly in this frame­work. Dou­ble check the par­ent ele­ment to ensure the ele­ment has a row class applied to it. Remove the extra <div class="container"> and the cor­re­spond­ing extra </div>.

In each col­umn, cre­ate an <h2> head­ing for each col­umn. Next, insert Lorem Ipsum place­holder text in a sin­gle para­graph. Insert a place­holder image at the top of each col­umn using <a href="#"><img src="https://via.placeholder.com/350x360"></a>. Finally, add a but­ton to each col­umn using class="btn btn-primary" from the But­tons sec­tion of the frame­work. http://​get​boot​strap​.com/​d​o​c​s​/​4​.​1​/​c​o​m​p​o​n​e​n​t​s​/​b​u​t​t​o​ns/ and https://​place​holder​.com. Add a set of <footer> tags to the bot­tom of the doc­u­ment, but out­side the clos­ing “con­tainer” <div>.

Edit the footer tag with the fol­low­ing code (watch the quo­ta­tion marks):

Cre­ate a new css doc­u­ment called custom.css. Save and link this file to the index.html doc­u­ment you have been cre­at­ing. Change the back­ground col­ors of each the ele­ments to visu­ally iden­tify the sec­tions of the doc­u­ment. Choose named col­ors for ease of input.

Pre­view the doc­u­ment in a bowser of your choice. Use the devel­oper tools to review the struc­ture and dimen­sions of the doc­u­ment. Adjust the size of the browser win­dow and compare.

Part Two

Val­i­date the doc­u­ment using the online val­ida­tor found at <http://​val​ida​tor​.w3​.org/>

Assessment

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

Techniques

Mark up, tags, validator,

Materials

TextE­dit, Dreamweaver, source files via Boot­srap 4