In September I will be teaching a university module on web technologies. This session will be available to 1st year (freshman) students who don't necessarily have any programming knowledge or know how the web works.

In the 2nd semester I will be teaching Flash, which is my specialism, so I know exactly what I am going to teach, but in the 1st semester I will be teaching them web standards technologies - HTML, CSS, JS, jQuery, PHP and MySQL.

Where I need advice is how to proportion the emphasis for each part, and which parts of each technology to cover. Another real issue I'm struggling with is how much of the bad old ways should I teach them? Do they need to know about bold as well as strong, etc. UPDATE: based, on your feedback I will only be teaching the latest version of everything - CSS3, HTML5 etc.

I'm not sure exactly how long the semester will be but I'm guessing about 10-12 weeks. Each session is a 2 hour lab. Obviously there's only so much I can cover in that time and it will be up to the students to go a research this stuff properly on W3 schools etc.

My ideas so far were:

Lesson 0 - Course intro and overview of the current tech landscape. What is out there, what will we be learning, what won't we. What is a web server, URL etc. Looking at different example websites and discussing how they work.

Please let me know if you think this is the right order, what have I missed, how to use any spare sessions etc. Thanks :)

UPDATE BASED ON RESPONSES:

Thanks for all your responses - some great stuff. To be absolutely clear, this is not a computer science course, it is a practical module on a creative technology course. The emphasis definitely has to be on making cool things work rather than understanding how the backbone of the internet works. That can come later, if the students are interested. At the end of the module I would like the students to be able to produce a web page or pages that does something cool, using some or all of the technologies I cover. Many of these topics are of course far beyond the scope of a 2 hour session, however I do not have the option of reducing the syllabus, I will just have to explain what the technology does and encourage the student to research it in their own time.

There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.
If this question can be reworded to fit the rules in the help center, please edit the question.

24

"W3 schools etc." For the love of god, do not recommend W3Schools. Recommend MDN. (W3Schools is full of the "bad old ways")
–
RaynosJul 26 '11 at 10:03

6

I don't like the idea of putting HTML and CSS2. These things are old and we are currently in the end of transition phase. Directly start from HTML5 and CSS3, just to make sure we don't spend time teaching something that will be obsolote in 2-3 years time.
–
RudyJul 26 '11 at 10:35

3

@Iain yes, it might be worthwhile to spend about 10 minutes on information around from the early 00's and later 90s and mentioning off hand that they are bad. I'll still highly recommend againts referencing W3Schools There's a detailed campaign. Websites like sitepoint and dottoro are a lot better.
–
RaynosJul 26 '11 at 12:19

14 Answers
14

1st year (freshman) students who don't necessarily have any programming knowledge or know how the web works.

I've worked with similar students and I've learned a few lessons, hopefully these can help. Keeping that in mind, I have some other suggestions for Iain.

1. What is the Goal for the course? You seem to be a little all over the board. Ajax and JS programming, DOM and XML's? What exactly do you want to achieve by the end of the course? My concern here is that you'll scare off/overwhelm these students. You can't say "Go Look it up on W3" and expect students to understand concepts. Based on personal experience this just leads to misery on both sides I know similar students who can take a week to understand and use basic CSS. HTML can be done in one lesson, but make sure students can keep up. This has been the main priority when I teach students. I'll provide you with an ideal schedule soon.

2. Keep the Advanced Stuff, but not as early.
The power of building something and seeing that it works inspires students to work harder to build something that is better and cooler. If you start working with JQuery and DOM all of a sudden, it'll give power for advanced students to excel, but the students that I've mentioned earlier, will flounder.

3. Work with CMS's. Most of the time this will create at the very least an understanding of how CMS's operate and how they can manage them. This empowers them to do other things with a CMS. They then can apply their CSS knowledge to tweak and alter the CMS settings. Some Job's can ask for knowledge of WP knowledge and this could help them. Often times, students love working with it, but this also can help to build interest and develop skills.

4. That schedule has the right pace, but you are missing some components.
My Alternative (based off personal experience)

