I’m helping redesign a high school web design course. It’s actually a second level course-- the first level covers:
html
some html5
graphic design (they already have some prior knowledge here)
CSS
tiny bit of javascript, search engine optimization, social networking, mobile considerations
marketing your website
The second level of the course used to cover Dreamweaver and Flash, but we’re dropping Flash. Here’s what we are thinking of adding into this second level course:
more html 5 and CSS
more javascript
security considerations
using Content Management Systems like WordPress
Ok, so what are we missing in this second level course?
You should drop Dreamweaver too. In fact, probably should have dropped Dreamweaver a decade ago.
You may find the Mozilla Learning page useful. Not only does it link to some of the best resources, but it groups them by “introductory,” “intermediate,” and “advanced.”
AT BOTH levels I would seriously consider UI theory. Also learning Standards, and accessibility issues. While it seems you seem to be teaching mostly front end design, I would consider adding basic PHP to the second level( you might as well, if you are going to delve into WP anyway)
Yeah, I have some folks on the team who can’t seem to let go of Dreamweaver. I’m trying to talk them down off the ledge!
Most of our schools can’t even get FTP access so hosting sites is an issue, which really bites. I’m not sure if it’s plausible to even teach any php without having server access.
Try setting up a server locally,or a LAN , it wont be 100% real, but it will appear with the classroom as such.
Besides , its good practice to develop locally(on your machine) and then upload to a network (even intranet). the one drawback however s that students may have to be assigned specific machines.
Everything else you are considering is open source, so Dw is the black sheep in there, and to focus on one tool like that is to miss the point that the tool in web design doesn’t matter. There are lots of excellent code editors out there, but at the end of the day, the editor should be out of the picture. If it’s a part of the story, it probably means that the whole web design process is being done “all wrong” (to put it colloquially).
+1
As D_P said, you can set up a server locally—either by installlng the various necessary components separately or by using something like MAMP (Mac) or XAMPP (PC), which makes life much easier. You won’t be able to teach much about a CMS like WP without such a setup, as noted.
It’s worth mentioning that HTML, CSS, JavaScript and Marketing is NOT Web Design.
Web Design is exactly what it says; the designing of the website. When you go into writing code you’re talking about Web Development.
The first bit of advise I can give you is to change the name of the course to Web Design & Development. The second part would be to drop all talk of SEO and Marketing because it is out of scope. If you want to teach HS students how to build a website then I would limit it to design and development, and to let them become good at that first.
In other words, I’d make the first level contain:
HTML from the ground up. Teach a bit of HTML5, but make sure you set the foundations of HTML up and exactly what HTML is. The main thing you should be teaching is about structured data, not how to build a cool website.
Teach a bit of CSS to get them going. To make things fun I would probably limit them to the newest versions of Firefox and Chrome, because HS students will HATE debugging IE issues.
JavaScript and jQuery to show off scripting your site. Give them a bunch of examples and then get them working on a fun application.
Spend at least half of your time showing users how to design a site, preferably in Photoshop
NO DREAMWEAVER!
For starters, you’re touching on security without any mention of server-side coding, so you’re not really covering much in terms of security. Putting a plaster on a wound doesn’t make you a surgeon.
The first level should drum home as much HTML as they’ll need to know, so give them a small introduction to HTML5 and some more CSS and then leave them to learn whatever else they’ll need to make a site.
You’ve listed WordPress as a CMS, which is a bad move as WordPress is a blog script that is used by entry-level developers as a CMS, usually because they have no experience of a real CMS. If I were you I’d install a copy of Concrete5 or Drupal and just show the kids what a CMS can do. It’s all you can do without teaching them about server-side coding…
Again, do NOT teach the kids Dreamweaver. Even kids of that age will know that no one uses Dreamweaver any more and your course will lose all credibility.
If I were you I’d use the second level course to get the kids working on a project. A good task would be to get them to write the front-end of a blog together. Give each kid a task to do on the blog and get them to agree on an overall design to work from and then give them that time to build the design and front-end. By the time the course is finished you can plug it into some back-end code you’ve written and they can have their own blog, leaving your final lesson to show off how it works and how what they’ve created is largely the kind of stuff they may be doing in industry.
I personally would teach the approach to web design in the second course. Either make up some companies/prospectuses or go out to local companies (or local charities) that support your school and get information you can build from. Give them real life “work” to do as that will help to cement the work to something tangible.
I would teach them “mobile first” design as that will hopefully help to ensure they’re building responsibly and not just throwing jQuery crap in just because it’s easier.
Focus on semantics and proper use of the tools. Show them the power of css and progressive enhancement (i.e. responsible javascript). Teach them about accessibility and how to test without images and without javascript.
jQuery would be a nice addition to your course description. It is a great replacement for Flash and the animation is simply smooth.
It really ties in well with Javascript and HTML5.
