Labs

Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.

Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.

0 Videos Runtime July 20, 2016

Package JSON and Dependencies

The first step is to make sure you have gulp installed globally. You need to have both node and npm installed. Then do the following: Open terminal. Type: npm install gulp –g When it’s done installing, type: gulp -v If you get a version number, you are ready to rock and roll. Next let’s create the package.json boilerplate file. To do that, let’s run the init out of npm which will walk you through the options: npm init Just keep pressing the return (enter) key on your keyboard to select the defaults. When done, then open up the file. Now […]

0 Videos Runtime July 20, 2016

The Why of a Task Runner

A task runner does much more than just compile Sass into native CSS. In this video, you will learn about the why of using a task runner, like gulp, to automate redundant tasks. It will improve your productivity. There are plenty of plugins available that you install as a node module which do tasks such as: Sass prefixing, gathering up media queries, error checking, and minifying Load Bourbon and Neat (and others) as a node module instead of using Bower Converting scripts into one minified file plus error checking Optimize images, SVG, and sprites Run translations and more

7 Videos 01:10:42 Runtime July 20, 2016

Part 3b – Doing More with Gulp

It’s time to do more with gulp. While gulp is awesome at processing Sass, you can do more tasks such as sourcemaps, minifying, error handling, notifications, linting (error checking), and even more time-saving shortcut modules within Sass itself. Let’s finish up your gulp setup file and get you cranking out CSS in less time. Let’s do more.

6 Videos 00:48:15 Runtime July 20, 2016

Part 3a – Automating Tasks with Gulp

Sass requires compilation to convert it into native CSS. You use a task runner, such as Grunt or Gulp, to automate the task for you. In this lab, you will learn about and build your task runner using Gulp.

9 Videos 01:19:50 Runtime July 12, 2016

Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme

You will learn about the BEM naming methodology and then you’ll refactor your variables to comply with its naming convention. Then you’ll refactor the colors to remove the redundancies. Then you’ll learn about different media query breakpoint strategies. Lastly, you’ll make sure that all partials are being loaded and finish the style.scss file. At the end of this lab, you will have a complete, modular Sass architecture that will save you time and money on every project.

7 Videos 01:05:26 Runtime July 12, 2016

Part 2j – Base & Common Classes Sass Modules – Developer’s Genesis Starter Child Theme

It’s time to finalize the base and common classes. The common classes will be migrated into the appropriate module, while the Base Sass Module will be finalized. You’ll be learning about different strategies and alternatives to setup your codebase for what fits you and your needs. You’ll be introduced to Bourbon mixins to save you time and allow you to automatically generate sizes. Then you’ll be migrating the media queries, assigning variables, and refactoring.

9 Videos 01:15:35 Runtime July 12, 2016

Part 2i – Layouts Sass Module – Developer’s Genesis Starter Child Theme

The layouts specify the overall widths of the site and the main containers such as site inner, wrap, content, and sidebars. In this lab, you will explore strategies to calculate these widths and then have each automatically generate based upon the base width. This step will save you a bunch of manual time as you adjust the widths for each component in the project. Then you continue finishing up the the Layouts Sass module. You’ll also get the opportunity to use the Bourbon Neat framework for calculating your column class widths.

3 Videos 00:11:27 Runtime July 12, 2016

Part 2h – Plugins Sass Module – Developer’s Genesis Starter Child Theme

In Part 2h, you will finish up the Plugins Sass module by refactoring, using the techniques you’ve acquired throughout this entire series. You will also add the plugins that you normally work with in your projects. Let’s get your codebase ready for how you work.

3 Videos 00:23:20 Runtime July 12, 2016

Part 2g – Widgets Sass Module – Developer’s Genesis Starter Child Theme

Let’s first give you a pep talk to reinforce why you are doing this series and how it will make you more moola. Then in Part 2g, you will finish up the Widgets Sass module. by refactoring all of the widgets. Then you’ll commit the changes to your version control repository.

4 Videos 00:21:29 Runtime July 12, 2016

Part 2f – Comments Sass Module – Developer’s Genesis Starter Child Theme

In Part 2f, you will finalize the Comments Sass module, which includes respond form, the list of comments, and then the components with the comments itself. You’ll think through all the components and then break up the partials. Next, you’ll migrate the media queries, identify and assign variables, and then refactor to remove redundancies and make it more readable. Lastly, you’ll commit the changes using git.