Which Web Development Programming Languages Should I Learn?

I am often asked this question by other Web developers. In fact, I regularly need to figure decide which web programming languages and technologies I need to learn next as part of my life long learning. Start with Web Browser Technologies Did you know? Even after over 20 years of mainstream web technology, web browsers only natively understand 3 things: HTML, CSS and JavaScript. That’s it, that’s all! There actually used to be a fourth, vbScript, but it was only available in Internet Explorer and Microsoft finally deprecated it as of IE11. Anything more and it is usually an add-on, plugin or … Continue reading

Developers – How to get started in Moodle development

For developers just getting started in Moodle development, testing and fixing 3rd party Moodle plugins which are not currently supported the latest version of Moodle is a great way to get started on your way to learning how Moodle works. These plugins often just need simple fixes, updates to deprecated API calls and stuff like that. Start by browsing through the list of 3rd party plugins and choose a plugin that is of interest to you. If you think it would be useful for you, chances are there are others who would think so too. Next contact the author before you start just to make sure … Continue reading

Changing Notepad++’s default source code language for new documents

Notepad++ is a great editing tool for web developers. I know many, including myself, who use this together with Adobe Dreamweaver for their HTML development because there are just some things that Notepad++ does better than Dreamweaver including syntax colouring and HTML tag  matching. When you first start using Notepad++, it tries to determine the language of your source code using the filename extension. If you are just using a blank unsaved document, it may just treat your HTML code as plain text, offering no syntax colouring or tag matching. To enable these features, you either need to save your file with a … Continue reading

Media Queries with Older Browsers

Did You Know? Media queries are part of CSS3 and allow web designers to customize CSS definitions for the layout depending on the device and screen width thereby creating a single Responsive Web Design that adapts to the visitors environment which is important, especially if you have a lot of visitors on mobile devices. Unfortunately media queries like the following line were not supported in Internet Explorer 9 (IE9): @media screen and (min-width:960px) and (min-device-width:960px) { style definitions here … } If you are using a series of lines similar to this in your responsive website theme, you may be surprised … Continue reading

Using CSS to make DIV go around Float

At some point, most HTML developers end up in a situation where they use the float:right and/or float:left property and then notice that the DIV going around it isn’t wrapping the content anymore. Broken Example You can reproduce this in the physical world by holding an elastic band open with your fingers. Holding your fingers in the same position, pull them out from elastic band. With nothing left inside to hold the shape of the elastic, it shrinks back to it’s original shape. This is what is happening with your outer DIV. Hello World! Working Example of the Solutions The … Continue reading

Resources for Web Developers

Image Repository Canaidan Tourism Commission Media Centre Fotolia iStockPhoto Shutterstock Images StockFreeImages Stock.Xchng On-line Tools Photo Editor Text Comparison Tool Text QuickDiff Tool Subtitle Horse Converters Real-time HTML Editor Programming Languages ASP.Net CSS HTML Javascript SQL VB.net Search Engine Optimization SEO Tutorial SEO Tutorial (Video) SEO Tips SEO Checklist Google Adwords Keyword Tool Google Webmaster Tools Bing Webmaster Tool … Continue reading

Web Development Validation Tools

WC3 HTML Validation — the W3 validator — checks document mark up WAVE — Web Accessibility Evaluation Tool — web accessibility validation tool Colour Contrast Analyser 2.2 for Web Pages — helps you determine if colour contrast is sufficient AChecker accessibility tool — sponsored by the Ontario gov’t … Continue reading

Adding a Transparent Caption to Photos

There are times when, instead of placing the caption to your photo below it, you might want to overlay it. You can accomplish this in a relatively simply way by first adding the following to your list of styles: And the apply it in HTML as follows: You can also use the “img-right” or “img-center” class to position the image to the right or centre it. The result is: © 2012 LoremPixel.come Warning in WordPress: By default, WordPress adds extra code. If your caption is ending up below the image, remove all carriage returns and leave the code on a … Continue reading

Bullets in IE9 or IE10 Beside Float Left Image

Only in IE9 and IE10 can you find bullets that decide to join the image instead of staying with the text. In some situations, the bullets will even end up under the image leaving you wondering where they went. Cross-browser fix #1 This solution works fine as long as your text wraps. If it does, you will find that the hanging indent effect bullets normally have will be missing. The results of this code looks like this… List Item 1 — Lorem ipsum dolor sit amet, adipiscing turpis vitae felis ultricies quis iaculis erat pellentesque. Donec pretium lobortis blandit. Vestibulum … Continue reading

Using CSS to Create Columns

Here is a simple technique to create as many parallel columns as you need. Unlike most solutions, this one works equally well with any number of columns as long as you can divide 100 by the number of equal columns you want to create. Otherwise you can actually use any width you like. Start by setting up the CSS: .column-block { display: inline-block; *display: inline; vertical-align: top; margin: 0; padding: 2px; zoom:1;} HTML Example: Two Columns <div class=”column-block” style=”width:48%;”>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div> <div class=”column-block” style=”width:48%;”>Duis aute irure dolor … Continue reading