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 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 […]
So now you know the benefits and how writing your styles in a modular fashion helps you to do more and make more. How are you going to do it? Native CSS doesn’t provide the means for modularity or clean, quality coding. Meet Sass, Syntactically Awesome Stylesheets. Sass adds the powers of functionality and variables to CSS. You now write your styles in a code-based format that is clean, DRY, and modular. Let’s talk about Sass and how it will help you.
Just like we discussed in converting to a modular PHP theme architecture, modularity applies to everything you build in code, including your stylesheets and CSS. What are the benefits to you? Why would you want to write your styles in a modular fashion? It does the following for you: Saves you time Increases the quality of your code and product Reduces errors What does that mean for you? Takes you less time to produce solutions, meaning a lower product cost and time to market. Makes you more in demand, marketable, and valuable. That means you can make more moola. Let’s […]
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.
Alright, now you have all the styles broken out into the proper partials based upon the components. Now it’s time to return to refactoring by pulling over the media queries, identifying variables, and getting rid of redundancies.
This episode is an introduction to the lab where you are going to convert a typical stylesheet over to a modular architecture. You will use Sass as the means to accomplish this, as native CSS does not provide that functionality. In this lab, you are going to learn about why modular CSS saves you time, makes your code and workflow more efficient, improves maintainability, and advances you forward in building higher quality products. Then you will begin slicing up the style.css file and migrating it over into the Sass partials. This is the first step to the conversion process from […]
Let’s rethink our current module architecture and how we have the partials laid out. The comments have several components and sub-components. Right? It has the following components: comments list comment which includes the header, author, meta, and comment content respond pings Just like we did for the entry header and footer, it’s best to break out components into their own partial. For the comments, it’s up to you how far you want to break things out. Let’s talk about several strategies and think about different alternatives.
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.