All Tracks/lab event hub/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build an Event Hub

In this lab you will utilize the semantic HTML elements to create the structure of a web page. You'll add content and images to make it look like a real event hub. **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have a `header` element, and it must be the first element inside the `body`. 1. Inside the `header` element, you should have an `h1` element that contains the text `Event Hub`, and a `nav` element. 1. Inside the `nav` element, you should have an unordered list of two items containing links to different sections of the page. The first item should have the text `Upcoming Events`, and the second item should have the text `Past Events`. 1. Each link should be represented by an `a` element with an `href` attribute that links to the corresponding section of the page, `#upcoming-events` and `#past-events` respectively. 1. You should have a `main` element that contains the different sections of the page. 1. Inside the `main` element, you should have two `section` elements. 1. The first `section` element should have an `id` attribute with the value `upcoming-events` 1. Inside the `#upcoming-events` section, you should have: - An `h2` element with the text `Upcoming Events`. - Two `article` elements. Each article should represent an event, and it should have : - An `h3` element for the event title. - A `p` element for the event description. You can add a date at the bottom if you like. 1. The second `section` element should have an `id` attribute with the value `past-events`. 1. Inside the `#past-events` section, you should have: - An `h2` element with the text `Past Events`. - Two `article` elements. Each article element should represent a past event, and it should have: - An `h3` element for the event title, - A `p` element for the event description. You can add a date at the bottom if you like. - An image element with the `src` attribute pointing to an image file and the `alt` attribute with a description of the image. **Note:** You can use any text for the event descriptions and dates. You can use the following image URLs for the images if you like: - `https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg`. - `https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg`.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.