Graphic Design Production II Blog

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.

X02 Organizing + Naming for Web/HTML Basics

In this sereis of exercises we'll go through some key organizational practices you need to know when working with web, explore the web's structure and learn the basic rules of working with HTML.

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)

X04 CSS Links - connections

Learning to make page(s).

X05 HTML/CSS: images, caption & background images

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 of color of an HTML element, we can use CSS to set an images as the background of an element. 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.

X07 the Box Model - spaces & Spacing, Sizing, Type on Screen

Now that we have a grasp of how HTML and CSS 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.'

X08 Navigation + Unordered List

In this exercise we will begin to work with some design issues related to a mobile or small device screen environment.

X09 Touch Points, Hit Points & Pain Pionts

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

X10 HTML Developing Page Structure

We will learn about and work with some new HTML tags. These add organizational structure and help with clarifying content. The term 'header' and 'footer' are prabably familiar to your already. Let's study them!

X11 Custom 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.

X12 Favicon

Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when your 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.

X13 Commenting Your Code/Box Sizing + Column Grid

Project

Bonus Coming's Soon