Select Page
How To Transition From a Career in Manufacturing to Web Design and Development 

How To Transition From a Career in Manufacturing to Web Design and Development 

Today I read about another major auto manufacturer laying off employees. My heart goes out to the employees who have spent years working for companies that shut down on just a moment’s notice. At one time, working in auto production was a reliable means to provide for a family. It was a sustainable career with the opportunity to be a part of something big—the biggest industry in our country. 

This article is for all the American manufacturers and production workers who are wondering: what is next? 

They say that when one door closes, another opens. That may be little comfort, but I want you to know there is a door that is wide open to you. Keep reading and please give me the time to let me make my point.

With traditional auto manufacturers undergoing serious restructuring in recent years, a long career at Ford or General Motors isn’t guaranteed as it was in years past. A worker in the past might have stayed with an auto employer for his or her entire career—but with today’s changing economy, many of those employees have been laid off and forced to pursue a career change outside of the industry. The world of work keeps changing, and it is hard to know which way to go. 

The Good News

The good news is that auto production workers have built-in skills that translate well to other industries. The years of training and hard work to build some of the most high-tech and complex machines on the planet has given you wisdom, experience and skills that companies look for. 

If you’re thinking that your experience in the auto industry doesn’t translate well to web design and development, read on. 

How Does Production Experience Relate to a Career in Web Design and Development?

Someone with auto production experience is a natural fit to dive into the world of web design and development. An auto production worker must have excellent attention to detail and focus on completing tasks correctly, skills that are required of designers and developers. A production worker must also be able to think critically and troubleshoot problems that arise on projects. Guess what web designers and developers do every day? Web developers solve problems and build web sites that are far less complex than any car I have ever driven. 

One of the biggest complaints I hear all the time from friends who own tech companies is the issue of work ethic and dependability. Being dependable, a good team player and able to communicate well is critical to project success in both industries. Also, demonstrating a willingness and ability to be cross-trained in different job tasks at your company is an enormous asset in the web industry. And perhaps most importantly, both auto production and web design and development require a technical aptitude. Technology isn’t going anywhere, and as new technologies replace old ones, employees who learn the emerging ones will be extremely valuable to their companies and the web industry. 

As you think about “re-careering,” don’t discount the other skills you bring to the table, including pride in work, product knowledge, integrity, dependability, initiative, persistence, leadership, adaptability, empathy and self-discipline. These are the attitudes that companies look for when hiring designers and developers to help them succeed on the web. Put simply, a career transition from manufacturing and production to web design and development is a natural one.  

A Career in Web Design and Development

Broadly speaking, web designers and developers work with clients to market products and services online. Designers utilize text, images and video to create websites and reach intended audiences, and developers write the code that provides the technical foundation of these websites,  It is a fast-growing STEM career path that offers a median salary of $73K and up to $150K per year, offering flexible and fun careers to those who don’t want to report to an office every day. Many designers and developers enjoy being independent and contracting their services to small and large companies while working remotely. Others are employed full time and use their skills to help their company grow and succeed. Most designers and developers have both design and coding skills, allowing them to better help their clients succeed and meet business goals.

A Flexible Career

Web design and development is one of the growing STEM careers that offers unparalleled flexibility and opportunities to work on impactful projects, and many designers and developers aren’t required to commute to an office each day. According to research, 30 percent of the U.S. working population currently freelances in some capacity, and that will grow to 51 percent by 2020. Web designers and developers often can have just as much of an impact working remotely as from an office. Additionally, web design and development serve as the foundation of many of the technologies we rely on today. It is a stable career that isn’t going to disappear overnight, which makes it a safe bet for those seeking to get started in a brand new career. 

The First Step to Getting Started

To get started in the industry, you will need to gain design and development skills. The good news is that you do not need a traditional college degree to enter the field. Employers value candidates who have industry certifications and a project portfolio—so it is important to find courseware that will prepare you in both of these areas. I am partial to online courses that allow you to play around and “sandbox” your practice work, as I believe they are a great way for learning at your own speed. For tools, all you need is a browser and text editor. Avoid courses that teach specific applications like Adobe Dreamweaver and WordPress—in my experience, companies want people who don’t rely on a specific tool. Learn the basics first.

