Graphic Design Production II

Blog by: Mackenzie Godlewski

X01 Creating an Interactive PDF

You already know how to create a PDF for Print. Actually, you know quite a lot about creating PDFs. Let’s review these skills before we push on into new territory.

PART 1 About PDF

The destination for your PDF and who you are creating it for are two of the main considerations that govern why you use different settings for your PDF.

Formats for Print / Screen

Save the InDesign document provided in the following formats:
1. High Quality Print, Single pages, No Bleed or Crop Marks
2. High Quality Print, Single pages, WITH Bleed or Crop Marks
3. Smallest File Size, Page Spreads, No Bleed or Crop Marks
4. Printer’s Spreads: Print Booklet > to Postscript file Marks & Bleeds > Open in Distiller > Create PDF.

PART 2 Adding Interactivity

Before we make our own links in a document, we can get a feel for some of the options. Let’s look at some examples of existing interactive PDFs.

1. Go to this URL to find the UW-Stevens Point Handbook.
Check out how the interactivity works with Hyperlinks that link to pages within the rest of the PDF. Obviously the document was not developed to be high design, but we are looking at the function of the interactivity.
Who is the audience? Should it have more thought put into the design?

2. Now let’s go here to look at another interactive PDF. Go to the gray Nav bar on the left side of the page and twirl open ‘Resources’ to find the GEP Booklet. Scroll down to the table of contents and explore the interactive PDF.

Who is the audience for this publication? How would you characterize the positive qualities of the design?
What could be better?
Adding HyperLinks to a Document

X02 Organizing + Naming for Web / HTML Basics

In this series of exercises we’ll go through some key organizational practices you need to know when working in web, explore the web’s structure and learn the basic rules of working with HTML. You will set up your own root folder structure for our website exercise, write some code and build simple web pages.

PART 1 Organization is Essential

To get your websites to work properly, you need to follow rules for organizing files. The files fall into a few different categories, viewable content (text and imagery), the presentation of the content (design and layout), and the interactivity or animation of the content. Each of these is controlled by a core language, HTML, CSS, or JS.
Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place.
For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions.

Naming Conventions for Web Files

Code demands that you write it in a very particular way. A single character out of place can result in a whole web page displaying incorrectly or not at all.
You need to know that the naming conventions for web pages and files are also prescribed and are not optional. Specified methods must be followed and names assigned so web browsers can ‘read’ the files.

Files, documents and folders have special names.

The root folder is called that, or the root directory, but it is not usually named that.
We call the first page of a website, the home page. This page uses a special naming convention. It is either named ‘index’ or sometimes ‘default’ or ‘home.’ Browsers read these names as a signal to open this page first.

Rules for Naming:

When naming files or folders for the web, just say ‘no’ to:

SPECIAL CHARACTERS — Because the coded instructions for web browsers use special characters, you need to avoid using these when naming your files.

INCLUDING SPACES — Web browsers interpret spaces as special characters, so, don’t use them in your file or folder names.

LONG, WEIRD NAMES — You will not be the only one working with the files for a given website, so using short, descriptive names is a good practice.

VARYING YOUR CASES — Commonly all lowercase is used for file naming, but not always. Some people use what is called camelCase and some use all UPPERCASE. It is important, however, to keep your naming method constant.

X02 HTML Basics — we begin

Languages are alive! How do we know that? They change. Like any language, HTML, has gone through changes and continues to be adapted to new needs of the society and our technology.

Super brief history
HTML was developed by an awesome dude named Tim Berners-Lee, along with some colleagues at CERN, an international scientific organization based in Geneva, Switzerland. Around this time (1989–1991) they also developed the Hyper Text Transfer Protocol (HTTP) and the Universal Resource Locator (URL).

Syntax — the rules of HTML structure

All languages have rules that govern how the parts are ordered. This is the syntax. The absolute most basic parts of HTML are the ‘elements’ and ‘tags.’

Tags are recognized by their use of angle brackets.
Tags come in pairs, a start and an end tag.
Elements are the parts made from using tags.
Elements are nested.

Page Structure

In order for web pages to communicate with and be able to be displayed in browsers, they need to have specific HTML elements and in a specific order. All web pages have prescribed parts, nested elements and are divided into head and body areas.

