Open for Enrollment

You can also start immediately after joining!
Join Now

Would you like to enroll?

Enrollment for this course has closed. But you can enroll in a future offering (please select)

Enrollment has closed

Go at your own pace
7 Sessions / 6 hours of work per session
Premium membership $20/month (Preview session 1 free)
Included w/ premium membership ($20/month)
Skill Level
Video Transcripts
English, Spanish; Castilian, Chinese, Portuguese
Javascript, Animation, Interaction

Not available for purchase in India

Open for Enrollment

Web Coding Fundamentals: HTML, CSS and Javascript

Open for Enrollment
You can also start immediately after joining!

Would you like to enroll?

Enrollment for this course has closed. But you can enroll in a future offering (please select)

Enrollment has closed

Go at your own pace
7 Sessions / 6 hours of work per session
Premium membership $20/month (Preview session 1 free)
Included w/ premium membership ($20/month)
Skill Level
Video Transcripts
English, Spanish; Castilian, Chinese, Portuguese
Javascript, Animation, Interaction

Not available for purchase in India

Course Description

This course is an introduction to using the Web for artistic creation. It is a "literacy" course designed to introduce you to the various core components that make the web such a powerful platform for art – art that is not only visual, but sonic, physical, interactive, and social. It will give you the basics (in terms of knowledge and code templates) to make things that run in browsers using:

Animation with graphics and sound,

Interaction with graphics and sound,

Just as you don't need to be a mechanic to drive a car, you do not need to wait until you are an expert programmer before creating work for the web.

There is a vast array of tools for making things for the web. Making things for the web is a process of constant learning and discovery – not one of knowing everything first and then making. It is also a process of ripping and mashing rather than writing everything from scratch. Getting comfortable with this process is the first step, and is the approach we take in this introductory course.

By the end of this course, you will be making things with the real-world core components that give the web its potential for art, but you will have only just begun. More importantly, you will understand what you have to learn more about to accomplish your artistic objectives, be able to recognize things and be able to evaluate their value to you, and have a command of the terminology you need to search for and discuss your needs and interests with the huge community of people on the net with experience (and code chunks) to share.

Why JavaScript and the Web?

There are some excellent special-purpose coding platforms for artists out there such as Processing for interactive graphics, Chuck or supercollider for synthesis, graphical languages such as Max/MSP or PD for interactive sound and graphics. These platforms have extensive communities of people to share experience and code with. However, these special-purpose platforms are not standard web building and design tools.

What they offer is a direct path to achieving a specific artistic objective, but it is at the expense of a more general applicability of language, tools, and skills that would allow you to interact with people in the web-based creative industries. They do a great job at "hiding" things you may not want to worry about as an artist, but dealing with a bit of the scaffolding is necessary if the web is the space you have chosen to embark on for developing your work.

This course will take you through the basics you need to develop artistic content for the web using standard web tools – JavaScript, html, and several fundamental libraries. It will point you to exactly what concerns an artist most – making creative content. It will guide you and teach you what you can ignore for now in order to focus on artistic content, but will not prevent you from integrating with the vast world of the web and learning and using some of the scaffolding if and when you should need it later.

Our basic approach to achieving this goal is to "throw you in to the deep end" with a set of code templates for meeting artistic goals – interactive graphical mobile applications using physical sensors, for example, and explaining simple things you can do immediately to explore and implement your own ideas.

The advantages to JavaScript:

• It is the language embedded in all browsers today.

• It is general purpose, and makes no assumptions that limit your artistic objectives.

• You can deploy all your work on the web for others to experience.

• You only need to learn one language for writing both client and server code.

• A *lot* of other people use it that you can share and communicate with.

• It is a marketable skill.

Thus, we are not restricting you to special-purpose tools that don't generalize well to the web – but that doesn't mean you will have to write a bunch of code not related to your artistic vision. The "template" technique used in this course is a "middle way" that gets you up and going fast, but provides a path to future growth and connection to the real world.