In the course style I am suggesting, you will learn by building real projects and creating a digital resume that will showcase your skills to potential employers. This is important to demonstrate your technical aptitude and ability to successfully develop and guide a project from beginning to end. You can also gain in-demand industry certifications to prove to companies you have a comprehensive skill set and are ready to produce for them on day one. Side note: it’s wise to avoid industry certifications from testing companies and instead seek a less biased source, like professional associations, as they are more interested in measuring technical aptitude and proficiency. It just makes sense that companies will place a higher value on more meaningful certifications backed by a professional organization, like WebProfessionals.org, than from another testing company. Always consider the source of the certification—your next employer certainly will.   

To be completely transparent, I am not a professional career coach or workforce counselor. However, I am an employer who has worked with people who came to me after working in other industries. These employees have transferable skills and successfully transitioned to the world of web design and development. Recently, we had 26 people working on a project, and most of the members of the web team had spent time in other industries before switching to web development. I have also had the pleasure of witnessing adults retraining from the inside in my duties as an adjunct instructor for adult education design and development courses.

A Career in Web Design and Development is Possible  

Be proud of what you have done and learned in manufacturing: through valuable experience, you have gained many valuable and transferable skills. You learned how to take responsibility, solve problems, work in teams, develop technical aptitude, cross-train in other disciplines and more. You can take this experience and build on it to enter the exciting and rapidly expanding world of web design and development. Contact WebProfessionals.org today for more information on how to begin your path to an exciting new career.

Successful 16th Annual Web Contest

Successful 16th Annual Web Contest

We believe 2019 saw our most successful web design and development competition ever. We held this in Louisville, KY, during the last week of June. Our competition is one of 103 individual competitions at SkillsUSA Nationals. Competitors must win first place in their respective states for the opportunity to compete nationally. We also choose one winner from these competitions to represent the US at WorldSkills. That competition is held every two years (and the next will happen this August in Kazan, Russia).

Our on site team

