Graphic Design Production 2

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:

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.

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. Here's a simplified example of a root folder for the fictional company Flying Rooster: On your desktop: Make a new Folder and name it 'flyingrooster'. Inside the root folder make three (3) other folders called 'images' 'css' and 'js' We will come back to this when we build our web pages. 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, wierd 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. <html> or <h1> or <p> Tags come in pairs, a start and an end tag. <title></title> Elements are the parts made from using tags. <title>Flying Rooster Company</title> Elements are nested. <head> <title>Flying Rooster Company</title> </head> 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: <doctype html> <html> <head> <title>Flying Rooster Company</title> </head> <body> <h1>Amazing Flying Rooster Facts</h1> <p>This text talks about interesting things having to do with the amazing Flying Rooster Company. The text goes on about these interesting things at some length. There might be more text that talks about interesting things. Unless, of course, they run out of interesting things to say.</p> <h2>About Our Founder</h2> <p>Now, this text talks about interesting things having to do with the amazing founder of Flying Rooster Company. This text tells wild tales about her escapades and ultimately reveals how much the company cares about roosters and chickens. The stories are funny, the message is clear.</p> </body> </html> 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: name="value" An example of an attribute would be: <body bgcolor="#FF0000"> 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: <a href="">visit w3schools</a> 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: example: <a href="about.html">More About Us</a> Keeping your files organized will help you succeed in building web sites that function. Organizing + File Management As in Web design, keeping your files organized for the class is crucial. Let's continue building your folder structure for this class. 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.


— 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.


— 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.


— 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">


— 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


X03 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 — livingcolor

1. Make a New Root Folder

2. Open the boilerplate and add the title 'Living Color & Gray Matters'

Add the first heading: About Thinking About Color

and add the text: Color is a powerful aspect of our lives. It carries meaning culturally and can trigger emotional responses. Because of learned associations, color can literally color how we think and feel about a room, a car, a web site or a person. Someone wearing red is perceived to be powerful. In many cultures the colors and patterns you wear communicates where you are from. Color can definitely make us react unconsciously. Fast food brands use red and yellow to subconsciously stimulate appetite.

Add a second heading: Understanding Color on the Web

and add the text: The color space on screens is RGB (Red,Green, Blue). Colors depicted on the Web are made of all manner of mixtures of red, green and blue pixels. 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 use sometimes use the color names). Transparency can also be designated along with the r, g , b values by setting the alpha value.

Make two more pages: 'aboutimages', and 'block-inline'.

Save your root folder...and all of your pages and images.

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. Before we try writing some CSS you need to know that the visual display of the lines of code will appear in a specific format that is not just in a horizontal line like we see on this page. The format makes it way easier to scan for selectors and declarations. OK, let's write CSS!

X03 Styling with CSS

In your 'styles.css' copy the first rules set from the css-screenshot...also written below body { background-color: darkslategray; } h1 { font-family: sans-serif; text-transform: uppercase; color: rgb(49, 138, 140); } Now we have to tell the browser to link these style instructions to our HTML pages. Open your index page. Inside the head section type this: <link rel="stylesheet" type="text/css" href="styles.css"> Look over this line of HTML code to figure out why it does not work. (Hint: check the href) Make the correction and reSave the document. Back in your styles.css add another rules set for the paragraphs as follows: p { font-family: sans-serif; font-size: 100%; font-weight: 100; line-height: 150%; color: rgb(129, 228, 228); } Now add a rules set for the h2 heading element that mimics the h1 element style. You can apply the same style declarations to more than one selector by adding it right after the first selesctor, separated by a comma. h1, h2 { font-family: sans-serif; text-transform: uppercase; color: rgb(49, 138, 140); }

X04 css Links— connections

1. MAKE A New Root Folder

2. Build aN Index Page, 3 Other Pages & a Styles Sheet INDEX: Use your boilerplate to build a new index page. Add this title: Connections: your past, your present and your future. Add a link to the style sheet we will build: <link rel="stylesheet" type="text/css" href="styles.css"> Add four (4) text links to the top of the page: Home, Past, Present, Future