You will learn to recognize patterns of code that you need not know how to write. This will provide you with a basic understanding of how things work in the real world (let's call it literacy). This will help you find, recognize, and use chunks of code that others share, and it will allow you to focus on code directly relevant to artistic content.

This will give you the foundations you need to go on learning on your own by exploring the unstructured wealth of material available out there on the web to pillage and modify for your own work. That is how real web programmers work all the time, anyway!


This course is in adaptive mode and is open for enrollment. Learn more about adaptive courses here.

Session 1: Intro To The Web Landscape (June 25, 2024)
This session will cover set up, HTML & CSS, how to structure a document, as well as help and support resources.
12 lessons
1. Course Overview
2. Resources, Tools, & Code Templates
3. What is a Browser?
4. Hello HTML!
5. HTML Attributes 1
6. HTML Attributes 2
7. Rip, Mash, Modify
8. The Importance of Modularity
9. CSS: Styling Fundamentals
10. Advanced Styling: Different Techniques
11. Even More Advanced Styling (Premium Exclusive)
12. Session 1 Summary
Session 2: Javascript Basics (July 2, 2024)
This session will introduce operators, variables, strings, objects, and functions; course template directory and file structures, how to use console.log, communicating with the DOM, and interaction.
11 lessons
1. Introduction to JavaScript (Premium Exclusive)
2. Programming in JavaScript (Premium Exclusive)
3. Computational Thinking: 7 Key Elements (Premium Exclusive)
4. Introduction to Functions (Premium Exclusive)
5. Programming with Functions (Premium Exclusive)
6. Introduction to Objects (Premium Exclusive)
7. Programming with Objects (Premium Exclusive)
8. Introduction to the Document Object (Premium Exclusive)
9. Programming with the DOM (Premium Exclusive)
10. Communicating with the DOM (Premium Exclusive)
11. Summary/Homework Overview (Premium Exclusive)
Session 3: Color, Events, Interactivity (July 9, 2024)
This session will introduce how to use color and basic interactivity such as events and callbacks, mouse interaction, and sliders and buttons.
6 lessons
1. Introduction to Color (Premium Exclusive)
2. Programming with Color (Premium Exclusive)
3. Introduction to Event-based Interaction (Premium Exclusive)
4. Programming with Events (Premium Exclusive)
5. Debugging with Browser Tools (Premium Exclusive)
6. Session 3 Summary (Premium Exclusive)
Session 4: Scalar Vector Graphics (July 16, 2024)
In this session we will discuss paths, curves, event listeners, functions and arguments, as well as animation (with Raphael).
7 lessons
1. The Event Object (Premium Exclusive)
2. Coding with the Event Object (Premium Exclusive)
3. Introduction to Graphics and the Raphael Library (Premium Exclusive)
4. Coding Graphics with Raphael (Premium Exclusive)
5. Introduction to Conditionals (Premium Exclusive)
6. Coding with Conditionals (Premium Exclusive)
7. Session 4 Summary (Premium Exclusive)
Session 5: Computational Thinking Concept Review (July 23, 2024)
This session will review key computational thinking concepts, and the put them to use in a series of DIY tasks and talk-throughs.
8 lessons
1. Object and Function Review (Premium Exclusive)
2. Task Set 1 Introduction (Premium Exclusive)
3. Task Set 1 Talk-Through (Premium Exclusive)
4. Task Set 2 Introduction (Premium Exclusive)
5. Task Set 2 Talk-Through (Premium Exclusive)
6. Task Set 3 Introduction (Premium Exclusive)
7. Task Set 3 Talk-Through (Premium Exclusive)
8. Session 5 Summary (Premium Exclusive)
Session 6: Timer Animation (July 30, 2024)
In this session we will further our work with shapes and colors, interaction, and animation including timers and callbacks.
4 lessons
1. Timers, Animation, Random Numbers (Premium Exclusive)
2. Designing Code for a Game (Premium Exclusive)
3. Programming the Game (Premium Exclusive)
4. Summary (Premium Exclusive)
Session 7: Lists, Loops, & Interactive Animation (August 6, 2024)
In the final session we will look at periodic callback timers, per-frame drawing functions, animation, and calculating motion.
3 lessons
1. Array Fundamentals (Premium Exclusive)
2. While Loops (Premium Exclusive)
3. Loops, Arrays, and Graphics (Premium Exclusive)
Show off your Certificate of Accomplishment

Verify Your Achievements
Whenever you complete a course as a premium member, you can earn a verified Certificate of Accomplishment. These certificates are proof that you completed an online course on our platform.

Easily Shareable
Using its unique link, you can share your certificate with everyone from future employers and schools, to friends, family, and colleagues. It's the perfect tool to help you land that new job or promotion, apply to college, or simply share your achievements with the world.

Learning Outcomes

Below you will find an overview of the Learning Outcomes you will achieve as you complete this course.

Instructors And Guests
What You Need to Take This Course
  • Equipment:
    • PC with internet connection
    • Smart phone or mobile device (eg Android or iOS) is used to run the final example of the course.
  • Software:
    • Sublime text editor
    • Chrome Browser

Other text editors or browsers are okay, but the instructor will use these which are free, commonly used by developers, and run on all platforms.

Additional Information

Please note: Taking part in a Kadenze course as a Premium Member, does not affirm that the student has been enrolled or accepted for enrollment by National University of Singapore. 

Peer Assessment Code of Conduct: Part of what makes Kadenze a great place to learn is our community of students. While you are completing your Peer Assessments, we ask that you help us maintain the quality of our community. Please:

  • Be Polite. Show your fellow students courtesy. No one wants to feel attacked - ever. For this reason, insults, condescension, or abuse will not be tolerated.
  • Show Respect. Kadenze is a global community. Our students are from many different cultures and backgrounds. Please be patient, kind, and open-minded when discussing topics such as race, religion, gender, sexual orientation, or other potentially controversial subjects.
  • Post Appropriate Content. We believe that expression is a human right and we would never censor our students. With that in mind, please be sensitive of what you post in a Peer Assessment. Only post content where and when it is appropriate to do so.

Please understand that posts which violate this Code of Conduct harm our community and may be deleted or made invisible to other students by course moderators. Students who repeatedly break these rules may be removed from the course and/or may lose access to Kadenze.

Students with Disabilities: Students who have documented disabilities and who want to request accommodations should refer to the student help article via the Kadenze support center.  Kadenze is committed to making sure that our site is accessible to everyone. Configure your accessibility settings in your Kadenze Account Settings.