While using a framework like a downloaded grid system or a more full-featured framework like Bootstrap can make prototyping designs very efficient, they all come with overhead. For example, if you just need to line up some boxes, using a framework can add many hundreds of lines of CSS that you don’t even use. For […]
Author: km
You have forty-five minutes for this test. You can use the Internet or your notes if you’re not sure how to do something. You may not talk, text, or email anyone. If you are seen to be looking at your classmates’ work, you will receive a zero for the test. Please download and unpack this zip file. This […]
This exercise is meant to help you familiarize yourself with the Chrome Developer Tools by examining and modifying the code that makes up any webpage. The Developer Tools allow us to do things like the following: see what html goes into any element in the page examine the nesting of html elements see what css […]
This exercise will demonstrate ways to utilize advanced CSS selectors. Some reasons why learning advanced selectors will benefit you. About the Exercise First, please download this zip archive of the files you need for the exercise. This includes screenshots showing most of what you need to do. The screenshots were taken on a retina Mac, so they’re […]
Tutorial Videos & Courses
Editors & Plugins Up & Running With Sublime Text 2 (L) Perfect Workflow With Sublime Text 2 (TP) Learn Atom: The Basics (L) Coding Faster With Emmet (L) Web Developer Tools Navigating the DOM with Developer Tools (L) User Experience Fundamentals of User Experience (L)
WordPress Theming Links
The Basics To build an understanding of how WordPress themes work, start at the WordPress Theme Handbook, Chapter Two. This will give you a understanding of Template Files Post Types The Template Hierarchy The Loop Template Tags Theme Functions Including CSS & JavaScript Conditional Tags Categories & Tags Template Hierarchy Links The template hierarchy is one […]
Your First WordPress Loop
In your underscores starter theme, create a new file called front-page.php. Into it, copy the following code. You can remove anything that was put there by default by your editing program (if anything). Now go to the front page of your site. What we are going to do is build on this loop in class […]
You can use practically any text editor to build WordPress themes, and you can run SASS directly from the command line, but Integrated Development Environments (IDEs) like Netbeans come with a lot of advanced functionality, such as sophisticated code-hinting, that will quickly become evident as you start to use them. Installing The Software These installation instructions here […]
Download Your Starter Theme WordPress starter themes are designed to give you a large headstart in making themes. Probably the most popular of these is the _s (pronounced underscores) theme. To download it, go to underscores.me and click on the Advanced Options link. Fill out the form with a theme name, a theme slug ( a URL-friendly […]
If you want to know how to install SASS and/or Netbeans on your own computer, consult this document. Set Up Your WordPress Testing Environment Depending on what class we are in, I may give you a Duplicator archive and installer file and get you to install a sample WordPress installation, or I might get you to […]