1-1Course Introduction

Learning Objectives

1. Write basic HTML, CSS, and JavaScript in Codepen, using an element, a style rule, and a console.log statement.
2. Select and link to at least three works from the Critical Web Design Index, writing about what makes each one compelling and effective.
3. Collaboratively define “critical design” and articulate what separates it from ordinary design.

Welcome to DIG 245!

• Explore the site
• About the book
• About your instructor
• Check out the welcome page

👉 Hello, World! using Codepen

ExcerptExercise 1.1.1

• Code playgrounds like codepen.io/pen or Github Codespaces make it easy to test and share HTML, CSS, and Javascript in a “web environment.”
• HTML-1 then Hello, World! with Codepen

Note

Codepen recently added new features that complicate their interface. Use this link to open a simple pen without the bells and whistles → codepen.io/pen

1. In Chrome, go to codepen.io/pen
2. Click “Start Coding.” You will see an area where you can type HTML, CSS, and Javascript, as well as a preview window containing the outcome of your work.
3. Type the following code into the HTML section. Codepen will automatically refresh the preview window to show your updates. HTML is the language that structures the content of web pages.

<h1>Hello, World!</h1>

4. CSS is the language that controls the presentation of web pages. Add this CSS style rule.

h1 {
  color: hotpink;
}

5. Type the following code into the Javascript section. Javascript is the language used to control the behavior of web pages. You will need to click the console button to see the output from console.log().

console.log("Hello, World!");

6. We will be using codepen.io throughout this book. Feel free to continue experimenting or look through their examples. It might also be a good idea to create a free account to save your work.

👉 Explore the Critical Web Design Index

ExcerptPrompt 1.1

Individual — Browse the Critical Web Design Index. Select three projects that represent your interests, aspirations, and passions. Add an <a> tag with the href attribute to the Codepen above to create a link to the projects you selected. Remember that nested elements must be closed in the reverse order in which they are opened. Write: What makes each work stand out? Why is it compelling? What design choices make it effective?

Group — What makes design “critical”? Partners, introduce yourself and share examples. Debrief: What do these pieces have in common that separates them from ordinary design? Build a working definition together. Share in class and return to it at the end of the semester.

📌 Install Tools

ExcerptExercise 0.2.1

Follow Module 0.2 to set up your environment. Create the following accounts: GitHub, Codepen, Figma. Next, install VS Code and Google Chrome.

📌 Homework

• 📚 0.0 Introduction (1–6)
• 📚 Module 0.1 How This Book Is Organized (6–10)
• 📚 Module 0.2 Technical Requirements (11–15)
• 📚 Module 0.3 Conventions & Resources (16–18)
• Take the day 1 survey