Encourage others to code!

Screen Shot 2016-12-04 at 9.20.04 AM.png

“Hour of Code” is an international effort to get people of all ages to try coding for themselves. The official dates for the big promotion are Dec. 5–11 this year — but the Hour of Code tutorials are online (and free) year-round.

Hour of Code tutorials

You can choose by grade level (even pre-schoolers can play), subject matter (e.g. “language arts”), and length of time. Most tutorials can be completed in an hour or less.

Tip: If you get others to take a leap and try code, you might find yourself in the role of teacher. Guess what? By teaching, you learn more yourself. Give it a shot!

jQuery examples

If you want to see demonstrations of what jQuery can do — with just a few lines of code! — view these examples. These are complete files, not jsFiddles. You can copy and use any of this code. This is a GitHub repo with several nifty example pages.

In addition, here are some of my fiddles with brief jQuery examples:

Don’t forget — the perfect place to look up a jQuery function is the official jQuery site.

Great advice about breakpoints

When you’re coding @media queries, you choose breakpoints. Many of you take the easy way out and write just one @media query. If you do that, and your max-width is small (600px), people with tablets and even small laptops might see a very bad-looking version of your page.

This article recommends using these numbers for @media queries: 600px, 900px, 1200px — “and 1800px if you plan on giving the giant-monitor people something special” (which you don’t have to do).


I often code only one @media query (usually max-width: 800px) because I tend to be lazy, and I’m only making examples for you guys. But if I had a paying client, I would write two @media queries for any app — one for phones (max-width: 600px) and one for tablets (max-width: 900px). Lots of people do use tablets much of the time, so don’t forget about them.

I would also make sure my page layout does not get wider than 1200px (that way it doesn’t look stupid on a 27-inch iMac screen) — and I would do that with a container DIV, not a @media query.

History + data = story

I fell in love with this web app as soon as I laid eyes on it: Monroe Work today. The site is about the research done by an American man named Monroe Nathan Work, who died in 1945. His research was about lynching in the United States. This app demonstrates a great way to tell a story.

First, I zoomed in on the map and started clicking around.

Screen Shot 2016-11-18 at 10.07.51 AM.png

Then I wanted to find out where the data came from. I wanted to know if I could trust it. I spied a little link at the bottom that says, “Should I believe this … ?” Clicking that took me to a section that carefully documented all the sources and all the unanswered questions raised in this project. I loved this part! Too often, digital projects just stuff all their sources into a big list o’ links at the end. This, in contrast, takes the time to explain how the facts were checked and where the research originated.

Screen Shot 2016-11-18 at 10.11.09 AM.png

Using the Chrome extension Wappalyzer, I did a quick look to see whether Bootstrap was used for the design/CSS. It wasn’t — but the producers did use another web framework, one called Ink. Looks pretty awesome. However, they could have made this app with a Bootstrap theme just as easily — it all depends what you and your teammates on a project already know. If someone is comfortable with Bootstrap, he or she will choose Bootstrap. If a person has learned another framework instead, he or she will choose that one.

Oh, and the map? Leaflet!

Screen Shot 2016-11-18 at 10.27.15 AM.png

The menu shown at right is from the Chrome extension Wappalyzer: It shows which technologies are in use on the current page in the browser.


Bootstrap Themes

Now that you have invested time in learning to use Bootstrap, you should know that it’s easy to change the theme and get new colors and fonts in one simple step.

The free themes at Bootswatch.com are the easiest to use. Simply download the theme as shown below. Then REPLACE the bootstrap.min.css file that’s already in your /css/ folder. Reload your Bootstrap-styled page and see the magic!


Open the menu for the theme you want, and select bootstrap.min.css.

It would take you only a few minutes to try the above. I encourage you to try it!

For more ambitious projects, you should consider buying one of the complex Bootstrap themes from WrapBootstrap.com. Some very nice themes are only $10. This is a one-time charge. For less than $20 (in most cases), using one of these themes gives you the ability to produce a very sophisticated website hosted on your own server at your own domain name. You will be using the same Bootstrap styles and classes you have already used, plus new ones that might be specific to the theme you chose. You’ll get icons and fonts with the theme that are all part of the deal, and you can mix and match a variety of sliding sections, sliders, and other cool components.

