Examples of Bootstrap apps

Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).

You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.

The reason I chose to use Bootstrap for each of those projects was because my main aim was to work with JavaScript and handling data, so I did not want to spend a lot of time thinking out the design and writing CSS. That’s exactly the kind of project for which Bootstrap is great!

Each of the examples also has a README at GitHub if you’re curious about the why and how of it.

Advertisements

JavaScript tips for Assignment 6

Until now, you’ve been using two markup languages, HTML and CSS. This week, you’ll begin using JavaScript, a programming language.

Markup languages change how things look.

A programming language makes things happen.

I’ve given you lots of resources for getting started with JavaScript.

This post provides a quick reference related to the assignment.

  1. What is a variable? How does it work? Watch this video. Also see Robbins, pages 465–466.
  2. What are the alert, prompt, and confirm dialogs? See figure 19-5 on page 464 in Robbins.
  3. How do I use the JavaScript console? Same video, at the 1:00 mark. Note: Use Chrome.
  4. How do I change the value of a variable? Same video.
  5. How can I use alert, prompt, and confirm dialogs? That’s in this video, at the beginning.
  6. What is an if-statement, and how can I use one? See Robbins, pages 470–471, and this video, starting at 6:59. This shows you everything a beginner needs to understand a basic if-statement in JavaScript.
  7. What is an array? Watch this video. See Robbins, page 468.
  8. What is a for-loop and how does it work? See this video at 6:54. See Robbins, pages 471–473.
  9. For-loops are continued in this video. How to loop over an array is specifically shown around 2:53 in that video.

NOTE that when you write console.log() in JavaScript, the string or instructions in parentheses will ONLY be seen in the JavaScript console. If you want something to appear in an alert, confirm or prompt dialog, you cannot use console.log() in your code.

One final note about this assignment: The point is NOT to teach you how to use alert, confirm and prompt dialogs. The point is to teach you how to use variables and arrays, which contain values that can be changed, and to use if-statements and for-loops to get work done.

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.)

screen-shot-2016-10-09-at-11-31-23-am

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.

screen-shot-2016-10-11-at-8-13-16-pm

.

A nice example of a single-page Web app

This is as good as it gets: NPR’s annual roundup of the best books of the past year is an ideal one-page app.

NPR’s Book Concierge

npr_books_mobile

Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.

npr_books_desktop.jpgnpr_books_desktop_modal

Above: Click any book and get this modal overlay, which you can also use to simply browse all titles. In a single-page app, you never leave the original Web page.

They have merged all their JavaScript into one minified file. Separately, they have merged all their CSS into another single minified file (plus two separate font-handling files).

At the bottom of the HTML source, you can see the entire dataset for all the books in the form of a minified JSON object.

The HTML is super-clean and readable. If you have used Bootstrap, you can understand it completely.

Creative storytelling: Example

Here is another New York Times feature story that uses all kinds of cool code tricks to add interactivity:

Greenland Is Melting Away

Note that the developers did use a framework for this page — it was Foundation, not Bootstrap. They used JavaScript to detect older versions of the IE browser.

They used a JavaScript library named FT Scroller for the scrolling interactions.

There’s a bunch of custom JavaScript to accommodate mobile, disable scrolling effects, and more.

You can even find some code you will recognize if you view source:

Source code - screen capture

New free resource for JavaScript

Code School has a new, free course for learning basic JavaScript:

JavaScript Road Trip

Unlike Codecademy, Code School has some very well-produced videos to help you learn. Like Codecademy, Code School offers an interactive exercise panel where you can try to answer problems, and they award you points if you get these right.

We will be using Code School for learning jQuery.

Extra Credit Points for Codecademy

On the Course Schedule, I have listed certain Codecademy modules that I want you to complete for JavaScript and jQuery. I am willing to give you extra credit points for completing these modules.

Here’s how it will work: For each module for which you earn a checkmark as shown below, I will add 1 point to your final total of weekly assignment points. (Did you get a 0 or low score for an assignment? Here’s your chance to make it up!) You have an opportunity to get 12 checkmarks for JavaScript and 5 checkmarks for jQuery. Note: You must be logged in with a username I have in my chart, or else you will not get the points. I will not accept checkmarks unless they appear on my chart.

Deadline for checkmarks for JavaScript: 11:59 p.m. on Saturday, Nov. 7.

Deadline for checkmarks for jQuery: 11:59 p.m. on Saturday, Nov. 21.

Checkmarks that appear later will not count.

Codecademy Pupil Tracker

You can’t see this chart — it’s for teachers only. But you CAN see that you have successfully completed a module if you are signed in at Codecademy and you look here for JavaScript or here for jQuery. Only 100% earns a checkmark!