Lesson 0 - Course intro. What will we be learning, what won't we. What is a
web server, URL etc. How we talk to servers. Ping Commands. IPv4. Have them ping if possible. How Webpages are built. Take to a sample page and check out the Source Code. Homework:Find 2 Cool Sites. (Not Facebook (though its a good example of PHP) or Google)

Lesson 1 - HTML basics (head, body, title, img, table, a, lists, h1,
strong etc). Show them what exactly a Page looks like and how to build one. Show them that its really really simple. Just type, and it comes out. Explain the tagging concept. Show how h1 tags just tell the browser that this text is important and it makes it bigger. Explain how browsers get the HTML and display it. Have them build a REALLY simple site (I'm talking about a list of links using the tags mentioned above) Homework: If possible have them make a simple HTML file or assign reading with a little bit more advanced html.

Lesson 2 - CSS for styling and layout - fonts, webfonts, float etc. This will be confusing for students, so you need to show this clearly. Often time people (cough, me) feel the urge to use align="right" instead of CSS. That's because I never really learned proper CSS until a little while back. Follow the same rules of having them build something.

Lesson 3 - Intro to programming JS. Really simple though. There is way to much stuff to cover here. Just choose 4-8 commands and demo them. Have the students work with it while you are doing it as well. Then after the lesson show them where they can learn more.

Lesson 4 - PHP Basics. I love PHP, since its so simple. Explain the to them structure and examples of code ie echo, get, post, simple math. Server Side. Now is a good time to introduce forms. Do a login example where it POSTS and the PHP script echoes it

Lesson 5 - CMS. Show how easy it is to use and how it uses, HTML,PHP,CSS,JS,and DB's to work. Create new post manage users etc. Really simple overview. Have them mess around with it if possible. Show them how they can mess with JS and CSS to tweak the appearance.

Lesson 6 - Build Day. How do you integrate JS,CSS, and HTML? Show examples of how they beautifully work together. This is when you challenge students to do something cool with their skills. Show them how to do something like building a sample maze site or something similar. You can use CSS, JS, and HTML to do this. Have the students tell you how to build it, or better yet have them build it with you. Let them use whatever tools they want, but if they use a CMS make sure they can point to how they applied their newfound skills to modify/create something cool.

Lesson 7 - MySQL. Might be hard to do so create a sandbox and just show them how to connect and how to check a database. Assign further reading or homework if you feel like its required. Complete the login example from last lesson, except now it checks the database.Good time to mention SQL injection and Hacks

Lesson 8 - jQuery how to. HTML5 how to. Review some examples of how to use these common web tools. Go over jQuery Mobile if possible. Review how to build a Mobile Web App (Meta tags). This will be really brief (30-40 minutes) In the mean time cover AJAX examples.

Lesson 9 - Integrating and working with Templates + CMS Templates (Pretty Useful and Will Make the sites 10x as pretty)

Lesson 10 - Advanced Review. Now that you have the fundamentals , this would be a review lesson showing them where they can get more advanced details. W3Schools may not be the best place, but you can probably come up with a list of books and links. This is also where you ask students what THEY want to learn. <- This is huge for students. As much as I try, and as much exposure as I have with students of that age, I can't predict what they want to learn.
Ask them. In fact, Ask them early on. If you can assign a project and give them the tools to succeed. An idea: Design a site for themselves or something similar.

5. Include a fundamentals lesson. But this needs to be carefully done. It's not worth spending too much time on this. I will include some more details soon. Basically, you should not bore students with not so interesting HTTP fundamentals (yet). They don't really matter at that point. An idea way to do this is to assign it as reading. But do not hand it out as the first thing in the course. Nothing puts off students like a 50 page reading on TCP/IP fundamentals. They should know this, but it shouldn't be the first thing. Make sure students BUILD something very early on, so you don't lose them. This is REALLY important, and perhaps create a sort of system where you can make sure they are on track .

6.Notice How I Didn't Include some Advanced Segments

That's because students (especially freshmen), who aren't experienced, can't handle it. Break them in. I've seen this with students too many times to count:

Uh, CSS? What? Uh? Hmm....yeah no clue. I'll just ignore it and go back to using "p align".

This is why you need to break them in. They can be overwhelmed quickly. If you start of mentioning how TCP/IP communicates packets over ports using Secure Socket Layer that are sent to servers over fiber optic cables in flashes of light that your ISP then interprets and sends to a server which has a few open prots (made that up to sound confusing) they'll be overwhelmed. The formula is below:

Simplify and Build.

While they are building, you can explain what they are doing. This works great from my experience.

'You can't say "Go Look it up on W3" and expect students to understand concepts.' So true.
–
blubbJul 26 '11 at 12:02

+1 great list IMHO. I'd suggest including something like WordPress as the CMS and perhaps doing it a bit earlier in the course, as its good to get things up and running, and you can then look at modifying HTML / CSS in themes, and PHP / js in plugins etc.
–
Kris CJul 26 '11 at 21:23

Right, thanks Kris. It might be a little late as Number 7. Since WP use PHP pretty heavily, we can put it in right after PHP. Then MySQL is how WP stores logins anyway, so you can look at that.
–
HelloFictionalWorldJul 26 '11 at 21:27

Reading some of this stuff over, and there are missing words in my comments and posts. Hopefully you guys can understand what I meant.
–
HelloFictionalWorldJul 27 '11 at 1:04

Accepted because of my confirmation bias about keeping it simple and building things as you go, rather than loads of theory :)
–
IainJul 29 '11 at 16:35