A set of basic elements for a web page might look like this:

Because of the shared structure in web pages, a template, also called a boilerplate, is used to jumpstart the process of coding.
The first piece of code on the page is the document declaration or the ‘doctype’ telling the browser what code language it is.

X02 PART 2

HTML Basics About Writing Code

Text Editors

Text Editors are a kind of program used for writing code. Most automatically number the lines of code and allow for you to choose a color scheme to ‘color code’ the different parts of the language. Many options are available for Text editors. You can use Notepad on Windows or TextEdit on iOS (though TextEdit is a pain), or even Adobe Dreamweaver as it has a Code View that works pretty well. We are going to use TextMate Brackets for our first foray into web page coding.

Elements + Attributes

You remember elements are the parts of HTML defined by tags. Other key concepts are:
Elements have attributes.
Attributes provide additional information about the element.
Attributes are always specified in the start tag.
Attributes come in name/value pairs and the structure looks like this:

An example of an attribute would be:

In this example the body element is being assigned the attribute bgcolor for background color. The background color has a value that equals red.

• the value #FF0000 is a hexadecimal definition for red.
• the hexadecimal system is based on the color space of the computer screen, RGB.
• Web colors can also be specified by using the r, g, b values or by using text.

X02 HTML Basics - about hyperlinks

Links: anchors away! / relatives / absolutely

So much of the web is “...Click on this to go here.” Hyperlinks are the fundamental interactive parts that enliven web pages and serve a site’s navigational functions.
Links are made by using the anchor element.
The anchor element uses an ‘a’ to stand for ‘anchor’ along with the letters ‘href’ meaning ‘hypertext reference’ to designate the place the link goes.

example: visit w3schools

In the example above the words ‘visit w3schools’ would become the clickable link because they are between the start and end anchor tags.

absolute links

The link above references a page outside of the root folder of the web site. The name for this kind of link is an absolute link

relative link

A link that references a page within the website (inside the same root folder) is called a relative link. This kind of link does not need to use the same URL information like ‘http://www ’ and it would be written like this:

Keeping your files organized will help you succeed in building web sites that function.

Creating / Expanding the System

In your MyFiles archive, you should have a class folder named ‘212GDProductionII’ or simply ‘212’ or something similar. You might already have it organized, but if not, you will do this now. You can organize your files in a way that makes sense to you, but use short descriptive names and a clear rationale. Here is one way to structure it:
Inside your overall class folder make a folder named ‘X01’ and inside that have your content for Interactive PDFs. Make a folder named ‘X02’ and put all the content on HTML basics in there.
You will want to be setting up additional folders as we go through the semester and introduce new areas of content. Inside each of your ‘X’ folders you will have notes, screenshots and also working files. Here’s a visualization of an example folder structure for class.

HTML Basics — meta tags

To the html start tag, add the attribute... lang (for language) and the value... en-US (for english-US). The example is below.

html lang=”en-US”

meta tags — give important info about the website to browsers
meta tags do not have end tags
meta tags include specific attributes and values.
We’ll add meta tags with the following attributes + values to our page.

HTML basics — Working with Images / Making Images Links

For this exercise put the image named ‘roosterhead’ into your flyingrooster root the images folder, of course. Later, we will work with the other ‘rooster raw’ image in photoshop to go through the process of optimization.

PATH — Unlike our written text content, which is contained in the html page, images are referenced in HTML by describing their location. Images in a website live in a ‘images’ folder. The path to get to an image must be spelled out for the browser. The signal to tell the browser to “go into another folder” is by including a forward slash in the path name.

ALT TEXT — It is mega-important to clearly describe your images in words. This enables screen readers to speak out loud what the images are. For individuals with vision impairment this is essential for understanding the website’s content.

DIMENSIONS — Your images should also be defined dimensionally. We will use width and height in pixels.

img src=”/images/roosterhead.jpg” alt=”ceramic rooster head” width=”200” height=”200”

IMAGE AS LINK — In order to make your image a hyperlink all you need to do is wrap anchor tags around your image element and then specify the destination. Select a destination (somewhere on the web) and create the link.

Add text to take away the border.
img src=”/images/roosterhead.jpg” alt=”ceramic rooster head” width=”200” height=”200” border=”0”

