Our national web design and development competition is only a couple of months away (June, 2019). We thought it might be helpful to provide some advice to competitors before the competition this year. We will try to provide a printed copy of this document at our mandatory training session on June 25, 2019 in Louisville. In the interim, we ask all competitors and advisors to review our notes below. We also provide a PDF version of these best practices (should you wish to download them).
Consider these best practices
For those competing in our national web design and development contest, it is important to remember that our judges are looking for evidence that the work you submit follows industry “best practices.” As such, you will lose significant points (which will definitely take you out of consideration for a medal) if you do not follow these suggestions. They are presented in no particular order as all are very important practices.
Remember, HTML is about the structure/ content of your web page(s); CSS is about the appearance/ style of your web page(s); JavaScript is about the behavior of your web page(s). Use these tools accordingly.
Under no circumstances use tables to create a web page design. Tables should be used to display tabular data (such as measurements) only. It has been over a decade since any practicing professional recommended using tables for design of a web page. They do not allow for proper searching of your page by bots (which means your search engine rank will be much lower). They are also mostly inaccessible to assistive devices (such as screen readers). Do you really want to exclude visitors because they are disabled?
Use semantic markup in your HTML. In other words, use markup/ tags as they were intended. For example, <h1> means this is the most important heading of a given section on the web page (or on the entire page itself). Do not use <h1> because you want the text to display larger (that is what CSS is for). Separation of appearance from content is important. Using semantic markup also enhances interoperability (consider tags such as <section>, <article>, and <mark> as examples), searchability (search engine bots know what the tags mean), accessibility (assistive devices work best when semantic markup is used), and internationalization (in the event you page needs to be translated into other languages). At a minimum, consider using markup (such as <header>, <footer>, <main>, <nav>) instead of relying exclusively on <div>.
Make certain your CSS class and ID names convey meaning. Also, CSS specificity should be employed to make your CSS more understandable/ maintainable. Remember in terms of increasing specificity, one has:
- type selectors (such as h1 and pseudo elements),
- class selectors (such as .tagLine and pseudo classes),
- ID selectors (such as #backToTop),
- Inline styles always win in terms of specificity (however, they should not be used in most cases as they make your pages less maintainable – use external .css files when possible).
When writing JavaScript, take advantage of ES6 where possible. However, make certain you give variables meaningful names and include comments if there are questions what you code is accomplishing.
When you are ready to “turn in” your work (to the judges/ client), consider the following. Know how to use sFTP (FTP) and other means to provide working copies of your work on the server. Test what you submit to make certain it functions as you intended. Test it by pointing your browser to the proper spot on the server. This is what the judges will use when they review your work. Make certain all links/ images/ CSS/ JS is working as you intended. There is no need to provide copies of the original files/ font sets/ images which were not used. Only provide the materials you actually used. Hint – you will lose points if you blindly upload all the font sets just because you can. A professional only provides what the client needs. That being said, if you create a logo/ graphic and used tools like Illustrator or Photoshop, provide the supporting file in an appropriate location (judges do like to review your original work).
These are some of the industry “best practices” that our judges will be looking for. Make certain your code meets these minimal criteria.
