Confirm Download

Simultaneous file downloading works best in FireFox, Chrome, and Safari browsers. Please keep this window open until all downloads are complete. Some customers prefer using file download managers for Chrome or Firefox to better manage large and multiple file downloads.

Cancel Download

UI Development for Engineers

    • Learn the Basics of HTML  (Free)

      This segment will begin our discussion on HTML. We'll discuss markup elements, such as the non semantic div and the semantic elements such as header and footer. We'll discuss markup for our typography, as well as Class and ID attributes for CSS hooks. We'll also discuss our basic folder structure that we'll be using throughout these videos. At the end of this segment, you should be able to write a basic HTML structure.
    • 00:10:38

    • Learn the Basics of CSS  (Free)

      In this segment, we'll be discussing CSS. What is CSS? Why use CSS instead of inline styling? How to use CSS (selectors, properties, values). How to keep it all organized.
    • 00:08:24

    • Writing the Basics of CSS  (Free)

      In this Chapter, we'll begin writing CSS and learning some of the popular properties. At the end of this segment, you should be able to use a Class as a selector, and define background, padding, margin, float, and width.
    • 00:16:44

    • Creating a UI Pattern  (Free)

      Using the previous two segments, we're going to build our first User Interface pattern. We'll be building a UI pattern for a team page. This will include a headshot, title, and bio of employees that work for the company.
    • 00:15:30

    • Expanding on a UI Pattern

      Now that we have a UI Pattern created, we're going to expand on it. We'll make one of our employees' bio emphasized by using a special CSS class and changing their background. This is a good example of how we can write our CSS to be flexible and easily adjustable.
    • 00:03:53

    • What is HAML and SASS?

      In this segment, we'll discuss the technologies of HAML and SASS. Each of these technologies build upon HTML and CSS respectively, and allow us to build faster and smarter. We'll be using both of these in ongoing examples and segments.
    • 00:07:46

    • How to Install HAML and SASS

      In this segment, we'll show two ways to install both HAML and SASS outside of a rails project. The first method will show how to install HAML and SASS using gems in terminal. The second method, we'll show how to use the GUI app CodeKit, to install and maintain the site. Going forward, we'll be using CodeKit for our demos, but you can do the demos with either method.
    • 00:07:23

    • How to Write in HAML

      In this segment, we'll show how to write HAML in place of HTML. We'll review some of the HTML we discussed in the first segment and rewrite it in HAML.
    • 00:07:14

    • Refactoring Our UI Pattern

      Now that we're familiar with HAML, in this segment, we'll rewrite our UI Pattern in HAML. We'll go through, line by line, and change over to HAML.
    • 00:06:13

    • Using SASS

      In this segment, we're going to introduce you to SASS, which allows us to write very powerful CSS. We'll discuss mixins, variables, and the pros and cons of nesting. You'll be introduced to the syntax, folder setup of SASS, and we'll get working files in order.
    • 00:23:02

    • Expanding on Our UI Pattern with SASS

      Now that you're comfortable with SASS, and we've rewritten our UI pattern in HAML, we'll replace our previous CSS with SASS. This will show how to refactor plain CSS into powerful SASS. We'll use variables for color items, and a mixin for our layout.
    • 00:10:39

    • Learning About Grid Systems

      In this segment, we're going to discuss one of the major fundaments of design, the Grid System. We'll look briefly into it's history, why we use it, and how to use it on the web. We'll look at a few sites that have a strong grid system and discuss their strategies.
    • 00:11:03

    • Grid Systems with HTML & CSS

      Although there are several libraries out there for grid systems, it's beneficial to know how they work. In this Chapter we'll build some basic 2, 3 and 4 column grid systems using strictly HTML and CSS.
    • 00:15:44

    • Grid Systems with HAML and SASS

      In this chapter we'll build a grid system using HAML and SASS, using variables, mixins, and placeholders. This system will be built to be easily configurable with different amounts of columns.
    • 00:09:34

    • Typography for the Web

      The web is based on content, so we should have some basic typography skills. In this segment, we'll discuss what typography is, concepts on how we can improve our type, and CSS/SASS properties that will achieve these concepts. We'll also discuss different sources for our font families.
    • 00:08:59

    • Applications of Typography

      In this chapter we'll use type focused properties in CSS and SASS to finesse our typography. We'll also create a type scale using SASS variables, based on our base unit size.
    • 00:18:20

    • Learn Color Theory for the Web

      Just as important as Grids and Type, Color Theory will be our final design discussion. We'll talk about how to choose colors, tools to help choose them, and color concepts. We'll then dive into some SASS examples and strategies so we can build a color library that makes sense, and is easy to update and use.
    • 00:15:08

    • Building More UI Patterns

      Using our new knowledge from the previous segments, we're going to dive into making some real UI patterns that we'd use on a production site. These patterns will include a button library, input library, and the ability to adjust sizing sitewide. This segment is where we'll be doing a lot of building together to give you some hands on experience.
    • 00:17:16

    • Build for Mulitple Devices

      This segment is a brief conversation about building for mulitple devices, inlcuding mobile and tablet. We'll discuss why being device agnostic is a great choice, how and why to have one codebase that is updated, and some of the terminology and strategy of building for mulitple devices. This segment is meant to be an introduction, to help you begin to familiarize yourself with device buiding.
    • 00:21:25

    • UI Frameworks

      Throughout the course, we've been building from scratch, but you don't have to do that for every project. In this segment, I'll discuss various frameworks and their benefits. These include twitter bootstrap, Compass, Bourbon & Neat. With your knowledge from these segments, combined with these frameworks, you can begin building better UI patterns tonight.
    • 00:04:31

UI Development for Engineers

  • Publisher: O'Reilly Media
  • Released: October 2014
  • Run time: 3 hours 60 minutes

Now that new tools have blurred the line between the Web’s front and back ends, full stack engineers are in great demand—and for many, that means becoming more comfortable with user interface development. That’s where this hands-on video course comes in. Web designer and host Mike Kivikoski shows you how to use basic design principles to mold your code into something beautiful. By the time you complete this course, you’ll be able to create UI design mockups and then make them real.

  • Create a UI pattern with HTML5 and CSS, and refactor and expand it with HAML and SASS
  • Learn how to build grid systems of different sizes with CSS and SASS
  • Pick up basic typography skills, and learn how to improve your text and display fonts
  • Understand color theory, and learn strategies for building a color library
  • Dive into production-ready UI patterns that include a button library, a headline library, and content sections
  • Get the basics for building (and updating) a single codebase for multiple smartphones and tablets
  • Learn about various UI frameworks and their benefits, including Bootstrap, Compass, and Bourbon Neat

Mike Kivikoski runs Atedrake, a web design studio in Somerville, Massachusetts. He has also served as an Adjunct Professor at Endicott College, teaching Intro to Web Development and Intro to Web Design.