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.
Next, you need to work on the content and content-sidebar containers. In this episode, you will learn about different alternatives for deriving the widths for these containers in proportion to the device width sizes. Once you have these widths specified in your dimensions utility file, you have one place where you can customize project-to-project-to-project. This makes your job much easier.
In this episode, you’ll finish up the site inner and wrap by migrating over and verifying all of the media queries.
Let’s start by working on the site containers, which includes the styling class attributes of .site-inner and .wrap. As you begin migrating in the media queries, you’ll see that we need to setup the theme’s max-widths. In this episode, let’s setup the different widths and device screen sizes. You’ll walk through the various strategies including hard coding the widths into a variable to writing a formula to calculate the widths based upon the overall base width. Running calculations is more advanced, but let’s discuss it. Sass can run all different kinds of mathematical equations including elementary addition, subtraction, multiplication, division. […]
NOTE: There’s no video for this episode. Congratulations! Look at what you just did and learned: Created a modular architecture for your styles You broke up the standard style.css into partials and then modules. You actively refactored using the Sass-y way to get rid of the redundancies. You started using variables. Seriously, you did great! Be proud. Own it. Now go take a break and chill out. So what do you have in your hands right now? A working Sass architecture. Yup, right now, you can run a task runner and have it compile to native CSS. Isn’t that awesome! […]
The prevalent design pattern at the moment is to move the media queries into the partials and right where the components and styling attributes are. Why? It makes much more sense to have all of your styles in one place for each attribute/component. Think about it. Instead of having all of your media queries (responsive) styles at the bottom of the stylesheet, now it’s nested right with the attributes/components. No more having to jump around to find stuff. It’s all together within the module itself. That makes so much sense. Doesn’t it?
Let’s migrate the entry content area, comments, pagination (which is really navigation), and sidebars. You will have three separate modules with when you’re done. You will continue improving your refactoring skills.
Let’s work on the site navigation in this episode. This modular includes the base styles, primary, secondary, and accessible menus. You will continue migrating and refactoring.
Did you do your homework? Well, let’s go through it together. I’ll show you how I migrated it and we’ll talk about different refactoring strategies. You can select the technique that works best for you. Then let’s create a new header color variable and then add that to the partial. Little-by-little you are cleaning up the styles. Tip: Think of the variables partials as configuration parameters for your project. You will also learn about why you want to refactor: Don’t repeat yourself. Don’t repeat yourself. Don’t repeat yourself. Write your code to be DRY (don’t repeat yourself). Remember: You don’t […]
Time to migrate over the skip links. Then your homework is to try to migrate and refactor the site header styles on your own. Then we’ll do it together in the next episode.
Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.