Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Ray Villalobos | Saturday, March 31, 2012

How to become a web developer: Tips for those with a print background

I meet a lot of people who come from a print background and are interested in learning new web skills. Learning to make that transition doesn’t have to be scary—I know because I was one of those people who learned about designing for print first and then moved on to the web. I went through my first few jobs working for commercial printers learning about paper, inks, imageSetters, imposition, trapping, film, and typography. When the web came around, I realized that it was the next big thing and I needed to learn as much as I could about it in order to survive in the long run. Eventually I managed to learn what I needed and move on to work on the web full-time.

The web can be scary, but learning new web skills doesn’t have to be hard. It’s like trying to eat an elephant…you have to do it one bite at a time. In this post I will share some of my learning experiences and offer some recommendations for those with a print background who are interesting in learning more about web development. I encourage you to share your print to web journey, and to ask questions, in the comments section below.

Overcome the experience deficit

Every job listing will ask for years of experience. Whether it’s two years or five-plus years, I’ll let you in on a secret—the years are not as important as your portfolio. If you come from the print field, you know what I mean. Generally people get hired based on what they’ve accomplished, not how long they’ve been doing it. I know because I landed my first online job with zero years of experience in the field, and I did it by building a portfolio of work that was equivalent to years of experience. Although I hadn’t worked in the industry, I had projects to show that I knew what I was doing. So, your first step in the print to web development migration is to start building websites as soon as possible.

Start by learning how to build sites with WordPress. It doesn’t require any development skills and it’s pretty easy. You’ll need to know how to set up WordPress and how to set up a server with your own domain name. For help with this, check out Managing Hosted Websites, a course that goes through the process of setting up a domain name and installing WordPress. Once you’ve installed WordPress and set up your server and domain name, it’s time to start building web sites. For this I recommend checking out WordPress Essential Training. Some entire businesses are based on building web sites with WordPress, so it’s a great first skill that will help you gain some of that critical experience everyone is looking for. Plus, it’s a marketable skill that you can use to build a portfolio of work right away.

In this clip from chapter one of the Managing Hosted Websites course, I discuss how to pick the right domain name before you choose your server, since your domain name decision will have an impact on how people arrive at your web site:

Just knowing how to install and work with WordPress is not enough, though. What people will really want to see is how well you can customize a WordPress web site. Go through WordPress: Creating and Editing Custom Themes to sharpen your WordPress customization skills, then dive into Create an Online Portfolio with WordPress (because after you’ve got a few sites under your belt, you’ll need to show off what you’ve done).

Build from your Strengths

Another thing I did when I got started was to focus on building from my strengths. I had a design portfolio, so I started learning software that would let me build on design skills. This was the late ’90s so I began by learning a program called GoLive, a website editor much like Dreamweaver.

I already knew how to use Photoshop, so I worked with those skills and focused on designing projects for the web first in Photoshop, and then transferring those skills to Adobe Fireworks, which is better for preparing online graphics. I knew about formats like EPS, PDF, and TIFF, so I learned about the online formats like GIF, JPEG and then PNG. The point is, when you get started plan to evolve your skills instead of trying to learn too much.

So, if you’re starting with a background in design, check out Designing Web Sites from Photoshop to DreamWeaver. This course will point you in the direction of a quick win and teach you how to build on your existing Photoshop knowledge. From there, move on to DreamWeaver with Dreamweaver CS5 Essential Training.

Find out what the market needs

Even when I was a new designer, I knew that development skills would be very valuable, but that learning development wouldn’t happen overnight. So right away I established learning development as one of my long term goals. I started with HTML since it was the easiest to learn. If you’re just getting into development, I recommend you start with HTML 5 Structure, Syntax and Semantics. It’s a thorough course that explains the basics of HTML. CSS wasn’t as critical to learn when I got started in the ’90s, but it is very today, so I would head in that direction after HTML. If you’re primarily a designer, then this should be an area of focus for you. Start with CSS Fundamentals, then move on to CSS Page Layouts, and plan to go through one new CSS course per month.

In this movie clip from chapter three of the CSS Fundamentals course, James Williamson asks the question “What is CSS3?” and walks you through the answer in detail:

Becoming awesome

Once you’re past the basics, your next skill should be JavaScript—this is a very hot skill. JavaScript is one of those topics that can be tougher to learn, but the better you get with JavaScript, the more sought after you’ll be. Start with JavaScript Essential Training and then move on tojQuery Essential Training. (jQuery is a javascript framework that helps you build interactivity into your projects easily and handling a lot of cross-platform issues.)

