Let’s review what you did here in this lab before you move on Part 4.
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.
Custom Utility Bar – Styling – Part 2
Let’s finish up the styling in this episode. You’ll be doing things such as adding a slash between the menu items using the CSS property ::after.
Custom Utility Bar – Styling – Part 1
Before we get to styling, let’s add a menu and then some social links into the new Utility Bar widget area. Then you’ll start styling the Utility Bar and its components. Some of the CSS properties that you are using are: display float ::after You will also add in (enqueue it) the Font Awesome library.
Let’s Build a Custom Utility Bar – Structure
Let’s add a utility bar above the site’s title area. In this episode, you and I will build a utility bar. But it’s more than just that, as you can go over to Carrie Dils’ site and get the code. We’ll talk about things like how to think about code construction, where do you register the callback, how is the widget area built, modular code, where to build the code, and more.
Custom Header Layout 3 – CSS Styling
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. We are going to do something different. Instead of styling in the Genesis Sample child theme, let’s go through the Modern Studio Pro child theme demo that StudioPress provides for you. Don’t worry, as I’ll explain everything. You’ll learn about these CSS properties: background-size background-position background-color margin-top margin Remember with margin and padding, think about the rotation of a clock. You specify the values in a clockwise fashion from the top. Therefore, it’s top to right to bottom to left.
Custom Header Layout 3 – HTML Structure
In this layout, let’s keep the logo centered but wrap the primary and secondary navigation around it, i.e. on either side. You’ll write the code to accomplish both the placements in PHP and CSS for styling.
Custom Header Layout 2 – Styling
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. This time, you will style in the browser but then move those changes into the stylesheet. You’ll learn about how to structure your stylesheet to achieve clean, quality code by keeping it lean and DRY (Don’t Repeat Yourself).
Custom Header Layout 2 – HTML Structure
Let’s build some real-world header layouts that you can use in your projects. In this layout, you will relocate the primary navigation to above the site’s header, i.e. the top of the page. Then you’ll remove the header right area, add a logo, and then center the logo on the page. This episode will involve PHP and CSS hands-on work.
Custom Header Layout 1 – Mobile Styling
In this episode, you will continue styling Layout 1, but this time you are working on the responsive styles. You’ll work with the media query and learn how to adjust the styling for the mobile devices.
Custom Header Layout 1 – Styling
Now the HTML structure is correct and the components are in the right order. Let’s start working on the styling. In this episode, you will walk through step-by-step how to style within Google Chrome. You’ll learn about the different CSS properties and what they do, such as: clear float width Whenever you need to know more information about a CSS property, I highly recommend that you go to CSS Reference on Codrops.
