Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Web Design — Week 1, Dip your t...

lou suSi
December 31, 2012
Education
1
75

Introduction to Web Design — Week 1, Dip your toes in

In Spring of 2011, I taught an 8 week introductory course to web design at Brookline Adult and Community Education. This is the presentation deck from week 1 of the course.

lou suSi

December 31, 2012
Tweet

More Decks by lou suSi

See All by lou suSi
Behavior Modes for UX
loususi
1
130
ux mindshare
loususi
2
470
immobilized: how the push for Mobile First confounds user-centered design
loususi
0
110
Introduction to Web Design — Week 2, Ankledeep
loususi
2
71
Introduction to Web Design — Week 3, Kneedeep
loususi
2
62
Introduction to Web Design — Week 4, Waistedeep
loususi
1
63
Introduction to Web Design — Week 3.5, Rescue
loususi
1
44
UX Roundtable Review — immobilized: how the push for Mobile First confounds user-centered design
loususi
0
130

Other Decks in Education

See All in Education
The Gender Gap in the Technology Field and Efforts to Address It
codeforeveryone
0
210
小学生にスクラムを試してみた件～中学受検までの100週間の舞台裏～
ukky86
0
340
脳卒中になってしまった　さあ、どうする
japanstrokeassociation
0
650
オープンソース防災教育ARアプリの開発と地域防災での活用
nro2daisuke
0
170
認知情報科学科_キャリアデザイン_大学院の紹介
yuyakurodou
0
130
勉強する必要ある？
mineo_matsuya
2
1.6k
20241004_Microsoft認定資格のFundamentals全部取ってみた
ponponmikankan
2
330
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.7k
勉強したらどうなるの？
mineo_matsuya
10
6.5k
Chapitre_1_-__L_atmosphère_et_la_vie_-_Partie_2.pdf
bernhardsvt
0
200
コンセプトシェアハウス講演資料
uchinomasahiro
0
390
小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル案/curriculum model
codeforeveryone
2
2.3k

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Embracing the Ebb and Flow
colly
84
4.5k
Building Adaptive Systems
keathley
38
2.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Visualization
eitanlees
145
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Testing 201, or: Great Expectations
jmmastey
38
7.1k

Transcript

  1. introduction to WEB DESIGN brookline adult and community education SPRING

    2012 taught by lou suSi

  2. what we’ll cover HTML, CSS and some light JavaScript in

    Dreamweaver and Visual Design in Photoshop Designing for the Web as presented in a Browser

  3. what we won’t cover in this class Flash or any

    ‘Multimedia’ Production Designing for All Devices

  4. my goals

  5. week 1 dip your toes in

  6. life in a browser

  7. anatomy of a browser

  8. None

  9. html { hypertext markup language } <!DOCTYPE html PUBLIC "-//W3C//DTD

    XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>. lou suSi . DESIGN . artist, designer, musician + performer .</title> <meta name="description" content="artist, design, musician + performer living + working on the North Shore of Massachusetts"> <meta name="keywords" content="lou, susi, lou susi, loususi, bxos, ... <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:light,regular,bold' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> the visible part of the website all goes right here </body> </html> xhtml1-transitional.dtd"> ... of Massachusetts”> ... design, designer, fun"> ... type=”text/css”> ... type=”text/css”>

  10. but that’s not what we’re covering here tonight

  11. html { hypertext markup language } <!DOCTYPE html PUBLIC "-//W3C//DTD

    XHTML 1.0 Transitional//EN" <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>. lou suSi . DESIGN . artist, designer, musician + performer .</title> <meta name="description" content="artist, design, musician + performer living + working on the North Shore of Massachusetts"> <meta name="keywords" content="lou, susi, lou susi, loususi, bxos, ... <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:light,regular,bold' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> </head> <body> the visible part of the website all goes right here </body> </html> xhtml1-transitional.dtd"> ... of Massachusetts”> ... design, designer, fun"> ... type=”text/css”> ... type=”text/css”>

  12. tags { and the anatomy of } there are really

    2 kinds of tags in this world this kind <p>a brand new website</p> and that kind <img src="images/schwittr.jpg" width="183" height="191">

  13. tags { and the anatomy of } most tags look

    like this, though <p>a brand new website</p> i always think of ripples when i think of tags
  14. None
  15. None

  16. homework