Setting up the HTML structure


show more Setting up the HTML structure provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Setting up the HTML structure

Let's start by taking a closer look at the HTML and CSS structure behind our infographic. We have three main files making up our markup in CSS, the index.html, base.css, and styles.css files. I'll go through our HTML first. At the very top of the file, we have a couple of lines here to include Typekit, which I mentioned in the last tutorial is optional. Continuing down to our HTML structure, we have one div that's containing our entire infographic. Then we have a header section holding our title and our coffee cup animation.

Then further down from that, we have our navigation where we select which drink we'd like to look at. And then below that we have a profile for each drink, listing the espresso, milk, and other contents of each drink. And then at the very bottom of our HTML file we include both a reference to jQuery and the JavaScript file I'll be writing later. Moving to our CSS files, our base.css file contains the basic typographic structure and a few zeroing out and re-s...

Setting up the HTML structure
Video duration: 1m 48s 1h 56m Intermediate

Viewers:

Setting up the HTML structure provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...