Jan 30

Discuss your homework.

(Please do check out some markdown docs for what works on this site. Notice that there's a link to examples on each edit page here.)

From what I've seen with this weeks' work, we should probably start with some HTML & CSS .

Big picture :

A URL like "mit.edu" is looked up using DNS to get an IP address like 23.54.208.128.
Your browser sends an HTTP "GET" request for a page at a URL, using TCP/IP packets.
A web server responds by sending a file like content.html and (typically) another like styles.css.
Your browser combines the html & css into a single web page for you to see.
Clicking on links does another HTTP GET and shows a new page.

Let's make sure we understand the HTML and CSS language(s) as a starting point.

1st : browse , read , and/or study the stuff below as needed.

HTML at MDN
interneting is hard - a friendly web dev tutorial
CSS Zen Garden - nice css styling examples
open source web design - website templates

2nd : Practice by choosing an oswd template, understanding it, and adopt it to create a collection of web pages with images, text, navigation, in some sort of layout. Use only HTML and CSS. Edit with a text editor or IDE of your choice.

3rd : Deploy in a folder that you create in the playground where we can all see it, and come to (the next few) classes ready to discuss.

In particular make sure that you understand

and can use both

sandboxes like jsfiddle and codepen
browser debug utilities like the firefox toolbox

Optional : work with someone else ... and make something (at least) twice as big and twice as cool.

Here's an example of mine from long ago. (Don't worry about the javascript stuff ... yet.)

And I've also attached two short files for us to look at as a starting point. (You can append ?html on these pages to see the color coded source for html pages.)

Some questions to get us going :

What are you going to use to edit/create a .html and .css file?
How do you connect the two together? (Or more generally, what the options for where the CSS can go?)
Could you do this work on a jupyter hub if you wanted to? (Answer: yes. Second question: how?)
How do images in web pages work? Where do you put the files?
How do paths work in URLs in HREF tags?