Always Learning

Student Resources

Design Tools at Bellevue College

Learn the process of building a website and the various tools you can use. In this class you will explore the planning tools, text editors, authoring software, online tools and content management systems used by web designers. You will learn to apply your knowledge of HTML and CSS code to use these tools to build a website step-by-step.

First Session


Web Design and the tools we use. Creating a web page using

Today we will build these two pages with the tool of YOUR choice! Here are your Images

Wine home

Wine home

Additional food for thought

As we are finishing up our wine web pages, we will download a slider (Online Tools), review the file/folder structure, and place it in our site. When reorganizing the files and folders, the "next" and "previous" arrows disappeared. Where did they go?

Also, we will open up Dreamweaver (Software Tool) and Brackets (Text Editor) today and see how useful they can be in viewing our flexslider files

Flexslider displaying our previous and next arrows
Our previous and next arrows are gone!
Finding the fix in Firebug

Tools used in the planning stages of website design

Staging Area, Information Architecture, Wireframes and Comps.

Created with Lucid Charts
Created with Moqups
Created with Wireframe CC
Created with X-Mind
Created with

Don't forget about a staging area!

I create a staging area for my clients - real simple! A create a folder in my site, where relevant content is presented to my client, i.e., Information Architecture, wireframes, mockup, colors, photos, etc!

Identify the text editors and frameworks used by web designers.

Software tools

We're all familiar with Dreamweaver, but the real "designers" and "developers" don't use it, or do they?

Dreamweaver's FTP tool video recording

Online Tools

CMS and - Is there a difference? What about the other CMS ... Joomla and Drupal? So many choices! We'll take a look at!

Now for some reality...

Cushy CMS

Back to the Main School Page