We are so appreciative of the massive efforts by so many members of Web Professionals to make this competition a reality. We have our team on site for almost an entire week. They conduct the interviews of competitors (and these mimic real interviews as many of the individuals conducting the interviews hire web professionals as part o their daily jobs. They also review the process each team follows as they provide solutions to the business problems posed in our competition work order. They also make certain the server and network environment is running smoothly and that all tams can access their individual server, cloud storage, and editor. This can be a particular challenge when some teams bring school computers which have been so locked down one can not even access the Windows Control Panel. Our team also develops the competition project/ work order and configures the environment before the competition. We are so thankful for all the help and could not do it without you.

Our onsite team of Web Professionals who make certain the competition runs smoothly. All are standing in front of our contest banner and promotional banners.
Our onsite team (from left to right) – Grant, Steve, Mark, Jonathan, Jeff, James, and David.

Our judges

We run two separate competitions (Wednesday is for high school students). We had 52 individuals competing this year. Our Thursday competition is for college students. We had 20 individuals competing this year. When the competition ends each day, we transfer all the work by each team to a secure location on one of our web servers. Judges from other states can then review the work of each team. Our judges are practicing web professionals and we have more than one judge review the work of each team. Each judge focuses on a specific area (such as accessibility). All scores are collected and finalized by the following morning. We could not achieve all this without our off site judges. If you are reading this and would like to help (or would like more information), please contact us. We can always use more judges.

If you are interested in overall comments from our judges, we provided a summary for competitors to review on our separate Web Design Contest site.

The competition environment

For those who would like to learn more about the environment we utilize, we prepared a couple of articles on our Web Design Contest site. These are listed below.

  • An overview of the server environment covers the fundamentals of how the server is configured using containers so that the work of each team is separated and secure.
  • An overview of the network environment covers the fundamentals of how competitors access the local resources. Given the logistics of where the event is held, it is simply not feasible (nor cost effective) to offer actual Internet access to competitors.

Training

Before the competition begins, we offer training to competitors and their advisors the day before (Tuesday). This is our opportunity to make certain everyone has a solid understanding of current industry best practices as they relate to web design and development. It also gives competitors and their advisors the opportunity to ask questions and develop a better understanding of what the competition is all about. In the photo below, Jonathan is discussing process best practices.

Jonathan discussing the overall process practices for web design and development to roughly 100 competitors and their advisors.
Jonathan provided an overview of process best practices to competitors and their advisors.

WorldSkills Competitor

We also had our WorldSkills Web Design and Development competitor (Matt Vreman) speak to competitors and their advisors before the competition began. He discussed his background (he won gold at one of our prior competitions). Matt reviewed his progress as he prepares to compete in Kazan, Russia in August, 2019. I will be accompanying him as his advisor in that competition (each country is allowed to bring in one expert to help their competitor). There will be roughly 50 countries competing in Russia in web design and development.

Matthew Vreman answers questions from competitors and their advisors prior to the start of our competition.
Matthew Vreman (WorldSkills competitor in web design and development) answering questions

Contest Impact

This was our 16th year running a national web design and development competition. A lot has changed in our industry over that time. We like to think that our competition has kept pace with changes in our industry. Over these years, we have had the chance to speak with roughly 2,000 competitors and their advisors/ teachers. We believe that we are making a difference in that competitors and their teachers see what current best practices are and many have adjusted their curriculum accordingly. We see these trends continuing based on the feedback received this year (particularly from advisors). We could not do this without the help of our members; they serve in many roles (including judges and on site team). However, members also provide the funding (through their annual membership dues) to help us achieve our goal of insuring that the next generation of web professionals is following current industry best practices. We couldn’t do this without your support. If you are reading this and have not yet become a member, we encourage you to support us in this endeavor.

Best always,
Mark DuBois
Executive Director and Lead Community Evangelist

What’s happening with CSS

Why shouldn’t we be fans of CSS? It’ constantly revolutionizes itself while trying to strive for its renowned form of simplicity. The end result is the creation of browser functionality that is arguably above and beyond what can be created with just JavaScript. Let’s examine some recent CSS enhancements and insights in the way i can be used. Some examples include blurred borders, setting a dark/ light mode switch (with a little help from JavaScript) and more.

CSS Features That Are Changing Web Design

The design landscape has changed a lot in recent years. We’re equipped with new and powerful tools — CSS custom properties, CSS shapes and CSS writing-mode, blurred borders in CSS, and sophisticated partitioning with CSS Grid – to name a few.

What is sophisticated partitioning with CSS Grid?

In the article written by Rob Weychert, he experimented with CSS grid to create a Tinnitus Tracker. He designed the grid pattern and then he worked on the partitioning of the grid.

These grid patterns mainly have the following 3 objectives:

  • Maintain a (somewhat) consistent whitespace.
  • Give the appearance of randomness.
  • Don’t forget about prime numbers.

Also adding CSS Grid, partitioning and typography as a cherry on top altogether gives a different look to the website and reaches to a different level of advancement. We encourage readers to follow the above link to learn more about how this was accomplished.

Blurred Borders in CSS

If we want to target an element and just visually blur the border of it. There is no simple, built-in feature we can apply. But we can get it done with a little CSS trickery.

After giving a code this effect, one can enhance it with rounded corners, extend support so it works cross-browser, what the future will bring in this department and what other interesting results can get starting from the same idea!

This article has step by step code details to show how we can add the blurred effect to the CSS.

New CSS features

In the article written by Daniel Crisp is about exploring the most exciting new properties coming to CSS. These include:

  • Fixing layout problems
  • Exploring feature queries
  • Use ‘not’ for a cleaner outcome

We encourage readers to follow the above link to learn more. We also came across these resources which may help you better understand how CSS is being used currently.

Additional Resources:

For those who prefer videos:

Every day things change in web design and development. We hope you are excited about these new approaches. CSS has certainly exceeded expectations of what was once considered achievable.

We hope you found these resources and overview useful. We always look forward to your comments and feedback (whether you are a member or not).

Static website generators – part 3

Static website generators – part 3

After a long break let’s take a look at another Static Generator – Hexo.

Hexo is powered by Node.js and is mostly aimed at blogging. It has a deploy integration for GitHub which makes it a great fit to build a documentation site for a GitHub project as well. If you are a JavaScript developer, the setup should be relatively easy. Like many other general purpose generators, you’ll probably want to write your content in Markdown. The default templating engine is Swig, which is once again well suited for JavaScript developers. However, Hexo is extensible to allow other templating engines to be used if you want.

The Hexo website includes a range of pre-built themes for you to try out, and one especially popular feature of the tool is its support for single-command deployment.

Installation of Hexo

Installing Hexo is quite easy. However, you do need to have a couple of other things installed first:

This link provides details to install Hexo. Just follow the steps.

Static Website Generator vs WordPress

We reviewed static site generators when we began this series of articles. If you need a quick review – a static site is a collection of pages contained in basic HTML files.  A static site generator (SSG) is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as Markdown files) and templates. The resulting build is transferred to your live server. Static site generators are systems that compile templates into static HTML pages. There is no server processing or rendering, so static websites tend to be very fast and lightweight, saving you and your users precious time and bandwidth. This increased efficiency is reflected in lower costs (including lower maintenance costs) and, potentially, higher revenues.