HTML basics — More working with Images / Making Images Links

Images for web have specific file formats depending on the kind of image. The formats all have adjustments that you can make when saving them in order to achieve the highest quality with the smallest file size. This process is called Optimization. You will want to optimize all of your web images before you use them in a website. The most common file formats developed for the web are:

.jpg / .gif / .png / .svg

Photographs are most often saved as .jpg or .jpeg and sometimes .png. Vector images are saved either as .gif or as .png or .svg

X03 Working with Content — Images


Digital images are saved in different formats depending on the kind of image they are and their intended use. It may be super obvious to say photographs are visually different from flat color graphics, yet this distinction means they are each treated in specific ways and that file formats have been developed to work best with each kind of image. Overall, the two major categories of digital images are vector and raster.


.jpg or .jpeg Stands for: Joint Photographic Expert Group
Is a good format for what kind of image? Raster images
Its drawback is: lossy format

.gif Stands for: graphic interchange format
Good format for what kind of image? Vector images and Animated

.png Stands for: Portable Network Graphic
Good format for what kind of image? Raster Images, many kinds
Its superpower is: transparency

.svg Stands for: scalable vector graphics
This format is amazing and technically in a world apart from the rest.


Images for websites are usually prepared, sized and optimized in either Adobe Photoshop or Illustrator. Each of these programs can produce multiple file formats, although as a designer you will typically use Illustrator for creating logos and flat color graphics, and you will use Photoshop for manipulating photographic or continuous tone images.

HTML Tags, Elements and Attributes

When working with images for the web you want to always be aware of the color mode you are saving in and the optimal (best) file format to use for the kind of image you are making. The color space for screen is RGB.

In HTML you use code that looks like this to designate the path to an image. img src=”images/imagename.jpg” The ‘img’ is called the element or tag and the ‘src’ (which stands for source) is the attribute (value is the path name). The forward slash in the path name tells the browser to go inside the folder.

In order for screen readers to function properly for vision-impaired users, you need to assign what kind of text for your images? Alt text

X03 Working with Content — Color

The color space on screens is RGB (Red,Green, Blue). The Hexadecimal color system, which is rooted in the RGB color space, was developed when computer monitors were pretty limited in the range of colors they could represent.

