Web Design for Tech Writers Part Two

So I realized that there are a couple of other tools and tricks that I didn’t share with you all in my last post on web design for tech writers.  Today, I wrote CSS to go with a page of HTML documentation.  I used the following tools, which some of you might already know about, but if you are just learning web design, they might be helpful to you:

Browser Developer Tools

Each browser has different features in their developer tools which allow you to inspect and edit the source code of a webpage (both HTML and CSS).

1. In Internet Explorer (IE), you can simply press F12 and the developer tools window will open.  From there you can select the arrow to highlight areas of a webpage to inspect or edit.
2. In Google Chrome, click on the wrench icon on the right, then tools, then developer tools. There are a lot more features in Chrome’s developer tools than IE such as elements, resources, network, scripts, timeline, profiles, audits, and console.
3. Mozilla Firefox has probably the best developer tools of all, but you have to download a plugin for Firebug.  Firebug works much the same as Chrome and IE’s developer tools.  It is opened by pressing F12 and it has many of the same features of Chrome, but is also has predictive text and auto-fill capabilities.  This is especially useful to beginning web designers who are still learning the code, but can also speed up the coding of even the most experienced web designer. (This is my preferred method.)

*Note: If you do not already have all three of these browsers installed on your computer, highly recommend doing so.  Webpages look very different on each of them (especially chrome) and it is beneficial to test it on each.  Certain browsers only support certain fonts, graphics, technologies, etc. It is equally important to make sure that your browser is always up-to-date with the latest version. It seems to me like everyone has a different favorite browser. hmm

Viewing the Page Source

On any webpage, you can right click the page and select view source or view page source.  This will open up a notepad document with all of the HTML and CSS source code for a webpage.  Using developer tools mentioned above provide you with the exact same information, but in an editable format.  If you are just looking at the source, or copying and pasting it, this is the best way to do it.

For people learning web design, this is a great way to get familiar with how webpages are put together and what HTML and CSS looks like.  It may seem like a foreign language at first, but the more you read it and break it down, the more it will make sense to you.  Everything is abbreviated and represented by characters.  For instance, paragraphs are marked with the letter <p> and to insert a line break is just <br>. (As I mentioned in my other post, the quickest and best place to learn HTML and CSS is w3schools.)

Notepad++

The best free MS Windows source code editor is notepad++.  I used to code in regular notepad, but once I got notepad++ I will never look back.  It’s name describes it pretty well, it is notepad, but plus, plus.  It makes coding so much easier by doing syntax highlighting, line numbering, and also supporting several programming languages.  Plus, plus, it’s logo is an adorable green gecko and who doesn’t love geckos?  (You can also use Adobe Dreamweaver to edit your source code, but that is an extremely expensive software and not needed to design web pages with HTML and CSS.)

Even if you don’t know what you are doing, try out some of this stuff and play around.  You can make a simple HTML page and add CSS to it and then just mess around with it in the developer tools and notepad++.  You can’t break it, so try different things out.  Go to w3schools and play with their “Try it Yourself” editor.  It’s fun to see how the changes you make to the code impact what happens on the webpage.

If you are an expert web designer and you’ve known all about this stuff for years, then I apologize if this bores you, but I’m a writer and I’m still learning.