What is the difference between WordPress and Hexo?

When talking about performance, one must think about caching. Although there are multiple techniques for caching WordPress, this is not usually a straightforward task, unlike caching static files. Serving cached files is more performant than serving actual files from the server and it can save time when loading websites.

Advantages of Hexo

Hexo has many pros:

  • it is blazing fast,
  • it is easy to deploy to GitHub pages or any other host with one deploy command,
  • it is powerful with solid Markdown support,
  • it is highly extensible,
  • it is open source and there are many open source themes, and
  • there are available free plugins.

With Hexo, one can create markdown files and HTML layouts which will be converted to static HTML files when deployed. Hexo provides a deploy configuration which builds our static files into a GitHub branch. This means one can maintain documentation as markdown in our project’s master branch and deploy it, with one command, to gh-pages.

My experience working with Hexo

I decided to create a blog post for Hexo without any graphics. I found creating the blog post in Hexo to be easier than Jekyll. Readers may recall that I discussed Jekyll as part 2 of this series. The default theme also looks good on the site. I decided to just run the site locally. If time permits, I may post some of these examples on a Web Professionals server and link to them. In the interim, here is a screen capture of the results. I did not encounter any major issues when working with Hexo locally.

Screen capture of simple Hexo blog post.
Example of Hexo blog post

Final Thoughts

During my course of study as a Web Developer I tried many CMS systems and installed a lot of software. I found working with Hexo a little easier than most. It also has a little learning curve. One must use the command prompt to run different commands. I was able to get desired output to display locally with not that much effort. Each time I made changes I had to run ‘hexo server’ command on command prompt. That is the essence of static site generators (one must remember to constantly update the resulting web pages when changes are made).

One may find it simple and easy to build sites using Hexo or one may face problems initially installing and running and deploying. It all depends how the computer configuration/set up is. I am curious as to your experiences with Hexo. What did you like/ dislike? Please update the comments with your experiences.

Our certification process

Our certification process

Recently, I was asked to document how we develop our certification exams. I thought it might be helpful for visitors to this blog to better understand the process as well. We always try to keep our certifications in line with what is happening in the industry. We offer a number of certifications (ranging from novice to professional levels) in web design, web development, mobile and app development and a number of related areas.

Individual at work with the word cwertification highlighted

Background

We have been offering our certifications for roughly two decades. Obviously, our processes have changed over that time. For example, when I served as Director of Education, we met in Las Vegas (in person) for several days to identify specific areas of focus in our certifications. Nowadays, we hold most of our discussions via email and teleconferences. Here is a bit about our internal process. Frankly, I have personally been involved with many certification efforts over my many years of experience in this field. I have worked closely with companies such as Adobe and Microsoft. Given what I have observed, I can attest that our certifications are comparable and follow roughly the same set of processes. Of course, there is one key difference – our certifications are vendor neutral.

Anyone working in this field understands that technology changes rapidly (and this churn means we need to keep our certifications up to date). This is why those who have earned a certificate from us need to have it renewed every two years.

Our process

Essentially, the process involves periodic review of the current domains and subdomains we cover by individuals in business, industry, and education. We also use this information to keep other initiatives (such as our national web design competition) up to date. Once we have identified that changes need to be made, we have individuals with significant experience in writing questions develop appropriate questions (which include distractors and other features to help confirm individuals really understand the technology). These questions are then reviewed/ revised and eventually end up in question pools. We pull questions from these pools when an individual takes an exam. Obviously, different questions are developed for novice and beginning certifications and for professional certifications. As an aside, we also ask anyone taking a professional level certification to provide documentation they have worked in the industry for at least two years.

