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

By Scott Fegette | Wednesday, January 07, 2015

Learn How to Build a Website with Dreamweaver — Start to Finish

Learn How to Build a Website with Dreamweaver

Having a website is now table stakes for today’s working professionals (and darn near a requirement for anyone doing business in this day and age), and Dreamweaver’s always been a great choice for building and maintaining websites.

However, Dreamweaver is also a professional application with tons of functionality packed inside, and can prove difficult to learn. Here’s a roadmap showing you how to build a website with Dreamweaver — as well as a strong foundational skill set for building websites in general.

By Starshine Roshell | Friday, December 05, 2014

Professor Gives Students 'Bang for Buck': Swaps Books for lynda.com

John Drake adopts flipped classroom to give students more value

“I’m doing it. Next semester, I’m going all in with lynda.com.”

So begins a recent blog post by John Drake, a web development professor at East Carolina University.

“I plan on chucking my existing textbook and instead requiring students to use the training videos to learn HTML, CSS, and PHP. … I am done lecturing in the classroom for this course.”

By Starshine Roshell | Sunday, November 09, 2014

She Built Lifehacker's #1 Meal-Planning App with lynda.com

2014_11_09_JessDang5

Diagnosed with a life-threatening illness as a teen, Jess Dang promised herself that if she lived to age 30, she would do something to help people lead healthier lives.

So at 30, she quit her job at a high-profile company and launched a website that teaches folks how to cook simple meals using real food.

And she credits lynda.com with helping her do it.

By Starshine Roshell | Sunday, November 02, 2014

Our Biggest Fan? He Completed 100 Courses in 10 Years!

2014_11_02_DavidBlack2

People come to lynda.com for different reasons. Some come to learn a particular software. Some come to master a skill. Some come to complete a project.

David Black came to learn InDesign and Photoshop for his printing business 10 years ago—and, well, he never left.

By Chris Converse | Wednesday, May 07, 2014

Planning a Responsive Web Design

figure_2_alternate_content

As mobile web usage continues to rise, it’s increasingly important that your website functions across all types of devices and screen sizes. The smartest way to provide the best user experience (UX) for today’s technology is to create a website with a responsive design.

By Chris Converse | Tuesday, December 11, 2012

Converting Photoshop designs to HTML

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next: • More courses by Chris ConverseCSS: Core ConceptsCSS: Page Layouts

By Chris Converse | Monday, November 19, 2012

Responsive download, not just responsive design

When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Example of CSS driven imagery

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

Three different images sizes created for a responsive web design with responsive download

This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.

If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.

Interested in more? • All web design courses on lynda.com • All courses from Chris Converse on lynda.com

Suggested courses to watch next:• CSS: Core ConceptsCSS3 First LookHTML Essential Training

By Ray Villalobos | Friday, July 20, 2012

An introduction to LESS and Sass pre-processed CSS languages

Getting started on something new can be challenging, especially when the shear number of competing technologies that do similar things can make it tough to choose which one to give your attention to. One of the hot new trends in web design is CSS pre-processed languages and there’s two big ones vying for your attention—LESS and Sass. LESS and Sass are both ways of writing CSS code with a syntax that allows you to use features not yet available with Cascading Style Sheets (CSS), such as variables, nesting, conditionals, and more.

What are pre-processed CSS languages?

Pre-processed CSS languages add features to CSS that aren’t there yet—like variables, conditionals, and functions. They’re called pre-processed, because their final step is a processing, also called compiling, that converts the pre-processed language to regular CSS. In a nutshell, what you use on your site ends up being plain vanilla CSS, but comes as a result of processing the LESS, Sass, or other pre-processed language files you create.

Why use pre-processed CSS at all?

It’s hard enough becoming proficient with CSS, HTML, JavaScript, and jQuery, so if you can do the same thing with CSS, why would you want to submit yourself to learning an additonal language? Whether or not learning LESS or Sass is right for you comes down to whether or not the new languages will make you better, faster, or more efficient. Both LESS and Sass introduce variables into CSS, which I have found to be a very efficient detail that has made learning the new languages worthwhile for me.

