

The Web Arcade includes a set of projects aimed to youth, that can help anyone get started with HTML & CSS by remixing playful pages full of well… web goodness. In the meantime I joined Mozilla’s Learning Team and together we have been working on something called “The Web Arcade” part of Mozilla’s Summer Code Party Campaign. Like Thimble, Code Maven allows users to enter code in an editor on one half of the screen and preview the results on the other half.Enter “The Web Arcade” teaching basic webmaking skills to teensĪ few weeks ago I wrote a blog post about why learning on the web should look like the web. Students are guided through a series of increasingly difficult tasks, from instructions from an avatar. Code MavenĬode Maven is similar to Mozilla Webmaker Thimble, except it allows users to practice JavaScript code rather than HTML.

Although probably not useful as a development tool for actually building sites, Thimble is a very helpful teaching aid, and of course, is cross-platform. This ability to instantly see the effect of code really helps students understand the structure of HTML and understand the difference between content and markup. Mozilla Webmaker Thimble is a very useful tool allowing users to enter HTML code directly into the left half of the web page and immediately see the results rendered in the right half. The downside is that it is only available for Windows. Visual Web Developer is a powerful tool for students creating web pages. Visual Web Developer offers all of the essential web development tools, including a good code editor and an effective WYSIWYG page preview. Though designed primarily for creating dynamic, database-backed web sites, static websites can also be easily created.

Part of Microsoft’s Visual Studio platform, Visual Web Developer Express is available for free download. You might also be interested in other posts in this mini-series: Web Design: 4 Sites with Tips for Web Designers and Web Design: 5 tutorials to learn HTML and CSS. My students and I have found the four free development tools below very useful in the creation of many web site projects. In reality, ITGS students creating a web site for their internal assessment projects are unlikely to need expensive, high-end tools – and indeed, the cost and availability of appropriate software is something that students should consider in their feasibility assessment. A wide range of web development tools are available to ITGS students, from free offerings to extremely expensive professional suites like Adobe Dreamweaver.
