You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Getting Started with JavaScript and Web Technologies
Today, we'll be working to understand how to create a web page using the technologies of the web browser, namely HTML, CSS, and (mostly) JavaScript.
Reference Resources
Arguably the best resource for documentation on the "web platform" (HTML, CSS, and JavaScript) is found on the Mozilla Developer Network. Here are the technologies we will be using:
Hypertext Markup Language (HTML)
HTML defines the structure and contents of a web page. Use HTML tags to display content on a web page.
All of these exercises can be done with a simple text editor and a web browser, and are designed to teach programming fundamentals and the basic concepts of web development. Go at your own pace!
Exercise 1: Hello HTML!
On your computer, create a new folder. Inside that folder, create a file called workshop.html. Inside of it, create a basic HTML document with an <html> tag and a <body> tag. Inside the <body>, sing the <h1> tag.
Exercise 2: Pretty CSS is Pretty
In the file you just created, create a <style> tag. Inside this tag, create a CSS rule for <h1> tags such that they should all have red text.
Exercise 3: Your First JavaScript
In workshop.html, create a <script> tag. This will contain JavaScript code that will run when your web page is loaded. Write a script that will add "Hello from JavaScript!" to the bottom of the page.
HINT: the JavaScript function for writing to the page is document.write('Hello from JavaScript!');
Exercise 4: Variables, Statements, and Object Literals
Modify your script to create five variables - a String, a Number, a Boolean, an Array, and an Object. Use document.write to prin the contents of all of them to the page.
Exercise 5: Do The Math (Operators)
Create two number variables. Multiply them together, and print out the result to the page with document.write.
Exercise 6: Conditionals
Create a Boolean variable. If it is false, print out "it's false". If it's true, print out "it's true". Change the variable from true, to false, to true again to test that it works!
Exercise 7: While Loop
Create a number variable. While it is less than 50, print out the current value of the variable, then add one to the variable.
Exercise 8: For Loop
Create an array of names. For each element of the array, print out the name.
Exercise 9: Functions
Create a function that accepts one argument, a number. Add five to that number and return the result.
Exercise 10: DOM Event Handling
Create a function that displays an alert dialogue using the alert() function that is built in to JavaScript. Assign it to be executed when the <h1> tag is clicked.
