CSC360: Lecture 1 (Introduction: HTML, CSS, and Javascript)

Course: CSC360 (User Interface Architecture and Development)

Instructor: James Riely

• Adminstrative information
• Class overview:

Course homepage: http://fpl.cs.depaul.edu/jriely/360/

• Lecture slides may not be available before the class.
• Lecture slides may change after class.

https://piazza.com/depaul/spring2016/csc360/home

You must subscribe to the course discussion forum on google groups. Do it as soon as possible.

There are separate forums for the CSC300 and CSC402

http://groups.google.com/group/csc360spring2016

• Don't troll.
• If your reply is intended for one person, please use Reply rather than Reply All.
• Please don't send thank you messages to the group.

The discussion forum is an extension our time in class. This is particularly great for students that miss the live lecture. If you are watching the class online, you should write down any questions that arise, including the time from the recording for reference. Then send the list of questions to me, and I will post a reply to the group.

I will also use Teamviewer for communication. With teamviewer, you can show me your computer screen while we talk over the phone.

DePaul's academic integrity policy

I will drop two lowest quizzes/homeworks.

Chicago has lots of meetups you may want to check out

Check out the code demo sites linked from the course homepage.

Take a look at the following links.

Reading

HTML element reference

CSS Selectors

Chrome DevTools This site does not function with Safari

Java development 2.0: JavaScript for Java developers

A Survey of the JavaScript Programming Language

Responsive web design patterns This site does not function with Safari

Angular2 Quickstart

Do a little research on responsive design. Use your favorite searc engine.

Create a simple web page with three sections:

• Your name
• Your goal Company/Job/Grad school for after graduation
• A paragraph describing your favorite UI design (This should be an physical appliance, app or website, not an operating system)

The three sections should be left-to-right for wide screens and top-to-bottom for narrow screens.

You should not use fixed size containers for the text. Instead, you should allow the containers to vary in size and the text to reflow inside the containers.

You can use a CSS library. Include the library when you hand in your code (or use a link to a content delivery network). You will hand in a zip file containing you webpage and any auxiliary files.

I may show these in class, so keep it clean!

Viewing the DOM/documents using developer tools: It's a tree!

Messing around with CSS and HTML using liveweave

• div and span
• CSS selectors: class, id, etc
• selectors choose positions within the DOM tree: compare xpath and jQuery selectors

Messing around responsive frameworks using codeply (bootstrap, foundation)

Messing around javascript using jsbin

Javascript:

console.log ("hi");
document.body.innerHTML = "<p>pizza</p>";

let x = document.getElementById ("x");
console.log (x);
x.innerHTML = "hi";

function f () {
  console.log ("pizza");
  let y = document.getElementById ("y");
  y.innerHTML = "Pushed";
}

HTML:

<p class="a" id="x">
  hello
</p>
<p class="a">
  hello
</p>
<button id="y" onclick="f()">Push me</button>

Install Node.js and npm. Get the Stable version. Not the LTS version.

Use npm -g to install tools globally.

Use npm (without -g) to install tools for a single project.

Do the angular2 5 Min Quickstart

Start the angular2 Tour of Heroes tutorial

If you are on windows, you may want to install a decent command line, such as cmder.

Decent command line tools are coming to windows, but it won't happen until summer 2016 at the earliest.

Revised: 2008/03/17 13:01