Looking up tags, etc.

As I walked around the classroom last Tuesday, I saw a few students consulting the website named W3schools. I do NOT recommend that site. It is not the best one for accurate, up-to-date information about how to use HTML and CSS today.

In the sidebar of this course website, you’ll see a list of resources that I DO recommend. For looking up the right way to use HTML tags — and CSS selectors and properties — your first choice should also be MDN. You can get what you need in a Google search by adding mdn to your search terms. (I always search this way.) For example:

headings html mdn

If you find MDN not to your personal taste, my second recommendation is HTML Dog. It is reliable and accurate.

Note that W3schools is NOT associated with the official World Wide Web Consortium (W3C). Their name is misleading.

Advertisements

Things to do before class, Aug. 29

No workshop hours this Friday, Aug. 25. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist. Watch the videos before class — they are the lecture.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday deadline!
  4. Download, install and run the text editor program Atom before you come to class. Here’s some help for getting started with Atom.
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture you. (The videos are the lectures in this course.) My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 in the assigned book are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs!

The exercises in chapter 4 will be very helpful for you. Consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to completing Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays. Now everything is HTML5.

If you want to ADD this course

A lot of students who wanted to take this course could not get in. It filled up in the beginning of April. There should be only 20 seats, but we raised the cap to 25 seats.

Since April 5, four students dropped, and four others were able to add. The course is still filled.

Students may drop this course until 11:59 p.m. on Friday, Aug. 25. If you want to join the course, you need to add it yourself, so just keep watching the UF registration system until Drop/Add ends.

IMPORTANT: If you hope to add the course, you MUST come to the first class meeting. I will be explaining a number of things about how to succeed in this course and what you will need. Also, all of you must read the official syllabus PDF file, which you can find here.

The first class meeting begins at 10:40 a.m. on Tuesday, Aug. 22, in Weimer 3032. 

NOTE that this class is offered ONLY in the fall semester. It will be offered again in fall 2018. Only students enrolled in Journalism, Advertising, Public Relations or Telecom may take this course.

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

screen-shot-2016-11-22-at-9-15-54-am

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.