3 PAGES: Make 3 new pages and name them 'past.html', 'present.html' and 'future.html'. On the index, make the text links link to these pages. Copy/Paste the text links to the top of the 3 other pages. On the index, Copy/Paste these headings and paragraphs of text into the body: Page Heading <h1>: Connections Between your Past, Present and Future Sub heading 1 <h2>: Know your Past, Know Where Your Roots Are Paragraph 1 <p>: In order to know yourself, you need to get to know your past. This means finding out, if you don't already know, where your people are from. Your identity and your way of walking in the world is shaped by the people in our past and built on their connections to the land—your Homeland. Certain places that make you feel comfortable or resonnate with you on a deep level, will almost always be reminiscent of what is your Homeand, through your lineage.

Sub heading 2 <h2>: Celebrate your Present, Dance to the Music Paragraph 2 <p>: 'Be Here Now' is a well known Buddhist phrase that means to be fully present, to stay in the moment, wherever you are. While it is seemingly impossible to achieve this for more than a few fleeting seconds, most of us see the benefit of practicing this state of mind. If we can release ourselves from either obsessing over past actions or worrying about the unknown future, we can take part in the now. Wherever you are you can find a reason to complain or you can choose to celebrate what is for now and accept, learn, laugh and dance to the music.

Sub heading 3 <h2>: Be Open to Future Opportunities and Possibilities Paragraph 3 <p>: You may or may not love the circumstances you find yourself in on any given day. You may not like the politics of the day or the stat of your relationships. The truth is that change is the only constant in life, so you can expect that change will happen, and you can actively work for change in your life, in your relationships and in your community. This begins, of course, with a willingness on our part to face and accept what is happening in the present. Our capacity to accept truth and the courage to see clearly in the present is, coincidentally, increased greatly when we posess a sense of who we are and where we came from. In this way our past is connected to our present and to our future. The future of our lives and the planet depends in a powerful way, on our ability to know the past—what has shaped events, and what has been hidden from common knowledge—and see what is happening in the current time.

X04 css Links — pseudo-class

STYLES SHEET: Start a new page and Save it as 'styles.css'. Add rules sets for the headings and paragraphs as seen in the connections-stylesheet screenshot: Now we will create rule sets for the text links. 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 Each of these states is a selector that can be styled. Write the code for these in your styles sheet. Include the properties for color and background-color. Choose any colors you would like. Make these change for each state.

X05 HTML/CSS: images, captions & background images

Adding captions to images

We are going to continue using our 'connections' site from last week's exercises (X04). Copy your 'connections' root folder to your desktop. Now, add the images you found to represent your own past, present and future to your images folder. Make sure your images are named to reflect the content. (If needed you can use the provided placeholder 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>. It should look like this: <figure> <img src="images/future-placeholder.jpg" alt="Blurry sunrise image." /> <figcaption>The future is hazy. Ask again later.</figcaption> </figure>

Choose 'Open Folder' and navigate to the 'connections' folder on your desktop. Open your future.html page.

Add Caption:
You should have the future-placeholder.jpg on the page already. If not, type in the 'img' tag and identify the image for your future and follow the guide above. Save your HTML file. //// Refresh and preview in your browser.

Your Own Images:
Resize your images to 800 px by 600px. Replace the placeholder images with your own images for future, present and past.

Add Text:
Copy the new text from the following page (or from the screen shot provided) and add it to your future.html page. Add the new title and meta description, and revise the main heading. For the written text make the subheading part of the paragraph, yet separated by bolding and a line break. Add this below your image on your future page. Do the same process for your present.html and past.html pages using the appropriate images, and adding your own captions. Add title, description, text for the other two pages.

Style with CSS:
In your css file, create a style for your caption.

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.

In Photoshop
Open your images for past, present and future. Set your Crop Tool for W x H x Resolution for 100px by 100px and 96 as resolution. For each image select an engaging area and make a crop. Flatten Image if needed. Export your cropped images as . jpg images (named with 'crop' or 'square')... and put these new cropped images into your connections images folder.

Add Small Images to Index
Place each of the square images into your index page before the appropriate text.Add alt text and make each of the images link to the appropriate page.

