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
• https://​get​boot​strap​.com/docs​/5.3​/getting-started​/introduction/​#quick-start

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

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. https://​get​boot​strap​.com/docs​/5.3​/getting-started​/introduction/​#quick-start. Save the file as index.html in a new exer10 folder folder.

Add con­tainer to the starter tem­plate. https://​get​boot​strap​.com/docs​/5.3​/layout​/containers/

Visit the brands sec­tion to copy and paste .navbar-brand as a link into the con­tainer. https://​get​boot​strap​.com/docs​/5.3​/components​/navbar/

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. https://​get​boot​strap​.com/docs​/5.3​/components​/navs-tabs/​#horizontal-alignment

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. https://​get​boot​strap​.com/docs​/5.3​/layout​/grid/

<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://placehold.co/350x360″><a/> <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. https://​get​boot​strap​.com/docs​/5.3​/components​/buttons/ 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://​validator.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