Skip to content

outline.md

Latest commit

 

History

History
83 lines (62 loc) · 3.1 KB

outline.md

File metadata and controls

83 lines (62 loc) · 3.1 KB

Making your First Website

  1. Title page & intro

  2. First Steps: Text Editor, Command Line, File Paths

    You can review the previous tutorial.

  3. What is a web page?

    • It is a set of files that your browser downloads and then displays
    • it is "at" a url
    • it comes from another computer (typically a server)
    • it is made out of HTML, CSS, & JavaScript
    • It can be an interactive document (like Facebook)
    • Show the source code of a web page (command option U)
    • show the console (command option I)

  4. What is a web site?

    • a web page or more.
    • sometimes it's just a bunch of different web pages //@Aizhan: how is this different from the previous point?
    • sometimes it is a server application that generates web pages on the fly (like Facebook), which would be called a web app

  5. Let's look at a web site

    • make a folder (start with existing and then edit) //@Aizhan: are you trying to make them the website or you are giving them one to look at?
    • make an html file //@Aizhan: if you are giving them one, they don't need to create html file. You will give them one.
    • open it
    • look at the different files in the folder
    • change a few things and see the differences
    • a webpage is just one or more documents

  6. The pieces

    • Show the source code of a web page (command option U)
    • show the console (command option I)
    • HTML is for content
    • CSS is for style
    • JavaScript adds fancy interactions and logic
    • It's just a folder of files, and the file paths are relative
    • These are standards, not software. It's like a building code, and different browsers do a better or worse job than other browsers.

  7. HTML

    • HTML is a tree with nodes
    • each node is made with pointy brackets. It can have contents and attributes. It might be made of an opening and closing tag, or just one tag. remember you can stick HTML iside of HTML. But some tags have no text-based contents (like an img tag)
    • there are only a small set of commonly used tags. You can memorize most of them, but you can look them up any time. They are well documented
      • Show the tags
    • HTML5 vs. HTML4 is like International Building Code 1999 vs IBC 2001
    • We are writing HTML5 because that is the most recent spec. There's very few differences. We aren't using any of the obscure features that browsers aren't ready to support.

  8. CSS

    • CSS has a simple, consistent syntax: selector, then a set of properties and values.
    • CSS can be hard. Especially if you want a fancy layout. It is not intuitive. But colors and fonts are easy! :)
    • here are some really common css properties
    • here is a great tutorial on css selectors
    • You can enter colors in a number of ways
    • there are special units (px, em, rem)

  9. Time to play

    • have snippet examples of setting colors or fonts
    • have some examples of images or other common html elements

  10. Go live

    • just put your files in the right folder
    • go to the url
    • how to do this on command line