Join Chris Converse for an in-depth discussion in this video Adding a content container and files, part of Creating a Responsive Web Experience.
Now we're going to create some HTML files that…will contain individual content based on screen size.…So inside of the myWebsite folder let's come…in here and create a folder inside of there.…We'll call this Content.…Next let's come over to the Exercise files.…Let's open up folder three called Snippets.…Let's grab a copy of a_hero_content.html.…And let's drag a copy of this into the Content folder we just created.…Once that's copied over,…let's rename this to hero_content_large.…Once that's in place, let's open this up in our text editor.…Now, inside of this file, we have a div with a class of panel.…
This contains everything that we're going to load…into the header area of our HTML file.…Inside of this div, we have an image which is pointing to our large banner.jpg.…Then we have another div with a class of…caption with an h3 tag, a paragraph tag and…another anchor tag with a class of call to action.…So when somebody's browser is open to the wide screen size,…this is the content that we're going to load into the heading area.…
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8
Skill Level Intermediate
Q: I don’t see the original course in which this course is based. Where is the final project to the previous course?
A: The exercise files, both premium and free versions, now contain a copy of the previous course’s final project.