sure - I will definitely cover things like Webservers/DNS, but I do want to focus on their practical skills rather than their background knowledge.
–
IainJul 26 '11 at 9:42

7

@Iain: everything can be covered in one lesson, and I really think you should know that before learning the rest.
–
user2567Jul 26 '11 at 9:49

2

Perhaps the most practical skill I've got is basic HTTP debugging. It is worth a week or two up front, especially if the end payload is a semester of flash.
–
Wyatt BarnettJul 26 '11 at 11:40

2

I concur with Pierre. There are far too many cases where people have no idea how the internet works at all. People need to understand what a client is. what a server is. what HTTP is. What an IP address is. How HTTP is nested in TCP, then IP, then data link layer. They should understand how facebook.com -> IP. How to use ping. You should show them how to get a website using telnet. "understand" isn't the right word here. It's more like, they should be exposed to this. This could be done in two hours Further, when you go over php, you should teach them about basic CGI first. POST, GET, Cookies
–
user606723Jul 26 '11 at 18:23

1

Keep in mind that I know this isn't a CS course. In a CS course, you don't learn about HTML, HTTP, DNS, CGI, AJAX. Those are not computer science topics. You might be tasked with dealing writing some basic utilities dealing with those topics as exercises, but they will not be covered explicitly. A computer science course of this nature would simply not exist. The closest thing would be networking class. There you cover things like sockets, algorithms associated with network protocols, and by consequence, network layers, and then touch on network security for good measure.
–
user606723Jul 26 '11 at 18:48

First and foremost -- "web technologies course" -- is a wide, vague and and highly "panoptical" phrase -- you just can't say that -- you have to zero in on "things" that make sense for students of first semester -- AND specially "things" which are vital, no matter what technology stack/platform/language they choose in later semesters.

So, i think these "things" are vital for noobs entering the realm of Web, and you design your lessons around them...

a thorough understanding of client/server architecture, basics of TCP/IP network (the backbone of Internet)

what is a protocol, ability to discern application protocols from lower ones, good understanding of HTTP, and of the "context" of HTTP -- where it lies in the stack of protocols that make Internet happen

DOM -- what is it, how HTML corresponds to DOM, why DOM exists, why is it important and useful to manipulate it dynamically

CSS -- what is designing, how CSS traverses DOM, basic CSS

JavaScript - basics of programming, how JavaScript interacts with DOM, what is browser incompatibility, some initial ways to deal with it

the server -- what is a server, what is a port, how server and browser communicate, what does it mean to generate a web page dynamically, some very preliminary exposure to Apache server

