gladstone28 / wine-festival

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

LEARN HTML Wine Festival Schedule The Aguillar Family is hosting their annual wine festival and they have asked you to build a web page for the event schedule! Use your knowledge of HTML to display a table to the attendees.

You can preview the final version at this link.

Let’s begin!

If you get stuck during this project or would like to see an experienced developer work through it, click “Get Unstuck“ to see a project walkthrough video.

Tasks 10/10 Complete Mark the tasks as complete by checking them off 1. In index.html, inside of the

element that has the attribute class with a value of "container", create a new element.

Stuck? Get a hint 2. Inside of the

element, add a section for table headings using .

Then, add two rows inside of it using the table row element.

Stuck? Get a hint 3. Inside the first table row element, from task 2, add a table heading element.

Inside of that, include an

with the following text: Wine Festival Schedule.

Stuck? Get a hint 4. Inside the second table row element, from task 2, add two

So now your code should look like:
s:

In the first, add an

that says Time.

In the second, add an

that says Event.

Hint

Wine Festival Schedule

Time

Event

5. You may notice that “Wine Festival Schedule” does not stretch across the entire table. Let’s fix that!

In the opening

tag of this element, add colspan="2".

Hint Like so:

Wine Festival Schedule

Wine Festival Schedule

Time

Event

6. Below the closing tag, section off the table using the table body element.

Hint Long tables can be sectioned off using the table body element .

...

Wine Festival Schedule

Time

Event

7. Inside of the table body you created in the previous task, create 5 rows using the table row element.

Stuck? Get a hint 8. Inside each row, create two cells using the table data element.

The first table data in each row should have the attribute class with the value "left".

Stuck? Get a hint 9. Inside each of the 5 elements, add

elements that include the times of the events:

12:00 PM 01:00 PM 02:00 PM 03:00 PM 04:00 PM Feel free to look back at the live site to compare.

Hint By this point, your should look like:

12:00 PM

...

01:00 PM

...

02:00 PM

...

03:00 PM

...

04:00 PM

... 10. Inside each of the elements that does not have a class attribute with a value of "left", add

elements that include the name of events:

Welcome Reception Storytelling & Tasting Wine Luncheon Aguillar Family Wines Wine & Cheese Tasting You have created the events table. Cheers!

Hint By this point, your should look like:

12:00 PM

Welcome Reception

01:00 PM

Storytelling & Tasting

02:00 PM

Wine Luncheon

03:00 PM

Aguillar Family Wines

04:00 PM

Wine & Cheese Tasting

If you are feeling ambitious, try adding another column for the locations of events and one more row for the after-party!

YOUTUBE VIDEO https://www.youtube.com/watch?v=BF2VlsM1UjA

About


Languages

Language:HTML 56.8%Language:CSS 43.2%