This site has been completely updated for fall 2017.
Please be sure to read the Syllabus, as it contains important information that could affect your course grade.
Details of what is covered each week can be found on the Course Schedule page.
Get the book ASAP. There will be a quiz on Monday, August 28.
This course has received a permanent course number from the Florida Statewide Course Numbering System (as of summer 2017): JOU 3363.
The course will be essentially the same as it has been in fall 2015 and 2016.
“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!
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.
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.
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.
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.
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!
Look at this beautiful PDF chart you can download for free.
Chart from ft.com. This image shows only a small part of the chart.
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.
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).
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:
- Your project must NOT be a personal website, a website about you or a friend, or a resume or portfolio website.
- 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).
- 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.”
- 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.
- 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.
- 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.
- 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.
All exercises completed before Nov. 5 will count, so you can still get started now!