Don’t forget — there’s lots of examples you can use on the Bootstrap site. You can download an example and use it to learn how to do a cool new design thing.

Final Project Details

In the week of Nov. 14–18, we will have our last quiz, and you’ll turn in your last weekly assignment.

That’s also the week when your project work begins!

As I mentioned in class this week, the project has several deadlines. You are graded on EACH deadline, and you cannot make them up later.

  • Sun Nov 13 – Project proposal due
  • Tue Nov 29 AND Tue Dec 6 – Project presentations in class
  • Sun Nov 27 – Project Week 1 due
  • Fri Dec 2 – Project Week 2 due
  • Fri Dec 9 – Project Week 3 due
  • Mon Dec 12 (finals week) – Project Final due – posted on your own website (not GitHub)

During this time there are no quizzes or other assignments. Class continues to meet, and attendance will be taken. Friday workshop hours will be discontinued with one exception: On Friday, Dec. 9, I will be available if you tell me in advance you want to come in.  Classes end on Dec. 7. Our class WILL meet on Tuesday, Dec. 6 (and we have to move to a different room that day; I will remind you closer to that date).


Design Examples

What is a good project?

Above all, I want you to create a web apps project that will be a great addition to your personal portfolio.

Your project must be about something, or it helps the users to do something. Before you choose the subject, imagine showing it in a job interview. The person interviewing you will probably ask WHY you built an app about this topic. Now, I can imagine two different ideas in that person’s head: (1) “Why in the world would anyone make a web app about this?” Or: (2) “Interesting! I wonder why he/she picked this?” That (1) is a pretty negative thought, and it’s not what you want that person to be thinking! So aim for (2) when you plan your app.

Here are some criteria:

  1. Your project must NOT be a personal website, a website about you or a friend, or a resume or portfolio website.
  2. It must use HTML, CSS and JavaScript.
  3. All images must be fully legal to use and fully attributed and linked (if they are your own images, made by you, that fact must be explicitly stated in text that is visible on your page).
  4. JavaScript must be included in a way that is useful. Including Highcharts charts and/or Leaflet maps qualifies as useful JavaScript, but those are not the only ways we can use JavaScript. You could create a game or a quiz from scratch. You could use a JavaScript library for animations. There are lots of possibilities. (You are not required to include Highcharts charts and/or Leaflet maps.)
  5. Interactivity is expected. Your users should not just be staring at text and images. They should be able to DO THINGS on your page. Please look at the sites linked above under “Inspiration.”
  6. All pages are fully responsive. I will test them at a large width of more than 2500 pixels; a medium width of 768 pixels, and a small phone width of less than 415 pixels.
  7. Your app may include more than one page, but many web apps today are completely contained on just one page. In fact, it is more common nowadays to see a one-page app. So I encourage you to create a one-page app that demonstrates current best practices in web design.
  8. You MAY use Bootstrap, but it is not required. If you do not use Bootstrap, you will still be held to professional standards of design, including: correct font stacks; fully responsive design; accessibility of images and form controls; page layout with thoughtful spacing and arrangement of elements.
  9. If you use Bootstrap, you MAY use a free or paid theme. Using a Bootstrap theme is NOT easy; you will learn lots of new things if you try this (just Google bootstrap themes). Once you have mastered a Bootstrap theme, you have a new and very valuable skill.

If you have questions about the project, please post them HERE as a reply to this post.

Codecademy Progress!

I’m delighted to see that 16 students are making progress on the Codecademy JavaScript course! (Names have been removed from the chart below.)


Details about the extra credit are here, and the password for the class is in an Announcement in Canvas. The deadline for the JavaScript exercises in Codecademy is Saturday, Nov. 5. After that, no additional completed exercises will count. You have to start at the beginning to unlock later exercises.

All exercises completed before Nov. 5 will count, so you can still get started now!

Update (Oct. 11): I just completed all the free lessons in the new course. As I mentioned in class, Codecademy made a completely new JavaScript course and just launched it. Since I could not view the new exercises without actually doing them, I had to do them.