Plain talk about file names

There are a lot of conventions in web design and development, meaning “the typical ways things are done.” When you don’t follow the conventions, sometimes it would make a hiring person scratch her head and wonder why you don’t do things in the typical way.

The way we name files and folders in websites and apps follows some conventions. Some of these make a huge difference, and some are just for convenience.

  1. The primary HTML file on a site, or in a subject folder, is named index.html. This is more than just a convention — the browser will open that file automatically if it is left off the end of the URL. Examples: (index.html at top level of site opens) (index.html in the /examples/ folder opens)
  2. The primary CSS file for a site or a project usually has a name that indicates its status as the main CSS for the site. Thus many web developers would name it main.css, or possibly styles.css. Some people like to name it default.css or site.css. When you have different projects, you will likely name the style files to match the project name. Look in the /css/ folder here to see examples.
  3. Note that a JavaScript library — such as Highcharts — often includes its own CSS file. Typically, that file is named after the library — highcharts.css, for example. Thus you should NOT name your personal CSS file the same name as a library you are using. It might create problems, later if not immediately.
  4. Your folder names in a web project should clearly indicate the contents of the folder. All images are typically inside a folder named /images/. The CSS files are often inside a folder named /css/. but (alternatively) may be inside a folder named /styles/. The JavaScript files are often inside a folder named /js/. but (alternatively) may be inside a folder named /scripts/.

As you continue learning and exploring other people’s projects, you will probably see folders named assets, modules, components, model, view — these will contain components that make the site or app work, rather than pure HTML files.


  • Filenames and folder names NEVER have spaces in them.
  • They contain no punctuation other than possibly an underscore or a hyphen.
  • Do not use uppercase letters in filenames or folder names.
  • All files have a file extension — .html, .css, .jpg, .png, etc.
  • The only dot in a filename is the one at the start of the file extension.

Follow the conventions, and your work will be easier!


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.

Followup on Assignment 3

Here is a list of points to consider:

Observations from Assignment 3

Keep in mind that the header, footer, article, section, aside, and figure elements are always OPTIONAL. You do not need to use these. Use them if they make sense in your document structure.

Figure vs. img alone: Many people use the img element with just a p for the caption and attribution — without using figure and figcaption at all. Note that you may use figcaption ONLY inside a figure element. No figure? No figcaption! Using figure is OPTIONAL.

Box-sizing and the box model

This is an up-to-date article (brief) about the box-sizing property. It’s on a very good website for CSS tips and tricks. You might find some other good ideas there.

I showed this CSS in class:

p { 
	-webkit-box-sizing: border-box; 
	   -moz-box-sizing: border-box; 
	        box-sizing: border-box;
	width: 500px;
	padding: 20px 10px;

/* an alternative, if you don't need to worry about old browsers */ 

p { 
	box-sizing: border-box;
	width: 500px;
	padding: 20px 10px;

Robbins (p. 309) explains the box-sizing property.


You should use this CSS validator to check your CSS files.

You should continue using this HTML5 validator to check your HTML files.

Tips after Assignment 2 (HTML)

Some observations and advice from me to you:

Spelling errors are not okay: I saw a lot of common words spelled incorrectly, like recipe (recipie) and original (orginal). You’re going to be doing work in this course that you might show to someone in a job interview. You must not have typos in your text.

Making your content fit to be seen by others: A photo caption that says “Photo by Joe Blow” is okay (really that’s a photo credit). A photo caption that says “Original Photo Here” doesn’t look like something I would expect to see on a real website. See example below the photo.


Falafel are small fritters made of ground chickpeas. They are popular throughout the Middle East and Egypt. Photo by Leon S.K. (Flickr) [CC BY-SA 2.0], via Wikimedia Commons.

In the caption above, I said something interesting about the dish, and then I added the required attribution. Think about what looks professional, and then do that on your own pages.

Filenames and folder names: Professionals lowercase all filenames and folder names. Also, NO SPACES. Robbins says this explicitly on page 53. Your page will not validate if any image filenames have spaces in them, for example. All punctuation marks are forbidden in filenames except the underscore, the hyphen, and one (ONE!) period preceding the file extension.

Choice of filenames: For any assignment, the main page in a folder can be index.html. For Assignment 2, recipe.html makes sense. Naming a file assignment2.html looks like homework. Think about your portfolio.

Text for the ALT attribute value:Alternate text (also referred to as alt text) should serve as a substitute for the image content — serving the same purpose and presenting the same information” (Robbins, page 126). More here, from the W3C, keeper of all Web standards.

Typing an attribute correctly: The ALT attribute, HREF attribute, and SRC attribute all have the same format. First the attribute name. Then, an equals sign. Finally, a pair of quotes. Inside the quotes is the value of the attribute.


Editing a super-long URL: Any super-long URL is unwieldy, and also, it will often throw an error in the validator. I demonstrated how to fix this in the “Assignment 2 Part 2” walkthrough video, at 4:00 in the video. This editing is also recommended for links you click in social media, like this one:

See the question mark in the URL? That question mark and everything following it can be deleted:

That is a cleaner, shorter and better URL to share and to use on your Web pages. But a word to the wise: ALWAYS click the link on your page to double-check that it goes where you intended it to go.


“All basic structure tags and elements are present and correct.” From now on, if you have any errors in these tags, or if any are missing, your points for the assignment will be 4 or fewer.

New classroom; half-price book sale

Our new classroom is Weimer 3032. This is on the third floor alongside the atrium, in the corner farthest from the elevator. We will meet there starting Tuesday, Aug. 30.

It is possible that some days we will need to meet in the original room instead. I will give you advance notice of those days.

An ebook version of our textbook went on sale today at half price, which is $20.99. Go to this page before Sept. 14, and use discount code B2S6. Other O’Reilly books are on sale too (ebooks only). These are the best books for learning programming and technology, so browse around.

See you in class!

Welcome to the fall 2016 class

This course website has been updated for the fall 2016 semester. If you are an undergraduate majoring in Journalism, Advertising, Public Relations or Telecom, you should consider taking this course. Everyone is welcome. There are no prerequisites.

  • See the About page to get an overview of the course.
  • See the Required Work page to get an overview of — you guessed it — the amount of work you’ll be doing in this course.
  • For a full week-by-week rundown of topics, technologies and assignments, see the Course Schedule page.

One important piece of advice: It does not make sense for a student to take both this course and MMC 3260 at the same time. MMC 3260 is a simple “build a website” course. You should compare the content of the two courses and select the one that suits your interests. You can look up any syllabus in the College of Journalism and Communications.

In this course, “Intro to Web Apps,” you will learn to code. You will learn how to make things for both web and mobile. You will learn about industry standards, responsive design, and interactive graphics, maps, and charts. There’s a follow-up course too, if you like this one — and this one is the absolute prerequisite for that one.

If the course is full, please come to the first class meeting anyway. Some students will drop, and then you can sign up, and you won’t have missed anything! Watch ONE.UF for an opening. There is no waiting list for this course.


See you in August 2016!

This is the course website for Intro to Web Apps, an elective in the Journalism Department at the University of Florida. To see the week-by-week assignments and topics, go the the Course Schedule page.

This course is taught in the fall semester only. It will be offered again in fall 2016.

There are no prerequisites for this course. Priority is given to students enrolled in the College of Journalism and Communications. This course is NOT a capstone.

The follow-up course is Advanced Web Apps, which has its own course website. That course is offered in the spring only.