PHP -- how PHP generates a page, PHP basics

XML -- what is it, similarities/differences from HTML, why is it important, comparison with JSON

forms -- dealing with forms in browser, on server, with JavaScript, and with PHP, how all of these come together to make a form communication take place

Security -- basics

the magic of Ajax -- why is it important, the mechanics of Ajax, incompatibilities, dealing with XML and JSON response

don't introduce JS libraries without introducing bare JavaScript and giving some taste of incompatibilities -- you can't appreciate JS libraries if you haven't been through the pain of browser incompatibilities. If one can't hate IE-6 they can't love jQuery.

XML is more primitive than Dabatase/SQL -- so introduce XML first

give them some hints/pointers on HTML5/CSS3 -- but don't spend too much time on them as these are still relatively infant

Remember to always encourage (even insist) the students to explore -- nothing can be as effective as rambling about the Internet -- reading stuff as it comes along -- asking questions, joining communities -- you get the idea :) The internet is both the teacher and the thing to teach.

And always remember these words...

I never teach my pupils. I only attempt to provide the conditions
in which they can learn -- Albert Einstein

The whole art of teaching is only the art of awakening the natural
curiosity of young minds for the purpose of satisfying it afterwards
-- Anatole France

You can teach a student a lesson for a day; but if you can teach
them to learn by creating curiosity, they will continue the learning
process as long as they live -- Clay P. Bedford

I would leave the last lesson for cool examples and demos using HTML5, CSS3 and latest features out there.

I am not sure, You need to do an extra lesson for jQuery. Cause jQuery is just a library, which could be replaced with prototype/mootools or whatever. You can just let them know, that it is reasonable to use existing libraries without inventing a bike.

Another thought is to let them make there own CMS blog (Wordpress, Drupal, Joomla). I regret, they didn't teach me about CMS in the university, cause although I could program in PHP+JS+CSS while sleeping, I didn't know a thing about existing CMS systems and their capabilities and that cost me lot of time.

Make a choice between HTML4/5 and XHTML. If your doing XHTML then do "XSLT / XPath / XSD". If your not teaching XHTML then there is little point. JavaScript APIs are probably beyond the scope of a 10 week course (or at least hard to fit in with all the other things you want to teach)
–
RaynosJul 26 '11 at 10:07

2

I think we should get rid the HTML and CSS2 and directly jump to HTML5 and CSS3. Don't teach something that will not be useful in 2-3 years time.
–
RudyJul 26 '11 at 10:38

@Rudy yes and no. HTML4 and CSS2 are still subsets of HTML5 and CSS3. But I agree that <header>, <nav> etc should be taught from the get-go.
–
RaynosJul 26 '11 at 10:47

First of all, I think you should approach the curriculum question from another angle. Instead of asking yourself what you should teach them, ask yourself what you expect them to be able to accomplish after taking your course.
While you're at it, make sure you communicate this in your very first lecture. Don't underestimate the motivational boost your students get when you tell them that they'll be able to "sort data the fastest way possible" instead of "learn what an AVL tree is".

Secondly, your schedule contains a lot of concrete (programming) languages. I think a freshman may be well overwhelmed, especially if they have other programming courses. Instead of showing every language, I would cover concepts like separation of presentation, business logic and data layer and then confront them with the involved languages (JS, PHP, SQL) in an exercise session. That way the students realize that it is more important to understand the underlying concepts than concrete implementations.

For better or worse, I have to teach them the concrete implementations. They need to come out of the module with the ability to build something.
–
IainJul 26 '11 at 11:51

1

@Iain: So teach them concepts and let them build something with the concrete implementation. When your students get out of school, the implementations will long be replaced by new & fancy frameworks, but the concepts will still be the same.
–
blubbJul 26 '11 at 11:58

Definitely security, showing a simple sql injection example is a quick and easy way to highlight how easy it is to do things wrong.

Otherwise I think a balance of 'cool stuff' (js, jquery, css, apis etc) - to maintain interest, backed up with ' fundamentals' to make them concious of doing things right. You need to balance the two because when starting out no one is going to be interested in http, ftp, osi, dns, hosting, yada yada but those here highlighting the importance of it are absolutely right.

