Summary

Lewis Kern is an events manager at the Lyman Hall Theater in Brookhaven, Georgia. The theater is in the process of updating its website, and Lewis has asked you to work on the pages detailing events in the upcoming year. Hes asked you to create a calendar page that lists the upcoming events for January, February, and March. A list of the events is stored in the lht_schedule.txt file.

Lewis wants a responsive design so that the calendar is readable for both mobile and desktop users. In addition to the calendar, Lewis wants the article describing the February events displayed in column layout. He suggests that you set the width of the columns, allowing the number of columns to be determined based on the width of the display screen.

A preview of the page you will create for the theater is shown above viewed using mobile and desktop devices.

The style sheets and graphic files have already been created for you. Your job is to write the HTML markup.

Instructions

This Review Assignment contains interactive instructions that you can complete to ensure you've completed the instruction correctly.

After reading each instruction thoroughly, perform the requested change in the code editor to the right. You can use the Build Website button to refresh your website preview at any point and view a full-page version of your website by clicking the arrow in the top right corner of your website preview.

After you've completed an instruction, click the corresponding check box in your list of instructions. This will trigger simulated tests of your website to ensure that you successfully completed the instruction.

When you reach the end of the lab, click the Submit button to record your score.

Click Next Step to get started!

-----------------

Document Setup

Linking CSS Files

Enter your name and the date in the comment section of lht_feb.html , lht_tables.css, andlht_columns.cssrespectively.

Go to the lht_feb.html file and add links to the lht_tables.css and lht_columns.css files to the document head.

Web Table

Directly below the article element, insert a web table using the ID calendar.

Add a caption with the text February 2018 Calendar.

Table Columns

Add a column group containing two col elements. Give the first col element the class name weekdaysand have it span five columns. Give the second col element the class name weekends and have it span 2 columns.

Table Header

Add the table header row group with a single row with seven heading cells containing the three-letter day abbreviations Sun through Sat.

Table Body

Add the table body row group with five rows and seven data cells within each row. Within each table cell, add the following code to create an h1 heading and description list:

day
 
 
event
 
time
 
price
 
 

where day is the day of the month, event is the name of an event occurring on that day, time is the time of the event, and price is the admission price, using the days, events, times, and prices shown in the lht_schedule.txtfile. If there is no event scheduled for the day, insert only the code for the h1 heading. Start your calendar with January 28 and conclude it with March 4.

For each data cell you create in the table body, add an attribute in the opening td tab named data-datecontaining the date associated with the cell. For example, in the first table cell, enter data-date value Sun, Jan 28, 2018, the second cell will have the data-date value Mon, Jan 29, 2018 and so forth. (Note: This code will be used to display the date information in the mobile layout.)

----------------

Mobile Devices

Next, open the lht_tables.css file.

Media Query

Within the Mobile Styles section, insert a media query for screen devices with a maximum width of 640 pixels.

Mobile Layout

You want mobile devices to display the calendar information in two columns. To create this layout, add the style rules that:

displays table , tbody , tr , td , th , and caption elements as blocks,

does not display the thead h1 element, and

displays the table caption in white on a medium gray background using the rgb color values of 51, 51, 51 and with a font size of 1.5em and a line height of 2em.

Table Cells

Create a style rule for every data cell that:

adds a 1-pixel dotted gray border,

changes the text color to rgb(11, 12, 145),

places the cell using relative positioning,

sets the left padding to 40%, and

sets the minimum height to 40 pixels.

Table Rows

Create a style rule that uses the nth-of-type pseudo-class to display every odd-numbered table row with a background color of rgb(255, 235, 178) and a 2-pixel solid gray border.

Table Text

Create a style rule that inserts the text of the data-dateattribute before every data cell. Place the attribute text using absolute positioning at the coordinates (0, 0) with a width of 40% and padding space of 5 pixels.

-------------------

Tablets and Desktop Devices

Media Query

Next, you design the layout of the calendar for tablet and desktop devices. Go to the Tablet and Desktop Styles section and insert a media query for screen devices with a minimum width of 641 pixels.

Table Style

Create a style rule for the table element that:

displays the background image lht_photo1.pngwith no tiling in the bottom-right corner of the table with a width of 40%,

adds a 6-pixel double border with color value rgb(154, 64, 3),

collapses the table borders,

centers the table by setting the top/bottom margins to 20 pixels and the left/right margins to auto ,

uses a fixed layout for the table content, and

sets the width of the table to 85%.

Heading and Cells

For every heading and data cell, create a style rule that:

adds a 1-pixel solid gray border,

sets the font size to 0.85em and with normal weight,

adds a 5-pixel padding space,

aligns the cell text with the top of the cell,

sets the width to 14.28%, and

allows the browser to wrap cell text within individual words.

(Hint: Use the word-wrap property.)

For every data cell, create a style rule that:

applies a semi-transparent background color with the value rgba(171, 171, 171, 0.6) and

sets the text color to rgb(11, 12, 145).

February Format

Lewis wants the February dates to appear in a different format from the January and March dates. Create a style rule for data cells whose data-date attribute contains the text Feb that:

changes the background color to the semi-transparent value rgba(232, 214, 148, 0.6) and

adds a gray inset box shadow with horizontal and vertical offsets of 0 pixels and a blur of 20 pixels.

Table Caption

Create a style rule for the table caption that:

displays the caption at the top of the table,

centers the caption text,

adds 10 pixels to the bottom padding space, and

sets the font size to 1.2em and the letter spacing to 3 pixels.

Table Header

For heading cells within the table header, create a style rule to change the background color to rgb(154, 64, 3) and the text color to white.

---------------

Columns Styles

Article Elements

Open the lht_columns.css file and within the Column Styles section, create a style rule for the article element that:

sets the column width to 260 pixels,

sets the column gap to 20 pixels,

adds a 1-pixel solid dividing line between columns with color value rgb(154, 64, 31), and

sets the minimum size of widows and orphans to 2 lines

Create a style rule for the h1 heading with the articleelement that extends the heading across all columns.

---------

Wrapping Up

Verify

Open the lht_feb.html file and click the "Build Website" button. Then click the arrow in the top right of your website preview to open the webpage in a new tab.

Verify that for desktop widths, the table appears as shown image labeled "Desktop" in the Introductionsection and the number of columns used in the introductory article changes from 2 to 3 based on the page width. Reduce the page width to below 640 pixels and verify that the calendar information is displayed in two columns as shown in the image labeled "Mobile" in the Introductionsection. (Note: At the time of this writing, the Firefox browser does not support the column-span property.)

Review the webpage you have created on the right side of the screen. When you're happy with your results, click the Submit button to submit your project for grading.