Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3....

60
Web Dev Workshop With Sage and Dylan

Transcript of Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3....

Page 1: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Web Dev Workshop

With Sage and Dylan

Page 2: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 3: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 5: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 6: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites

2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 7: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Requirements● Does not assume prior knowledge of

site visitor● Relative links to all assignments● You are welcome to use a template

Grading Criteria

● Introduction● Aesthetically Pleasing● Documentation● Prototypes

Page 8: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Where can I see my site? http://web.stanford.edu/class/cs147/projects/mystudio/myproject

lowercasenospaces

Page 9: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

How do I edit my site? 1. Open terminal2. ssh -y [email protected] 3. Enter Stanford password 4. cd /afs/ir/class/cs147/WWW/projects/mystudio/myproject

OR Use OpenAFS/Fetch

Page 10: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Recommendations● Download Fetch or

OpenAFS to directly edit files

● Use a template!

Page 11: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites

2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 12: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 13: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Google “free html templates”

Page 14: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 15: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 16: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 17: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Download one

Page 18: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 19: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

3

Modify some stuff

Page 20: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

3

Modify some stuff

Page 21: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

3

Modify some stuff

Page 22: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 23: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Roadmap1. Example sites2. Setting up your website3. Importing a template4. Cooking with HTML (the basics)

Page 24: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Cooking with HTML (the basics)1. HTML2. CSS3. JavaScript

Page 25: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 26: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 27: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 28: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Cooking with HTML (the basics)1. HTML2. CSS3. JavaScript

Page 29: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 30: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

HTML

Page 31: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

HTML

CSS

Page 32: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

HTML

CSS

JS

Page 33: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

HTML

CSS

JS

Page 34: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 35: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 36: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 37: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 38: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 39: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 40: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

QUESTIONS?

G → www.w3schools.com

Page 41: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Cooking with HTML (the basics)1. HTML

2. CSS3. JavaScript

Page 42: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 43: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 44: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 45: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 46: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 47: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 48: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 49: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 50: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 51: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 52: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 53: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

QUESTIONS?

G → www.w3schools.com

Page 54: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

Cooking with HTML (the basics)1. HTML2. CSS3. JavaScript

Page 55: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 56: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 57: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)
Page 58: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

QUESTIONS?

G → www.w3schools.com

Page 59: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)

QUESTIONS?

OR → Stanford’s CS142

Page 60: Web Dev Workshop - Stanford UniversityRoadmap 1. Example sites 2. Setting up your website 3. Importing a template 4. Cooking with HTML (the basics)