Web designers often designate colors using the values for each of the colors R, G, B (or the Hex # or will sometimes use the color names). Transparency can be designated along with the r, g , b values by setting the alpha value. Then you would set the r, g, b, and a (for alpha) values.

X03 Working with Content — styling with CSS

You might be tired of looking at all that default Times New Roman and want to change your font and maybe make your type a different color. We are going to do this and a lot more with the help of CSS (Cascading Style Sheets).

Syntax for Css

CSS like HTML, has a syntax to it’s language that needs to be learned. Let’s take a look. In writing CSS, you define rules for the HTML elements. These are called rule sets.

Declaration blocks contain one or more (usually more) declarations that express the properties you want to style and how you want it to look. These blocks are surrounded by curly brackets a.k.a. braces.Each declaration includes a CSS property and a value, separated by a colon. A CSS declaration always ends with a semicolon.

X04 CSS LINKS — pseudo-class

Remember that links have four states:
a:link — the normal, unvisited link
a:visited — the link after a user has visited
a:hover — the link as the user mouses over it
a:active — the link as it is clicked

X05 HTML/CSS: images, captions & background images

To add captions to your images use the HTML tags ‘figure’ and ‘figcaption’.
figure /figure and figcaption /figcaption

These tags work with the 'img' tag as a set. The figure /figure tags wrap the image and the caption together. Nested inside is the img tag the words of the caption are wrapped inside the figcaption /figcaption.

Using images to create unity. By repeating elements you can reassure users they are in the same site. Images—either icons or photographs—can act as visual references to other sections or pages of a site.

X06 HTML/CSS: Background Images

Using Images in the Background

Just like changing the background color of an HTML element, we can also use CSS to set an image as the background of an element. There are a few different ways you can do this. One way is to set an unobtrusive pattern in the background of the body so that there is some subtle color and/or texture behind the content on the entire page.

First, we need an image to use for our background. In the best case scenario you build a small(ish) image designed to tile or repeat over and over again. Another name for this is a seamless pattern. Seamless patterns are great because one small image that repeats loads much faster than a large background image and it automatically adjusts to fill whatever size screen being used.

Set the background with CSS

In order to indicate an image we need to tell the browser to find the address of that image, and in this case, the address is inside the images folder which is inside our root folder.

Since we are already inside the css folder, we need to tell the browser to back out of this folder, then go into the images folder. The signal to the browser is by using two periods in front of the slash. So the code looks like this:

More Seamless Patterns

Its fun to make patterns. There is a fine art to making viable and effective seamless background patterns. Some illustrators / designers make them for sharing, some for profit. Later you are going to try it yourself in Illustrator.

Make your own Background Image

If you have never made a seamless pattern in Illustrator, or if you have, but want to refresh you knowledge, or just watch an awesome 7-minute video demo... got to the Creative Market { }and scroll down to watch Bonnie Christine's how-to video from Skillshare. In this video, Bonnie takes us through making a pattern and saving it to use in Illustrator.

In Illustrator create a pattern following the instructions you saw in the video. To build and use your own repeating background image for web pages, you will need to make sure the contrast is low between the pattern and the background color. Export your image tile as a .png file.

X07 the Box Model — spaces

Now that we have a grasp of how HTML and CSS work hand in hand to determine the look and basic interactivity of elements, it's time to begin controlling our layout. We'll do this by learning what's called 'the Box Model.'

Web browsers see everything — every HTML element that is — as a box. These boxes have certain physical characteristics including width, height, space around it, space inside of it, contents, and sometimes a frame or border. By creating the boxes and specifying their characteristics, we can control how the content on our web pages is displayed.

Block-Level / In-Line Elements

You might remember back in an earlier lesson we talked about block-level vs. inline elements and their behaviors. See how the yellow spans nearly the whole width of the browser? That is because an h1 is a block-level element.

By adding the color in the background, we can now see that the element does actually span the width of the browser window. The browser sees it as a box that has content inside—the text.
Note >> We've been seeing this as Brackets sets a blue line around the block-level elements whenever our cursor is in them.

Box Model Properties — padding, border, margin

The block-level boxes run the full width of our screen. The properties we can change are like other characteristics we can style with CSS.

Padding is the CSS property that controls the space inside the box around the content. Padding, like font-size, can use various units. For now, we'll use pixels. We can add padding uniformly or to a specific side around the content.


is a line that can be thick, thin, solid, dashed, dotted, etc. It is the CSS property used to style the outer perimeter or edge of an element. So, if our content is in the center of the box, and padding is wrapped around the content, the border is then wrapped around the padding.

The border property uses three values for line width, line type, and for line color.


is the space between the boxes.
Every element has a margin applied by default. Margin is what is creating the space between our h1 and our p in our page. Let’s see how we can change it.

CSS Margin Reset

Before we set a new margin, we'll turn off any existing default browser margin using a magic trick in our CSS. At the top of your styles.css file, before any other elements, type an asterisk * This is a special selector that means “every element in the page.”

This turns off all margin defaults.See how the space disappeared? Even the space that was on the left and right side of our h1 and p elements is gone. That is because that space was actually default margin placed on the body element. The white space between the h1 and the p was default margin placed on those elements.This reset technique can be used on any webpage to reset any default margin on the page. You can, and will want to add padding: 0; to the reset as well. This way you can control all the spacing manually on your site giving you precise control over your layout.

The analogy I have devised to think about these box properties relates to actual boxes. padding is like the packing peanuts inside the box, border is like the kind of cardboard (heavy-duty, corrugated, thin, etc.), and margin equates to spacers or bumpers attached to the outside of a box.

Width and Height

The last two properties that we can change on our box is the width and the height.
It’s important to know that it is actually best not to mess with these unless you have to. Browsers automatically set these based on the content and other box properties that are already defined. This generally works really well.

Text Alignment

We have already discussed controlling the space inside and outside of the box using padding and margin. We can also control how the content is situated inside the box.

Default alignment for all elements in HTML is left.
It makes sense that browser use this as a default because we know that left aligned text is easiest to read. That's why novels, textbooks, and almost all other longer form text is always left aligned.
Sometimes we might want to align text to the right or center for a certain design effect. Seeing where the content such as text lives inside a box helps us do that. The CSS declaration we use to do this is text-align: and the acceptable values are left, right, and center.

X08 Navigation + Unordered List

design issues related to a mobile or small device screen environment. We will learn about building and styling a mobile optimized navigation system using unordered lists, and creating anchored links.

Anchored Links

An anchor link “anchors” a navigational link to another element in the same page. In order to make the anchor tags work we have to add to the HTML tags that are the anchors and add to the HTML tags that are the links. To establish a connection between the two requires that we learn a new HTML attribute, the id= attribute.

This particular attribute is used to identify (id) the HTML element being anchored to.
Each id is given a unique name which is placed inside the double quotation marks. You can use any word you want, though descriptive words work best.

For an anchored link the address is very simple. You use a # (hashtag, pound sign, or another wierd name is the octothorpe symbol) and then 'call it' by name. The # indicates an id= attribute and the name specifies which one.

Responsive Design Mode

In order to work properly on our mobile first design, we’ll need to change our browser settings so we can easily preview our site using the correct dimensions for a small mobile device. In Chrome go to View > Developer > Developer Tools. There are lot's of settings to choose from. Experiment to view the different options.

Dealing with Images

There are many techniques out there for handling images, some more technologically advanced than others. We can use our CSS to tell all images in our page that the largest they can ever be is 100% of the available width. Essentially, we tell images that they are free to be full size if they fit, and if they don’t, they will automatically scale themselves. It doesn’t matter the screen size or if it is ever changing, the image will take on an elastic personality.

X09 Touch Points, Hit Points & Pain Points

Mobile First Approach to Web Design

Most users are accessing the web from a variety of devices. The premise of 'mobile first' strategy is to design for the smallest screen size that a user is likely to use first. A bright individual named Luke Wroblewski thought this up in 2009 and another bright person named Karen McGrane expanded the ideas in 2012. This approach teaches us to be thinking about content and functionality of the user interface on a mobile, or small screen first.

Using a finger or thumb to navigate instead of a mouse presents challenges mainly because a finger is far bigger and much less precise than the mouse cursor. User frustration, confusion and errors in navigation are often called 'pain points.' It’s the designer's job to make our sites as functional and usable as possible. We do this by discovering where there are problems (user testing) and eliminating (or at least minimizing) the pain for the user with better design.

Styling our Navigation

Our unstyled text links are small and close together. This makes it difficult for a user to hit the correct link. So, our first order of business is to make these links easy to use by even big and clumsy thumbs. We need to address several issues first.

Removing the Bullets

Unordered lists use bullets to indicate each of the list items. This is great in some cases, but for navigation this just gets in the way.

Creating Larger Buttons (Hit Points)

When dealing with links, the spot a user needs to click, tap or touch to activate the link is called the hit point or hit target. In text links, the hit point is only the text—a pretty small target. The user needs to click directly on the text to use the link. When using fingers to navigate a touch device, users typically need a much bigger hit target to be accurate.

To increase the hit target on a text link, we need to do two things.
First we need to 'promote' our link from an inline element to a block-level element. This will expand our aqua area, (our hit target) to the full width of the screen. It will also allow us to put padding on our link. We’ll use a { for our selector to address the link directly

Creating Separation Between Links

If we remember our box model, we know that the best way to move objects apart, is to use margin. Margin will allow us to separate our links with an invisible barrier. Since we only will need to have the margin between the links which stack vertically, we only need to add the margin to the bottom of each of our links.

Removing the Leftover UL

To remove this we need to know that this extra space is being created by a default padding on the left side of our ul. We simply need to set the padding-left of our ul to 0.

X09 The Hamburger / CSS Classes — 'place'


A website designed for the desktop generally has the navigation at the very top. On a mobile site real estate is at a premium so having the navigation at the top— in the form we have it now—presents a problem because it takes up all of the screen effectively hiding site content. There are several design options used to address this situation.

The Hamburger Button

One conventional method to indicate navigation is to use an icon made of three lines which is refered to as the hamburger button. The set of navigation links is usually hidden from view until it’s accessed by the user. There are lot's of ways to hide and show navigation, but almost all of them require knowing the programming language called javascript. Later on we’ll learn a little about this language, but today we'll accomplish this using only HTML and CSS.

CSS Classes

In the same way that Character and Paragraph Styles work in InDesign, CSS styles can be assigned to whole paragraphs

or to parts of content in paragraphs. We can create class selectors to style specific parts of a paragraph.
Id selectors use the # and class selectors use a period. Let's just try it out on our existing text!
In your CSS file add a new class selector to style the information about date, day, and time. We can name it 'when' and in the CSS

X10 HTML Developing Page Structure

Header and Footer Elements

**IMPORTANT** The 'header' element is NOT the same as the 'head' element.

Header Element

The header lives at top of a web page and usually includes a logo, the navigation, and sometimes other things like a tagline or a search function. We already have a couple of these, a hamburger button and a logo, so let’s work with that.

By setting up the header like this it makes the code easier to scan. Another plus is that we have a new element to use when considering specificity for nested elements. I can have the CSS talk directly to the hamburger button image link, by using the header a { as my selector. So only the links inside the header tag will respond to that CSS command leaving other links on my page alone.


Specificity is an important concept that refers to the order that CSS styles are applied. When we are using more than one HTML element name in a selector for our CSS this becomes crucial.

Footer Element

In web design footers refer to the content that appears consistently at the bottom of every page of a website. The content can vary, but it’s common to see site navigation, contact information, links to social media as well as all sort of other bits of company information. Similar to the header, the footer content rarely changes between the pages in any given website. Having this content grouped together in a footer element is just smart.

Another common piece of footer content is a copyright statement and symbol.

The Nav Element

HTML offers us a pair of tags to help us organize and identify the major navigation on our page. By wrapping our links in a pair of nav /nav tags it allows us to use as a nested selector and helps us scan the code to more easily identify and edit our site navigation.

The Section Element

Another organizational piece of HTML is the section element. A section defines an area of content that is separate or distinct from the rest of the content.

REVIEW: ID and Class Attributes / Selectors

The most specific we can get is to use the element as the selector coupled with it’s id attribute. Remember when we added the id attribute to our h2s? We discussed adding this for anchored navigation but it has a second use, which is even more powerful.

Giving an element and id attribute (id=), means you are giving it a name, but not just any name… an absolutely unique name. You should not ever repeat an id. Think of them like social security numbers, every person has one of their own. Classes can be reused on multiple elements, but id’s are all unique and should not be reused for any reason.

Because the id is unique, then if you use the element and it’s id in the CSS, there can be no other element that has that in common and you can style just that single element if you so choose. A good example of an element that might need to be uniquely styled would be the logo of our website. It seems to be sitting awfully close to our hamburger button. It might be better to give it just a little bit of breathing room by setting it to have some margin on the left.

Now, we wouldn’t want to do this to all images, so using img as a CSS selector doesn’t seem appropriate. We could use a class, but there is only one logo image so that doesn’t seem appropriate either. Instead, we will use an id – because id’s are for elements that only appear once one the page.

X10 Basic Positioning of Page Elements

REVIEW | ID and Class Attributes


When we use the element or HTML tag, along with an id attribute, we can target an element very specifically. A while ago when we added the id attribute to our h3s, we used this process to make them anchored links. Most recently we used the id attribute to specify our mobilenav. Giving an element and id attribute (id=), means you are giving it a name. Most importantly, a name for an id is an absolutely unique name. Once the id name is used on a page, it should not ever be repeated. You can think of the id like a license plate or a VIN number, because every car has one that is unique to itself.


While, the id attribute should only be used for one thing on a page, the class attribute, on the other hand, can be reused for multiple elements. We created and applied classes for several different parts of our text (.when for the days, dates and times; .where for the locations; .event for the kinds of events) so we could style these in a similar way.

REVIEW | Structural Elements

We added HTML elements Header, Footer, and Section in order to delineate areas of content so they can be addressed as a unit. We'll continue working with these.


The Float Property

The most basic positioning method we can use is called floating. This command allows any element to be positioned inside its enclosing element to either the right or the left. Floating an element changes it's default behavior and allows other elements that are below the floated element in the HTML to also “float” up and sit next to it – creating a wrap effect around the floated element.

Floating Images for a Text Wrap Effect

Floating came about as a way to deal with images and text together. It is a way to include an image inside of text, or have the text to wrap around the image.
The basic CSS declaration to float an image left or right, tells the image to "go be on the right side or left side" aligned inside of its enclosing element. It also tells any text below it fill available space to the left or right of the image. Let’s try it.

You have to make sure there is a parent element (like our section elements) that holds only the floated element and any other elements you want to float around that one specific element. Also make sure that parent element has a closing tag where you want the float to stop. Then make sure the opening tag of the parent element has that class="group" which connects with that crazy CSS block we just learned. It might take a little practice, but it does a good job of making sure we keep our floats under control.

Floating an Image Right

Okay, we were about to float our second image to the right. Normally we could just add a CSS block saying float: right; rather than left to an image selector, but because we have two images that we want to behave differently, we’ll have to create a specific name to talk just to that second image. There are many approaches you can use, but we’re going to add id= attributes to the sections.
Add id="one" to the opening tag of the first section: section class="group" id="one"
Add id="two" to the opening tag of the second section: section class="group" id="two"

Note: You’ll notice that our sections now have both a class and an id= attribute. This is fine. As long as we are careful when we write our CSS we can use one or the other to help style the section or elements inside the section. Remember the class allows us to style this section along with any other element with that same class. So right now, that section can be clearing floats, so can any other section with that same class. I can now use the id= attribute, however to call each section by name, styling just one or the other.

X12 Custom Fonts / Favicon


Font vs Typeface

The term 'font' is used in digital typography, though it truly refers to a specific typeface.
The term 'typeface' includes all the sizes, styles, and weights of that face, where 'font' actually describes a subset of the typeface.

Type Designers

Fun fact: designing typefaces is a real job. It is a legitimate speciality area in the world of graphic design. Creating a single typeface takes an extraordinary amount of time and a keen sense of detail. Type designers spend their time drawing, adjusting, digitizing, scrutinizing, tweaking and packaging all those little glyphs/characters and their many different combinations into various typefaces.

The final typeface package is really a piece of software. And, like any software, it has copyright laws to protect it. A type designer needs to be paid for their work just like any other professional. Though designers who dabble in type design for fun will offer their works for free, professionals create a much higher quality product and therefore ask for payment.

Readily Available ≠ Free

The typefaces that come preinstalled on your computer are not free. They are there because of licensing agreements between software and hardware companies and the font foundries or companies that own and sell fonts. Apple and Microsoft are two of the biggest players that have agreements with font companies. They pay to use those fonts on the system. The cost of those fonts is included in the cost of your computer.


As already stated, typefaces or fonts are protected by copyright. This means that that only the font creator has any rights over how the final font is used, sold, edited, etc. A font is essentially a piece of software, but also an original work, like a painting, novel, or scientific invention.

Copyright law protects creators, and anyone who infringes on those rights can be punished. By using a font that you do not have permission to use is a direct infringement on copyright and you risk incurring punishment. The punishments for copyright infringement can be serious. Penalties include fines and/or jail time.

Font-family Property and Font Fallbacks

We can specify our font-family: property as one of several generic categories:
serif, sans-serif, monospaced, cursive, fantasy. We are able to do this because we are simply asking that the user's computer display a sans-serif (or whatever category) font already installed on their computer.

The succession of Font Fallbacks

If we use font-family: 'Times New Roman';... this tells the browser to display Times New Roman if it exists on the computer. We can request our own fallbacks by adding another font request following our first like this:

font-family: 'Times New Roman', Georgia, serif;

This tells the browser to look for Times New Roman on the system first, if it does not find that, it is to look for Georgia, and if that can't be found, it would use a generic serif and display that.

Custom Fonts

Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted.

Hosted — This means that the font doesn’t live on our root folder, but instead that font lives somewhere else on the internet. Font companies or services (like Google fonts) provide designers with access to fonts by providing a way to link to them on their server. Copyright issues are managed and monitored by the hosting company. There are hosted fonts that are paid and those that are free.

Paid — Some font foundries or type designers offer paid options for using their fonts online. These are subscription-based models that allow you pay monthly to have access to a certain font or set of fonts. You pay for the rights to use the font on your site and for to be exempt from worry about copyright violations.

Free — These are similar to paid hosted fonts in that another company actually takes care of hosting the font files and provides access to those fonts. The major difference here is that you don’t actually have to pay for the service.

Pros: No worries about managing your own font hosting, typically slightly easier to setup than self-hosted fonts

Cons: Privacy issues (your site can be tracked by these companies), Need to manage subscriptions and accounts for paid services, often limited to a certain number of fonts or sites for paid services

Some Services:
Google Fonts (Free)
Adobe Edge Webfonts (Free)
Adobe Typekit (Paid)
Cloud Typography (Paid)

Self-Hosted — This means that you are actually uploading your own font files
(in a folder, just like your images) for browsers to download and display in your webpages. There are both paid and free models for this as well.

Pros: Full control of your content, You own (rather than rent the fonts), Good variety, No tracking of font use by third parties (privacy issues)

Cons: You are responsible for policing copyright, Your are responsible for managing hosting, Costs (you are paying for the hosting of the font files)

Some Services:
Font Squirrel (Free)
Fontspring (Paid)

X12 Favicon

Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when you bookmark the page. Web browsers use favicons in the address bar, on tabs, and in the book mark lists to identify sites visually. It is really an extension of the brand.

Favicons used to be typically 16 x 16 pixels square, though now they can be up to 48px square.
They are saved with the name: favicon.ico and are stored in the root folder of your website.

Creating a Favicon

Favicons can be created using online services or any image editing software that allows the saving of .ico files. (Photoshop needs an extension).
The image you use should be a graphic with very little detail and designed to match your site's identity. It will take some work to strike the right balance of detail and communication.

Experiment with an online service to create your very own favicon.,,, Dynamic Drive, to name a few.
Follow the instructions provided by the site and then download the favicon.ico image to your computer.

X13 Commenting Your Code / Box Sizing + Column Grid


All comments are written with opening and closing characters and are used to demarcate a category or an area of similar things. Earlier we looked at using comments in our HTML to identify areas in the code. Today we are going to add comments to our CSS to help us organize our growing lists of styles.

In HTML Comments are written with an angle bracket and an exclamation point.
Comments in CSS are written starting with a forward slash followed by an asterisk and a space. To close the comment, the characters are reversed. It looks like this:
I happen to like to use ALL CAPS, but that's not required. You can use any typographic case your heart desires... UC, lc or U&lc.


We have learned about the box model and have used it in several webpages already.
The so-called boxes are the divs, sections, headers, etc. which are simply containers for page content that can then be styled with padding, border, margin.
You may have already noticed that when you add padding or border to your parent element (div, nav, section, header, etc.) that the size of the element grows. That's because border or padding values are added to the dimensions of the 'box' (div, nav, section, header, etc.).
The box-sizing property addresses this issue. In the following CSS an asterisk (*) is used as a selector, which basically means:
"Hey, you, browser... apply this to all elements on the HTML page this stylesheet is attached to."
* {
box-sizing: border-box;
The value 'border-box' includes the values of padding and border in the size of the box.


We have been able to use the float property to adjust how elements display on a page. This is good for simple 2-column layouts. However, once we get into more columns more control is required. Many, if not most, responsive websites use a multi-column grid structure to exercise greater control over the positioning of the page elements. A 12-column grid is fairly common.
By adopting this approach, we can ensure that our pages look right in all viewports.

Designer/developers have calculated how to best work with these columns. If we begin with a one column layout = 100%, the percentages for each of the 12 single columns will equal 8.33%, 2 columns then equal 16.66%, 3 columns equal 25%, and so on. We will use these percentages as values in our CSS.


We need to make CSS classes for each of the 12 columns. We will use class="col-number" where the specified number defines how many columns the parent element or div is to span.


To control the layout each content area will be defined as a row of columns. Each of these rows needs to be wrapped in a parent element. We'll use a div to contain each content area. Since we are using a 12-column system, inside each content area or div the columns should always add up to 12.
Last time we added sections (or maybe you used divs) to contain the different areas of content for About, Features, Reviews, and Extras. Now we will make the first three content areas become a 3-column layout.


We want our columns to float left, and have some padding. Let's use 10px. Inside each row in our layout the columns are floating to the left. By using floats we take the elements out of a 'normal' block state in order for them to sit next to another element. This means they are taken out of what is called the flow of the page. When this happens, other elements don't recognize them and so appear to overlay them. Ah, but we can fix this.