Meetings
111 DPC (Donald P. Corbett), 10-11:50pm Mondays and Wednesdays. Colored discs below indicate in-person lessons, by team color; a computer icon indicates a remote, synchronous lesson.
Instructor: Jon Ippolito, 581-4477, http://jonippolito.net.
Office hours by appointment; please sign up via Google Calendar (see links in Slack #reference channel).
Grading
25% weekly assignments, 25% final project, 12% badges, 12% quizzes, 12% tests, and 12% exit tickets/participation.
Participation is measured by quality and quantity of online and oral comments, as well as attempts to get help and help others.
Symbols
◆ ◆ In-person day for Red or Blue team
In-person exercise for Red or Blue team
✏️ Quiz or other Google Forms assignment.
CodePen assignment.
👆 Interactive assignment that you don't turn in.
Slack assignment
🗣 Discussion (in person or Zoom)
👨🏫 Live teacher presentation
📖 Reading
🍿 Viewing
🏅 Badge
🤖 AI practice
Required hardware and software
To accommodate collaborative learning, you're required to get a free CodePen account and install additional software as described in the first few lessons.
This class requires a laptop for in-person collaboration. The University Bookstore offers laptops that meet New Media requirements; a recent MacBook Pro or MacBook Air will do.
Staying healthy
Your instructor will ask you to stand up periodically to improve your health, and encourages you to mask if that makes you more comfortable.
Standard policies
Generative AI such as ChatGPT, Gemini, and Claude is transforming workplaces from education to industry. In general, your instructor grants you permission to use them for brainstorming, research, and debugging. As indicated in the syllabus, you will also be encouraged to use these tools for parts of certain assignments but not for every task. (You may also opt-out of using them without explaining why, in which case the instructor will give you a parallel assignment.)
In return, we ask that you:
💡 Remember that your not stuck with what generative AI returns as the first result; incremental prompting in which you request improvements and revisions usually generates better results.
⚠️ You will still be expected to put in significant effort on some aspect; for example, you might try a task with AI and write a detailed review of where it succeeded and failed.
🙅 Do not use AI to generate comments on other students' posts, which can degrade the personal connections over ideas and experiences that helps connect us in a digital space.
We also encourage adding your feelings, good or bad, about the experience in your posts. For more on the promise and perils of generative AI, see Learning With AI.
-
Complete the three-minute survey on basics of Web coding in the #reference Slack channel so your instructor can tell how prepared you are for this material and adjust accordingly.
Jobs in Orono related to Web applications
Quizzes can be retaken as many times as you want before midterm review.
Body Metaphor 1
Skeleton (HTML tags = DOM = "elements")
Muscle (JavaScript)
Clothes (CSS)
Spaces v. tabs--your choice.
Be generous with horizontal space, but leave no vertical spaces.
HTML
<html>
<body>
<div>
Here's my first block of text.
</div>
<div>
Here's my second block of text.
</div>
</body>
</html>
<html>
<body>
<div>
<p>I <strong>hate</strong> following rules!</p>
</div>
</body>
</html>
CSS
#grumpy {
color: red ;
}
.cat {
width: 100px ;
}
#news {
width: 100%;
.headline {
font-size: 4em ;
}
}
#news {
width: 100%
}
#news .headline {
font-size: 4em ;
}
Tools
<h4>My name is Jon and my favorite food is waffles.</h4>
<h1>🧇</h1>
<p id="total">Today I have eaten </p>
body {
font-family: verdana ;
text-align: center ;
background-color: orange ; /* You can use most color names. */
color: white ;
}
h1 {
font-size: 5em ;
}
document.querySelector( "#total" ).innerHTML += 16 ;
🎩 To use an emoji in HTML, you can use your operating system defaults (Edit > Emoji & Symbols on MacOS) or type in the HTML character code (like &23F0;).
⚠️ Not the same as Visual Studio! (memes)
<body>
<!-- Add headers and paragraphs appropriate for a web page about __________ designed to be visually unappealing and intentionally unattractive. -->
</body>
⛑️ If Copilot is not making suggestions, try:
Other optional VS code extensions
Did you find a cool one? Share it in the Slack #random channel!
Pass the quizzes in this interactive tutorial. The video player will offer you chances to review the material based on your success with the quizzes. When you get to the end, authenticate your badge by submitting your University of Maine Gmail account at the prompt (@maine.edu). You can often find a written version linked from the screencast.
FYI creating an HTML document is a little different in VS Code than in the code editor shown in this video. In VS Code, you create a file with a .html extension by clicking on the + at the top of your Explorer sidebar and then type ! and press Tab to get the boilerplate. Otherwise the guidance in this tutorial still applies.
Via YouTube or via a downloadable 220MB MPEG-4 or 23MB WebM file.
Watch the 5-minute video if you need an introduction to this courseware.
Link in the #reference Slack channel.
In this assignment you'll use GitHub Copilot in VS Code to clean up your ugly web page, then in CodePen you'll try to improve its appearance by simplifying and harmonizing the CSS styles.
🆚 In VS Code
🤖 Move all the styles into a CSS stylesheet in the head of this document. Be sure to use at least one of each of the following:
* A tag selector;
* A class selector;
* An id selector.
(If necessary, click on the name of the file at the top of the chat.)
🖊 In CodePen
For this class you will need a Web domain where you can post client-side HTML, JavaScript, and CSS stylesheets for us to review in class. (You should already have one from NMD 100 or 104.) More in the Intro to Web Applications.
You can download any FTP client that works for you; your instructor will use Cyberduck in class demos (avoid the extra software advertised on that site). FileZilla is another free, cross-platform FTP client.
ℹ️ Sample recommendations for formatting your code.
Body Metaphor
Skeleton (HTML tags = DOM = "elements")
Muscle (JavaScript)
Clothes (CSS)
Parts of speech metaphor
Nouns (HTML)
Verbs (JavaScript)
Adjectives (CSS)
How to show or hide file extensions in Mac OS X
How to Make Windows Show File Extensions
Your FTP login credentials were emailed to you when you signed up for your WordPress hosting account.
You can also find your FTP account information in your hosting account’s cPanel dashboard.
💡 To add a new line without submitting your prompt, type shift-return.
🤖 Suggest any improvements in indenting of the current document for make it more readable and to clarify parent-child relationships.
You'll need to make a free Codecademy account for this.
Wendy Seltzer, 2017 Digital Humanities Week, University of Maine
Featuring monkey selfies, hip hop sampling, and Howard Stern's interviews with Donald Trump
Julia McCoy explains both sides of the legal battle over whether AI-generated content is fair use.
Matt Wolfe breaks down the 2025 US Copyright Office id="$1" for AI-generated content.
What If Someone Infringes Your Copyright?
Is it Fair Use or Infringement?
Due by class time
On Codecademy CSS Setup and Selectors (link in Slack)
Due by class time
After viewing some of the videos in this lesson's reading, complete this quiz on how not to get sued for violating someone's intellectual property and whether AI is theft. (See link in Slack's #reference channel.) Don't worry if you don't know the answer. We will review the answers in class.
Due by class time
This poll only counts toward your participation grade but we will use the results in class. Please indicate your opinion based on what you've learned from class readings/viewings (link in #reference).
Can AI be ethically trained on human creations? Is there a difference between training AI on code versus writing, images, or music?
Prompt the class chatbot for practice with "CSS Selectors and Visual Rules."
Required for preparations and final project: Firefox (or equivalent)
Not required: Internet Explorer/Edge/Opera
Parallels Desktop or VMWare (both $$) lets Mac users virtualize Windows.
https://maryrodriguez.com/nmd345/bunny.jpg
Try this first instead of Cyberduck:
Try this first instead of Cyberduck:
If you use your web host primarily for WordPress and a public URL fails to load in browser due to WordPress redirect, ask your instructor to show you how to add this to your .htaccess file
RewriteRule ^(folder)($|/) – [L]
CSS Visual Rules (1-10), link in #reference
Questions based on "Is the AI an Artist?", link in #reference. Required: 0:00-34:00; optional 34:00-52:47 (end)
Come to class prepared to describe one or more ideas for a project you can develop in this class using HTML, CSS, and JavaScript. Your idea can be personal (eg, a portfolio) or from another class (eg, a capstone website); if the latter, you'll be expected to do enough work to satisfy both classes. You need not post anything for this assignment.
Research the CSS name you chose and post a brief, one-sentence definition to #css-name. Memorize this!
Then, in your own words, add a new paragraph to the same post (option-return in Slack) giving an example of how that CSS technique might be used in your class project.
If you think you didn't do well, retake any of the previous quizzes to get a better grade. (See links in Slack's #reference channel.)
Pairs compare their CSS names and brainstorm how to use their partner's name in their project. Then each defines the other's name for the class.
Prompt the class chatbot for practice with "CSS Colors."
Smallest effective difference
👎 Hex
👎 RGB
👍 HSL
👍 okLCH
🎗 "Less Chaotic Hues" or "Let's Chuck HSL"
⚠️ Technically you can define oklch with %s for l and c, but you have to use decimals (numbers without the % sign) in calculations.
⚠️ Unless you set c = 0, you cannot get pure white even if you set l = 1.
🤔 Why is not every color combination available?
:root {
/* Set your CSS variables here. */
--medium: blue ;
--accent: lime ;
--card-width: 500px ;
/* You can also use "calc" to calculate dimensions. */
/* ⚠️ Leave space around operators like + and - */
--leftover-width = calc( 100% - card-width ) ;
}
card {
width: var(--card-width) ;
background-color: var(--medium) ;
border: var(--accent) solid 1px ;
margin-left: var(--leftover-width) ;
}
Fork this template and follow the steps in the CSS code to make a pleasing color scheme with a limited palette. You can find color names at Tinyurl.com/css-colors. Save your Pen and post the URL to #limited-palette.
color: oklch(from rgb(210 60% 50%) l c h);
Alternative: if you prefer not to use oklch, you can use hsl with this formula:
color: hsl(from rgb(210 60% 50%) h s l);
CSS Box Model (1-16) and CSS Display and Positioning (1-12)
Retype the code in sample page in a Pen to create a multicolumn Web page with absolute positioning. (You'll need to separate the CSS into its own pane.)
Then tweak the colors or dimensions to your liking. For now, you can use HSL or CSS color names like lightskyblue, mediumpurple, etc. You're not making a masterpiece, just a template to work with.
Post the URL for your Pen to #positioning.
Pairs compare their CSS names and brainstorm how to use their partner's name in their project. Then each defines the other's name for the class.
Prompt the class chatbot for practice with "Layout with CSS Flexbox."
padding, border, margin
☹️ By default, adding padding and borders expands a div beyond the width declared in CSS. That sucks!
🥪 Sandwich versus 🌮 taco exercise
🙂 To force them to stay inside the width, add box-sizing: border-box to the div's CSS.
Absolute versus relative positioning.
Best for left and right margins. Keep top and bottom as pixel values.
Every student forks their two-column absolute positioned Pen ( or forks this instructor version and converts it into a relatively positioned page in class:
Post the Pen URL to #absolute-to-relative.
Start work on next assignment.
You will use the flex property more than its subdivisions flex-grow, flex-shrink, or flex-basis.
-
Fork this simple HTML layout and follow the instructions in the comments to convert it to a two-column layout using CSS Flex. Save your Pen and post the URL to #flex.
CSS Flex (1-9, but not including flex-grow, flex-shrink, or flex-basis)
UPDATE: Find the Pen created in the last class with two relatively positioned columns and make these changes:
<div id="columns">
<div id="left-column">
...
</div>
<div id="right-column">
...
</div>
</div>
#columns {
display: flex ;
width: 500px ;
}
#columns {
...
gap: 1em ;
margin-block: 1em ;
}
⚠️ A tag needs no # or . before the selector.
body {
display: flex ;
height: 100vh ;
justify-content: center ;
align-items: center ;
}
Save your Pen and post the URL to #relative-to-flex.
Prompt the class chatbot for practice with "CSS Interface Design for Links and Buttons."
❗️ Postponed in spring 2026
☹️ Inline
<div style="background-color: teal">
Here's some cool text!
</div>
😐 Stylesheet in the head
<style>
div {
background-color: teal ;
</div>
}
</style>
🙂 External stylesheet
<link rel="stylesheet" href="portfolio-styles.css" />
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
...
</html>
⚠️ If you opened the files in the src folder, this line will be missing and your website will break.
https://maryrodriguez.com/nmd345/index.html
Start work on next assignment.
Prompt the class chatbot for practice with "CSS Interface Design for Links and Buttons."
CSS Grid Essentials (1-6)
Find the Pen created in the last class with columns built with flexbox, and make these changes:
body {
display: grid ;
height: 100vh ;
justify-content: center ;
align-items: center ;
}
#columns {
display: grid ;
...
}
#columns {
display: grid ;
grid-template-columns: 1fr 1fr ;
...
}
#columns {
display: grid ;
grid-template-columns: 2fr 3fr ;
...
}
So far this is not much better than flex, but grid has much more to offer. For now, save your Pen and post the URL to #flex-to-grid.
Pairs compare their CSS names and brainstorm how to use their partner's name in their project. Then each defines the other's name for the class.
Prompt the class chatbot for practice with "Layout with CSS Grid."
Realtime Colors (see palettes in context)
Fontpair (see headlines and body typography, under Pairings)
Utopia (handy clamp settings for responsive type)
CSS grid helps you lay out a web page by writing down a visual pattern of areas. The goal of this exercise is not to make a beautiful web page, but to give you practice with this technique.
<div id="logo">
logo
</div>
#logo {
background-color: lavender ;
grid-area: logo ;
}
grid-template:
". logo logo . ."
". navigation description description ."
". . description description ."
". links links links ."
;
grid-template:
". logo logo . ." 10vh
". navigation description description ." 30vh
". . description description ." 10vh
". links links links ." 10vh
;
🎗 50vh means 50% of the available viewport height.
grid-template:
". logo logo . ." 10vh
". navigation description description ." 30vh
". . description description ." 10vh
". links links links ." 10vh
/1fr 2fr 2fr 2fr 1fr
;
⚠️ Don't forget the leading slash /.
🎩 It may take some fussing with tabs, but lining up the columns will make your grid template more readable.
grid-template:
". links links links ." 10vh
". logo logo . ." 10vh
". navigation description description ." 30vh
". . description description ." 10vh
/1fr 2fr 2fr 2fr 1fr
;
The safest way to import fonts is to upload them to your web host as described in the "Import Web Fonts" tutorial. For this exercise, however, you can use a CSS @import statement with an online font service as follows:
<link ...>
<div id="logo">
logo
</div>
#logo {
font-family: 'Bonheur Royale', cursive ;
}
Post your Pen with its four custom fonts to #custom-grid-and-fonts.
⚠️ Using too many fonts can clutter your design--this is just an exercise 😅
Advanced CSS Grid (1-2
📅 Due the day before class at midnight
In the class Google Sheet (link in #reference), find the tab at bottom for this lesson and add your name to the left side.
Then visit the associated URL and look at all of the designs. For Style Stage, these will correspond to your portion of the alphabet. for CSS Garden, they will be visible in the right-hand sidebar (you can click the arrows to see thumbnails).
Pick your favorite and post a screenshot with a brief explanation of what makes it good web design to #css-garden.
📅 Due by class time
Vote for your three favorite CSS Garden designs by other students by adding thumbs-up reaction emojis (👍) in #css-garden.
Pairs compare their CSS names and brainstorm how to use their partner's name in their project. Then each defines the other's name for the class.
Descriptive tags act like divs but can make your code more readable and accessible
Legacy formats that can be useful to tweak parts of your layout.
#container {
...
div {
display: grid;
place-items: center;
}
}
<div id="watermark">
Watermark
</div>
#watermark {
background-color: red;
opacity: .5 ;
}
#watermark {
background-color: red;
opacity: .5;
grid-row: 1 / 3;
grid-column: 1 / 3;
}
⚠️ The grid-row and grid-column properties can be confusing because the second number should often be 1 higher than expected. This is because the numbered boundaries are between the cells, not on them.
Experiment with different numbers to see the results.
<div id="first-cell">
<a href="https://www.google.com" target="_blank">First</a>
</div>
🐞 If your watermark overlaps this link, you can't click on it!
#watermark {
...
pointer-events: none ;
}
-
Read the CSS Ninja instructions, and imagine how you might style your own version of the CSS Ninja page. Remember that you can only change the CSS, not the HTML.
You do not need to use the palette you chose for your class project; this is a chance to show off your creativity using any of the techniques you've learned so far.
💡 It may be helpful to minimize the JS pane and choose a layout with the HTML and CSS code at left and preview at right. You can do this via buttons at upper right.
Post the URL for your CSS Ninja page to #css-ninja-colors. You'll get a chance to revise your CSS the following class, so come prepared to present any last-minute bugs you encountered.
Ramon + Pedro, The Grey Video
nav {
...
a {
background-color: lavender ;
}
}
button {
display: grid;
place-items: center;
}
⚠️ This is a neat trick, but it can be overkill if you just want to center a single line of text. In that case, you can use text-align: center instead.
#watermark {
...
pointer-events: none ;
}
<!-- This label tells screen readers what the navigation is for. -->
<nav aria-label="main navigation">
...
</nav>
<!-- This attribute hides the watermark from screen readers. -->
<div id="watermark" aria-hidden="true">
</div>
grid-template:
". logo logo . ." 10vh
". navigation description description ." 30vh
". . description description ." 10vh
". links links links ." 10vh
/1fr 2fr 2fr 2fr 1fr
;
#wide-cell {
/* This will span THREE cells.
grid-column-start: 1; grid-column-end: 4;
/* You can combine these on a single line: */
grid-column: 1 / 4;
}
#wide-cell {
/* This will span ALL cells to the end of the grid. */
grid-column-start: 1; grid-column-end: -1;
/* You can combine these on a single line: */
grid-column: 1 / -1;
}
⚠️ The -1 technique is a quick way to stretch content across the entire grid, but it can be less flexible than the other techniques if you later want to add more rows or columns.
Take a screenshot of the furthest screen you can reach by the end of class, and post the URL for your screenshot to #grid-garden.
grid-template:
body {
background-color: darkslategray;
color: saddlebrown;
margin: 0;
display: grid;
grid-template:
"hero" 20vh
"navigation" 10vh
"description" 1fr
"projects" 20vh
"footer" 1fr
/ 1fr;
}
grid-template:
". . hero hero ." 10vh
". navigation description description ." 30vh
". navigation description description ." 10vh
". projects projects projects ." 10vh
". footer footer footer ." 10vh
/1fr 2fr 2fr 2fr 1fr
;
Visit the Pen you made for the last class and add images via the background-image property. Remember that you can only change the CSS, not the HTML.
💡 It may be helpful to minimize the JS pane and choose a layout with the HTML and CSS code at left and preview at right. You can do this via buttons at upper right.
#hero {
background-image: url( https://maryrodriguez.com/nmd345/cat.jpg ) ;
background-size: cover ;
}
(You can also use the background-position property to move the image to one side, or the background-repeat property to prevent it from tiling.)
💡 To keep your Web design from looking boxy, consider adding transparency, partial borders, gradients, rounded corners, and/or other features explained in the tutorial. Don't forget you can also alter any of these properties:
🛠 Troubleshooting
Post the URL for your CSS Ninja page to #css-ninja-images. You'll get a chance to revise your CSS in class, so come prepared to present any last-minute bugs you encountered.
Ramon + Pedro, The Grey Video
section {
❌ background-color: lightblue;
✅ background-image: linear-gradient( lightblue, hsl(210, 60%, 70%) );
}
background-image: linear-gradient( to right, lightblue, hsl(210, 60%, 70%) );
background-image: radial-gradient( circle, white, hsl(210, 40%, 70%) );
#hero {
background: linear-gradient(
to right,
lightblue 0%,
skyblue 40%,
hsl(210, 60%, 65%) 70%,
hsl(210, 60%, 55%) 100%
);
}
.card {
background: radial-gradient(
circle,
white 0%,
lightblue 35%,
hsl(210, 50%, 70%) 65%,
steelblue 100%
);
}
In pairs, choose which version of this exercise you want to do, and then share your results with the class at the end.
gap or padding.background-color or opacity.Suggest 5 small CSS changes that would make this layout less boxy and more airy. Use only properties we know: background-color, color, font-size, font-family, grid-template, gap, padding, opacity, or gradients.
Prompt the Webster class chatbot in #reference to help you study for the CSS concepts you feel shakiest on, eg:
Non-AI alternative: Review the CSS concepts you feel shakiest on by re-doing the Codecademy lessons in #reference marked with "🤖❌".
Try your hand at the ungraded CSS review quiz in the Slack #reference channel.
Make any final adjustments to your CSS Ninja page and post the URL to #css-ninja-final.
Retake the ungraded CSS review quiz in the Slack #reference channel.
Prompt the Webster class chatbot in #reference to help you study for the CSS concepts you feel shakiest on, eg:
Intro to JS, Variables, and Conditional Statements
Prompt the class chatbot for practice with "Introduction to Variables," "Advanced Variables," and "Conditionals."
Feature
P5js
JavaScript
Preparation
setup, createCanvas
document for HTML, app for Adobe
Start
draw
onload
Units
30
30px, 30% (CSS)
Edges
stroke
border (CSS)
Colors
fill, background
color, background-color (CSS)
Shapes
rect, ellipse
div, canvas
Illustrator and Photoshop
Web inspector
Bookmarklets
Greasemonkey
Browser add-ons
Michael Mandiberg, The Real Costs
h4>target="_blank">Shaved BieberComplete the course evaluation you'll find in #reference. (There is no Slack submission for this anonymous survey.)
Functions and Scope
Fork the querySelector exercise Pen and fill in the blanks in the JS pane to let users change the style when the button is pressed. Don't forget that class names need a period (.) before them and ids need a hashtag (#). Post the URL for your pen to #queryselector.
Research the JavaScript name you chose and post a brief, one-sentence definition to #js-name. Memorize this!
Then, in your own words, add a new paragraph to the same post (option-return in Slack) giving an example of how that JavaScript technique might be used in your class project.
Watch at least five of the tutorials in the Creative Networks student showcase. These screencasts are designed to give you a sense of a past student project as well as an HTML, CSS, or JavaScript technique required to make it.
Case sensitivity
White space
Line breaks
Optional semicolons
Comments
Loose-typed variables
Local v. global variables
HTML Tags and DOM elements (like variables, but preset)
methods (like functions, but preset)
Operators
Arguments
Returning answers
Prompt the class chatbot for practice with "Functions" and "Scope."
Here are some universal CSS font families:
// Set backgrounds to a dark color.
let allDivs = document.querySelectorAll("div") ;
allDivs.forEach( div => div.style.backgroundColor = "dimgray" ) ;
// Change all paragraphs to a light color.
let allPs = document.querySelectorAll("p") ;
allPs.forEach( p => p.style.color = "white" ) ;
/* Change some other aspect of the page to your liking. */
allPs.forEach( p => p.style.fontFamily = "Comic Sans MS" ) ;
document.querySelector( "#top-headline" ).style.fontSize = "3em" ;
⚠️ Simpler web sites will be easier to adjust.
⚠️ Stick to universal web fonts for this exercise.
Begin work on this assignment due Monday.
Arrays + Loops, link in #reference
Fork the instructor's Indent JavaScript Pen and maximize the JS pane. Follow the instructions in the Pen to format this code properly. Then take a screenshot of your final product (just the JS pane) and post it to #indent-js.
Working with the Pen you made last time as a fork of the querySelector exercise, add some JavaScript that changes several items on the page at once (eg, with the same tag or the same class). You'll use querySelectorAll to create an array of items that match your criterion, and then loop through those with .forEach to change their color, display, or other properties. Post the URL for your pen (it can be the same as last time) to #querySelectorAll.
Skeleton (DOM=tags)
Muscle (JavaScript)
Skin ( CSS )
Luggage ( external sources )
External events ( event )
Senses ( listeners)
Nouns (DOM )
Verbs (JavaScript)
Adjectives ( CSS )
Adverbs (event listeners )
⚠️ CodePen will wait for HTML to load before running JavaScript, but a normal web page requires onload.
Prompt the class chatbot for practice with "Arrays" and "Loops."
body {
display: grid;
place-items: center;
height: 100vh;
}
div {
// Optional:
width: 80vw;
}
By id.
by variable name.
// Change one tag.
document.querySelector("#rover").style=...
document.querySelector("#fido").className=...
document.querySelector("#buster").innerHTML=...
// Change many tags.
document.querySelectorAll("div").forEach( div => ... )
document.querySelectorAll(".dog").forEach( div => ... )
// Find all list items in a menu.
document.querySelector("#menu").querySelectorAll("li").forEach( item => ...)
// Or
let menuDiv = document.querySelector("#menu") ;
menuDiv.querySelectorAll("li").forEach( item => ...)
// Old school methods: no leading # or .!
document.getElementById("rover")
document.getElementsByClassName("dog")
document.getElementsByTagName("div")
console.log()
alert()
confirm()
prompt()
innerHTML = "new content"
location = "home.html"
Selected students complete these two JavaScript style assignments using your JavaScript (and maybe CSS) names.
// Change the color of one item.
_________ _ _________("#grumpy") _ _________ _ _________ = "red" ;
// Change the color of several items.
_________ _ _____________(".cat") _ _________(
{
catDiv ___ catDiv _ _________ _ _________ = "red" ;
}
);
Begin work on "Loop through an Array" assignment.
-
Iterators, link in #reference
For this assignment, you'll create a menu and use JavaScript to populate it with items from an array. Refer to Codecademy lessons or this related Pen for syntax, but choose your own topic. Examples:
⛑ You'll use these, in this order:
⚠️ You should not need these:
Post your Pen URL to #loop-through-array.
Pairs compare their JS names and brainstorm how to use their partner's name in their project. Then each defines the other's name for the class.
Prompt the class chatbot for practice with "Iterators."
/* Create CSS variables. */
:root {
--background: skyblue ;
--spacing: 1em ;
}
/* Use them in your CSS selectors. */
body {
background-color: var(--background) ;
}
div {
color: var(--background) ;
margin-bottom: var(--spacing) ;
}
/* Change the value of a CSS variable in JavaScript. */
document.documentElement.style.setProperty("--background", "turquoise") ;
Working in pairs, brainstorm how you might use the Single-page Navigation tutorial technique in your final project. (You can earn the badge now, or just review the video on its own or read the transcript for reference.) Then begin work on both of your Pens due in the next class..
After earning the badge for the tutorial above, you should have a good sense of how to use JavaScript to show and hide different sections of a web page. This is a common technique for creating click-based navigation without needing to load a new page. For example, you might use this technique to create a tabbed interface that lets users switch between different views of your project, or to create a "read more" button that expands a section of text when clicked.
Imagine a section of your final project that would benefit from this kind of navigation, and create or modify a web page to include it. If you're struggling to think of a use for this technique in your project, you can use this sample HTML from the tutorial.)
When you're done, post the url for your updated launch page (it can be the same as before) to the #single-page-navigation channel.
/* This turns all link tags blue. */
a {
color: blue ;
}
/* This turns only links inside a <nav> menu red. */
a {
color: blue ;
}
nav {
a {
color: red ;
}
}
/* Here's an older way to nest selectors. */
nav a {
color: red ;
}
/* This shifts a tag left or down. */
transform: translate( 100px, 200px );
/* This animates any change. */
transition: all 2s ease-in-out;
/* This pseudoselector applies styles only on mouseover. */
_____:hover {
...
}
screen.width, screen.height
You can set a tag's CSS positions and dimensions in JavaScript.
document.querySelector("#rocket").style.left = "10px" ; // Set a specific left position.
document.querySelector("#rocket").style.top = "300px" ; // Set a specific top position.
Setting the CSS translate() function in JavaScript is the easiest way to shift a tag by a certain amount.
document.querySelector("#rocket").style.transform = "translate( 10px, 30px )" ; // Set a specific left and top displacement.
⚠️ You can't access positions and dimensions in JavaScript that have been set in CSS.
<!-- ❌ The wrong way. -->
<style>
#rocket {
left: 100px ;
}
</style>
<script>
alert( document.querySelector("#rocket").style.left ) // Undefined!
</script>
⚠️ You can access positions and dimensions if you set them in JavaScript instead.
<!-- ✅ The right way. -->
<script>
document.querySelector("#rocket").style.left = "300px" ;
alert( document.querySelector("#rocket").style.left ) // 300px!
</script>
⚠️ Make sure there's no space between the selector and :hover.
🎩 You don't need an onload listener because Codepen will automatically wait for the HTML to load before running the JavaScript.
....forEach(
villainDiv => { }
) ;
....forEach(
villainDiv => {
villainDiv.onmouseover = () => villainDiv.style.__________ = "___________"
}
) ;
Be sure to camelCase any CSS properties with hyphens and quote the value you are setting it to, eg:
...backgroundColor = "red";
...transform = "translate(100px, 200px)";
🧐 Notice that:
Based on the methods shown in the tutorial, modify your previous Single-Page Navigation code to add a smooth CSS transition when the user views a new content block. Note that CSS transitions don't work with changing display to none or block, so you have to make a different change to the content div when the user clicks on a link. Options include:
Post the URL (can be the same as your old version) to #transition.
As an alternative to the transition assignment above, you may add a drop-down navigation menu to your Single-page navigation page (or another site of your choosing) using only CSS. When you're done, post the url to #transition. (Sample)
Note: you must earn both badges, but need only do one #transition assignment.
event.clientX, event.clientY
Example: PointerPointer
// Can only read inline styles. Returns string ending in px:
event.currentTarget.style.left
// Can get dynamic position after a movie. Returns integer:
event.currentTarget.offsetLeft
JavaScript console
console.log is your friend
Close quotes, parentheses, and braces
Incremental changes
Version your code
Process of elimination: Comment out sections
Cross-check browsers frequently
Consider a Mac-to-Windows emulator
⚠️ You will get a CORS (Cross-Origin Resource Sharing) error if you try to run this in CodePen or on your hard drive. So you must upload the files to your web host to test them.
Create a temporary folder for this exercise on your computer (no capitals or spaces in the name!). Then, in a code editor on your computer (not CodePen):
async function getWeather() { // "async" means pull another file from the server.
// "await" means wait till this is finished before proceeding.
let response = await fetch("weather.txt");
// "response.text()" turns network traffic into readable text.
let data = await response.text()
document.querySelector("#report").innerHTML = data ;
}
Using the method explained in the tutorial, revise your div navigation page so that one or more areas of content not on the page when it initially loads are loaded later once the user clicks somewhere. When choosing which content to host remotely, consider which data are likely to slow the initial page load (eg, large images or videos) or which content needs to be updated frequently (such as a news headline). As shown in the tutorial, store these as media and associated HTML snippets on your server, and load the new HTML content to your page using fetch and innerHTML.
⚠️ This technique won't work with CodePen If you want to work from an existing Pen, you can export a zipped version and then use the files you find in the dist folder. (You can rename that folder to anything you want.)
If you are able to transfer a file to your web host and view it online, just upload all the files for this assignment to a folder on your host and post the URL to #fetch.
If you can’t, DM your instructor the .html and .txt files from your hard drive, and he will try to post and run them on his own server.
⚠️ You cannot use an arrow function for a constructor.
<head>
<script src="https://js.puter.com/v2/"></script>
<script id="fetch_ai_image_demo">
const addImage = () => {
let promptContent = window.prompt("Enter a prompt for the AI image:");
puter.ai.txt2img(promptContent).then(img => document.body.appendChild(img));
};
</script>
</head>
<body>
<button onclick="addImage()">Generate AI Image</button>
</body>
Decide what images the Internet needs more of (cats! robots! Harambe!), then:
DivObject = function() {
this.div = document.createElement( "div" ) ;
document.body.appendChild( this.div ) ;
this.div.className = "favorite" ;
}
🤔 Notice that the divs don't appear on the screen when you click, but they do in the web inspector.
❓What happens when you click the button now?
background-image: url( https://maryrodriguez.com/nmd345/cat.jpg ) ;
background-size: contain ; /* You can also try cover or change the div height and width to match the image. */
background-repeat: no-repeat ;
❓What happens when you click the button now?
Save your URL to x-multiply-favorites
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
/* or this short-hand version: */
grid-template-columns: repeat( 5, 1fr ) ;
Written script at Spawning divs using a JavaScript object
Write a function to create a rectangle with a random color and position. Then insert this script into a page that lets users populate the page with these divs by clicking repeatedly on the same button or link. Add to your launch page and post the url to #div-mania-1. Sample
Want to add some spice to the pattern? Challenge yourself to add special CSS to the constructed divs, eg to make circles, funky borders, or crazy dots.
⚠️ You can't write the "constructor function" with arrow (=>) syntax. You have to follow the syntax shown in the tutorial, eg DivObject = function() {...}.
Linus Torvalds was "Too lazy to fail"--Erik Raymond
You don't create standalone programs, but reusable modules stored in libraries
Playdoh: Make a cookie with red dough, then another with green, etc.--ugh!
JavaScript: Write out every div and style it by hand--ugh!
Playdoh: Cookie-cutter
Can have input (red, blue, green)
JavaScript: Constructor
Can have arguments (red, blue, green)
Playdoh: Add hats, noses, etc.
JavaScript: Add properties or methods to a div
Playdoh: Imagine being able to change the shape of a cookie-cutter after the cookies have been cut!
JavaScript: Change a property of a Constructor *after* instances have been created.
Can't do it if you've assigned properties to the instance already.
Extensions override prototypes.
Migrate the div creation script used above to new platforms by customizing the code in at least two of these examples. Change the color, wording, or anything else you wish. Come to class prepared to demo the two examples on your own laptop.
Sample code: panel_demo_console.js
Choose an environment:
Then paste your code into command line at bottom and hit Enter or Run.
Sample code: panel_demo_bookmarklet.js
Compact your JavaScript Console code using Bookmarkleter or these id="$1"
Install first: Firefox Greasemonkey Add-on
Sample code: panel_demo_greasemonkey.user.js
Help: How to install a Greasemonkey script
This is a Greasemonkey clone for Chrome.
Add your latest approach or release to The Pool.
Put these ingredients in a folder:
Create a widget "package" by adding a .wdgt extension to the folder.
Double-click on the resulting icon to add it to your Dashboard.
How to Enable the Dashboard in OS X El Capitan
HTML for for Widget version of Panel Demo
Check your readiness for the test by completing the Review linked in #reference, whose questions are very similar to those on the test. (Remember that you can re-take any of the individual quizzes if you weren't satisfied with your original grade 🙂).
Post a mocked-up rendering, storyboard, or other approach for your final project to #project-approach.
Prompt the Webster JS chatbot (v2) pinned to the #reference channel with JavaScript questions to quiz you on any concepts you're still shaky on, eg:
Although it's not a perfect match to material covered in this class, feel free to try your hand at http://www.w3schools.com/js/js_quiz.asp. You should know most everything on the first half of this quiz; you can ignore the JavaScript Math functions, while loop, opening a window, changing the status bar message, or determining your client's browser (though these are all useful things to know 😉)
Lateral-scrolling demo: Color in cinema
Lateral-scrolling demo: Italian menu
Fork the template and fill in the blanks in the JS pane to animate the paragraphs as the user scrolls, including your choice of stylistic changes. Save and post your URL to #x-scroll-animation.
Post to the #final-project Slack channel an improved version of the approach you originally posted to #project-approach. This layout must be built with HTML and CSS (eg, via CodePen). Your layout should incorporate one or more of the following:
Your layout should incorporate some of the design principles learned in this class (eg, a limited color palette/smallest effective difference). You do not need to incorporate any JavaScript at this stage. That is, menus and animations do not need to be active yet.
Form groups depending on which navigation paradigm you chose for your final project
As a group, find examples online of these navigation paradigms. Show the class the best and worst examples you find, and explain what is good or bad about each.
Fill in the blanks in the template to build a working image carousel. You will make changes in the CSS, JS, and HTML panes. Post your working Pen to #x-image-carousel.
-
Export your class project from CodePen or download it from your web host, and open the dist folder in VS Code. Then open Copilot Chat (Ctrl+Cmd+I) and ask it to review your HTML, CSS, or JavaScript code and suggest improvements such as:
Post a screenshot of the three most useful suggestions to #project-review, along with a brief explanation of why you think each suggestion would improve your project.
Choose at least one of these suggestions and ask Copilot to help you implement it. You may ask Copilot to generate the new code, explain how to modify your existing code, or debug problems that arise during implementation. Post your updated project URL to #project-review, along with a brief description of what suggestion you implemented and how Copilot helped.
Post your code to #troubleshooting and ask your classmates for feedback on how to improve it. You can ask for general feedback or specific feedback on any aspect of your code, eg, drawing from the list above. Post the revised code to #project-review once you've made improvements based on the feedback. Post early so your instructor and classmates have time to review it.
Share your experience using Copilot to review code. Did the suggestions make sense? Would you implement them? Why or why not?
Opportunity versus prescription
Discussion on evaluating Copilot recommendations: Does the suggestion align with best practices? Is it appropriate for your project? Does it introduce security or performance concerns?
To prevent full-width content on a big screen, wrap your content in a container div and set a max-width and auto left/right margins. Example:
<body>
<header>
<!-- Your header content -->
</header>
<main>
<!-- Your main content -->
</main>
</body>
Add this CSS:
main {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
🎩 You can make this shorter with a combination selector (the 0 is vertical margin):
main {
max-width: 800px;
margin: 0 auto;
}
🎩 Or use CSS grid to enable vertical centering, multi-item alignment, or responsive track-based layouts.
body {
display: grid;
place-items: center;
height: 100vh;
}
main {
min-width: 800px;
background-color: red;
}
Post a screenshot of your high score to #design-detective.
-
Post to the #final-project Slack channel an improved version of your project that includes JavaScript. Remember that you'll get extra participation credit by posting to the #troubleshooting Slack channel one of the following:
These posts must be as detailed as possible, quoting any problematic or exemplary code in your actual message.
If your project is a Web site, also link to your files online; if a bookmarklet or extension, you may attach the files to your message.
Create a 10-second screencast to test your recording setup and the legibility of your code on-screen, following the advice in the video tutorial or its written instructions. At the same time, record your voice explaining what you are doing. Aim for no more than 15-20 lines of code visible on the screen.
(You'll add a highlight to the screencast in your iteration for next time.)
Post the actual movie (not link) as an attachment in #screencast. Samples of completed screencasts
Post the latest version of your project to #final-project, adding any questions to the #troubleshooting conference in advance. Bear in mind the grading rubric, especially:
If you created a completely different project (eg an online game), your instructor will evaluate it based on the more general principles of clear documentation, technical complexity, and good design.
Start from your old 10-second screencast or create a better one for this assignment. Following the advice in the video tutorial or its written instructions, add a highlight to the screencast such as an oval or rectangle to at least one technical detail--such as a snippet of JavaScript--that you are using to make your project. Do not rely on selecting the code, which can result in a less legible result!
Post the movie as an attachment (or link to the movie in Google Drive, Loom, or YouTube) in #screencast.
Using a chatbot of your choice, post a prompt like this to practice answering interview questions for a job for which web design or development skills are relevant:
You are now a recruiter for a company that creates web applications and are interviewing me for a job as web applications designer and developer. You will ask a series of questions ranked with four levels of difficulty, with 1 being the easiest and 4 being the hardest. Please type "yes" if you understand this role.
I will type a number corresponding to the level of difficulty for your next question, and then you will ask me an interview question related to this job. Once I've posted my answer, you will evaluate my response assuming the job I'm applying for corresponds to the appropriate level, with 1 being an entry-level position and 4 being a senior developer. You will also make any suggestions for how I could have answered the question better. Once you have made this critique, you will type "What level would you like for the next question (1–4)?" We will repeat these questions and answers until I type "stop." Type the word "yes" if you understand this request.
-
Complete the survey linked in #reference about your use of AI tools in this class. This survey counts as a Quiz but will be graded not on whether or how you used AI in this course but on how thoroughly you explain your process and evaluate the results.
Create a brief screencast that uses your final project to explain one specific technique used to create it. Your goal is not to describe all aspects of your project but to focus on a single detail. (Follow the model of the demo videos from previous years.)
As always, ensure that any code you show on the screen is zoomed in far enough to be legible. 30-120 seconds is usually enough to get the technique across, providing you dig deeply into explaining how the code works. You can do this by highlighting specific snippets of code and explaining what they do. An even clearer technique is to edit parts of the code and show how that affects the output in a browser--eg, how adjusting a CSS transition makes an animation longer or how adjusting a variable changes the position of a <div>.
Post this movie to #screencast in Slack as an MPEG-4 file. (Do not just post a link to YouTube or Vimeo.)
Complete your project and post the final URL to #final-project.
😌 If cleared by your instructor in advance, you may omit this step.
-
Add your final project approach or release to The Pool.
JavaScript v. ActionScript
Authoring interface
Timeframe for completion
Text v. media
Usability
View source
$$$
Compatibility (Flash can't run on iOS)
Classes
Packages
Linkage
-
Revise your demo screencast based on the feedback you've received so far. Make especially sure that any code you show on the screen is zoomed in far enough to be legible. If not, modify your movie according to the suggestions in the id="$1".
Post the actual movie (not link) as an attachment to #screencast.
Colors from a photo (previously Color CC)
Code from comments via Copilot or Codewhisperer