We believe it is important that individuals who work in our field consider holding a professional level certification. We believe it is also important those aspiring to work in our industry hold entry level certifications. This is confirmation you have a base level of knowledge and skills for our industry. Of course, we also believe individuals in our industry should be part of a professional organization and collaborate with others. We also ask members to sign a code of ethics. We even include a link to agree to our code of ethics for non- members [it is posted near the bottom of our home page.] It is only through our combined efforts we raise the bar of professionalism in our industry.

Become involved

If you would like to be part of the group which periodically reviews our domains and subdomains, please leave a comment below. By providing your email address, we will know how to contact you. We encourage you to consider helping us (and our industry) by providing your insights periodically as to what matters in today’s rapidly changing field.

I look forward to your comments (and hope you consider assisting us and providing your insights into our process).

Best always,
Mark DuBois
Executive Director and Community Evangelist

Static Website Generators – Part 2

Static Website Generators – Part 2

We covered the fundamentals of static site generators recently. Let’s take a deeper dive into one of them.

Jekyll 

Jekyll remains the most widely used static site generator. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting. The Liquid templating engine is used to place this Markdown content into the HTML template, and to combine templates representing various parts of a page (say, header, footer and content) in a modular and re-usable manner. It also has support for Sass for those with a preference for CSS pre-processing, and it’ll play fine with libraries like Bootstrap. Also included with Jekyll is an HTTP server which can be used to easily deploy and test your static pages locally.

Importers is a feature which enable an existing site to be migrated to Jekyll with relative ease. For example, you can take an existing WordPress site as a starting point with Jekyll using one of the importers.

If you have a GitHub repository, you’re able to create a GitHub pages site for free using Jekyll. This can be a convenient way to give a polished landing page to your GitHub project.

The big downside of Jekyll – and this applies to most generators – is that it can seem complex at first and is a new technology to master.

If you want to try it yourself, here is the link to install Jekyll.

Installation of Jekyll

You first need to install the Ruby DevKit or you will experience errors. If you are installing Ruby only for the purpose of running Jekyll, Portable Jekyll will give you a full working Jekyll install in less than 5 minutes.

Few easy steps:

To set up your site locally with Jekyll, follow these steps:

  1. Create a local repository for your Jekyll site.
  2. Install Jekyll using Bundler.
  3. (optional): Generate Jekyll site files.
  4. Build your local Jekyll site.
  5. Keep your site up to date with the GitHub Pages gem.
  6. Configure Jekyll.

Does Jekyll generate valid HTML?

Jekyll essentially a parser that converts plain text content written in a special formatting language called Markdown into HTML. These content blocks get inserted into one or more templates to build final output for a static page or a post. Markdown is a styling language used to prepare written content such as blog posts in Jekyll that can eventually be converted into HTML. Markdown allows user to focus on content by using an easy-to-read and easy-to-write plain text format, which can then be converted to valid HTML.

My experience working with Jekyll

Jekyll is widely used Static Generator. I tried working with Jekyll. I followed easy steps to install and run a Jekyll post locally. I first installed Ruby, then used the command prompt to get the desired Jekyll output locally.

Here are some screen captures to get an idea how the site look like. It is a simple blog post without any graphics.

I transferred all generated files and also post I created via FTP to a server. It didn’t give the desired output shown in above images. For example, the link to the CSS file appears to be broken upon transfer.

During my course of study as a Web Developer I tried many different CMS and installed different software, but working with Jekyll is little different. It has a bit of a learning curve and I think someone before working may need someone to have a little technical background. I am still trying to see what I need to change in the background code when it is transferred to a server. Clearly, something did not work properly.

These are my initial observations on using the tool. You may have different experiences and we look forward to your comments. The biggest issue with using any static generator is that you must generate the entire site each time you make updates (so all the links work). You would then need to transfer the appropriate files to the server each time. In my opinion, there are other tools (such as WordPress) which would seem to be more efficient (although less secure as they interact with a database).

As always, we look forward to your comments.