You won't make superstars in a single course but you can plant some superstar seeds :)

I discovered a commercial website (they sold computers) built with MS FrontPage and they allowed Everyone to edit. I called them on the phone and they said thanks. Times have changed.
–
JeffOJul 26 '11 at 13:28

Besides the pure technical things I would also put it in a historical context. Some relevant periods like when did the web emerge, the browser battle, rise and fall of Netscape, upcoming of e-commerce, social networks, email etc.

I am old enough to have seen all by myself, younger students sometimes have interesting ideas how technologies came up and what the fundamentals are. I would definitely mention Java and applets (everybody thought it is a way to go), ironically Java succeeded on server and not on client side. Active X can be mentioned. As said above the basics such as IP/TCP/DNS need to be covered, Web 2.0 should be mentioned. Also many industrial standards came up such as PDF.

So, as a conclusion, I would draw a timeline and show the key technologies of the last 15 years as a bigger picture in an introduction.

When I was at university I was often confused about things I'm being taught. Reason was that I had no context.

You said they're freshmen and likely without any experience. That means they most likely have no interest and generally no idea how web works.
What should be done first in my opinion is to get their interest and explain how HTTP works and why is it that we can browse webpages, without any boring history lessons on how internet came to be.
Once they get the grasp of HTTP (client asks, server replies, then hangs up), they should be pointed towards how the internet works, how it is that a URL gets translated to IP, what IP is etc.

Then I'd move on to server-side, not client-side. What will get people's attention is when they get to do something they haven't done before. I remember when I wrote my first "Hello World" program, after which I allowed the console keyboard input and printed that out on the screen - I got the chills, which is what got my attention and raised my interest for programming.

If you can get them to listen and quickly show them how it works, I'd just swap client-side and server-side in your list, just so they can get to "programming", even if it's not applicable.

The database section should be a lesson on its own. Databases are critical to most business applications and web programming and are usually neglected. You might also let them know about nosql databases at this time and talk about what problems the realtional database solves and what problems the noSQL databases solve.

Databases should be a couple of lessons worth I'd think. On the one hand there are the basics of tables and queries for one lesson and then the second is modelling something a bit more difficult I'd think.

Just to elaborate a bit more. I could imagine creating a series of tables to store information about say a Music, Movie or TV library as a rather simple and straightforward assignment that for those new to database design may not be all that simple. For example, do you have a person table or would you rather have a table of actors if you took the Movie or TV example. There is something to be said for understanding how finely something is done and what may be good enough in one case that isn't necessarily the case somewhere else.

Normalized forms may be a bit much for freshmen to get a week after being told how a relational database works. This is part of why I'd advocate breaking it up so that while the basics may be understood, their application may not be so straightforward. Another thought here would be to take a sample DB in the first lab and then in the second, the students would create the DB structure from scratch.

You may want a lesson on handling image files on a web page. Introduce some simple tools to resize, lower resolution, make transparent, alt text and demonstrate how they affect performance. Animation shouldn't be a distraction.

Given are are planning on teaching flush is of value, here are a few point to think about.

You should teach that Flash should be avoided as much as possible for useful content as a lot of people turn it off to block adverts.

That all adverts should be in Flash, so they are easy to block.

That Flash should never be used to display text, or implement custom subpage navigation of contents, as it makes it impossible to send a link to someone. (The number of times I wish to send a link to the menu, but the “web site” was just one large lamp of flush is amazing.)

I am teaching them game development basics and animation in Flash - I'm not going to encourage them to go make websites with it.
–
IainJul 26 '11 at 12:54

1

The phrase "Given you see to think that teaching flush is of value" feels rather offensive, the overall post more like a rant about Flash than a genuine advice on what to teach. (At least to me.)
–
blubbJul 26 '11 at 13:59

@Iain, but if you don't teach in detail other ways to do web sites what do you expect them to use as soon as they wish to go past static content?
–
IanJul 26 '11 at 15:00