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.
Let’s commit your changes and then push them to GitHub, GitLab, or Bitbucket. We’ll walk through the current commit in GitHub too to see what it looks like and how to read it. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github.
Now let’s finish up the Plugins Sass Module. Tonya will mentor you through the refactoring process.
As I was thinking about the rest of this lab, it dawned on me that starting with the variable declarations is not the best approach to helping you make the leap from working in native CSS to maximizing what you can do in Sass. Therefore, let’s adapt and start migrating the Genesis Sample Theme’s style.css over into the Sass files. The remainder of this lab is walking through step-by-step, copying each section of the styles and moving them over into the Sass files. You and I will walk through the process and actively think about how to divide it up. […]
In this lab, you will be refactoring the Plugins Sass Module, which currently consists of the Genesis eNews Extended and JetPack plugins. You will also want to add in any of the plugins that you commonly work with, as this is your codebase for every project. You just simply load the partials that you need for the current project. The strategy is to have all of the partials in your codebase ready for you.
All of your colors for the site’s branding and color scheme go into the utility variables module. You assign the color to a variable and then use the variable within your styles. The advantage is: for each project, you have just one place to change the entire site’s branding. It will save you time and frustrations. Bam, that’s a great thing! In this episode, you’ll think about different variable naming strategies. You hear me walking through various alternatives until we find the one that seems to work better than the others. But like PHP variable naming, you have flexibility to […]
It’s now time for you to start creating the file structure and adding in the baseline partial Sass files. Make sure you are ready to work, as you will be actively creating the files. I want you to do this with me as you and I think about what is a good structure and why. You’ll hear my thought processes as though I’m sitting right there with you, working beside you.
Let’s commit your changes and then push them to GitHub, GitLab, or Bitbucket. We’ll walk through the current commit in GitHub too to see what it looks like and how to read it. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github.
Now let’s finish up the Widgets Sass Module. Tonya will mentor you through the refactoring process.
Let’s talk about how we move from the stylesheet into an architecture, meaning how are we going to break up the styles into modules and a file structure. The structure is defined typically by tasks, features, views, and components. There are no hard and fast rules about how you set up your folder structure. I show you two different projects to show you different alternatives: my Hello theme for my personal blogs wd_s by WebDevStudios In this episode, you walk through a thought process of deciding how to break things up. I share my thought processes with you, as well […]
You are halfway through this series and have been working hard for hours now. Why is Tonya putting you through this process? It’s time for a pep talk to discuss what the new skills you are getting from this series will do to put more moola (money) into your pocket. Easy to find Easy to customize Reduce errors and bugs Configurable Easier to Read The point of this process is to give you a codebase that is yours and is a starting point for every single project you build. It will save you time and money. It puts more moola […]
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.