Week 1 | DM-UY 2193/B

Jan 25
Setup & Intros

Join our Slack channel
TTL (at the end of every class)
Sign up for GitHub (Student Developer Pack)
Download a text editor of your choice. Sublime Text and Brackets are two great choices we will discuss in class.
Pick a website. What is the goal of this site? How does the design reflect that goal? How is the website "responsive"?
- Post a link and a short paragraph about it to the HW channel on Slack with hashtag #wk1a.
- Tip: Use Chrome Developer Tools or Quirktools Screenfly to see what the website looks like on different size screens
- Bonus: Use Internet Archive's Wayback Machine to show how the design has changed over time.
Email link to your course website (due Feb 1)

I highly recommend that you get your own web server space from an internet service provider. I recommend siteground.com or dreamhost.com.
Alternatively, you can receive web server space from IDM's Technology Manager, Elton Kwok, MAGNET 883. Email [email protected] to set up your web server space
IDM's FTP server info: http://sites.bxmc.poly.edu (Use active mode to connect)

Text Editors

Intro to HTML

HTML - creates structure for the web, describes the structure of a page
Structure: hierarchy, what’s important, meaning, how should it be interpreted by a person (or a computer)
Elements - describe the structure of a page
Element Tags - Elements typically have opening and closing tags, and you can put content in between the tags.
```
<tag>content goes here</tag>
```
Attributes - Elements have atributes like attribute="value"
All HTML pages have the following elements: html, head, title, and body

 <img src="path" alt="description of image">
        <!--comment: images have no closing tag -->

NYU provides free server space. Email Elton [email protected] to set up an appointment and mention a few times you are available to meet with him in Magnet 883. IDM’s FTP server info: http://sites.bxmc.poly.edu (Use active mode)
Purchase your own domain name + server space through Dreamhost (instructions). Other options include Siteground (instructions).

Choose Your Own Adventure: Create a website that tells an interactive story using a few HTML pages.

Start by imagining the story—what is a story you can tell with just a few pages? It could be an original story, an interactive folk tale, a game, or a draft of any website you want to build that "tells a story" in a more abstract sense, like a fan page or a personal portfolio.
Use paper to write/sketch your ideas before you start coding. What content will be shared across all the pages? What elements will be shared across each page, but with different content? How does a user advance from one page to the next? Is there a beginning, end, or home page?
Create a template.html file that has elements that will be shared across all the pages. Pick elements that describe the type of content that will go on each page using empty placeholder html elements. You can add more details with comments.
Use some of the elements we discussed in class, like: a (required), h1, p, img, and/or lists (ul/ol + li).
Don't worry about how it looks just yet, we'll cover style next week.
Upload your project to a server using (S)FTP.
To submit the assignment, post a link to Slack HW channel with #wk1b. Bonus points if you include a photo of your initial paper sketches and a template.html file.

Do an HTML5 tutorial of your choice to refresh concepts from class and learn more about HTML. Some suggestions:
- HTML & CSS Jon Duckett ch1-6 *ebook available thru NYU’s Library website
- Dive Into HTML5
- W3 Schools
- Learn to code HTML5 at learn.shayhowe
Complete your first learning log based on the html tutorial(s) you chose.