GD with GDDEMOLAND BookType + Code Chapter 4 of 4JavaScript basics

Chapter 4

JavaScript basics

Let’s bring our websites to life with JavaScript!

Select a demo

4.1JavaScript can change HTML 4.2JavaScript is interactive 4.3JavaScript can do math 4.4JavaScript can use logic 4.5JavaScript can run on its own 4.6JavaScript can change CSS 4.7JavaScript can make art 4.8JavaScript can make music 4.9JavaScript can make tools 4.10What are we doing today? 4.11Variables and operators 4.12Changing HTML and CSS 4.13Storing code in functions 4.14Running functions 4.15Functions with arguments 4.16Diagnosing bugs 4.17Diagnosing bugs (fixed) 4.18Exercise: type specimen

What Is DEMOLAND?

Coding Cheatsheet

Start a new file

More from GD with GD

Current bookType + Code

CourseType + Code

Websites are full of text, a.k.a. “type.” This type is special because it’s made out of code! In this course, you’ll discover how to bring type to life using code.

Introduction to HTML and CSS

Let’s make websites!

1.1HTML 1.2HTML Elements 1.3Block vs. Inline Elements 1.4HTML Typesetting 1.5EXERCISE: HTML Elements 1.6CSS 1.7Styling Text 1.8Inline CSS 1.9Classes 1.10Inheritence 1.11EXERCISE: Computational Poetry 1.12Links 1.13Multiple Pages 1.14Images 1.15Custom Fonts 1.16EXERCISE: Choose Your Own Adventure

2.1EXERCISE: Short story 2.2Short story example (for fun)2.3Box model 2.4Margin collapse 2.5Box sizing 2.6Block vs. inline elements 2.7“Good” typesetting 2.8Absolute positioning 2.9EXERCISE: Drawing with CSS 2.10Variable fonts 2.11Hover and active states 2.12Keyframed animations 2.13Media queries 2.14EXERCISE: Buttons 2.15EXERCISE: Animations

3.1Choose your own adventure 3.2Exercise: adventure time!3.3HTML template 3.4Good digital typesetting 3.5Good digital typesetting with flexbox 3.6Flexbox 3.7A shifting wall of text 3.8A single line of text 3.9Horizontally scrolling story 3.10A navbar 3.11Centered content 3.12CSS grid 3.13Grid areas 3.14Portfolio example 3.15Exercise: digital museum

JavaScript basics

Let’s bring our websites to life with JavaScript!

4.1JavaScript can change HTML 4.2JavaScript is interactive 4.3JavaScript can do math 4.4JavaScript can use logic 4.5JavaScript can run on its own 4.6JavaScript can change CSS 4.7JavaScript can make art 4.8JavaScript can make music 4.9JavaScript can make tools 4.10What are we doing today?4.11Variables and operators 4.12Changing HTML and CSS 4.13Storing code in functions 4.14Running functions 4.15Functions with arguments 4.16Diagnosing bugs 4.17Diagnosing bugs (fixed)4.18Exercise: type specimen