BlueGriffon Introduction

What is BlueGriffon?

BlueGriffon is an open source Wysiwyg HTML editor. There are downloads for Windows, Mac and Linux. You can edit content the same way you would in a word processor. You can then toggle views quickly to see the source and what HTML markup and the CSS styling looks like, making BlueGriffon beneficial tool for learning HTML and CSS.

About this content

These tutorials were created on a Mac. The video walk-throughs and screenshots were all created with BlueGriffon for OS X.

This set of pages was put together to meet the requirements of an assignment for Western Oregon University Graduate CSE 617 course, Open Source Tools. Part of the assignment was to design a rubric to evaluate the work. The rubric can be found here.

Links and resources

While learning how to use BlueGriffon I watched/read and followed a significant number of online tutorials. Here are some of those I found to be most useful.

Tutorials

Web Design with Blue Griffon
- Live streamed tutorial from a 100 level CS class about using BlueGriffon styles. Some of the concepts will be helpful to understanding the relationship between CSS and HTML markup. He creates a few classes and assign styles to those as well. He's a little amusing too.
Series: How to Produce Your First Website with BlueGriffon
- I only watched the first two videos and then stopped. The pace was too slow - showing each dialog in install, for instance, or how to select File - New. Then, in the second tutorial the website he created was hideous. It almost scared me away from the tool. Ironically the video was created by a marketing guy.
thesitewizard.com
- This is a rich set of tutorials. There is a tutorial series that walks you through creating a website and then several stand alone tutorials for individual tasks.
Free HTML 5 Website Editor - BlueGriffon
- Difficult accent to understand. Good overview of the most common features in BlueGriffon.
Collection of BlueGriffon Tutorials - Some interesting advanced topics covered here including image styling, fonts, CSS rotations and gradients. I can't get them to load, though. Further exploration warranted.