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.
Each of the examples also has a README at GitHub if you’re curious about the why and how of it.
Markup languages change how things look.
A programming language makes things happen.
This post provides a quick reference related to the assignment.
- What is a variable? How does it work? Watch this video. Also see Robbins, pages 465–466.
- What are the alert, prompt, and confirm dialogs? See figure 19-5 on page 464 in Robbins.
- How do I change the value of a variable? Same video.
- How can I use alert, prompt, and confirm dialogs? That’s in this video, at the beginning.
- What is an array? Watch this video. See Robbins, page 468.
- What is a for-loop and how does it work? See this video at 6:54. See Robbins, pages 471–473.
- 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 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.
All exercises completed before Nov. 5 will count, so you can still get started now!
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
Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.
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.
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.
Here is another New York Times feature story that uses all kinds of cool code tricks to add interactivity:
You can even find some code you will recognize if you view source:
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.
Deadline for checkmarks for jQuery: 11:59 p.m. on Saturday, Nov. 21.
Checkmarks that appear later will not count.