Revise CSS - Margins
On your css, change your h2 element style so it is not so large and so it has no margin on the bottom and on the top. Add margin-top: 0; to your paragraph tag.

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. Let's try it. 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. After copying your connections folder to your desktop, copy the image 'colorbar-1px.png' from the X06 download, to your images folder. Open Brackets.

Set the background with CSS

Open your styles.css page and locate the style for your body element. 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: body { background-image: url(../images/colorbar-1px.png); }

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. First, however, we are going to look at and use a free online resource called Subtle Patterns. Go to the site and explore the many options by browsing the thumbnails. Preview how the patterns look as backgrounds and choose one you want to work with.

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. Let's change the background color of the body element. body { background-color: lightblue; }

Understanding the Box Model
Let's move back to our HTML document and add some content. Add an h1 and a p to your HTML. <h1>This is a main heading</h1> <p>This is a paragraph</p> Save and Refresh. Let's add a color and a background color to the h1 with CSS. In your CSS file to your h1 element add: background-color: yellow; and to your p element add: background-color: orange; Save and Refresh in your browser.

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. Let's add some to our h1. padding: 25px; 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. Let's try this with our p tag. padding-top: 50px; padding-bottom: 50px;

Border 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. Let's try adding a border to our h1 ...And add a border to our p. border: 5px solid black; border: 10px dotted brown;

Margin 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." Now add... * { margin: 0; } 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. Now that we've zeroed out all default margin, let's go ahead and add some back in. h1 { margin: 25px; } Adding 25 pixels of margin to all four sides of our h1, added equal space to the outside of that box. Like border or padding, we can add margin to individual sides. Let's do it. Add 25 pixels of margin to the left and right side of your paragraph. p { margin-left: 50px; margin-right: 50px; } 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. However, sometimes you want to set specific values for a box (block-level element). Let's add an h2 element to try this out ...type in your index.html: <h2>This is a secondary heading.</h2> In your CSS h2 { background-color: pink; padding: 15px; margin-top: 25px; width: 500px; height: 200px; {

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. In your CSS add to the h1 text-align: center; Save and Refresh... Now add to the h2 text-align: right; Archive Your Files & Clean up Remember to archive your root folder and exercise files on your MyFiles (or OneDrive)and Delete your folders and files from both your Download and your Desktop!

X07 Spacing, Sizing, Type on Screen

