The first step is to make sure you have gulp installed globally. You need to have both node and npm installed. Then do the following: Open terminal. Type: npm install gulp –g When it’s done installing, type: gulp -v If you get a version number, you are ready to rock and roll. Next let’s create the package.json boilerplate file. To do that, let’s run the init out of npm which will walk you through the options: npm init Just keep pressing the return (enter) key on your keyboard to select the defaults. When done, then open up the file. Now […]
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.
The Why of a Task Runner
A task runner does much more than just compile Sass into native CSS. In this video, you will learn about the why of using a task runner, like gulp, to automate redundant tasks. It will improve your productivity. There are plenty of plugins available that you install as a node module which do tasks such as: Sass prefixing, gathering up media queries, error checking, and minifying Load Bourbon and Neat (and others) as a node module instead of using Bower Converting scripts into one minified file plus error checking Optimize images, SVG, and sprites Run translations and more
Introduction to Programming
The common way to start in WordPress is to take a theme, modify some styles, and then copy some piece of code to customize a feature. Far too many people skip the elementary fundamentals which are the critical foundations of programming. In this hands on lab, you will be introduced to programming including learning about the intent of code, syntax, differences in languages, and more. Prerequisites You will need to have your local development machine setup and ready to go. See the series prerequisites for more details. In addition, you will to complete the first installment in the series: Introduction […]
Introduction to WordPress Web Development – Absolute Beginners
In the first part of Absolute Beginner’s Guide to Web Development series, you will be introduced to websites, browsers, and programming. Let’s talk about the roles of the various technologies and programming languages. You’ll also learn about the role of plugins and themes in relationship to a WordPress website.
Wrap it Up
Congratulations! You made it through your first coding lab. No, you did not write code…yet; however, this lab gave you the initial fundamentals to prepare you for the next step of writing some code. The next step is to setup your Sandbox website and local building and testing environment. There’s an article in the Help Center that identifies the components of such a setup. But I do invite you to setup your own. Links are below.
Intent of Each Language – PHP & SQL
This is the second part of the Intent of Each Language. In this episode, you will learn about PHP and SQL. PHP runs on the web server to handle the web request, business logic, interacting with the database, making decisions, building web pages, and then sending HTML and resources out to the browser. SQL is the language of the database. The database holds and retains your site’s content, users, settings, etc. It holds the information and data that is necessary for a website. You use PHP to interact with it to run queries to fetch or save information (records) or […]
Intent of Each Language – HTML, CSS, JS
Let’s talk about the different languages of a WordPress website which includes: PHP, HTML, CSS, JavaScript, and SQL. Let’s talk about the intent of each of these languages. This is a big picture overview of the languages. HTML is the markup and structure of a web page. It runs in the browser. Its markup provides the meaning and intent of the content for other software, such as screen readers and web crawlers. It is not dependent upon CSS or JavaScript, as it can standalone. CSS is the styling language that adds all of the personality to your site for sighted […]
Intent of Themes vs. Plugins
I use the word “intent” a lot, as I want you to think about and select what you are doing based upon the intent. In this episode, you will learn about the intent of a theme and plugin. Their intent is very different. Both of them are used to customize WordPress, which means in all websites that you build, you will build and configure solutions using both themes and plugins. A theme is a skin. It is used for presentational purposes. Its intent is to provide the HTML structural markup and styling. Themes give a website its personality and uniqueness. […]
Code Becomes a Web Page
In this episode, you will see how the code files become an actual web page. You will take a look at the View files in my Catfish (sticky footer toolbar) plugin and then see how they are rendered in the browser as actual HTML markup. You’ll learn more about the architecture and structure of code as well as a couple of instructions. Then you’ll see how it looks to the browser as you explore in Chrome. Instructions in this video include: include require
First Look at Code
Let’s take what you learned in the last episode and look at some real code. You will want to go to my GitHub repository and look at this file. You will walk through the code as I show you how easy it is to read. Just ignore the syntax of it and read the names. The names tell you the intent and what is going on.