Join Chris Converse for an in-depth discussion in this video Adding a debug area to the HTML, part of Creating a Responsive Homepage Marquee.
This is gonna be temporary. Later on in the course, we'll remove this. Let's start with a div tag. Let's type style="" and the div tag. Inside of the style, let's set margin-top to 50px, then let's end the div tag. Let's open this up, and inside of here, we're gonna set a div for each one of our variables that we're gonna create later.
Let's say div class="". We're gonna name the first class var1, then outside of the tag, let's put the letter x, then let's end the div tag. Then you can copy and paste or duplicate this line eight more times, then we'll come back here and name all of these. The last one we'll name var9, then 8, 7, 6, and we'll name each one of them in sequential order. Back in our browser, we can hit reload, and now we can see a list of all of those letter xs representing those variables.
Again, later on as we declare variables and change their values, we will reflect all of the variables inside of this HTML page, just so we can get a quicker sense of what's happening with our script.
- Creating SEO-friendly markup for the marquee data
- Adding and populating an HTML debug area
- Creating a marquee timer
- Injecting HTML markup
- Creating navigation buttons
- Halting animations based on user interaction
- Loading and cross-fading content
- Styling the marquee with CSS
- Using media queries for more precise responsiveness