Creativity with CSS

Week 4 notes for DCI 110: Web Programming for Non-Programmers

In video lesson 2, we examined this basic site:

It’s okay, but it has some problems. Notice that yellow bar at the very top? That shouldn’t be there. All the fonts are also bland, just the default fonts. The spacing of “Hello, beautiful world” needs to be higher in that top section. The font sizes are a bit difficult to read and would look better a bit larger.

Let’s make some changes to go from that to the following:

Okay, that looks a bit better.

For this lesson, we’re going to look at the following CSS techniques:

  • box model
  • font sizing

CSS Box Model

Learning target: I can modify elements by manipulating values defined by the box model.

Understanding the CSS box model is a requirement for advancing further with CSS. A helpful resource in explaining the CSS box model is by Shay Howe: Opening the Box Model. As you read that explanation of the CSS box model, keep the following in mind:

  • think of every HTML element as a block; (already see the similarity between a block and a box?)
  • every block, i.e., every HTML element, is a rectangular box with content + 5 adjustable properties: width, height, padding, borders, margins.
  • the width of a block consists of the the margin sizes (left margin + right margin) + border size (left border + right border) + padding (left padding + right padding) + the size of the content.
  • be sure that you understand the distinction between padding and margin.

Stop now, and read about the box model on Shaw Howe’s site. You should also read Chris Coyler’s brief article The CSS Box Model. Then come back here.

Feeling comfortable with the CSS box model? If not, go back and re-read that material.

Okay, let’s review our learning target: I can modify elements by manipulating values defined by the box model.

Modifying elements in the CSS box model

A lot of web design involves manipulating the elements of the CSS box model. It sounds simple, and in some ways it is simple. But the different boxes on a web page can impact each other. Here’s the top part of our page from last week, along with a few annotations:

  1. Why is that yellow bar at the top? It’s not intentional. Maybe it looks okay, but I really wanted the green box to be flush against the top. What’s happening there?
  2. The h1 “Welcome to our world” is too close to the top of the green box. Let’s give it some space and increase the font size.
  3. Move “Hello, beautiful world” up and increase the font size.

We won’t worry about the rest of the page for now.

The HTML for the above image (only code for the top snippet of the page is shown):

  <section id="top">  
    <h1>Welcome to our world</h1>
  <p><img src="images/globe.png"> Hello, beautiful world</p>

Let’s review our first problem question: Why is that yellow bar at the top?

The yellow that we are seeing at the very top is actually the background of the page. Remember that the entire page was set to yellow and that the green box (section top) sits on top of the background. Something is pushing the elements in the green box down on the page to reveal part of the yellow box. What is that something?

This is the common type of troubleshooting you will encounter over and over again in web development. It’s a little puzzle you have to figure out. The steps you want to follow in breaking it down is to take one HTML element at a time to see if it’s the guilty party causing the problem. In this example, our first logical guess is that the (section top) is the culprit. That seems perfectly logical since the green box is being pushed down. But upon closer inspection, we find that it’s not the section tag. And we also find that there’s nothing wrong with the body tag.

Determining that there’s nothing wrong involves looking at the CSS for those elements, plus also using the inspect tool in your web browser. If you were to hover over the h1 with the inspect tool, you will see that a top margin has been added by default. Remember, all browsers add default styles to the elements unless you use a CSS reset. I’m not using a reset on this page; therefore, you can see that the default top margin for the h1 is interfering with the intended design. Rather than going back and adding a CSS reset, I’m just going to modify the margin for the h1. Recall how this is part of the learning target: modifying box elements by manipulating values.

In the CSS, we can use the following to get rid of the margin-top on the h1 that is causing the yellow spacing:

h1 {
text-align: center;
color: #04415A;
margin-top: 0;

Let’s review the second problem question: give some spacing to the h1 and increase the font size. How would you increase the spacing above the h1 by 1rem? (Would you use margin or padding?)

For assignment C.5: Provide the CSS code to provide spacing above the h1. Only 1 line of CSS code needs adding to the h1 CSS style specifications above.

Use Canvas to submit your answer for assignment C.5.

How would you increase the font size? Note that this question addresses another learning target: I can specify a typographic hierarchy of font sizes using the em.

For assignment C.6: Provide the CSS code to increase the font size. The default body font size is 16px. We want to increase the h1 font size to 48px, but using only rem and not pixels.

Use Canvas to submit your answer for assignment C.6. It should be just one line of CSS code that is added to the h1 in the CSS style sheet.

If you have trouble answering these questions, then it may be useful if you go back to the video for lesson 2 and copy the HTML and CSS code to create this page and layout. Yes, it’s tedious to copy the code by hand from the video but it will be good practice to make sure you have everything working correctly. By examining the actual code, you can troubleshoot and determine if you have the correct answer.

We will adjust the third problem question, adjusting the spacing of “Hello, beautiful world”, in the next lesson.

Answering the two questions for assignments C.5 and C.6 should improve your confidence for tackling what comes next with CSS.


A cluster of assignments

This week in Web Programming for Non-programmers we have a cluster of assignments that aims to solidify your basic skills in working with HTML and CSS.

Background reading

This week read the following:

Organizing files for static websites on my blog.

View the video CSS for Beginners. Model Code & Critical Thinking Questions (5m). Lesson 2 on my YouTube channel. (The video refers to another video that explains the code presented in the video. I will upload that video next week after you have completed the questions in this week’s assignment.) Use the readings, listed below, to help you understand the video.

Chapter 2: Getting to Know CSS by Shay Howe.

On the Mozilla Developer Network site, read:

<link>: The External Resource Link Element

CSS selectors

Type, Class, and ID selectors

Class selectors and ID selectors

View the video What is GitHub (1m) on my YouTube channel and also read the brief post What is GitHub? on my blog.

Assignments for Week 3

There are 7 assignments this week. (2 assignments were transferred from last week to this week.) Most of the assignments are actually quite short, so it’s not as much work as it sounds. The assignments are all related to each other and are intended as small steps that help you work on your term project. As always, the due dates are recommended dates and not requirements. I do strongly recommend that you complete all assignments by the end of Sunday, September 13. See the details of each assignment in Canvas.

assignment H.3: File/directory management.

assignment C.1: Link to CSS file.

assignment C.2: ID & Class.

assignment C. 3: CSS file formatting

assignment C. 4: CSS comments

assignment CP3 (challenge problem): Creating an offline website

assignment CP4 (challenge problem): Publishing via GitHub pages (details on this assignment will be released on Thursday, Sept 8, 2020).


Organizing files for static websites

One of the most common problems that I’ve seen among students is file management. Or, more precisely, the lack of any kind of file management. If you are a student who depends upon the search function for finding files on you computer, then you need to break that habit. Web development depends upon organized file structures.

When helping a student troubleshoot a problem, I often will ask the student to show me the directory where his files are located. On more than one occasion, the student showed me something like this:

No. Please, no. Don’t do that.

To make your life easier in web development: learn to organize your files.

Key point

A website, at its most basic, is simply a directory of files on a server.

Simple, right?

Consider the incredible simplicity of that concept. On a server, the web server software looks for a designated folder (often called public_html). The files in that folder are the website.

Developing on your machine

As you develop websites on your local machine (i.e., your laptop), you want to organize your files in the same way that you do on the server. Note: I use the terms directory/subdirectory/folder/subfolder interchangeably. They mean the same thing.

A method for organizing files in web projects

Here’s the method that I use for organizing all my web development projects.

main project directory

Identify the main directory in which I’m going to store my projects. Note that I say projects. In this class and throughout your web development career, you will be working on multiple projects (often at the same time). Each project should exist in its own directory. But it’s good to have a main project directory: a directory of directories.

One place to put the project directory is under your Documents directory. Personally, I don’t ever store much of anything on the hard drive of my computer. I’m always concerned about backups and losing data. I actually use a paid Dropbox account that appears as a networked drive on my computer. The major benefit is that I can access my projects from any computer I work on: my home computer, my office computer, my laptop.

But for the purposes of this video: I’m going to assume you are using the Documents directory of your laptop.

Create the main projects directory. You can name the directory anything you like. I use WebDev.

Important! In naming files and directories for web projects, do not use spaces in those names.

Project directories

You now have a single directory to place all your projects. Remember, put each project in a different directory of the main projects folder.

Let’s create a project folder called “termProject”. You can name the folder anything you like, as long as you do not use spaces or special characters in the name.

At this point, you should have something like the following in your Documents directory (or wherever you’re placing your projects). Uh, don’t use the Desktop:

In the termProject folder, you want to create some subfolders:

  • css
  • js
  • images

In the termProject folder, you should end up with something like the following:

The index.html file

By convention, the file representing the default home page of a website is called index.html. That file exists in the top-level of your website folder, i.e., in this case our website folder is termProject. Do not put index.html in a subfolder of termProject.

Create an index.html in your termProject folder. (It can be just a blank file with the name index.html.) You should have something like the following:

Don’t worry about the file size for index.html. The above image says ‘zero bytes’ because the file is empty. As you add contents to the index.html file, then the size will change.

There you go! You have the basic structure for organizing files on a website. As you create more html files, you simply add those to the directory. You also, if you want, can create more subdirectories in case you have a lot of html files. Actually, you can create any subdirectory you want to hold different types of files. You can probably guess what type of files go in the css, images, and js subdirectories?

Getting a good handle on organizing files for a website is very important for making your life easier.


Listening is not learning

Sitting in a classroom while a professor lectures, or sitting at home watching a video of a professor speaking is not learning.

It’s listening. Sometimes it’s not even that. Sometimes, as we all know, even in the classroom you are barely paying any attention. But even if you are attentive, you are only using your minimal capacity for learning.

Taking notes during a class is helpful but can also be a distraction as you lose track of what the professor is saying while you are writing, especially if you are trying to transcribe verbatim everything the professor says. I’ve seen that in classrooms. It’s not that helpful, especially these days when lectures can be recorded. With video, you can pause, slow it down, or speed up and play the lecture at 1.5 speed.

Listening is acquiring information.

Learning happens when you take that information, do something with it like applying it to a problem or transforming the information in a different way.

Learning happens when you repeat that process of transferring what you have heard to different situations.

Learning happens when you do that over and over again.

Learning requires repetition. Remember, somewhere in school you had all that math homework: all those problems to solve, all those variations? The repetition is intended to help you learn, though you might still be wondering when you’re going to apply that calculus.

And that’s a key to learning: learning happens when you apply information to solve a problem that is of interest to you. That problem could be a project you are developing.

In this course, the term project is a project that should be of very strong interest to you. It’s about you.

You will learn the coding techniques as you apply those techniques to your project.

You are looking at videos now, on LinkedIn Learning and YouTube, to provide an introductory context and background information. As you view these videos, try to absorb what you can. Don’t stress if you don’t understand everything. As you transfer what you have heard to work on your project, you will find yourself going back and looking at those videos again. You will find yourself searching the Internet for how to do this or that. That’s normal. That’s how you learn. You learn by doing, not by listening.


Pandoc & The Peak of Shenandoah

Objective: a tutorial for the staff of Shenandoah in processing and uploading new posts to The Peak.

The Peak is the blog-like supplement to the twice-yearly Shenandoah literary magazine.

Credit for the technical development of The Peak goes to the wonderful work of W&L undergrad Coletta Fuller, who adapted Shenandoah’s primary theme and provided the masonry layout for The Peak.

Each section of The Peak home page, which exists within the overall Shenandoah site, is a slender block containing an image, a category, headline, and an edited excerpt.

The entire block is coded as a link to the post for that entry.

What are the steps for transforming a submission for The Peak into an actual post on the site?

The Peak is published with the WordPress platform that uses a highly customized theme for styling aspects like line breaks and paragraph indents. Articles for The Peak are submitted as Word files.

Step 1: Access The Peak WP site

You will need login credentials on Shenandoah’s WP installation for this step.

Step 2: Add new post

Start the new post in WP. Paste in the title. Select the appropriate category, e.g., On Craft. Save draft of the post.

Step 3. Converting docx file to HTML

This is the most complicated step. You cannot just copy and paste the text from Word into WordPress and expect happiness. You will be disappointed by the formatting. Also, the default save as HTML in Word is not effective, either.

You should use pandoc to convert docx files to HTML. Pandoc is a freely available, command-line tool that converts documents between all sorts of formats.

Installing Pandoc: On a Mac, the easiest installation method is to download the pkg installer from the Pandoc site:

If you are using a Windows machine, then the page might look slightly different and you should follow the instructions for installing on Windows. The rest of this document will assume that you are using a Mac.

Install the package file that you downloaded from the pandoc site by double-clicking on the downloaded file. It should then walk you a self-explanatory set of steps to complete the installation.

Ready? Is it installed? Unlike many apps, Pandoc has no graphical user interface. You will have to open up the Terminal app on a Mac and use the command-line. It’s easier than it sounds. On a Mac, the terminal app is in the Applications => Utilities folder.

Opening the terminal app will pop up the Terminal window. Your terminal app will look different than mine. Since I use the terminal app a lot, I’ve customized the colors and have a translucent background. But what you should be the same is in the upper left corner will be a prompt that ends in a $ sign. The prefix of the prompt will differ; it often displays the machine name and the username that is logged in.

Place the cursor focus in the window with the mouse (or trackpad on a laptop) and click. This should bring the terminal app to the foreground so that you can type commands into the terminal app.

To see if you have installed pandoc successfully, you can type the command:

which pandoc

Hit return (or enter) after typing the command. The terminal should then display a line that provides the path to the application. The path displayed on your Mac might be slightly different than mine below. Don’t worry. The important thing is that a path appears. If you enter the command “which pandoc”, hit return, and nothings happens, then pandoc is not installed. If you have a problem installing pandoc, then that requires a consultation with someone more experienced.

Okay, let’s assume that pandoc installed correctly.

Locate your .docx file. For simplicity, let’s just say that the docx file you want to convert is in the Downloads folder. In that case, from the command prompt, you should be able to type cd Downloads, and hit enter. To ensure you are in the right directory, you can the command pwd, which means “print working directory”; this command will display the current directory you are in.

Important: the Word file MUST be a .docx file. (Note the x at the end of the file extension.) If it is a .doc file (no x), then you must open the file in Word and save it as .docx before proceeding.

The actual conversion: for this step, you must know the exact filename that you want to convert. If you have any spaces in the filename, then you must enclose the filename in quotation marks in the following command. Otherwise, an error will result. Note: on the command line, filenames are case sensitive.

To convert the file named “Weiden The Peak final.docx” to html, use the following command:

pandoc "Weiden The Peak final.docx" -t html -o weiden.html

If all is successful, after hitting enter, then nothing should appear to have happened. Huh? Yes, success is not getting an error message. If you just get the blank prompt, then the file probably converted successfully. To ensure that the file converted, you can list the filename on the screen by using the list command and the name of the html file: ls weiden.html

At this point, you can open the html file in a text editor. Do not use Notepad. You may want to download and use Atom (free), which is what I use though there are many other options. Here’s what our sample file looks like after the pandoc conversion from .docx to .html and opened in Atom (only part of the file is shown in the image below):

Step 4: Copying to WordPress

The hard part is now over.

Next, you simply copy and paste the HTML, as shown above, from Atom (or another text editor) and paste into the editing space for the post you created in WordPress:

Save the draft.

Step 5: Adjusting the author name

By default, the author of the post in WordPress will be you. If the actual author has not yet published a piece in The Peak, then you will need to add the author information to The Peak user database. You can check to see if the author is already listed by opening up the dropdown menu in the Author section of the WP post, which is located towards the bottom of the screen:

If the author is already listed, then you can just select the author name and save post.


How the Internet Works

The web. We use it everyday. It makes this very presentation possible. The Internet. The Web. So few people even know the distinction. That’s okay. Today the distinction is largely irrelevant to our everyday lives even as our lives are embedded in the network.

How did we get here? How did the web get to this point? More importantly, where are we going? Where is the Web, the Internet, going. The 21st century Internet is really dependent upon the people born in the 21st century: a generation already in college. For them to define the Internet of the next 30 years, they need to understand the last 50 years of the Internet. Everything we use today on the net has a direct connection to events 50 years ago. This is not merely a history lesson. This is a lesson about today and the future.

The desktop computer: all alone

If we go back a bit more than 30 years, to the 1980s, when I was in college, there were no computers in the classroom. A few students had an Apple computer but most had just a typewriter. I remember the business office for the college had a desktop computer, sitting all alone on an assistant’s desk. The math department in the science building had a minicomputer, a much larger system, with a series of terminals with monochrome screens.

The 1980s battle between Microsoft and Apple over the desktop computer was handily won by Microsoft, though now that’s a bit hard to imagine to a generation who have grown up using mostly Macs. The desktop computer, quite a bulky device, was a machine isolated in the home or office. It didn’t connect to anything else. Everything was installed by floppy disks, but the computer was a work horse for its time. Imagine it, sitting there on a desk doing its thing, with no other computer to talk to. Everything was stored on a series of floppy disks or on the quite small internal hard drive. The capabilities of the desktop computer in the 1980s was limited by the capacity of the hardware.

Computers talking to each other

In the 1980s, businesses increasingly took advantage of the ability to physically connect office computers into local area network (LAN). A cable would plug into the back of a computer. Originally, these cables were strung across the rooms, over the floors, and daisy-chained to each computer. Eventually, the cables were installed in the walls and computers were plugged directly into an outlet on a wall. You still see that today (look around the university for those Ethernet outlets), though the speed running through those cables are much greater than before.

The LAN was a great benefit to office productivity in the workplace. But you were still very limited to your local office environment in those days and even into the early 1990s.

Big computers talking to each other

But let’s go back to the 1960s and 1970s and see what was happening in the research laboratories of universities and government. That’s often where the innovation starts before it gets commercialized on a large scale to the public. The remarkable achievement in telecommunications that makes the Internet possible is a process called packet switching. Watch the following video that discusses how packet switching was developed. Pay particularly close to attention to the opening when the scientist explains the example of sending every page of a Bible to someone. His description is the core mechanism that transmits everything over the Internet today.

While the video is quite dated, from the early 2000s it seems, everything they talk about is still highly relevant today. These are core technologies that enable everything you do today on the Internet.

As you watch that video, note also around the 7 minute mark when he briefly describes how messaging and email evolved from a networked system sharing documents.

The video has a primarily British perspective but the experience of the time was largely the same in the USA. Around the 10-minute mark, they discuss the difficulties of deploying a packet switching network over a broad area. The telephone companies used an entirely different form of networking (circuit switching) to transmit voice calls from telephone to telephone. Telephone lines were everywhere, but those lines were low speed since that’s all that was required for voice. The phone companies were very resistant to changing their network infrastructure. Indeed, that change took decades, even into the early 2000s. And in the 1990s, connecting homes to the Internet became a battle between phone companies and cable companies. The cable companies found themselves in a better position since large cables had to be installed in the homes to deliver cable TV.

In the USA, the government had an initiative called Defense Advanced Research Projects Agency (DARPA), being operated out of the Department of Defense. DARPA worked with research universities in the US that were developing their own networks so that scientists could communicate with each other and perform scientific analysis on large, expensive mainframe computers.

So, think about all the individual local networks existing in isolation, not connected to each other.

Internet: a network of networks

An internet is defined as a network of networks, i.e., one network connected to another network forms an internet (lowercase ‘i’). When networks started connecting to other networks all over the world and using the same technology of packet switching, then that initiative became known as the Internet (uppercase “I”). This is why the word Internet usually starts with a capital letter since it’s referring to a proper noun and not the generic term for networks connected to each other. In reality, it doesn’t really matter whether you use uppercase or lowercase these days. Most people don’t know what the term internet even means other than that big network that spans the globe. (Think about the similarities of the word internet with the word interstate, particularly the interstate highways. How often do you just say the word, Interstate, without any further designation other than perhaps the specific route, I-81. The prefix “inter” in internet is used in the same conceptual way as “inter” is used in interstate.)

Remember the example from the video above about sending a Bible page by page? Breaking down content into packets and then sending each individual packet separately over the network to its destination, all of which now happens in milliseconds, is a bit of a difficult concept to wrap your minds around. Fortunately, the detailed aspects are not needed for most web programming. Primarily, you need to understand the concept and know that the details are handled through software and hardware developed by engineers who are working at an entirely different level of abstraction.

Indeed, an abstract model actually exists that helps us understand the concepts of how the Internet works.

Internet protocols

Let’s take a look at the protocols that make the Internet actually work. Again, you use these everyday without realizing it. You even see some of these terms everyday, like HTTP, but you may have no idea as to what it signifies. Internet protocols define how the Internet works. In the earlier video above, you viewed the British discussion on the development of packet switching. In that video, they touched upon corresponding developments in the USA. Two Americans most involved in developing the early Internet were Vinton Cerf and Bob Kahn. In 2004, Cerf and Kahn received the Turing Award from the Association for Computing Machinery. The Turing Award is often described as the Nobel Prize for computing. When they accepted the award, they held an insightful discussion on the evolution of the Internet. W

The video starts at the 13 minute mark, after the introductions. You can stop watching when the Q&A starts at the end of their discussion.

As you watch the Cerf/Kahn video, listen for key concepts, such as

  • open
  • layer
  • gateway/routing
  • security

Always be thinking that what they are explaining is how to approach the complexity of understanding how the Internet works. By modeling that complexity, they were able to build mechanisms that took concepts from ideas to implementations in the real-world. With tremendous foresight, they created an open system that anyone can build on top of to create new systems. Kahn describes the open network as a cafeteria model where you pick, from a large variety of services, what you want to use.

In contrast, a closed model is a service that is self-contained. Think about Facebook, which exists on the open network. But within Facebook, everything you do is controlled by Facebook. The possibilities of what you can create within FB is not open to you, those possibilities are closed to you except in the way that FB wants you to do something. Notice the distinction between open and closed systems?

Cerf talks about layers, like a staircase where each step (each layer) leads to another step (layer). In the early days of network development in the USA, these guys (Cerf & Kahn) could make the decisions just among themselves as to how things worked. But, again, with foresight, they wanted to get the community of people who used the Internet involved in planning, decision-making, and implementing how the Internet would evolve. The Internet Engineering Task Force (IETF) emerged as the primary force behind protocol development for the Internet. The IETF is still very active today.

Working online

For decades now, the IETF has conducted most of its work online via email and shared documents. Occasional meetings throughout the world solidifies the work of the IETF. The accomplishments of the IETF, through this distributed work model, is really phenomenal. And it has demonstrated, for decades now, that location independent work is entirely feasible and highly productive.

Then there’s the Web …

This post focuses on the Internet. Remember, the Web rides on top of the Internet layers. I’ll describe more about the evolution of the Web and development of Web standards in another post.


Weekly 1-minute summary

In the syllabus you see something called one-minute summary for Week 1, etc.

That’s a task you should do for yourself. You do not submit it to me. I’ll never see it. Now is the time to start developing habits of mind for yourself.

At the end of each week, take a minute or however long you need, to jot down a few notes on what you learned this week in this course. Indeed, you might want to do this for all your courses, or even for your life in general.

If you’re not sure what to write about, if you’re not sure that you learned anything during the week, then here are some possibilities for you to reflect upon. Only choose 1 of these if you’re not sure what to write about. Don’t try to respond to all these prompts every week, though I do know people who actually spend a couple of hours at the end of every week thinking deeply about what they did that week. That’s great. I don’t do that myself. Do what works for you. Be aware of managing your time, but at least give yourself one-minute every week where you reflect on that week. (Remember, you’re not submitting this to me at all; this is for you.)

  • Try to state in 3 complete sentences the key points of the week.
  • Each week of the course has at least one essential question: write down what new insights you have learned about that topic.
  • have any of your interactions with other students in the course changed the way that you perceive what you are learning?
  • If you learned a new tool this week, describe your reaction to it. How would you use this tool in the future? How would you improve it?
  • Has your learning process changed?
  • What became clear to you that was previously very confusing?
  • What connections are emerging between this course and your other courses or your everyday life? You use technology everyday. How are you understanding it a bit better every week?
  • What improvements are you noticing in your own skills at staying organized, studying, or even interacting with others?
  • Did you try any new learning strategies? Were they effective?
  • How can you improve your learning strategies? Note: think in terms of learning and not studying. Studying is something you do for an exam. Learning is something you will do throughout your life even when there is no grade.
  • What mistakes have you made this week. Remember, you’re writing only to yourself. You can be candid and honest with yourself.
  • What gave you the most pride during the week? What gave you a real sense of accomplishment?

Ultimately, when you think about what you learned during the week, what you are doing is actually learning about yourself.

[Several of the prompts above were adapted from Linda Nilson’s book Creating Self-Regulated Learners: Strategies to Strengthen Students’ Self-Awareness and Learning Skills.


2025: Where are you?

A question prompt for students to think about for their term projects.

Visualizing your future is a mental process that aids in exploring options and planning a path forward.

The key is to visualize the future and the steps needed to get there. Do not fall into the trap of living in the future. Now, this day, this moment, is your life. If you don’t take daily action steps toward your future, then it never comes.

Don’t grow old with regrets. At your age, 5 years seem very far away. But as you get older, you will realize that 5 years go by very quickly. The easiest and most common thing that most people do is to follow the path of least resistance, and life just happens to them. But you may arrive down the road with a sense of dissatisfaction.

One of the most inspiring books I’ve ever read was actually titled The Path of Least Resistance. You don’t have to read it for this course, but it’s something I recommend for you to read someday. I still remember when I read it, almost 25 years ago. I had just turned 30 and was living in Norfolk, Virginia. I had the job of my dreams, a beautiful apartment, and a really nice car. I loved that period of my life but it didn’t happen by chance and neither did what came after.

Fortunately, Robert Fritz, the author of that book prepared a 16-minute video that distills the essence of the book. I never saw that video until this morning. Back in the mid-90s, there was no YouTube. Actually, in 1995, there was no streaming video on the Internet. Indeed, it was rare to find any video on the Internet at all then.

The video has quite the feel of the late 1980s about it. (It wasn’t a great time; you didn’t miss much. And we all had strange hair then; I had a ponytail.) And the overall tone of rushing water and mystic music gives the video a bit too much woo woo feeling. But strive to ignore that and listen for the message.

Note the dynamic force Fritz describes as structural tension. Also, note the emphasis not just on the vision of where you want to go but the stress on identifying your current reality.

Also, most of you will work in business or some type or organization. Many of you will become leaders. Many aspects discussed in The Path of Least Resistance relate to organizational, as well as individual, behavior. Indeed, the now classic business book The Fifth Discipline: The Art & Practice of the Learning Organization by Peter Senge has many similar aspects.

Use this all as a prompt for thinking about the contents of your term project. This is not an assignment. I don’t want you to respond to me with what you are thinking now. But put some thought into it, for yourself.

Fall 2025

Labor Day approaches as summer ends. (Or, perhaps, by 2025 you’re in the southern hemisphere and winter is nearing an end.) All of you (in my DCI 110 class) will have finished college. Fall 2025: will you be in grad school? Will you have finished all your educational accomplishments? Will you be in the early stages of that career you want? Where will you be living?

Write a paragraph to yourself describing your life in the Fall of 2025. Don’t share it with me. This is for you. Perhaps you will decide to share it publicly and put it on the website for your term project. But you don’t have to. Not at all. This is simply to prepare you for thinking about 5 years down the road and the steps you need to take to get there. Ideally, you’ll be revising this paragraph to yourself every year, even when you’re 25, even when you are 30, and even when you are 55 and older.

Then think about where you are now. Each day, your focus must be on the step you need that day to get you to where you want to go. Don’t get stuck in planning the goal and planning every step along the way. If you do that, the days and years will go by and you may not make the progress you want because you are always in planning mode, thinking about what’s coming ahead, and not focusing on what you need to do now to get to the next step.

Adjusting the path

You also don’t want to get stuck into thinking that you have to follow the path that you set out on 5 years ago. It’s your path. Not your parent’s path. Not the path of your friend. Make adjustments as needed, you may find yourself going off on a wonderful path that you could not imagine a few years before. Indeed, I never imagined that at age 39, I would leave the U.S. and live in Argentina for 8 years. As the saying goes, it’s the journey not the destination that matters. But it’s good to have a sense as to where you are going instead of going blindly.


Websites by Creative Digital Agencies for inspiring design

There are many types of web sites that serve different audiences for different purposes. Most sites call for a straightforward approach, but others spark a more engaging experience for users. In learning about the possibilities of web design, it’s instructive to look closely at how these sites are arranged.

Creative Digital Agencies

The most exciting work on the web is coming from creative digital agencies that design astounding sites with an eye towards branding and marketing. These sites intentionally push the envelope of web design. To focus our examination of creative digital agencies, we’ll take a close look at the work of Area 17, which describes itself as “a brand and digital product agency in Paris and London”.

A creative digital agency is hired by a company to solve problems with a web-based solution. (For simplicity of this discussion, I’m also including smartphone apps as web-based solutions.) Since almost every company and organization these days have a web presence, the web site is an instrumental means of communicating with customers. Often, it’s the only interaction a person has with a business.

Careers in a creative digital agency intersect with many disciplines: marketing, strategic communication, digital culture, computer science, but also any liberal arts major when combined with a good understanding of digital culture and information. And, of course, since these creative digital agencies are businesses, they also have accountants, human resource managers, and other professionals like you would find in any business. If you have more of a scientific background, then you might find opportunities in an agency that focuses on working in scientific and technical fields.

Take a look at the team page of Area 17 to see the variety of positions held in this company of 70+ people. Some of those roles include designer, interface engineer, studio manager, production director, managing director, strategy director, user experience director, UX designer, producer, application engineer, strategist, financial director, partnerships director, people operations director, interface director, and program coordinator. Different firms use a variety of job titles but this is a representative sample of the industry.


For the first challenge problem in this course, we’re going wireframe an existing website. Normally, the step of wireframing occurs early in the design process, long before one actually starts to code. But I want you to wireframe an existing site to see how sites are structured.

Let’s define what we mean by wireframing:

A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.

Here’s an example of a bare bones wireframe of a page:

You see that each element is outlined, i.e., framed, by a thin line, i.e., a wire. This process is easily done on paper. With your original designs, I strongly encourage sketching an outline drawing. There are also many tools that help you create a nicely formatted wireframe for those of us who are not good at drawing. These tools, some of which allow you to prototype a web site, have become very popular and useful. However, those tools are not the focus of this course and could be a bit of a distraction as your focus for this course should be on the code. But I do want to stress that wireframing is an excellent skill and important tool in web design.

I’m going to walk you through the process of wireframing a site. Then you going to do one on your own. Remember, the intent behind this exercise to get you to closely look at all the components that makes up a web page. Through this exercise, you may start seeing details about a website that you’ve never really noticed before.

Using the work of Area 17 as our examples, I’m selecting the The New England Journal of Medicine (NEJM) site as a demonstration. The Area 17 site has images for all the sites in their case studies. It’s best to use those images for this exercise, if possible. The real web site may have changed significantly since Area 17 developed it. The following image is NEJM’s home page from Area 17’s case study on NEJM.

I’m going to pull this image into an editing program so that I can diagram it. You can use any image editing program you like for this exercise. Most computers have freely available and simple image programs. All you will need to do is to write over the image by drawing lines and writing brief notes on the image.

[continue in next post]


Asking the essential questions about web development

I have a dozen essential questions that anyone learning web development should think deeply about. But, first I want to talk about what makes for a good question. And how do questions help us focus on thinking to form the mental action steps needed to develop knowledge?

When I was in college, my roommate and I were sitting around the dorm when he made a comment that stuck with me all these years later. He said, “You can tell how smart someone is not by how they answer a question but by the kind of questions they ask.”

I’ve often never been very good at asking questions. I blame that on the false belief that “I can’t think well on my feet”. I call that a false belief because thinking is a skill that we can develop. I tend to think very well: logically and analytically. But to figure out why I believe I could not think on my feet, I had to (uh) think about it. What happened when I was called upon in class to respond with either an answer or question. I got flustered. I stumbled around my thoughts because I feared stumbling around my spoken words.

In the first grade, I was told I had a speech impediment and that changed everything in my life. It pushed me into a painful shyness, which is largely being overly self-conscious. When I had to speak in front of people, I froze. I resisted years of childhood speech therapy, but here I am.

The essential question I had to ask myself, “Why do I get so flustered when having to speak in public?” In thinking that through, I realized that it’s not because I cannot think on my feet. It’s another layer of negative thoughts that are blocking my focus on what I should say at the moment.

Then that brings me to another question, “What mental steps can I take in a conversation when I need to respond coherently?”

Now, I’m not going to explore that avenue further. I use this as an example as to how critical questioning of ourself, what we do, and what we are learning can lead us to a clearer realization of the world in which we are interacting.

In a web programming course for non-programmers, we can identify a set of leading, guiding, and essential questions that aid our learning process. There are subtle differences in questions that are leading, guiding, and essential. And there are also questions that hook the curiosity.

In this analysis of questions, I’m building off the wonderful work of Jay McTighe and the late Grant Wiggins. They have an entire series of books on teaching and understanding that are absolutely phenomenal and, I believe, are must read books for anyone seriously interested in any form of teaching. The framework put forth by these guys has been highly influential in the development of the AP course guidelines. If you’ve taken an AP course, this format might be familiar with you but probably did not know the framework and reasoning behind it.

An essential question is thought-provoking, perhaps open-ended, and that stimulates further inquiry.

Specific implementations of technology become obsolete very quickly. You could rearrange that sentence and ask, “Why does technology become obsolete very quickly?” Then you realize that it’s, “Why do specific implementations of technology become obsolete very quickly?” In contrast, you can ask, “What are the foundational concepts of technology that persist over time?” You might then naively say, “How do we keep advancing technology?” But it’s not technology that we are trying to advance. It’s what we are doing with the technology. “How can we continue to leverage advances in technology to create new protocols, new services, new products that enhance the quality of our lives, our productivity, our safety, our health, our environment and so forth.”

It’s this ability to keep asking deeper and deeper questions that actually lead to those advances in technology. The technology does not do it on its own. Humans pose the questions that challenge us. Our in-depth understanding of the fundamental concepts enable us to create new technology-based solutions to everyday problems. This process of inquiry is the entrepreneurial mindset. I’m not just talking about business. Yes, out of this inquiry process emerges new companies, possibly even entirely new industries. But also new scholarship, new forms of art, new possibilities for making music, new forms of education. This mindset of deeply questioning the evolution of ideas, services, products, knowledge, art all lead to sustaining meaningful accomplishments.

It’s the lack of questioning, taking something at face value and just accepting it, that can lead to a static environment. Some people will argue that’s okay. Is progress always good? That’s a deep question.

Back to web development. We have established the importance of asking deep questions. I’m putting forward a set of questions about web development for your consideration:

  • Why should I learning coding?
  • What are the habits of mind that will help me learn?
  • How does the web work?
  • Why is a markup language, like HTML, used for structuring content on the web?
  • How does CSS meet the challenges of styling web documents?
  • What are ways to make my work with CSS more efficient and systematic?
  • How can markup languages be extended to other uses in web development?
  • How can I add interactivity to a web page?
  • What is computational thinking?
  • When is motion on a website an enhancement or a distraction?
  • What is the future of web development?

An introductory course on programming could, in fact, skip over most of those questions and focus on the syntax of a programming language while just assuming you have a good grasp of everything else.

I don’t like making assumptions.

I’ve been told that teaching core concepts is a lofty goal and that students just want skills. But remember what we said about advances in technology: skills become obsolete very quickly. Foundational concepts persist. As you will experience in your journey of learning to code, programming languages share many similarities. Those similarities are concepts that are transferrable from one programming language to another. Once you know the foundational concept, then you learn the syntax of how to implement the concept in a specific language. If you know one programming language, you can learn another one more easily on your own.

As you learn to code, keep the essential questions in mind. And come up with your own questions. Write those questions down someplace. You might find a question you come back to year after year. Solving that question might become your life work. It might become the foundation for your business, for your career.