What are some things you
hope to accomplish this
semester (outside this
Why you should want
to succeed in this class:
“Graphic Design” is not media-specific
Build on your existing skills
Difficulty of learning these skills outside of a
More jobs, better pay
It really is fun and empowering to code!
How you will succeed this class:
Take it week-by-week
Be an active learner: don’t just copy and paste, ask
lots of questions, make sure you understand the
underlying concepts, and be open to changing your
assumptions about web design and coding
If you miss classes, be serious about contacting me
(or classmates) and catching up on your work
Allow yourself time to get frustrated
and start over on your assignments
The web is just one service of the internet.
It is system of interlinked hypertext documents
accessed via the Internet. With a web browser,
one can view web pages that may contain text,
images, videos, and other multimedia, and
navigate between them via hyperlinks.
User types a URL (Uniform Resource Locator)
into a browser, e.g., www.amazon.com
The URL is sent to a DNS (Domain Name Service),
which translates the URL into an IP address, e.g.,
The correct server is found through the IP
address, which is sent an HTTP request (get), and
returns the requested html pages, images, etc,
back to the browser
The doctype is not actually a tag,
but a declaration, telling the browser
what kind of html you are using. The
doctype above declares HTML 5.
The <html> element defines
the whole HTML document.
The <head> element contains special
elements that instruct the browser
where to find stylesheets, provide meta
info, and more.
The <body> element contains
the document content (what is shown
inside the browser window).
The use of our first three tags (html, head and body),
introduces and important concept: Nesting, which is when
tags “wrap” other tags. When you create markup, you should
indicate nesting by indenting the nested tags with 2 spaces
(preferred) or a tab.
Where did those text styles come from?
All browsers have what is called a
“client stylesheet” that applies formatting
to your html elements, such as text size, font,
color, margins, line-height, and much more.
Your custom css overrides
some of these default styles.
But it is ugly!
Before we begin learning how to add
visual design to our pages, it is crucial
that we understand how to create a
foundation of solid structural design.
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.