We held our 16th annual web design and development competition in Louisville, KY the last week of June. We provided mandatory training to all competitors so they had a better understanding of the process involved with web design and development these days. Obviously a lot of work by many individuals was necessary to make this happen. We sincerely appreciate the efforts by our on-site team and our judges. We could not do this every year without you.
Our on-site team
Many thanks to the team who was onsite and provided assistance to competitors in using our “web contest in a box” solution in addition to the training. They also conducted interviews and reviewed the process competitors used to complete the work order. This team was present the entire week (they took time from their “day jobs” in order to be present for this event). We can not thank them enough!
Separate competitions were held for high school students (Wednesday, June 26) and post-secondary students (Thursday, June 27). Judges reviewed materials provided by competitors. The materials were placed on a secure web server after each competition so judges (from other states) could review the efforts online. Judges had to meet tight deadlines as all entries needed to be reviewed and submitted before 8 a.m. Friday so that awards could be handed out on Friday evening. We are one of 103 separate competitions at SkillsUSA Nationals.
Comments from Judges
We asked judges to summarize their comments and are sharing them here. We also provided a synopsis of these comments at our contest debriefing on Thursday afternoon (after the post-secondary competition was finished – those comments were for the secondary school entries the previous day).
Overall, judges were glad to see that the antiquated practice of designing with tables is finally not being utilized by any of the teams. This was the first year we observed this (yes, some schools still seemed to have been teaching this ancient approach as late as last year). We organized these comments into major areas. These are summaries of what was observed. As standard practice, we never call out specific tams (either positive or negative). We have also been asked to never publicly share the web sites developed by each team (this is why there are no screen captures of the winning work).
We also saw that no viruses were provided on the materials submitted. Having selected files uploaded to our local server and allowing most of the code to be written directly on the server using Theia likely helped with this.
The first header on the page should be h1. Headings should be correctly stacked and should represent the logical structure of the page.
Meaningful images should have alternate text associated with them. This text must be meaningful. The alt text “photo” is not meaningful.
Link text should be provided (and should be longer than just a few characters – remember some have muscle movement disabilities). Look in terms of the overall user experience as well and do not provide conflicting or confusing links.
Decorative images should be marked up appropriately so there is no confusion.
There should be sufficient color and contrast between background images and text visible on the page. Yellow text on a yellow background image is nearly impossible to read.
Form control inputs should be labeled. Remember that assistive devices rely on this information to properly present the form to the viewer who needs visual assistance.
Graphics and Type
One should use colors which compliment what the customer desires. If they are selling grilled cheese, use colors which support their efforts.
Some teams did a nice job on the overall design. These sites flowed well and made proper use of white space.
Contrast was also mentioned by these judges. If you overlay text on a background image, make certain to use a color which allows the text to be read easily.
It was also mentioned that fonts should not overwhelm visitors. It is also wise to limit the number of fonts used on a site to a few (perhaps 3 or so).
Programming and Code
Don’t use outdated approaches. Judges saw an instance of the <center> tag this year. How long has that been deprecated? Use CSS for any styling; HTML is for the content and structure of the page only.
Judges also reported that some tags were not valid. For example, there was a <t> tag and a couple of other tags which are not supported in any browsers. We suspect these were typos; this is why it is so important to check your work before you submit it.
Meta tags should be used properly. Make certain o also specify the doctype and the language of the page (preferably EN-US).
Indent your code for clarity of reading. If you have a lot of indenting, use spaces, not tabs. The latter will force the code off the screen (or to wrap) when viewed by the judge).
Judges were glad to see use of modern CSS features (such as flex) including transitions and text effects.
A number of teams did not seem to have a solid understanding of how to read an API using the modern approach (fetch). We encourage everyone to review this practice. This is also why we provided working examples on the local server that all could see when they accessed the API via their browser. Most modern web sites rely on reading APIs for many things. We wonder if this is being taught in most schools these days?
Companies look for passion these days. The person asking “why should we hire you” is looking for detailed examples of your passion. Perhaps you like to write great code; provide specifics. Perhaps you like to help others; again, provide examples that demonstrate your passion.
I you are asked how the site will help the company achieve their goals (and you don’t seem to know what the company goals are), ask. Remember interviews are a two way street. If you don’t know something or understand, ask clarifying questions to help you better understand. Then, provide details as to how the site will help the company.
Remember this is a team competition. Interviewers are looking for examples where individuals work as part of a team. Although you don’t need to finish each other’s sentences, it is important to identify which specific skills each member has (and discuss how they compliment).
We have not received detailed comments regarding process yet. Once we have those, they will be added to this document.
Overall, we saw significant improvement in the efforts by competitors this year. We also saw that advisors/ teachers were asking more specific questions so they could better prepare students for the work force (and for the competition next year). We hope readers find these comments useful. If you have questions, please ask in the comments below.
Executive Director and Chief Evangelist
World Organization of Webmasters (aka WebProfessionals.org)