COM271, Week 1
Suggestions for learning
Syllabus | Table of Pages | Assignments | References and Useful Links
Learning objectives: The principal goal for this semester is to have you develop practical competence to build web pages for client-side applications, using html, css, and JavaScript. The materials presented on this web site or on pages linked to this web site, along with extensive practice using the Eric Meyer hands-on-training materials for CSS—plus the focus and practice associated with the assignments—are intended to bring you to a high level of competence in both html and css, and to an intermediate level understanding of JavaScript.
Because you will be learning three related but different languages, there is a lot to absorb. You need to master concepts such as the normal flow of page rendering and the integrating nature of the Document Object Model (we'll come to these). But you also want to learn and commit to memory as much as possible the specifics of each language. The reason for this is that you want to be able to write into a page the instructions needed to make it render precisely as you desire, and this will take combinations of both html and css attributes, and there are many of these.
Coding Versus Page Development in a Hand-holding Environment
Some people will do almost anything to avoid learning to make web pages with proper html, css, and javacript. They'll turn to Wordpress, try to make Microsoft Word turn a document into html (Warning: Your computer will probably blow up if you do this. Well, maybe not (ok. I totally made that up.), but if you want to generate hugely bloated, proprietary junk code, just try to make a web page out of a word document!). Others will take the time to learn how to use a content-management system, a store-bought program that lets you type into boxes, choose colors and backgrounds from dropdown menus, etc. But these people never gain the advantages of being totally in charge of their web pages. Surely, you don't want to be among such rabble!
So the answer to the question of the day—Do I have to learn how to code?—is a definite "YES, of course." There's just no other way to develop the level of competence and skill that is the goal of this course. Sorry. If that is just not what you thought you were getting in for, I have drop slips in my book bag. For the rest of you, the joy of learning to be a web craftsperson is just around the corner!
Throughout, one of your goals is to do things correctly. Browsers can be enormously forgiving of sloppy coding. But you shouldn't go into this thinking that sloppy coding is an acceptable habit. We'll learn how to use online resources to check the html, css, or javascript of our pages, and these resources will be quite good at pointing out our errors.
What to do with lectures: Lecture periods will be a combination of normal lecture (presentation of concepts and techniques) and discussion. To a certain extent, the lecture periods may be the only sources of information; more generally, lectures will provide an emphasis on matters of importance, and a source of examples and explanations. They will also provide opportunity to raise questions or to discuss concepts, usage (language terms, grammars and syntaxes); if you have questions, your classmates probably have the same questions, so you will serve all well by preparing ahead of class and sharing questions. I advise you to take notes and to revise them afterwards. It has been my experience that a sure way to do poorly in this course is to develop a habit of skipping class, particularly lectures. I will always totally respect a student's right to fail, if that is what a student decides to do, but it seems like such a waste to do so intentionally by skipping classes. Clear enough?
What should I be doing in the laboratory? There is a steady series of practice exercises from the Meyer books, and when you have completed these you will be able to apply and solidify your understanding by carrying out related assignments ("tasks"). For example, Eric's "Skinning a Menu" lesson (project 5 in Eric Meyer on CSS) presents some very useful graphic feedback techniques to help users navigate; the use of text and background color changes, combined with clever effects on borders, makes for a site that is sharp looking and one that conveys a sense that this page was developed by a professional web master. When you have worked through the project, you will be asked to develop a similar style sheet for the navigation on your class web site pages.
Note that every time you advance your technical repertoire and complete a task, you should also improve your site home page, as well as updating style sheets that affect all pages on your site. You will be reminded, and this will be part of several assignment's grading rubric, when to extend the techniques used on a particular task to apply to all pages on the site. In particular, your home page should always reflect the full spectrum of your mastery of course material in some way; you should seek to constantly improve it throughout the course.
The purpose of the dual two-hour lab periods is to provide access to the instructor and a regular time to work on practice exercises and assignments. This semester (Spring 2013), we also have a volunteer lab assistant who took this course previously, and who has a high degree of competence in the course's subject matter. You have full access to Dreamweaver and Photoshop within the lab.
It is not anticipated that you will be able to complete all exercises and assignments within the two lab periods. The labs (Fine Arts 102 and Quinn 215) are available during regular school hours. You will also be given information on how to acquire various alternatives for coding environments for home use.
During the lab, you should be working on exercises from the Meyer books or on the related assignments that build on these exercises. You will also be given examples and preparatory material to guide you through the html and JavaScript assignments. During labs, when you get stuck, think through the problem, attempt to reason your way to a solution, but do not waste time; get a second pair of eyes on your code. I or the lab assistant will first attempt to find the problem, then work to get you to be able to recognize it for yourself, getting you over the normal bumps and delays that are part of learning this material.
Remember: Place a high premium on expedience in your learning, just as you value learning to become expedient as a developer. In the real world, time is money. You never want to waste time coding. You reuse, modify, borrow, find. A professional developer will spend, say, $150 to buy a prebuilt server-side shopping cart application that they are then licensed to use in a web site being built for a client. They invest a few dollars to save dozens of hours that would be wasted if the application were to be built from scratch, and a reasonable balance can be attained in costs charged back to the client.
Dr. Logan also maintains an ftp connection to all files on the course server. If you are working on your own and encounter a perplexing stopping point, you may send Dr. Logan the URL of the page with the problem with a brief explanation of what is wrong. He will take a look at the page and suggest solutions, usually within a brief turn-around time.
Keep in mind: Your purpose here is to learn and to understand. If you shortcut work on exercises, do not think carefully about the materials provided, skip class or fail to pay attention, are not prepared or don't ask questions in class or lab, your learning will be severely handicapped. Completing assignments or building your in-class web pages is not your primary goal. Rather, your goal is to learn to be a web developer by understanding everything that it takes to do the assignments. Dr. Logan will do all he can to help you with this.
Finally, do not take my advice on expediency (above) as a suggestion that you shortcut your learning. It is often useful to reuse. There are tens of thousands of web pages posting working JavaScript functions (try googling "JavaScript calculator" for example). But the student who, in a rush, copies one of these and attempts to incorporate it into a page without fully understanding every aspect of such code will almost certainly end up with a page with bulky, totally useless scripts or never-touched lines of CSS rules; worse, they will be clearly seen to have no idea of what they are doing, and they are destined to failure on the path to becoming a web developer (and, most likely, failure in this course). Be expedient, but never take your eye off the primary goal of understanding and mastery as you grow into a web developer.
Learning web development is a challenge, but it is one that returns the great satisfaction and personal and professional utility of any craft that is well mastered. Learning to do high-quality work should return major practical benefits for years to come. For me, this is a key to keeping me engaged as an active web developer. I really enjoy this work (well, not the tedious moments when nothing seems to be going right....where is that bug coming from?), but certainly there is joy and pride at a well-crafted final project. I sincerely hope that you will find that you enjoy the accomplishing as well as the accomplishment.
Ok. Enough preliminaries and preaching. We are ready to start. On to square one: html elements!