Review of HTML Elements for Type — h1 through h6 Introducing Unordered Lists — <ul> and <li> Text Formatting — specifying format options for text Font Styling — setting the font-family and other variables Font Size — understanding font size methods We will continue working with our 'spaces' root folder. Copy your root folder to your Desktop. Open Brackets. Open Folder and select the 'spaces' folder on your desktop. Make a New HTML page for more on CSS (name it 'moreoncss.html') and a new page for type (named 'typeonscreen.html). Type in the basic boilerplate for the HTML pages. Then type in or Copy/Paste the text for our lesson is on the screenshots taken in Brackets. Remember to Archive Your Files & Clean up your Station Remember to archive your root folder and exercise files on your MyFiles (or OneDrive) and Delete your folders and files from both your Download and your Desktop.

X08 Navigation + Unordered List — 'place'

In this exercise we will begin to work with some 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.

Add Content

Now we will build some content -—both image and text— to our page. Remember that content we want to be seen needs to be in-between the <body></body> tags.

FIRST — Copy the images 'xop-logo.png' and 'placeholder.png' from the XO8 download into your images folder.

SECOND — In your index page, add code that tells the browser to find and display the images. Put the logo at the top. You will add the placeholder before each event in the text (below).

THIRD —Open the Word document from the X08 download. Copy and paste the text from the Word document into your index page. Follow the instructions in blue to structure the text with HTML.

FOURTH — We will wrap the content in a <div> tag.

Build Navigation List

Now we'll add an unordered list that will become our navigation on the page. We'll put it just below our image. Normally it would make the most sense to use the h2s as the major links for our navigation, but since there are so many events we are going to use our h3s as links too. Here is the list to code in and where it should go: In order to make our list into navigation we need to add the code that makes the text into links, like this: Leave the href as an open space for now. You should be able to code in the first one and then copy/past the start tags for the rest. Brackets will help you with the close tags.

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. Go ahead and add the id= attribute to our first h3 tag. Put the attribute inside the opening tag, just like all our other attributes. Let's use "Open" as the name for the first h3. It will look like this: Okay, that is the first part. We have just dropped the anchor. Now we have to connect the link. To do this we have to go back up to the link we made in the nav and enter the address in our href= attribute. 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. Locate the "Opening Reception" link in the unordered list navigation we created earlier. Delete the space between the double quote marks and type #Open Save and Refresh The HTML now looks like this: Ok, now let's see if it works in our browser. Click on "Opening Reception" in your unordered list navigation. If things are working correctly, your page should have snapped the "Honoring People and Place / Opening Reception" section to the top of the window. Now add the rest of the anchored links to the list and the id attributes to the rest of the h3s. It should look like this: Now let's style the text. Add the following properties and values to the text elements in your CSS: h1 { font-family: Trebuchet, sans-serif; font-size: 3em; color: skyblue; } h2 { font-family: Trebuchet, sans-serif; font-size: 1.5em; text-align: center; background-color: slateblue; padding: 15px; margin-top: 15px; width: 400px; height: 30px; } h3 { font-family: Trebuchet, sans-serif; font-size: 1em; color: slateblue; margin-top: 10px; } p { font-family: Trebuchet, sans-serif; font-size: 1em; border-top: 1px dashed slateblue; margin-top: 10px; margin-bottom: 10px; }

Making Adjustments

Live Preview your index page in Chrome. There are a number of issues we can address. Let's identify them and then tweak the styling.

Remember our box model... we can adjust padding and margin.

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. You may have noticed issues with our logo image. Let's adjust this in our CSS. We need to talk to the images directly, so we need to use img { as our CSS selector. The property we'll use in this case is max-width:. This is what lets the image know how much of the available space it can take up. If we want to allow it to take up 100% of the screen, we can type: 100%; as the value. Add the following: img { max-width: 100%; } This tells the browser to resize the image to the screen size.

X09 Touch Points, Hit Points & Pain Points — 'place'

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. We'll use CSS to remove them. Open your styles.css file Bullets are connected to the parent element, so go to the ul { selector. The property we need to use to remove them is list-style: The value to remove the bullets is none; Remember to close the css block with } Your CSS should now look something like this: ul { font-family: Trebuchet, sans-serif; font-size: 1em; padding-top: 5px; text-decoration: none; list-style: none; } The bullets are now gone from our list.

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 more clearly see the structure of our navigation we will add background colors to each of the elements. to the ul add background-color: orange; to the li add background-color: lawngreen; to the a add background-color: aqua; Your CSS should look like this: ul { list-style: none; background-color: orange; } li { background-color: lawngreen; } a { background-color: aqua; } 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 To promote the link from inline to block, we'll use the property display: The value we would use in this case is block; To add padding, we use the property padding: Let's try 20px; for our value to start. Here's the new CSS for my link: a { background-color: aqua; display: block; padding: 20px; } If you hover over the aqua portion of our navigation, you'll see that the hit targets are now much bigger and they do indeed span the entirety of the aqua area. This is a good start, but we now have two new problems to solve. The first is that the links touch one another so we cannot tell where one link stops and the next starts, and the second is that we need to get rid of the orange unordered list stripe that is appearing on the left side of our navigation.

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. • Add margin-bottom: 5px; to your link CSS That works to create visual separation and actual separation between our links. We can also now see that the unordered list (our orange background) does expand the full width of our screen proving that the unordered list is a block-level element.

Removing the Leftover UL

Now to take care of the extra orange leftover on the left side of our navigation. We've determined this orange belongs to our unordered list element. 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; The CSS looks like this: ul { list-style: none; background-color: orange; padding-left: 0; }

Centering the Link Text

To make this look a little better, let's begin styling the text. First, let's center the text inside the link by adding the property text-align: to my link CSS and the value center; We can center any text inside a block-level element this way. a { text-align: center; }

X09 The Hamburger / CSS Classes — 'place'

Reviewing Our Process

we launch into new content let's review what we've done so far on this site. We did this: • made a root folder (place) on our desktop • made subfolders (images) and (css) inside our root folder • copied images into our images subfolder • created an html page (index.html) in the root folder • created an external style sheet (styles.css) and put it in our css folder • in our home page (index.html) coded the basic boilerplate for our HTML • linked our index to the external style sheet (using <link rel="stylesheet" ...>) • placed images (xop-logo.png and placeholder.png) (using <img src=" ">) • added text content and marked it up (using HTML tags <h1>, <h2>, <h3>, <p>) • in our stylesheet defined styles for our text (using CSS selectors h1, h2, h3, p) • created an unordered list for navigation (using the <ul> and <li> tags) • made anchored links for the navigation (using the <a href="#..."></a> • in our stylesheet defined styles for the navigation (using CSS selectors ul, li, a) • activated the Developer Tools views in Chrome to design mobile first • adjusted the styling on our text content • made our images scalable (using CSS selector img, and max-width: 100%) Specifically, for our navigation, we: > removed bullets with list-style: none; > made links block elements with display: block; > added padding to the list with padding: 20px; > added color to the link space background-color: aqua; > separated the links spatially with margin-bottom: 5px; > removed the underlines with text-decoration: none; > removed leftover space with padding-left: 0; > centered the link text with text-align: center; You may have gone further adding styles for your link states (link, visited, hover, active), changing the dimensions, colors, font and other things of the text and links.


Now let's continue to make our mobile site more usable. 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. All right, let's add our own hamburger button. Find "hamburger.png" in the X09 folder and copy it to your images folder. Go to your index file and before the xop-logo, add an img tag and make it a link using the <a href=" "> </a> element. Here's the HTML: <a href=" "><img src="images/hamburger.png"></a> When the user clicks our hamburger button, we want it to reveal the navigation. We already learned how to use anchored links, so we'll use this method again.

Revise our Navigation System

First thing we are going to move our unordered list to the very bottom of the HTML page. Highlight the unordered list from <ul> through </ul> then hit Edit > Cut, and then go down to the line right before the closing </body> tag and Edit > Paste the unordered list. Now we need to setup our anchor link. Remember that to set an anchor we need to give our navigation an id attribute. Let's name our list 'mobilenav'... so add id="mobilenav" to the opening <ul> tag. The HTML on my navigation ul looks like this: <ul id="mobilenav"> <li><a href="#Do">What We Do</a></li> <li><a href="#Done">What We've Done</a></li> <li><a href="#Think">What We're Thinking</a></li> <li><a href="#Who">Who We Are</a></li> <li><a href="#Contact">Contact Us</a></li> </ul>

second part we have to do is to set the href or address in our hamburger button link. It should look like this: <a href="#mobilenav"><img src="images/hamburger1.png"></a> Differentiating Navigation Links From Other Links Our last piece of work on this navigation change is to make the hamburger button styled differently than the other links. The easiest way to do this is by using more specific CSS selectors to target all links inside of an unordered list. Let's change our CSS link selector from a { to ul a {. By adding the ul it tells the browser that it is to look for the first element —the unordered list— first, and then to look for the next element —the a— nested inside the first. Here's my new link CSS: ul a { background-color: rgb(173, 235, 235); display: block; padding: 25px; margin-bottom: 5px; text-decoration: none; text-align: center; }

CSS Classes

First, let's review what we know about CSS. We use CSS to style the look or the presentation of our HTML content. CSS can be applied by linking the HTML file to an external style sheet, adding the styles directly in the head of the HTML document, or (rarely) used inline right next to specific content. The syntax or structure of CSS looks like this: selector { property: value; } There are many different properties for the different selectors. You can gang or group selectors if they share the same stylistic qualities. Selectors can be made more specific by nesting one inside another. A special kind of selector is called an 'id selector' and uses a '#' to denote it. Just like an individual identity, an id is thought of as unique. It can only be assigned to one thing (on a particular HTML page). Now, we will look at how we can use CSS classes to style some of our text better. In the same way that Character and Paragraph Styles work in InDesign, CSS styles can be assigned to whole paragraphs <p> 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 it will look like this: .when { font-style: italic; color: darkblue; } You can style yours differently, of course. Now let's make one for the venue or where the event happens. We can call it 'where.' Lastly, let's make a class selector that differentiates the title and the kind of event. Here's the CSS .when { font-style: italic; color: darkblue; } .where { font-style: italic; color: green; } .event { font-family: "Franklin Gothic Book", sans-serif; font-style: italic; }

X10 HTML Developing Page Structure — 'place'

As usual, copy your 'place' folder to your desktop from your MyFiles. When you open Brackets, make sure to connect to this folder by choosing File > Open Folder.

Before We Dive In...

Since we are focusing on building this web site for mobile first, today we are going to use Safari as a tool to see our site in this mode. Open Safari and go to the top menu > Develop > choose 'Enter Responsive Design Mode.' Select iPhone6 as the view mode. This is how we will view our site through this week.

Header and Footer Elements

Today we will learn about and work with some new HTML tags. These add organizational structure and help with clarifying content. The terms 'header' and 'footer' are probably familiar to you already. Let's study them and then apply them to our page.

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

Header Element <header> </header>

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.

Open your HTML index page. Wrap the hamburger button and logo in a set of <header> </header> tags. Make sure to indent the logo and the hamburger button in your code so it's easy tell that those elements are nested inside your new header element. Here's how it should look: <header> <a href="#mobilenav"><img src="images/hamburger1.png"></a> <img src="images/xop-logo.png"> </header> 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.

Nested Elements

In the last exercise we found out that we could refer to elements inside other elements. We applied specificity when we nested the 'a' inside the 'ul' to create our ul a { selector. In effect we were saying... "You links that live inside an unordered list, be like this." We used a more specific description of our links to target just the links we wanted to style.

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. Let's go ahead and wrap our unordered list in a pair of <footer></footer> tags, like this: <footer> <ul id="mobilenav"> <li><a href="#Open">Opening Reception</a></li> <li><a href="#Carlsten">Carlsten Gallery Exhibition</a></li> <li><a href="#Dance">Dance Performance</a></li> <li><a href="#Agnes">Agnes Jones Exhibition</a></li> <li><a href="#Forum">Community Forum</a></li> <li><a href="#Research">Research Symposium</a></li> <li><a href="#Video">Video Screening</a></li> <li><a href="#Circle">Speakers Circle</a></li> <li><a href="#Celebrate">Closing Celebration</a></li> </ul> </footer>

Additional Footer Content

Another common piece of footer content is a copyright statement and symbol. Let's add one to our footer. After the unordered list, hit Enter to make room Add <p> to begin our copyright paragraph. Type: Copyright, add a space and then to get the copyright symbol we have to use a special bit of code. Type: © to create the © symbol; add a space and then Type: 2017 and then close the paragraph: </p>. Your code should look like this: </ul> <p>Copyright © 2017</p> </footer> Here's a challenge for you to try on your own. In your CSS (styles.css) add a nested selector to center your copyright paragraph.

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. Let's wrap nav tags around the unordered list that holds our navigation, like this: <footer> <nav> <ul id="mobilenav"> <li><a href="#Open">Opening Reception</a></li> ... <li><a href="#Celebrate">Closing Celebration</a></li> </ul> </nav> <p>Copyright © 2017</p> </footer>

The Section Element <section></section>

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. Let's add some sections. First, add one section for the overview at the beginning of the page, then we'll add one for the larger area that contains the events. Now, let's add some content to our page and make it another h2 tag for 'our sponsors'. Open the Word doc, 'Sponsor Copy' and copy and paste this copy into a third section. The HTML should look something like this: <section> <h2>Our Sponsors</h2> <p>We recognize and extend our thanks to the following community organizations and UW-Stevens Point academic units that... Once you have the content in the page, you'll need to create a class for the list of sponsors in your CSS. Include the following properties in your class: font-family: "Franklin Gothic Book", sans-serif; font-size: .8em; line-height: 125%; list-style: none; text-align: center; Reference the class on your HTML like this: <p class="sponsor"> CREATE Portage County</br> Stevens Point Sculpture Park</br>

Add Image Content

Replace your placeholder images with the images supplied, You will have to first work with these in Photoshop to Optimize them for web and size them appropriately. Name each image for the event and save in the best image format. Save these into your images folder. Go into your HTML and adjust the code to call the appropriate image.

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 — 'place'

Review | ID and Class Attributes

USING an ID 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. USING a CLASS 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.

How We Apply Them

To assign an id or unique identifier to an element in the HTML we do this: <ul id="mobilenav"> When we want to link to the specific id element it looks like this: <a href="#mobilenav"><img src="images/hamburger1.png"></a> To create a class in our CSS we write it like this: .sponsor { font-family: "Franklin Gothic Book", sans-serif; font-size: .8em; line-height: 125%; text-align: center; } To apply the class to an element in the HTML we do this: <p class="sponsor"> content here </p>

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. <section> <p> content here </p> </section>

Basic Positioning

In this exercise we'll learn some simple techniques for controlling our page layout with CSS commands. We'll wrap text around images and we'll learn how to create a very basic multi-column layout.

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.

Positioning Exercise

Content: Add the content (images and Word doc) provided for the Positioning exercise into your 'places' root folder. New Files: Create a new HTML file called 'positioning-test-page.html' and create a new CSS file and save it as 'styles-positioning.css'. Put the images into your images folder and add image-1 to your HTML file. Copy/paste the text from FIRST - Text for positioning Word doc into your new html file. Add <h2> and <p> tags to your heading and paragraph. Save and Live Preview your test page. In your CSS file create a selector for images, add the property float: and assign the value 'left'. Here's what the CSS looks like: img { float: left; } Save and Refresh your page in the browser. The text now occupies the space to the right of the image. This is how the float will affect specific content with this assigned property and value. It is pretty tight between that image and the text. Let's add a little bit of space between these two things. Let's add some margin on the right of our image. CSS >>> margin-right: 15px; Save and Refresh. Here's my CSS: img { float: left; margin-right: 15px; } Ah, yes, that looks much better. We now have a little bit of breathing room between our image and our text. Now let's add the second image and paragraph. Hit a Return after your paragraph in the HTML file, then add image-2.png. After that add the text from SECOND - Text for positioning Word doc and then take the time to Mark it up like the first paragraph with <h2> and <p> tags. I'd like to stop the new content from floating up into my first image float. There are a number of ways to tackle this, but today we'll use what's called a clear fix.

Micro Clear Fix

This is a bit of extra code we can add to any enclosing element (a.k.a. parent element) to let it know that once it hits the closing tag of that element, the floating stops. Right now our only parent element is our body tag, so we will need to add some new structure to help us. We will use <section></section> tags to wrap each "chunk" of content so that we can control it better. ADD SECTIONS: Add a <section> tag before your first image and close it with a </section> tag after the first paragraph. Do this for the second image and second paragraph. Each section encloses or controls the content that lives inside of it so is referred to as the parent. CREATE A CLASS: Now we tell these to "clear" the floats when the section ends. In order to do this we need to add a class to each section element. Add this: class="group" to each of the opening section tags: <section class="group"> Here's how your HTML should look: <section class="group"> <img src="images/image-1.png"> <h2>Paragraph 1: Example Heading</h2> <p> Lorem ipsum dolor sit amet. Zombie ipsum reversus ab viral inferno, nam rick grimes malum ...vocas, eum. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Videsne quam sit magna dissensio?</p> </section> Great, now we can use that class to apply the CSS micro-clear fix to those sections. Add a brand new CSS block and add this code: .group:after { content: ""; display: table; clear: both; } So that was some fancy CSS we just added that some very smart developer worked out, but it did seem to do the trick. You can simply copy and paste it to use anytime you want a parent element to "clear" the float. 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"> Save your HTML File ... Here's how your HTML should look: <section class="group" id="one"> <img src="images/image-1.png"> <h2>Paragraph 1: Example Heading</h2> <p> Lorem ipsum dolor sit amet. Zombie ipsum reversus ab viral inferno, nam rick grimes malum ...vocas, eum. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Videsne quam sit magna dissensio?</p> </section> Do the same for the second group. Now let's add some CSS to float that image in the second section right. Add a new CSS block with the selector: section#two img { Add: float: right; Save and Refresh >>> Here's my CSS: img { float: left; margin-right: 15px; } .group:after { content: ""; display: table; clear: both; } section#two img { float: right; } 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.

X11 App Website Work — "yourappname"

If you have not already done so, follow your Wireframe sketches to make digital wireframes for your homepage screens and create gray or other color boxes to be placeholders for the images you want to use. Use the screen sizes for mobile devices and larger desktop / laptop screens to guide the size of your dimensions for these.

Begin Populating Your Homepage | Placeholder Visuals

Put your placeholder images used in you digital wireframes into your images folder in your website root folder.

Begginning Text

Use your content inventory and information architecture to guide what textyou want placed on your homepage. Harvest this text from your files or type your new text. Decide on what copy (text) will be used as the headings (h1, h2, h3, h4) and what will be paragraph text. Do the mark up (add the HTML tags) on your text in Brackets. CUSTOM FONTS Often when designing a website you will want to use specific fonts. We will explore different methods for incorporating fonts into our webpages.

X12 Custom Fonts / Favicon


Truth About Fonts

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)

Using Google Fonts (Hosted)

Google Fonts is a great resource for free hosted web-fonts. It contains a huge and growing number of fonts to choose from and their service makes it really easy for designers to link to them using just a simple attached stylesheet. Let's try it. Open a New HTML page. Let's add in a heading and the paragraph below. <h1>Wonderful, Just, Wonderful</h1> <p>When working with typefaces and fonts, it is always good to test your fonts for use in both headings and body text. Some fonts are only designed to be seen large as in headings where others are specially designed to work well in smaller more dense text like paragraphs. </p> Now, let's find suitable web fonts to use.  Navigate to Google Fonts. Scroll the page and you'll see tons of fonts to choose from. You can filter the kind of face you want using the check boxes on the side. Each typeface is displayed in its own area offering additional content on rollover and many options for previewing the font styles, the specimen and characters. You can even try typing in new text.  By clicking the red plus sign, you add it to your collection and it will appear in the 'drawer' at the bottom of the page. Let's choose Josefin Slab and Open Sans. When you open the collection drawer it shows you the text to add for linking to the stylesheet. Let's add that to the head of your test html doc, now. Find and try out a new heading and a new paragraph font.  It's fine to play around and test out different typefaces, though remember to use an appropriate bodytext face for your website text.

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.

Let's try it.

Use one of the images to create a favicon for the test web page. Place your favicon.ico into your root folder.   >> Do not put it in your images folder. In the head of your test HTML page type: <link rel="icon" href="favicon.ico" type="image/x-icon"> Now create a favicon for your app website.

X13 Commenting Your Code / Box Sizing + Column Grid

Using Comments

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: /* LAYOUT & GRID */ 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. DO THIS >>> There can be many categories, but for now, let's add the following five (5) comment areas to our styles.css: General, Layout & Grid, Typography, Images, Links

Box-Sizing Property

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.). See Figure 1. 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. DO THIS >>> Now, add this box-sizing property to your own CSS.

Column Grids — Control Your Layout

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. The 12-column Grid can be visualized as in Figure 2 below.

The 12-Column Grid

So, a 1-column layout uses all 12 units, a 2-column layout would use 6 + 6 units, a 3-column layout would use 4 + 4 + 4 units, 4-column layout would use 3 + 3 + 3 + 3, etc.

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.

Defining the Column Sizes — In Your 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. DO THIS >>> Reference the included screenshots of CSS as a guide and add the classes listed.

Each Content Area — In Your HTML

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. DO THIS >>> Reference the included screenshots of HTML and add the divs for rows and columns.

Floating + Padding

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. We'll add some nifty CSS that clears this up. .row::after { content: ""; clear: both; display: table; } Now take some time to style more of your content with CSS... and develop your Landing Page.