Once you’ve got those under your belt, move on to a server-side programming language. I recommend starting with PHP and then moving on to MySQL. Once you’ve spent some time with JavaScript, the same programming concepts apply to PHP and MySQL, so they will be easier to pick up. As you begin looking for development work, you’ll start to notice those two languages featured prominently in job descriptions. Remember, the stronger you are, the more you’re worth. When you’re ready, try out PHP with MySQL Essential Training.

Conclusion

Remember the elephant…one bite at a time. Don’t get overwhelmed with all the technology. Make yourself a plan and remember to be consistent with learning. Even if you watch only one movie a day or a few movies a week, you can make a dent in that virtual elephant and build enough experience before you know it. Using myself as a case study, I know you can do it. There weren’t any special skills I started with, I was a print designer just like you. If I can do it, I know you can. Just remember, even when it seems overwhelming…you can learn it!

By Ray Villalobos | Monday, February 27, 2012

Using the jQuery UI library with Google’s CDN

The jQuery library gets a lot of coverage online at lynda.com. It’s a great way to build cross-platform interactivity into your websites with a minimum amount of effort. But you might not be familiar with its cousin, the jQuery UI library, which allows you to add tough-to-code widgets to your websites with just a few lines of code.

The JQuery UI  library screenshot

There are widgets in the jQuery UI library for all kinds of useful functionalities like drag and drop, buttons, dialogs, and progress bars. In fact, The jQuery UI library is so big it’s not even included in the normal jQuery library, and it comes as part of a separate download. In this week’s View Source tutorial, I will take a peek into the jQuery UI library to show you how to create a Datepicker you can use on your online projects.

Using the library is pretty simple. Let’s say you have this basic form:

1
2
3
<formaction="#"><label>When <inputid="datepicker"type="text"name="date"/></label></form>

First, you’ll need a copy of both the jQuery library and the jQuery UI library. If you don’t have the libraries already, Google and others keep copies of popular libraries online, so you can use a copy from Google’s CDN (Content Delivery Network). When you use a popular CDN like Google’s, it means that if someone visits a different site that uses the same library before coming to your page, it will be cached by your browser and available quicker to your users, which makes your page operate faster. Here’s two lines that will load up the libraries via Google’s CDN.

1
2
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

This usually goes in the <head> section of your HTML page. In WordPress, you can update the header.php template by going to your dashboard, finding the Appearance panel, and then selecting the Editor option.

Next, you’ll need to pick a style for the calendar pop-up. You can do this yourself by using the jQuery UI ThemeRoller, or by using jQuery UI’s library of predefined styles. Just go to the ThemeRoller page and choose the tab labeled Gallery.

Example of pre-built ThemeRoller jQuery themes

Once you pick the theme you want, you can download the theme to your desktop and install it, or you can simply link to Google’s copy of one of the themes from the Google CDN. Here’s the formula:

1
<linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/[JQueryUIVersion]/themes/[ThemeName]/jquery-ui.css"/>

So in our case, since we’re working with version 1.8.17 of the UI, and the pepper-grinder theme, so we’ll use:

1
<linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css"/>

The names of the other theme options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Now that our setup is done, all we need to do is type in our jQuery code that links the form field to the widget. You should put this before the closing </body> tag in your document. In WordPress, that would be in your footer.php file.

1
2
3
4
5
<script>
$(function(){
	$("#datepicker").datepicker({});});</script>

The jQuery code looks for a form element with the ID of Datepicker and adds the functionality to that field. Here’s a full listing of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><title>DatePicker Sample</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script><linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css"/></head><body><formaction="#"><label>
		When
		<inputid="datepicker"type="text"name="date"/></label></form><script>
	$(function() {
		$( "#datepicker" ).datepicker({ });
	});
</script></body></html>

There are a lot of other options you can use, and when working offline you should definitely include a call to a local copy of the libraries. To find out how to do this and more, check out this week’s free View Source tutorial called Creating a Datepicker for your forms with jQuery on lynda.com. If you’re a lynda.com member and want to learn more about how to speed up your site with content delivery networks (CDNs), check out the member-exclusive video called Using a CDN to speed up your website.

Interested in more? • The full View Sourceseries • All developer courses on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:Create an Interactive Video Gallery with jQueryCreate an Online Photo Gallery with jQuery and DreamweaverCreate an Interactive Map with jQuery and DreamweaverjQuery Essential TrainingSet a Marquee to Autoplay with jQuery and Dreamweaver

