If you were asked what this course was about and answered “web pages”, that wouldn't be a bad answer. Part marks for that.
The goal of the course has been to introduce you to front-end development (or front-end web development or client-side development), and to introduce some basic ideas from computer science along the way.
The three major topics of the course mirrored the web standards model.
Conceptually, HTML isn't very difficult: describe documents. There is some subtlety in choosing the right tags to match the meaning of your content, and the right tag layout to make things easy to style later. Getting these (especially the second) right take some experience, but hopefully things are mostly straightforward.
Most CSS changes are relatively straightforward: margins, padding, colours, fonts, etc. The difficulty we have seen really comes in two places. First is in browser compatibility: will the browser support particular CSS changes, or have particular fonts available, or display elements as we expect with the window/screen size it has? Second is positioning: how can be move pieces of content around the page to significantly change the layout?
Both areas of difficulty are unavoidable. We have no choice but to deal with the browsers our users have, and their screen size. We also will eventually want designs that have more than the default arrangement of elements. CSS frameworks can help here, but are sometimes over-powered for a few simple changes.
The fundamental problem here is figuring out how the tools you have (functions, variables,
if, etc.) can be used to get the behaviour you want. We have explored a relatively limited set of the possibilities, but hopefully enough to give you a sense of what programming is all about.
If you thought that programming was the hardest part of the course, you're probably right. This was the point that all of the other technologies came together. It's also the point that the way you make things happen becomes more abstract: there isn't much of a mental leap between “need another paragraph” and “add a
<p>”. On the other hand, between “do something different next time” and “use a variable to hold the state we're in and change it each time” requires some insight into how describe the behaviour we want in terms of the tools we have in a non-obvious way.
This level of abstraction and constrained problem solving is what makes programming both difficult and interesting. Hopefully you have gotten far enough to have had a few rewarding “I made it do something!” moments.
The more programming you learn, the easier it gets to find your way through problems. In that sense, programming is no different than any other skill: after lots of practice and a few failures, it seems easy and you forget why it was ever so hard.
When creating web pages, you're almost certainly going to be using graphics of some kind. Our images were the first time we did anything on our page that could cause them to be large in terms of file size and download time: that needed some attention.
We saw that there are several ways to represent images for web pages (and in computers in general). The choice of method (vector or bitmap) and format (SVG, PNG, JPEG) can have a huge impact on the file size and image quality. Choices of details (colour depth and compression) of how the files are saved also has a big impact.
The goal was the same in each case: represent the image we have with the highest possible quality and lowest possible file size. Sometimes there is a tradeoff between the two.
jQuery and Raphaël
That doesn't mean that these libraries weren't important to the course, or that they aren't useful skills to have, just that you shouldn't lose sight of the big ideas of programming.
When you're working on programs, remember to keep track of the type of the object you have. Different types of objects have different functions inside them that you can use.
jQuery(…) if you prefer) gives you a jQuery object with functions like
When you use
shape = paper.…() to draw on a Raphaël paper, you get a Raphaël shape object. Those have functions including
As you can see, there's a lot of overlap between the two, because they're doing somewhat similar jobs: manipulating HTML elements vs manipulating SVG elements. If you aren't careful with what kind of objects you're dealing with, and the differences between them, it's easy to get confused.
The Missing Topics
Of course, there are countless topics that could have been covered in this course, but there is only so much time in the semester.
There was much more to be said about how HTTP carries information between the client and server. Server-side programming (or back-end development) could be a course on its own. In some ways, web development brushes up against mobile app development, but that can also be a course worth of material by itself.
Perhaps most notably, this Guide didn't cover any aspects of graphic design. A front-end web developer certainly should have some deisgn skill, but it's not a common topic in computer science, so it was left out of this Guide. Other disciplines will be much more skilled at covering the topic (and other authors much better at introducing it).
Does this course have anything to do with jobs? Or the rest of CS?