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 12, 2016

Lab Introduction

In this lab, you and I are going to finish the header module by bringing in the media queries, refactoring, and assigning new variables. Why don’t you try to finish this module on your own using the strategies that you learned in Part 2b Navigation Sass Module? Then watch these videos to see how Tonya thinks about refactoring. Remember, you want to build this module and all of your codebase to fit the way you think, how you work, and your workflow. There are many different ways to solve the same problems, i.e. many different ways to write code. Don’t […]

0 Videos Runtime July 12, 2016

Pagination Styles

Pagination is wrapped in with the content styles. However, pagination is navigation. Therefore, let’s pull it into the navigation module and walk through the same process we’ve done throughout this lab. Then we’ll walk through and ensure everything is finished and loaded into the index.php file. Lab’s Final Code Get the final code for this lab on GitHub by clicking on this button. This is the code you are building, as you and I walk through how and why, as well as refactoring and other alternatives to make it your own. The Sass navigation files are found in our GitHub […]

0 Videos Runtime July 12, 2016

Accessible Navigation Styles

@include to bring in the Bourbon mixin for transform.

0 Videos Runtime July 12, 2016

Primary and Secondary Navigation

Before you start this video, see if you can migrate over the media queries, assign color variables, and do the refactoring. Then work with Tonya to walk through the refactoring strategies. Remember you can setup the variable names and nesting the way you want for what fits your workflow.

0 Videos Runtime July 12, 2016

Base Styles

Step one is to find and migrate in all of the media query styles and load those into the base styles partial. Remember the strategy is to have all of the styles for a component, module, or attribute to be within the file. We do discuss optimization strategies too with thinking about how to break down your styles. In this episode, you will start using Bourbon.io functions, such as rem to convert pixels to rems. First you look at the functions available to you in Sass. The pixel to rems conversion is not native to Sass. Therefore, you will use […]

0 Videos Runtime July 12, 2016

`.js` Media Queries

You will start looking at the media queries for the menu styles. We start down the direction of pulling those into the base, but then quickly realize that the .js styles need their own partial file. You will work with Tonya through the process of thinking about how to port the styles over into the new theme. She discusses different strategies and ways of laying out the media queries within the navigation module. Then you will begin refactoring. See if you can do this task on your own. Then work with Tonya to see different ways to refactor. This episode, […]

0 Videos Runtime July 12, 2016

Lab Introduction

In this lab, you and I are going to finish the navigation module by bringing in the media queries, pagination, and more.

Labs

Lab Introduction

Pagination Styles

Accessible Navigation Styles

Primary and Secondary Navigation

Base Styles

`.js` Media Queries

Lab Introduction

Learn

Help

General