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.)


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.

2 thoughts on “Web Design for Tech Writers Part Two

  1. Thanks! I’m also a self-taught (novice) web designer. I found the Head First books to be incredibly helpful and user-friendly. I love the way they present the material and walk you through all the steps. I have their HTML, CSS, XHTML, Javascript, and jQuery books. I swear by them. I also use w3schools.org religiously. Thanks for the comment! Good luck to you as well.

  2. Loved your first article, couldn’t have put it better my self. —–.
    Been teaching myself web design the last 6 years. Firefox with Web developer toolbar was a great asset and still is. I found learning HTML/CSS using a text editor & then seeing the results so enjoyable (didn’t use Dreamweaver at all).
    I’d picked up an old copy of ‘Introducing WEB DESIGN’ by Rob Young in a charity shop then bought ‘CSS The missing manual’ they worked great together, not forgetting all the help from the web.
    Don’t apologize great articles. — my problem is I’m no writer but I think I know what makes good copy.
    I use an old petium4 2.4GHz, ubuntu, Bluefish Editor, Firefox & Chrome, Gimp, LibreOffice, etc.
    My work History – Artwork for Letterpress, had a darkroom, then came Lettraset a great help. 1992 Mac IIFX, Illustrator / LetraStudio / colorstudio / FontMonger etc. Ended with Adobe Creative Suite CS3 plus an introduction to CMS uploading images… Yeah that makes me 60+.
    All the best for the future.
    PS: Its wet and windy here in the UK.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s