Web Fundamentals

Taught by Alexandra Ackerman
Code and assignments available at https://github.com/newschool-webfundamentals
Presentations available at newschool-webfundamentals.github.io

Agenda

• HTML & CSS recap
• Introduction to programming (JavaScript)
• I'll show you how to integrate JS within a page
• Dissect code and write some JS!
• Discuss homework

HTML recap

• What is HTML?
• What is the difference between the head and the body of a document?

CSS recap

• What is CSS and how does it relate to HTML?
• How do I add CSS to a webpage?

Where does JavaScript fit in?

• Google "NSA Files Decoded"
• Explore the page and describe what parts may be using JavaScript

High-level JavaScript

JavaScript is a programming language that enables you to create dynamically updating content, control multimedia, animate images.

HTML and CSS are not programming languages.

JavaScript is.

How does JavaScript make pages more interactive?

• Access HTML
• Modify HTML or CSS
• React to user events (hover, click)
• Recipe-like programming rules

We'll be using a library called jQuery to perform many of these actions

Examples of events we can listen to using JS

• When a user hovers over an image
• When a user clicks a button
• When an amount of time has passed

Recipes are how we bring accessing, modifying, and events together.

• When a user hovers over an image, add a paragraph elements with caption text
• When a user clicks on a button, open a new window
• After every second, add 5 to the total amount and display the result

We have a name for these procedures - they're called scripts. A script is a series of instructions that a computer can follow to achieve a goal.

Program each step

Work to achieve the goal

As a user, when I hover over a person I want to see information about them.

Let's add JavaScript to a webpage together...

Build a website together

Replicate a final project

Try to replicate this project using materialize, do not include the social links or map.