By James Williamson | Monday, July 12, 2010

HTML5 training: Taking a first look at HTML5

In all my years of teaching and writing about web design, I don’t think I’ve ever seen a topic explode in terms of interest level and passion as quickly as I have with HTML5. Despite the huge amount of interest in the topic, there is still a great deal of confusion about what HTML5 is and how to go about learning it. In my opinion, one of the best ways to approach HTML5 is by first comparing it to HTML 4 and learning the differences. That way, it’s easier to understand exactly what is changing in regards to HTML and cut through some of the hype and clutter that is currently surrounding the topic.

Although HTML5 represents an ambitious step forward in the evolution of HTML, it is largely a revised version of HTML 4. If you are comfortable writing HTML4, you should find yourself quite comfortable with the majority of the HTML5 specification. With that in mind, let’s take a closer look at the differences between HTML5 and HTML 4.

First, it’s important to note that the HTML5 specification is designed not just to replace HTML 4, but also the XHTML 1.0 and DOM Level 2 specifications. That means the serialization of HTML to XML and the DOM specification are now contained inside the HTML5 specification, instead of belonging to separate specs. It also contains detailed parsing rules that are designed to improve the interoperability of systems that use HTML documents. As such, the HTML5 Specification is much larger than HTML 4 and covers a lot more ground.

One of the first places you’ll notice a difference in writing HTML5 documents is in the doctype and character encoding. In the past, based on the version of HTML they were using authors have had to use long, arcane doctypes to trigger standards mode in modern browsers. You may recognize this code, for example:Now, rather than having to deal with multiple complex doctypes, you simply use a single doctype that declares the document as an HTML file. Since HTML is no longer SGML-based, no DTD is required. Character encoding is likewise simplified. All that is required now is a meta tag with a charset attribute. Here’s what the above code looks like in HTML5:

Much simpler!

There are, of course, new elements in HTML5 that are not part of HTML 4. These new elements assist with page structure and code semantics, allow embedded content, and include new phrasing tags that help add additional meaning to content within the page. By now, you’ve probably heard of new elements such as the section, article, and headervideo and audio

Forms undergo a dramatic update in HTML5 as well. Much of the work done on the Web Forms 2.0 specification has been added to the HTML5 spec. The result of this is new form controls and input types that allow you to create more powerful forms and more compelling user experiences. New form elements include date pickers, color pickers, and numeric steppers. The input element is now much more versatile, with new input types such as url, email, and search that will make it easier to control the presentation and behavior of form content both on the web and within mobile applications. It’s worth noting that HTML5 also adds support for the PUT and DELETE form methods, making it easier to submit data to a wider array of applications.

By far the addition to HTML5 that is getting the most attention is the introduction of several new API’s that are designed to make developing web applications easier across multiple devices and user agents. These APIs include the much talked about video and audio API, an API for building offline applications, an API for editing page content, one that controls Drag and Drop functionality, another that focuses on history, and one that controls Application protocols and media types. Other API’s like Geolocation, Web Sockets, and Web Messaging are associated with HTML5, but are defined within their own specifications.

Those are a few of the highlights of the differences between HTML5 and HTML 4, and should give you a good idea of how HTML5 will change the way that web sites and web applications are authored. Sign up for the lynda.com Online Training Library® New Releases announcement so you’ll know when my HTML5 tutorials are available.

By Crystal McCullough | Wednesday, February 24, 2010

HTML structure and markup language basics

Web Design Fundamentals with James Williamson is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing. In this excerpt from the course, James explains the basics of HTML structure.

By Lynda Weinman | Thursday, May 07, 2009

What are we missing in our various CMS courses?

My last post about Joomla! triggered some buzz in the twittersphere and prompted more discussion. Jen Kramer wrote to me that Maria Langer (lynda.com WordPress 2.7 Essential Training author) contacted her:

Maria Langer contacted me by Twitter and said she’d love it if you asked the same question about a WordPress course. Now I’m wondering if we couldn’t make this a more generic series of movies, suitable for Drupal, WordPress, and Joomla. They all have the same starting place for their customized templates/themes — a static HTML web page.

Tom Geller (lynda.com Drupal Essential Training author) has been coordinating a CMS Overview course that would explain the strengths and weaknesses of the different systems and help newcomers navigate which choice to make.

So, open question to you all – what are we missing in our various CMS courses?

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.