For example, when you build a large web site, there’s usually a palette of colors you’re using throughout the site, and you might, for instance, be using one color for your article headlines that you also want to use on your links in the bottom navigation.

Example results of Less and SASS coding.

Example of web site design using the same color for article headlines and bottom navigation links.

Doing that with CSS is pretty easy:

<a href="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png"><img class="aligncenter size-full wp-image-14227" src="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png" alt="CSS code that alters the color text within a web design." width="506" height="55"></a>

While that works well, what if you wanted to use that same color in 20 or 30 selectors, or in gradients with a bunch of different browser prefixes? Both Sass and LESS will allow you to create variables which make global changes on elements a breeze. The code for this color application—with the assigned variable @myColor—looks like this in LESS:

LESS CSS pre-processed code that alters web design color. 

And—with the assigned variable $myColor—like this in Sass:

SASS CSS pre-processed code that alters web design color. 

Looks pretty much like CSS, right? Both LESS and Sass let you use the regular CSS code you already know so you really don’t have to learn a whole new way of doing things—just some additional rules. Even if the only thing you get out of pre-processed CSS is the ability to use variables, that alone will save you a lot of time, and it’s technology that saves you time that you need to spend your time investigating.

Using a Compiler application

Unfortunately, when you use pre-processed languages like SASS and LESS, you do need to compile the code into CSS. That can be done in a variety of ways. LESS, for example can be downloaded as a Javascript file that can be added to the project, or as a command-line tool for either your local machine or your server. Sass installation is also a command-line install. They try to make things easier by letting you define which folders should get automatically processed, but I still wouldn’t describe it as a user friendly experience for your average designer (which is why most graphic designers who use CSS have never tried using LESS or Sass).

Thankfully, there are some compiler applications that take care of processing files for you, and update things visually. My favorite application for compiling pre-processed languages is CodeKit. It handles LESS and Sass really well, and it also lets you process Haml, CoffeeScript, and even JavaScript.

A screenshot of the CodeKit compiler.

The CodeKit compiler.

You can also have CodeKit ‘mini-fy’ all of your files, not just your CSS. That means that it can spit out a different version of your code without comments, tabs, or extra spaces, which will make your files a lot smaller (something I recommend that you be doing regularly anyway).

If you use frameworks like BootStrap or jQuery Mobile, you can import them into your projects through CodeKit from a central location. When a new version of jQuery comes out, you can simply replace one copy and all of your projects will auto-update with the latest copy.

On a PC or Linux machine, things are a bit less rosy. There is a nice LESS compiler called SimpLESS which helps, but it’s not as feature-full as CodeKit.

Get Started

There are many more things you can do with LESS and Sass. If you’ve been on the fence about them, I recommend you give them a shot. Starting simply with variables is easy enough if you are already familiar with CSS, and if you’re like me, you’ll find using variables will make your life immediately easier. Even if you’re into command-line tools, I recommend you take a look at something like CodeKit or SimpLESS.

Should I use LESS or Sass?

Both LESS and Sass are pretty good, especially if you’re just getting started. For me, LESS has a bit of an edge since I’m currently digging into Twitter’s Bootstrap Framework, which makes it a breeze to scaffold and build web sites quickly (it is written in LESS). Sass takes the cake if you’re working with Ruby on Rails projects since it was written in Ruby. Ultimately, which pre-processed language you choose doesn’t really matter since they’re both tools that will make you more efficient, and that’s always worth an investment in time. Pick one and wedge it into the workflow for your next project. It may take you a bit longer to finish, but it will also change the way you code for the better.

Interested in more? • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:CSS: Core ConceptsCSS FundamentalsCSS3 First LookManaging CSS in Dreamweaver

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.