(gentle music)
- [Instructor] Time for a new challenge.
In this challenge, I want you
to build an entirely new element
from scratch using JavaScript and add it to the DOM
so it becomes available in the browser.
That element is a navigation menu to appear
at the top of the page, right below the header.
For this challenge,
you need to not only write the JavaScript,
but also add some basic CSS to style the menu,
so it appears as a horizontal navigation menu.
Here's a full breakdown of what you need to do
to complete the challenge.
In JavaScript, create a new element
to hold the navigation menu,
then add an unordered list and a series
of no less than five links to that list.
Use single words like home, about, and cetera
to just list out the items.
And you can also set the source attribute to pound sign
or a hash for simplicity so that you don't actually need
to navigate anywhere.
Add the new navigation elements
to the DOM directly after the header.
Write basic CSS and add classes as necessary
to create a horizontal layout for the menu.
And finally a tip, use either display: flex
or display: grid to create that horizontal menu layout.
You don't need to do some fancy CSS here,
just do the basics to get a horizontal layout.
This challenge is mainly about JavaScript,
but it also requires you to write a tiny bit of CSS
because in the real world,
JavaScript and CSS usually go hand in hand
and it's important
to think about not only pushing new content to the DOM,
but also ensuring that content has the necessary classes
and other features to be able to be styled properly.
Take 10 minutes to solve this challenge,
then go to the next movie and watch my solution.