BuildAModule Video Index (i.e. MegaPage)
For a more detailed view of each collection with some additional features, visit the collections page.
Drupal 8 Site Building
Introduction
- 3:53Welcome to "Drupal 8 Site Building"
- 3:23What makes Drupal different than other site building tools
- 1:19How we're going to deal with updates to Drupal 8 and contributed modules
- 1:07About the web site we're about to build
- 1:41How to install a new Drupal 8 site with Dev Desktop
- 1:17How to set up a Drupal installation
- 0:37How to log in and log out, even if the log in link is hidden
How to work with modules, improve navigation and add site branding
- 1:49How to change the logo and header background colors
- 1:33What a "theme" is and how to hide the site title
- 1:55How to use the administration menus and add shortcuts
- 1:29What a "module" is and how to install and uninstall modules
- 1:37Why some very useful modules are not part of core Drupal
- 4:27How to evaluate the health of a contributed module for use in a project
- 0:35How development (dev) releases of modules work
- 1:27What "alpha," "beta," "rc" and "stable" releases are and their security implications
- 1:05How to install and enable a contributed module through the user interface
- 0:53Why the terms "install" and "enable" might be confusing when it comes to modules
- 2:09How to apply our module assessment checklist to the Coffee module
- 1:11How to manually install a contributed module
- 0:45How to jump to any administration page using the Coffee module
- 1:29Quiz and challenges origin story
- 1:17Quiz for chapter 2 of "Drupal 8 Site Building"
- 0:45Challenges for chapter 2 of "Drupal 8 Site Building"
- 7:10Solutions for chapter 2 of "Drupal 8 Site Building"
How to set up content types, create content and create simple views
- 3:07How to create content and what the content creation form settings mean
- 0:33How to edit content in-place and through the content edit form
- 0:59What the term "node" means and why "content" gets used more in the interface
- 0:57How to change the default home page
- 1:27Adding our "About us" page
- 1:03Reviewing our "tour type" and "tour types" wireframes
- 1:55The benefits to modeling data instead of using flat HTML
- 0:55What a CSV file is and how to view it as a spreadsheet
- 2:43How to add and configure a custom content type
- 1:35How to change the label and settings on a default "body" field
- 1:27Overview of textual field types
- 1:17The pros and cons of reusing fields across multiple content types
- 0:49Adding a plain textarea field
- 0:35Adding our first tour type content
- 1:43How to change field order and position field labels
- 0:27How to hide the "submitted by" text on a content page
- 0:31How the "Back to site" link works
- 0:43Adding our other tour type content in
- 3:49How to add a view, and what settings the Views wizard affects
- 1:11How to add fields to a view
- 1:55How to change the HTML element used for fields and field labels in a view
- 0:33Reflecting on the value of data modeling versus flat HTML now that we've used Views
- 1:35Quiz for chapter 3 of "Drupal 8 Site Building"
- 0:41Challenges for chapter 3 of "Drupal 8 Site Building"
- 5:25Solutions for chapter 3 of "Drupal 8 Site Building"
How to back up and restore a Drupal site and start from a chapter snapshot
- 0:43Why it's useful to know how to back up and restore a site
- 0:47How to back up a Drupal site's files
- 0:57How to back up a Drupal site's database
- 0:57How to restore a Drupal site's files from a backup
- 0:21How to restore a Drupal site's database from a backup with phpMyAdmin
- 2:11How to restore a snapshot for any chapter in this series
How to work with users and permissions
- 1:49How to add a new user
- 1:25How to use Masquerade to log in as any user and how to log in as two users at once
- 2:13How roles and permissions work, and what the anonymous, authenticated and administrator roles are for
- 1:55How to add a role and why to keep permissions to a minimum
- 0:13How to assign a role to a user
- 0:53How to assign a user authorship of content so they can edit it
- 2:03Assigning authorship of our tour type content to allow creators to edit them
- 0:49How to add a field to users
- 2:01What an entity is, the difference between user and node entities and how the Profile module works
- 1:17Quiz for chapter 5 of "Drupal 8 Site Building"
- 0:19Challenges for chapter 5 of "Drupal 8 Site Building"
- 4:37Solutions for chapter 5 of "Drupal 8 Site Building"
How to use reference fields, views relationships and image styles
- 3:09Options for merging multiple fields automatically into a node's title, and creating our "staff" content type
- 1:42How to add a select box or list field to a content type or other entity
- 4:26How to add an image field, what "machine name" means and comparing private and public files
- 1:51How to change the order of fields in a content creation form and change select boxes to checkboxes
- 2:37Adding our staff content
- 1:11How to merge a field with multiple values in a view and what "delta" means
- 3:09How to use image styles to render an image at any size and shape
- 0:17Adding a body field to our view
- 1:21How the personal contact form works, and how to create a user-based view
- 0:55Explaining why we need a reference field and adding another user
- 4:57How to add a reference field and a relationship to connect two entities and pull data from both into a view
- 4:03How to rewrite the output of a field in a view to include content from multiple fields
- 0:39Reviewing our view an an anonymous user and how to log out via a URL
- 1:03How the anonymous and authenticated roles don't stack, and how to give permission to use the personal contact form
- 1:17Quiz for chapter 6 of "Drupal 8 Site Building"
- 0:31Challenges for chapter 6 of "Drupal 8 Site Building"
- 5:09Solutions for chapter 6 of "Drupal 8 Site Building"
How to debug email and fight spam
- 1:33How to prevent email from being accidentally sent by using Maillog
- 0:39Why to create a list of tasks to execute before going live
- 0:45How to get to a module's configuration page
- 1:35How to configure Maillog and how to review sent messages
- 1:55How the user registration form works and options for combatting spam
- 0:41How to unblock or approve a user account
- 1:07What a new user will see when logging into a site for the first time
- 4:01How to hide the user registration form and a walkthrough of user account settings
- 1:25How and why to install the Honeypot module
- 1:35How to configure Honeypot to protect a form
- 1:29How to verify the Honeypot module is working for a form
- 3:25How to install and configure the CAPTCHA module to deter spam
- 0:41How to add a CAPTCHA to a form
- 1:53How to install and configure reCAPTCHA
- 0:43Why a CAPTCHA can result in frustrated users
- 1:45How and why to set up a Mollom account for spam filtering
- 3:55How to install and configure the Mollom module
- 0:55How to uninstall modules that are dependencies of other modules
- 1:07Why it makes sense to completely uninstall unused modules
- 1:59How the built-in flood control protection for the log in form works
- 0:53How to log in when your account has been blocked for too many failed login attempts
- 1:51Quiz for chapter 7 of "Drupal 8 Site Building"
- 0:23Challenges for chapter 7 of "Drupal 8 Site Building"
- 8:43Solutions for chapter 7 of "Drupal 8 Site Building"
How to use taxonomy and comments
- 2:33Reviewing our blog entry and blog listing wireframes
- 0:31Configuring our blog entry content type
- 1:39What the terms "taxonomy," "vocabulary" and "term" mean
- 1:09How to add terms directly to a vocabulary and view a term page
- 1:17How to add a taxonomy reference field (i.e. tagging) to a content type
- 1:19Adding a blog entry and testing out our tag field
- 1:05How to change a taxonomy field to use a more tag-like input mechanism
- 2:43How to add an image field and display it as a thumbnail
- 2:01How to use the Colorbox module to provide a photo gallery overlay
- 1:55How to find documentation on a contributed module when it doesn't quite work right
- 0:35How to set up the "libraries" folder and add a jQuery plugin
- 1:37How to flush Drupal's cache and why we would need to clear it
- 1:01How to add multiple images at once and view multiple images in Colorbox
- 2:25How to add commenting via a comment field
- 1:25Testing our comment field and an overview what we need to do to make our comment form public
- 0:53How to allow anonymous users to add moderated comments
- 1:09How to moderate unpublished comments
- 1:47How to allow anonymous users to post unmoderated comments and protect our comment form
- 1:47The pros and cons of using a third-party service like Disqus or Facebook for comments
- 0:33How to set up a Disqus account
- 3:17How to install and configure the Disqus module
- 1:11Quiz for chapter 8 of "Drupal 8 Site Building"
- 0:33Challenges for chapter 8 of "Drupal 8 Site Building"
- 7:50Solutions for chapter 8 of "Drupal 8 Site Building"
How to add CSS, edit date formats, modify view modes, and use Display Suite
- 1:29What CSS is and how we'll use it to fix a layout issue
- 1:21How to use a browser to discover which element's CSS you need to modify
- 0:55Comparing adding CSS via a module like Asset Injector and creating a custom theme
- 3:03How to inject CSS through the user interface with the Asset Injector module
- 1:39How to troubleshoot issues with CSS from Asset Injector not working
- 0:59How to add CSS to display image field images in a row
- 0:37Where to find the CSS we use and reassurance that CSS is tricky
- 0:39Reviewing the differences between our wireframe and the default "Submitted by" line
- 1:37How to modify the date format used in the "Submitted by" line
- 1:01How to add a custom date format
- 2:03Installing Display Suite and Token and how to tell when a module has dependencies
- 1:45How to use Display Suite to adjust page layout and give greater control over fields
- 2:37How to add a custom field in Display Suite to replace the "Submitted by" line and how Token works
- 2:33What view modes are and how to modify hidden view modes
- 2:05How to add a custom view mode and use it in a view
- 2:37How to modify the teaser view mode
- 1:17Modifying our CSS injector rules and selectors to apply our CSS to the new view
- 1:07Quiz for chapter 9 of "Drupal 8 Site Building"
- 0:27Challenges for chapter 9 of "Drupal 8 Site Building"
- 7:17Solutions for chapter 9 of "Drupal 8 Site Building"
How to set up paths and redirects, and working with blocks and block types
- 1:11The benefits of using a readable url and how Pathauto can help
- 1:11How to install Pathauto and why Drush is useful for installing modules with dependencies
- 1:21How to configure a pattern in Pathauto to automatically generate URL aliases for new content
- 0:53How to bulk generate aliases for existing content with Pathauto
- 0:57Creating Pathauto patterns and bulk generating aliases for tour types and blog entries
- 1:31How we can use the Redirect module to prevent duplicate URLs and why that's important
- 1:47Demonstrating how Redirect adds redirects from old URLs and what a 301 redirect is
- 0:29How to browse URL redirects and change the redirect status code
- 1:45How to use the Diff module to see the differences between content revisions
- 0:33Reviewing a message from our boss
- 1:29What "blocks" and "regions" are and how to hide a block
- 1:13Overview of enabled blocks and a more detailed explaination of blocks and regions
- 0:45How to add a module-supplied block to a region and create a copy of an existing block
- 1:07Two approaches we can take to creating a custom block
- 1:55How to create a custom block type
- 0:25How to adjust how fields in a custom block type are displayed and ordered
- 1:23How to create a custom block of a particular custom block type
- 1:13How to place an instance of a custom block and making some minor adjustments to the block
- 1:27Adding a "featured adventurer" content type
- 1:37How to create and place a Views block
- 1:57When it makes sense to use a content type instead of a custom block type
- 0:59Quiz for chapter 10 of "Drupal 8 Site Building"
- 0:25Challenges for chapter 10 of "Drupal 8 Site Building"
- 5:22Solutions for chapter 10 of "Drupal 8 Site Building"
How to use exposed filters and contextual filters in views
- 3:49Adding our "tour" content type with a date field, number field and content reference fields
- 0:29How to switch a reference field input to use a select box instead of an auto-complete in
- 0:59Why we're going to use a view to filter out options for a reference field input
- 1:45How you can use "displays" to share common configuration between views
- 1:39How to filter options that display in an entity reference field using a view and what "delta" means
- 1:05Adding our tour nodes
- 1:11How to quickly add multiple fields from the same content type to a view
- 0:53How to customize the date format in a views field
- 1:01Finishing the process of configuring and reordering our fields in the calendar view
- 0:47How to prevent past events from displaying in a calender-type view
- 0:45How to make columns sortable in a table-style view
- 0:57How to add a form (exposed filter) to a view to allow users to filter results
- 1:51How to add an exposed filter for a reference field in views using a relationship
- 1:47How to make a views exposed filter a dropdown with grouped filters
- 0:27How to change the text in the "apply" button for an exposed filter
- 0:59How to turn on Ajax reloading for views and the advantages of leaving it off
- 1:07How to hide the title of a filter and horizontally align an exposed filter's "apply" button
- 1:03How to add content above a view with a views header
- 2:23Adding a second views display for our calendar block and placing an instance of the block
- 1:55What a contextual filter is and how to show content that references the current page's node
- 1:05How to roll back a change applied to all views displays that should only apply to one
- 1:17How to display custom content in a view when there are no matching results
- 0:47Quiz for chapter 11 of "Drupal 8 Site Building"
- 0:29Challenges for chapter 11 of "Drupal 8 Site Building"
- 5:56Solutions for chapter 11 of "Drupal 8 Site Building"
How to create custom forms and manage menus
- 0:59Reviewing our contact form and submission confirmation wireframes
- 2:09How contact forms work, what the configuration options means and how to use "weight"
- 0:23Reviewing what elements we need to change to make the default contact form match the wireframe
- 0:53How to change the contact form subject text input to a dropdown of options
- 1:13How to add a short text field with a placeholder to a contact form
- 0:15How to reorder fields in a contact form
- 0:39How to hide the "send yourself a copy" checkbox on a contact form and set a field to be required
- 1:05How to use the Contact Storage module to change the submit button text and hide the preview button on contact forms
- 1:57How to redirect to a custom page after a contact form is submitted
- 0:31How to review saved contact form submissions with the Contact Storage module
- 0:47Changes that will likely take place in future versions of the Contact module
- 1:37How to add a menu item to a menu directly and review our menu wireframe
- 0:39How to reorder menu items and add a menu item from the content edit form
- 0:45How to add a link to a views page to a menu
- 1:15Adding our calendar, blog and contact menu items and how we have to add contact form links manually
- 0:55How to move menus and how menus display as blocks
- 0:55How to add a menu, place a menu as a block, and delete a menu
- 1:11Quiz for chapter 12 of "Drupal 8 Site Building"
- 0:23Challenges for chapter 12 of "Drupal 8 Site Building"
- 5:44Solutions for chapter 12 of "Drupal 8 Site Building"
How to customize search, run cron and improve performance
- 0:39Review of our search requirements and wireframe
- 1:03Demonstrating how search works by default and how to narrow down results by content type
- 1:57How cron works, what a cron job is and how to run cron tasks manually
- 1:43Overview of configuration options for search
- 1:53How to replace the default search with a more configurable view
- 1:51How to display an exposed filter as a block to create a search form block
- 1:43Removing the label, changing the button text and adding no results text for our views search
- 2:11How CSS and JavaScript aggregation work to speed up page load times
- 2:11How caching and cache tags work in Drupal 8
- 1:37How the BigPipe module works and what experimental modules are
- 1:29Quiz for chapter 13 of "Drupal 8 Site Building"
- 0:27Challenges for chapter 13 of "Drupal 8 Site Building"
- 4:31Solutions for chapter 13 of "Drupal 8 Site Building"
How to evaluate the security of your site and configure text formats
- 1:57How to review permissions manually for security risks and installing the Security Review module
- 1:13How to check the security of permissions with the Security Review module
- 2:23Reviewing additional Security Review notices around trusted hosts and writable files
- 0:45What a text format is, and a review of its configuration
- 3:29How each text format filter works and how managed files are tracked in a database
- 2:07How text formats strip unallowed HTML upon viewing on a page or in a Wysiwyg
- 1:01Why the order of text format filters matter
- 0:59Reviewing our "callout" style wireframe
- 1:53How to add a CSS style dropdown to the Wysiwyg
- 0:31Applying our new callout style to the About page mission statement
- 2:33How to use the IMCE module to share images between users
- 1:27How to configure permissions for IMCE to prevent destructive actions
- 0:57Explaining the security implications of allowing the "img" HTML tag in a text format
- 0:55How to use the "Recent log entries" page to discover possible security and performance issues
- 0:35How to use the "top page not found" page to fix broken links
- 1:23Quiz for chapter 14 of "Drupal 8 Site Building"
- 0:27Challenges for chapter 14 of "Drupal 8 Site Building"
- 4:04Solutions for chapter 14 of "Drupal 8 Site Building"
How to translate content and the interface
- 1:11How we're about to translate the interface, translate content and override specific interface text
- 1:15How to download and enable a new language for the Drupal interface
- 0:51How to remove the default language two letter prefix from URLs
- 1:11How to allow users to set their preferred language
- 2:15How to translate content into multiple languages
- 1:11How to replace nearly any text in the interface with your own text
- 1:05Quiz for chapter 15 of "Drupal 8 Site Building"
- 0:17Challenges for chapter 15 of "Drupal 8 Site Building"
- 4:00Solutions for chapter 15 of "Drupal 8 Site Building"
How to update Drupal and contributed modules
Setting Up a Web Environment With Drupal
Introduction to Setting Up a Web Enviornment
Setting Up a Web Environment With Drupal on Windows
- 3:09How to use Dev Desktop to set up a web environment and install Drupal on Windows
- 1:06How to use Dev Desktop to set up an empty web project on Windows
Setting Up a Web Environment with Drupal on OSX (Mac)
- 3:29How to use Dev Desktop to set up a web environment and install Drupal on Mac OSX
- 0:43How to use Dev Desktop to set up an empty web project on Mac OSX
Setting Up a Web Environment with Drupal on Linux (Ubuntu)
Front End Development
Welcome to Front End Development
- 1:57Why this series exists and what we'll be covering
- 3:19What front end development means
- 3:37Getting set up with our mockup and resource pack
HTML and CSS Basics
- 2:57What HTML is and a simple HTML example
- 2:02A simple CSS example and what HTML attributes are
- 3:28How to structure an HTML document and how DOCTYPE works
- 4:19How CSS can be used to make any element look like any other element
- 3:25Why to use meaningful HTML tags, also known as semantic HTML
- 2:02How to choose an HTML tag that matches the meaning you want to convey
- 2:11How every HTML element is a box
- 3:59A review of our design, what typography means and how to choose a starting point
- 2:21How to create an image from part of a Photoshop design
- 4:15A comparison of w3schools.com and developer.mozilla.org as HTML references
- 1:43Why to use HTML and CSS instead of images
- 3:15The advantages and disadvantages of spending the time to do things right
- 1:53How to choose an HTML heading level
- 4:31How to use the font-family CSS property
- 4:22How to measure parts of your screen and use the font-size and font-style CSS properties
- 3:06How to use the font-weight CSS property
- 4:06How to select colors on your screen and use the CSS color property
- 0:18How to hide the advertisements on w3schools.com
- 2:28How to use text-transform to uppercase text
- 1:44How to use the text-indent and letter-spacing CSS properties
HTML and CSS Basics, Part 2
- 4:43Why to use CSS selectors instead of adding styles inline
- 0:25How to resume from this point (part 1, step 7)
- 1:59How to decide which element a CSS style should be applied to when there are multiple options
- 5:05How to work with border properties in CSS
- 0:53How to use the text-align CSS property
- 4:31How padding, margin and the box model work
- 2:25How to use a class to apply CSS styles to a single element
- 3:23How classes work and why creating class names and selectors is so challenging
- 2:47How CSS selectors work and how to learn more about them
- 1:47How to identify sections in our design
- 3:51How the HTML section tag works
- 3:01How to use compound CSS selectors and set a background color
- 2:59How to calculate the combination of margin and padding to get the right white space
- 2:25How to use the padding shorthand properties and adding padding to our section
- 0:35How to resume from this point (part 1, step 8)
- 1:13How to decide which elements to convert next
- 6:55Converting a second heading in the design to HTML
- 2:53How and why to choose a descriptive CSS class name
- 2:33Overriding some additional CSS styles in our header
- 0:45Affirmation of any weird feelings you have about overriding your own CSS
- 3:55How to style elements with parent CSS selectors
- 1:57How child selectors work and when to use them
- 3:49What CSS (Cascading Stylesheets) means and how CSS selector hierarchy works
- 0:51How to organize basic CSS
- 2:25How to create an external CSS stylesheet and include it in your HTML file
- 3:44How to set up Chrome to edit CSS and HTML directly
- 2:09How using class selectors allows you to change HTML structure and reduce overriding
- 3:19How and why to create semantic CSS class names
- 5:57How and why to decouple CSS from HTML and make styles additive
How to Organize CSS and Use SMACSS
- 3:00What SMACSS is and how we'll use it throughout this series
- 3:40What a component (or module) is in CSS and HTML
- 2:59How sub-components work and how to name their classes
- 1:24Why we're focusing so much on HTML and CSS principles and standards
- 0:26How to resume from this point (part 1, step 10)
- 3:05Deciding what to do next and adding HTML for our next heading
- 4:19Adding styles for our H3 heading
- 3:53Adding our last headings to our template
- 5:21How the line-height CSS property works and converting our first paragraph
- 2:38How to factor in line-height when determining margin
- 4:31Adding our second styled paragraphs
- 5:23Creating markup for our article snippet text
- 3:41How to style an anchor tag and use the same CSS with multiple selectors
- 0:51How we will soon reduce repetition with a CSS preprocessor called SASS
- 1:17How to use the font-style CSS property and finishing the snippet text
CSS Resets, Normalize.css and Package Management with Bower
- 3:37How to override the browser's default styles with the 'body' selector
- 4:01How to use the universal CSS selector and the problems with doing so
- 1:39How to deal with slight color variations and the benefits of a standard color palette
- 5:09How to set sensible default styles without a universal selector
- 2:31Reviewing other typographical styles to determine if they should override the browser
- 1:02How to resume from this point (part 1, step 17)
- 2:20Why to consider cross-browser consistency with CSS early on
- 1:27How the Universal Selector CSS Reset works
- 3:27How the Eric Meyer's CSS Reset works
- 1:35Comparing the pros and cons of using a CSS reset
- 2:31How Normalize.css works
- 1:55How to download and integrate Normalize.css
- 3:15What a package manager is and why we would want to use one
- 2:05How to install Node.js and npm on a Mac
- 1:03How to install Node.js and npm on Windows
- 1:57How to install Bower and the Normalize.css Bower package
- 1:20What JSON is and exploring our first Bower package
- 3:57Overview of Semantic Versioning and using a package manager for version management
- 2:51How to create a bower.json file for private projects
- 3:25How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*)
- 1:39How to update bower packages and the benefits of using Bower
How CSS Units Work
- 3:43The difference between absolute and relative CSS units and what a pixel unit is
- 2:15How the 'em' relative CSS unit works
- 1:37How using absolute CSS units like 'px' prevents font resizing
- 2:29How the 'rem' CSS unit works and why it can be hard to use
- 1:45How 'unitless' CSS measurements work
- 1:59Comparing resources for learning more about CSS units
- 1:43Why some people use older browsers
- 2:37How to use 'caniuse.com' to evaluate browser support for CSS and HTML
- 1:51How we're going to decide if we can use rem CSS units
- 0:45How JavaScript polyfills can fill the gap in browser support
CSS Preprocessing and SASS
- 2:43Why we would want to use a CSS preprocessor like SASS
- 1:33Why we're using SASS instead of LESS and Stylus
- 1:11Why we're using the command line version of SASS
- 0:47How to install SASS on a Mac
- 5:05How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues
- 1:39What a CSS preprocessor does and why we're using the .scss syntax instead of .sass
- 1:23How to convert a .scss file to a .css file
- 4:28How and why to use variables in SASS
- 1:43How to trigger CSS compiling when a file is changed with the SASS 'watch' command
- 3:59Why to create a common color palette and converting our SASS to use one
- 2:49How to add comments in CSS and SASS
- 1:41How to use TODOs to mark code to change later without interrupting your workflow
- 1:01Wrapping up our review of values that could be converted to variables
- 3:27How to use nesting in SASS to reduce selector repetition
- 3:09Why it makes sense to use separate SASS files for each component
Project Organization With SASS and Using Source Maps
- 3:29How to use parent selectors as a prefix with the ampersand in SASS
- 0:37Why it's important to review the CSS that your SASS creates
- 2:11How to efficiently code an anchor tag with multiple states in SASS
- 2:39How to resume from this point (part 1, step 19)
- 3:01Re-organizing our file structure into folders and how to use SASS watch on folders
- 3:21How to use partials to split SASS into smaller files
- 2:05Moving the rest of our component SASS into separate partials
- 0:39Updating the paths in our HTML to reflect the new file structure
- 2:09How to split our variables and base styles into meaningful SASS partials
- 1:25Reassurance that splitting our single SASS files into multiple partials is not over-engineering
- 3:31How CSS source maps work and how they allow us to inspect the SASS source of CSS properties
- 0:41How to use CSS source maps in Firefox
- 0:42How to navigate to SASS variable definitions in the browser
- 1:31Why it makes sense to use the SASS Globbing extension for automatically including partials
- 3:25How to install a SASS extension and automatically include partials from a folder
- 1:27The benefits and costs of using the SASS Globbing extension
- 1:49The pros and cons of using local software like SASS and Bower for front end development
- 4:19Map of local software needed for front end development and how the parts releate to one another
- 0:38Why there are so many individual pieces of front end software
- 2:37How to learn more about SASS with the SASS documentation
- 1:11Why we're choosing not to use Compass just yet
Using Bundler to Manage SASS Extensions
- 1:15How to install Bundler
- 2:29How to generate a Gemfile with Bundler
- 3:35How to add dependencies to a Bundler Gemfile
- 1:31How to use project-specific versions of gems with 'bundle exec'
- 2:12How the Bundler Gemfile.lock file works
- 1:55How to use 'bundle exec' with 'sass watch' and 'sass globbing'
- 1:57How to specify a version range in Bundler that updates to the latest patch version
- 2:37Setting up a README.md file and how we're automating documentation
- 2:43How to troubleshoot SASS nesting and prefixing conflicts
- 0:47Review of the typographic elements we have templated
- 4:37How to use a footer HTML tag and add a copyright symbol
- 3:07Adding SASS scaffolding for the footer
- 2:04Setting a default text color for the footer
- 2:07Why to avoid creating classes for common CSS property values between elements
- 2:19Troubleshooting editing SASS partial styles with the browser inspector
- 1:39How to adjust spacing between paragraphs in CSS
- 3:47How variable scope works in SASS
- 1:01How to use HTML comments and preparing to code the footer menu
- 1:11Why to avoid using HTML lists for navigational elements
- 4:17How to use the nav HTML element
- 1:45How to space links in horizontal navigation
- 0:51The difference between how horizontal and vertical margin work
- 2:10How to convert a pixel measurement to a relative 'em' unit
- 3:09How to perform mathematical operations and string concatenation in SASS
How to Use SASS Functions
- 2:19The difference between a SASS function and a mixin
- 2:17How to write a function in SASS
- 2:05How to set the default value for a function argument in SASS
- 1:29Converting absolute values and creating a SASS partial for functions
- 3:31Creating a SASS function to calculate rem units from pixels
- 1:29Why sometimes it's simpler to not use a function for calculating relative units
- 6:23Updating our SASS to use relative instead of absolute units
Styling Typography With CSS
- 1:39Fixing the text color of our headers by changing the base text color
- 1:59Styling the primary navigation in the footer
- 0:47Styling the secondary navigation in the footer
- 3:49How to organize shared styles between two similar elements
- 4:25How to add a border between our two footer menus
- 2:23How to limit the length of a horizontal border to the contents of an element
- 1:41How to center an HTML element by setting horizontal margin to "auto"
- 1:59How to resume from this point (part 1, step 22)
- 3:07How an HTML header tag works and using one for our site header
- 4:07Setting up the HTML and CSS scaffolding for our header
- 2:40Dividing our header into two sections with div tags and setting the background color
- 2:48How to use SMACSS "states" to define CSS for specific situations
- 2:21How the CSS "display" property works, and how to fix elements overlapping their container
- 2:02Refining the CSS for our header navigation
- 2:15Evaluating using the "border-radius" property to add rounded corners in our project
- 1:39How CSS vendor prefixes work and why we would use them
- 2:03Overview of automated tools for adding CSS vendor prefixes
- 0:43How to use the CSS "border-radius" property to add rounded corners to an element
- 1:11Breaking down the visual elements of our buttons
- 2:05How to structure HTML for a button-like link
- 4:21How to style a basic anchor tag button in CSS
- 3:22How to use the lighten() and darken() SASS functions to set relative colors
- 2:33How to use the "text-shadow" CSS property to create a drop shadow on text
- 2:15How to add transparency or alpha to a color with an RGBA value
- 5:57How to add pill-like rounded corners with CSS and cleaning up our button styles
- 0:35In celebration of completely templating the typographical elements in our mockup
Working With Icon Fonts
- 2:09Why it makes sense to use fonts instead of images for icons
- 1:47What Font Awesome is and how to download it
- 0:45What the .min file extension means and why it makes sense to minify CSS and JavaScript
- 2:05How the @font-face CSS rule works
- 1:45How to create a file for temporary CSS and what a "shame" file is
- 2:02How to install a web font so you can use it in CSS
- 1:49How to add an icon with Font Awesome and ways we can style the icon
- 1:27Adding a phone icon to our green button
- 4:01How to create a circle icon in CSS
- 3:03How to find specific icons in Font Awesome
- 1:07How to create a reliable circle icon by setting a fixed width
- 2:19How to decide when an element should be its own component or part of another component
- 1:33Refactoring our circle icons as elements of the icon box component
- 2:01Restructuring our icon boxes as sub-components to allow for variation
- 2:35Adding our second circle icon and making the updated styles permanent
- 1:53Adding our final two circle icons
- 2:09How to use the "before" pseudo-class to display non-semantic content
- 3:31How to use CSS to add icons as content
- 0:53Where to put our @font-family rule and cleaning up our HTML and CSS
- 2:41Restructuring our phone icon HTML and CSS
- 4:25Overview of the features in the full Font Awesome framework
- 4:49The pros and cons of using a front-end framework like Bootstrap
- 0:48Why we're deciding not to use the full Font Awesome framework
- 1:27How to evaluate Bower packages for legitimacy
- 3:27How to install Font Awesome as a Bower package
- 6:55How to use aspects of the Font Awesome framework by including specific SASS partials
- 2:15Why using a complete icon font on your site can be problematic
- 2:29How to cherry-pick specific font icons using using Fontastic
- 3:09The pros and cons of Fontastic, and how to combine fonts and upload custom icons
- 0:29Why we're not using Fontastic just yet
- 3:35How to use Symbolset to convert words to icons with ligatures
- 2:39How to use FontSquirell to browse free fonts and generate web font packages
- 2:30How to use Google Fonts to browse free fonts and generate hosted fonts
- 4:05Creating the HTML and CSS for our header account link with an icon
- 3:05How to inspect pseudo-elements in Chrome and use zoom to compare relative sizes
- 1:23Discussing how we might use font icons for our slider navigation and contact form radio buttons
- 1:27Adding the phone icon to our footer phone number
- 7:17Creating the HTML and CSS for a Facebook social icon in our footer
- 1:51How to use SASS variables to establish a relationship between different numbers in CSS rules
- 0:41How to prevent CSS from adding padding and border to height and width with "box-sizing"
- 1:09How to use line height to center text vertically
- 1:15Reorganizing the styles for our social icon to apply to all social icons
- 2:19Creating the HTML and CSS for our other social icons
- 1:41How to adjust our CSS to allow for easily re-sizable circle icons
- 2:13How to add semantics to an icon with a title attribute or hidden element
- 1:08The pros and cons of opening links in a new window, and how to do it
- 3:03How to resume from this point (part 1, step 23)
Customizing Forms
- 4:47A very brief overview of the structure of an HTML form
- 2:05How to create HTML and CSS form scaffolding and a submit button in HTML
- 2:35How to style our submit button to match our other buttons
- 1:50How to add a multi-line text input to a form with the "textarea" element
- 0:27How to add a name attribute to form inputs to identify form data
- 5:37How to style a textarea input with CSS
- 2:05How to use the "placeholder" attribute to add instructions inside a form element
- 2:19How to create the HTML structure for a select input
- 4:23How to style a select input and address padding issues with height and the "text-indent" property
- 1:38How we'll approach changing the text color and icon in our select box
- 3:37Overview of 4 options for styling select inputs consistently across all browsers
- 1:19Overview of 3rd party libraries for replacing select box inputs with more easily style elements
- 2:29How to download selectize.js with Bower and set up an example
- 1:39Why we're not using aggregated and minified versions of JavaScript and CSS
- 1:47How to find and include dependencies for a 3rd party JavaScript library
- 1:13How to check for JavaScript errors in Chrome
- 5:45How to style a selectize.js input
- 1:03Reviewing our selectize.js input in various browsers and operating systems
- 0:37What a JavaScript polyfill is and why we might want to use one
- 2:51Finding and installing a polyfill to add placeholders for Internet Explorer 9
- 2:13How to create an arrow with pure CSS using transparent borders
- 0:53Refining the style of the text in our select input
- 2:15How to style a text input with CSS
- 1:37Considering our options for sharing styles between different form inputs
- 3:25How SASS "placeholders" can be useful for sharing CSS between elements
- 1:03Adding another text input for an email address
- 3:09Making the margin between our form elements consistent
- 1:31Options for sharing common styles between our selectize input and our other inputs
- 2:11Creating a naming convention for placeholder SASS rules
- 2:19How a radio button input is structured and why not to use the "id" attribute for styling
- 2:51How to set up HTML scaffolding for a radio button group
- 1:11A quick overview of how we will approach styling our radio buttons
- 3:48How to customize a radio group, part 1 - adding a font icon to replace the radio
- 2:11How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label
- 4:07How to customize a radio group, part 3 - hiding the radio and centering the labels
- 3:05Styling the textual label for our radio group
- 0:59Centering our contact form in the browser horizontally
- 0:35A brief summary of what we have left to do
- 1:33Overview of the elements in our search form and why we're not using a framework for it
- 3:03Setting up the HTML scaffolding for our search form
- 2:04Setting up the CSS scaffolding for our search form select input
- 3:32How to change the icon and icon position of a select input
- 3:39Adjusting the select box styles on our search form
- 1:00How to set differently sized rounded corners for each corner of an element
- 1:49Summary of what we still need to style in our search form and starting the process
- 1:59How the "vertical-align" CSS property works and aligning our elements to the top
- 1:49Adjusting the height of our search form inputs to align them
- 0:49Discussing why the selectize.js dropdown icon showed up after we hid it with CSS
- 1:21How to override any CSS with the "!important" keyword and why it's so problematic
- 0:41Finding a solution other than "!important" to solve our reappearing icon issue
- 1:51Fixing an issue where our select is a pixel too high by setting height on a different element
- 0:49How to remove horizontal spaces between elements by setting the font size to zero
- 0:55How to remove horizontal space between elements with the "float" CSS property
- 1:55Removing the horizontal space in our search form and adjusting the borders
- 2:17How using a "button" HTML input instead of a submit input allows for pseudo-elements
- 2:28Refining the CSS of our search form submit button and text input
- 5:01How to add a custom icon by creating a new icon font with Fontastic
- 1:17Refining the styles on our updated magnifying glass icon submit button
- 1:23Testing our search form and moving the HTML to the right place in the template
Working With Responsive Images and Breakpoints
- 2:23How to save a transparent image in Photoshop and why images on the web are tricky
- 0:50Adding our logo image for testing
- 0:40How to resume from this point (part 1, step 41)
- 0:59How images display differently depending on the pixel resolution of the viewing screen
- 0:21The pros and cons of using lower resolution images
- 3:26The pros and cons of using high resolution images
- 3:03How to serve both low and high resolution images with Retina.js
- 2:43How to set up a lightweight web server with Node.js to get around local file browser issues
- 1:35How to avoid 404 errors when using Retina.js
- 13:27What a 404 error is and why we should try to avoid them
- 1:39The downside of using Retina.js to serve high density images to high resolution screens
- 1:19What "responsive design" means and a brief history
- 1:31What responsive design implies for the layout of our site
- 0:53What responsive design implies for our images
- 1:05Why the browser can't serve the right images for the right scenario without our help
- 4:15How to use the "srcset" property in the image tag to help the browser fetch the right image
- 1:55How "media queries" work to pull in different CSS based on conditions in the browser
- 1:19How the "sizes" image attribute works to provide breakpoint information to the server
- 1:07What a "breakpoint" means in connection to CSS media queries
- 3:25How to use the srcset attribute safely until there's bettter browser support with picturefill
- 1:05Setting up our logo image to match the mockup
- 3:19How to use SVG images for scalable vector graphics on the web
- 3:27The difference between bitmap and vector graphics, and saving our slideshow background images
- 1:58Adding the HTML and CSS scaffolding for our slideshow background image
- 4:13How to set a background image so that it covers an element but does not repeat
- 2:55How to create a media query to swap background images based on the browser width
- 1:57How to swap images with a media query based on screen resolution
- 2:35How to use "min-width" to set multiple breakpoints in your CSS based on browser width
- 3:45How the SASS "breakpoint" extension works, and troubleshooting installation
- 1:09How to install Compass
- 2:32Encouragement for when you run into dependency issues with Ruby, node.js or Compass
- 3:19How to set up a Compass project
- 2:29How to set up the breakpoint extension with Compass and use it to simplify our SASS
- 0:43Summary of why the "breakpoint" SASS extension is so useful
- 0:45Summary of how many projects set up their media query breakpoints
- 2:33Merging our "slide" and "slideshow" components and refactoring our classes
- 1:31How we will approach styling our circular, bordered images
- 4:23Why we're using a background image for our circular images, and building out the basic CSS
- 2:45How to style a circular image with a border and drop shadow
- 1:14Adding our second image, and moving our snippet HTML to the right place
Styling Slideshows and Carousels
- 2:43Reviewing what functionality we need for our slideshow sliders
- 2:43Overview of the "Flexslider" feature set and review of examples
- 4:05How to install Flexslider and add a working example
- 2:01How to connect Flexslider to existing HTML to convert it to a slider
- 0:59Tracking down why the Flexslider navigation does not appear over the slider
- 4:40How the relative, absolute, static and fixed CSS "position" values work for element layout
- 3:23Why adding left padding to slides in our slideshow container doesn't work
- 0:49Solving our slideshow left padding issue by applying padding to the slideshow container
- 0:25Setting the width of our slideshow slides
- 2:07A discussion of options for vertically aligning our slideshow content
- 2:13How the CSS "flex" display, or "Flexbox", works
- 2:27How to use Flexbox to vertically align a block element
- 1:21Why using Flexbox doesn't make sense for every project
- 1:31Why we can't vertically align compound elements with the "vertical-align" property
- 0:41Why vertically aligning with "line-height" doesn't work for multi-line elements
- 1:33How HTML tables work and why they were once used for layout
- 2:08How to make any element work like a table cell with CSS
- 1:29Using the absolute positioning and negative margin solution for vertically aligning an element
- 1:13How to use a CSS transform to vertically align an element
- 0:39Reviewing browser support for CSS transforms
- 0:21Why we're not using JavaScript to vertically align our slides
- 1:07How to use the CSS "transform" property to alter the display or position of an element
- 2:11Permanently applying our CSS tranform solution to vertically align our slides
- 0:55Adding back our slide padding and fixed width
- 1:43How to fix many Flexslider behavior issues by adding the "flexslider" class
- 1:13How Flexslider uses a font for their previous and next icons, and what we'll do next
- 1:37How to create a vector SVG icon from a bitmap image with Illustrator
- 1:15Creating our "previous" icon and importing our new icons into our custom Fontastic font
- 0:41How to update a Fontastic font locally when the icons have changed
- 1:55How to replace Flexslider icons with our own custom icons
- 1:47How to adjust Flexslider settings with some simple JavaScript
- 3:03How to change the size of the Flexslider next and previous icons
- 2:39How to adjust the position, color and shadow on the Flexslider next and previous navigation
- 2:35Moving the styles for our next icon from the browser to permanent code
- 2:03Styling our previous slideshow icon and troubleshooting spacing
- 0:35How to hide the text of an anchor element by using a fixed width
- 1:13Using negative margin to position our slideshow's previous icon
- 1:37How to adjust the position of the slider page navigation
- 0:43How to set Flexslider to not cycle automatically
- 2:49How to modify the look of the Flexslider pagination with CSS
- 0:43Overview of our strategy for overriding third party library CSS selectors
- 0:45Fixing some CSS errors introduced through sleep-deprived developer error
- 1:13How to change the spacing between Flexslider paging elements
- 2:51How to resume from this point (part 1, step 43)
- 2:37How to create multiple vertical columns for content using float and margin
- 1:53Using the float and margin strategy for our author image and snippet content
- 3:11How to use multiple floats to separate content into columns
- 1:59How to use the CSS "overflow" property
- 1:17Refining the margins for our snippet content
- 3:15Moving our snippet styles from the browser to permanent SASS rules
- 2:05How to add margin between grouped, floated elements
- 0:59Why it makes sense to apply CSS changes in the browser before committing them to code
- 2:35Reviewing how we added margin between snippets and making the CSS permanent
- 2:57The implications using absolute or relative units for content layout
- 1:39Testing variations in base font size with our layout and making corrections
- 1:17When it's better to use absolute units for sizing when dealing with layout
- 4:41How to set up Flexslider to work as a carousel
- 3:35How to set the width and spacing of our Flexslider carousel to fit the template
- 3:07How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation
- 0:49Modifying the colors in our carousel previous and next icons
- 3:05How to move an element outside of its container with the "left" or "right" CSS properties
- 2:35Moving our carousel CSS from the browser to our SASS
- 3:25How to simulate a hover state in the browser in order to style CSS
- 1:03Refining our carousel slideshow CSS to use SASS variables for common values
How to Work With Responsive Layouts
- 0:45Congratulations for rendering all of the elements in our mockup, and moving onto layout
- 3:11How fluid and fixed layouts worked before responsive design became more ubiquitous
- 3:19The limitations of maintaining a separate mobile site
- 2:41Variations in how clients will approach a responsive project
- 0:55What "mobile first" means in terms of business strategy
- 1:15What "mobile first" means in terms of design
- 2:15What "mobile first" means in terms of CSS
- 0:39Summary of which ways we can approach this project "mobile first"
- 2:25Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches
- 1:39How our footer will react to differences in browser size
- 0:49How we will code our footer CSS desktop-first and then compare with a mobile-first approach
- 2:05How to group elements with wrapper div tags for layout styling
- 1:35Reorganizing our CSS to work with wrapper elements
- 3:03How to use "float" to align elements to the right and left of the browser in a flexible way
- 0:43How moving around markup for layout can be an accessibility issue
- 1:57Using negative margin to align our footer elements
- 3:33Adjusting styles to collapse the footer into a single column
- 4:06Adding breakpoints to collapse our footer into a single column using "max-width"
- 1:41Adding a breakpoint to collapse our footer navigation
- 4:53How to convert desktop-first CSS to mobile-first CSS by switching to "min-width"
- 1:11Discussing how the "qualities" section should react responsively
- 2:01Adjusting the padding in our stacked hero sections
- 3:55How to bump an element out of the container box and center it above the content
- 1:53Adjusting the text position and layout in our "qualities" boxes
- 2:41When it makes sense to use relative units for width, and moving our CSS to our SASS files
- 3:37Making the relationships of our SASS values explicit with variables and equations
- 2:45Adjusting the margins within and around our icon box
- 4:33Aligning the icon boxes to the center and adding margin between them
- 0:37What we want our icon boxes to look like as the browser gets smaller
- 3:43How to figure out how the site's padding and overall layout should work from a mockup
- 1:25Adding the overall layout CSS to our "qualities" section
- 1:19Options for applying site layout styles to multiple elements
- 4:17 Setting up a SASS placeholder for full-browser layout styling with breakpoints
- 2:01Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be
- 3:17Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2
- 1:03Fixing the margin between the "qualities" title and the icon boxes
- 1:57How the "max-width" CSS property works
- 0:41Adjusting our icon box margin one last time
- 0:41How you can use these layout strategies for any grid of elements
- 3:38How to adjust a Flexslider carousel to work at different breakpoints
- 5:05Making our responsive carousel CSS permanent
- 2:39Adding a breakpoint to change the position of our carousel navigation on small screens
- 2:13How to generate CSS source maps in Compass, and reconnecting the source files in Chrome
- 1:29Adding a breakpoint to hide superfluous snippet content on smaller screens
- 2:31How to fix unexplained white space that forces horizontal scrolling
- 1:01How to remove the white border around the Flexslider slideshow
- 1:23Fixing horizontal scrolling issue created by our "snippet" carousel
- 2:17Adjusting our carousel to stretch across smaller browser windows
- 1:15Converting our carousel's "max-width" breakpoints to "min-width"
- 1:21How to hide Flexslider navigation in smaller browser windows
- 2:15Adjusting the styles of our alt hero section title to be responsive
- 1:35Adjusting the contact form CSS to be responsive
- 1:46How to use the CSS "whitespace" property to prevent text from wrapping to another line
- 1:51Re-ordering the content in our template to match the mockup
- 3:37Discussion of how we plan to adjust the header for different viewport sizes
- 3:09Adding the HTML and CSS scaffolding for our top header section
- 3:23Positioning our top header elements in the browser
- 3:51Moving our top header CSS from the browser into our stylesheets
- 0:49How we want our top header to behave as the browser gets smaller
- 3:53Adjusting our header bottom to stretch across the entire browser and center its content
- 2:15Aligning the elements in the header bottom and adding a border
How to Work With Responsive Layouts, Part 2
- 0:55Removing extra padding from the header bottom section
- 3:55Adding responsiveness to our top header by adjusting CSS in the browser
- 1:17Moving our responsive header CSS from the browser to our SASS files
- 0:43Adding a breakpoint to stretch the logo the full browser width on small screens
- 0:55Why it's important to add extra padding for touch screens
- 0:45Making the menu in our header bottom responsive
- 1:07How to simulate mobile and desktop devices with Chrome DevTools
- 3:03How to use the "viewport" meta tag to tell the browser a site supports mobile devices
- 1:19How to test a site at different download speeds with Chrome DevTools
- 1:49How to see how media queries affect a site with the Chrome device simulator
- 2:39Styling our header bottom to be responsive
- 4:57When it makes sense to use "max-width" and converting header breakpoints to "min-width"
- 3:37Adjusting our slideshow CSS for smaller viewports
- 1:15Converting our slideshow breakpoints to "min-width"
- 1:38Evening out the vertical padding in our slideshow
- 5:03Reviewing our template at different browser sizes for possible touch-ups
- 2:51How the "z-index" property works and how layers are positioned by default
- 1:53Why z-index poses issues as templates get more complex, and how to solve those issues
- 1:11How to test if z-index will solve a layer ordering issue
- 1:23Fixing the layering issue with our selectize dropdown
- 1:41Talking through how to create a rounded drop-shadow under a rectangular element
- 4:27How to add a curved drop shadow to an element with CSS
- 0:45Moving our curved drop shadow CSS to SASS to make the changes permanent
- 0:55Basic approaches to testing a template in multiple browsers
- 2:29Reviewing our template in the Firefox browser for Mac
- 1:03Reviewing our template in Chrome for Windows
- 1:01Reviewing our template in Firefox for Windows
- 0:55Overview of strategies for testing a site on multiple versions of Internet Explorer
- 1:43Reviewing our template in Internet Explorer
- 0:37 How cross-browser reviews typically work with completed sites
Optimizing Front End Performance and Adding Automation
- 1:33What we've covered in terms of front end performance, and what we'll cover now
- 0:57How to open the network dialog in DevTools and disable local caching
- 1:13Why front end performance (i.e. speed) is important
- 1:41How to view the number of downloaded files and their sizes in the Chrome DevTools network tab
- 1:05Why the site loading speed on your machine might not reflect an average experience
- 1:01How download size is often not the biggest factor in site loading speed
- 0:40How the "DNS Lookup" bar works in the DevTools network tab
- 0:44How the "Initial connection" bar works in the DevTools network tab
- 0:35What "Round Trip Time" (RTT) and "handshake" mean in the context of downloading files
- 1:33How the "Request sent" and "Waiting (TTFB)" - Time To First Byte - bars work in DevTools
- 0:31What we can and can't do to optimize the loading time of our index.html file
- 0:33How to sort files in the DevTools network tab to reflect actual download order
- 1:01Reviewing the loading time for our jquery.js file
- 3:19How the browser opens multiple connections to download files in tandem and sequentially
- 1:53Summary of where load time comes from for downloaded files
- 1:23How we can reduce the size and number of files through minification and concatenation
- 1:43What the DOM is and what "DOMContentLoaded" time means
- 0:43What an empty bar might mean in the Chrome DevTools network tab
- 1:55How and why to research internet speeds in other parts of the world
- 3:57How to determine Round Trip Time (RTT) to a site from other parts of the world
- 1:17Why we're going to concatenate and minify our files, and why we'll use automation to do it
- 1:55How to concatenate multiple JavaScript files manually and why it's a bad idea
- 2:45How to minifiy code by hand, what minification does and why it's tough to debug
- 1:57Why we would swap out concatenated, minified code for separate files while testing
- 1:17How automation can save time, reduce error and get a team on the same page
- 0:37Why we're using the Grunt automation tool for this project
- 2:14How to install Grunt
- 2:57How to install a project-specific version of Grunt
- 1:31How to install a Grunt extension for concatenating files
- 2:31How the different parts of a Gruntfile.js file work
- 3:09How to configure grunt-contrib-concat in our Gruntfile.js
- 0:51How to run the default Grunt configuration on the command line
- 1:11How to create Grunt task variations and run specific ones when our task runs
- 1:19Adding our JavaScript files to our Grunt concatenation configuration
- 1:43The advantages of putting JavaScript at the end of the body tag instead of the beginning
- 1:41Why to move custom JavaScript to a separate file, and why JavaScript file load order matters
- 1:07Wrapping up the configuration of our JavaScript concatenation and generating a concatenated file
- 1:27Setting up the Grunt configuration to concatenate our CSS files
- 0:51Reviewing the performance effect of concatenating our JavaScript and CSS
- 0:31How minifying CSS works
- 3:03How to minifiy JavaScript with Grunt and Uglify
- 3:07How to minify CSS with Grunt and the grunt-contrib-cssmin plugin
- 0:27Reviewing our performance gains from concatenating and minifying both JavaScript and CSS
- 6:43How to use grunt-injector to add JavaScript and CSS file references in your template on demand
- 1:57How to add a second configuration to a Grunt plugin
- 1:12How to add separate dev and production tasks in our Gruntfile.js
- 3:27How to fix our concatenated CSS by removing our concatenation separator setting
- 3:35Comparing the performance of our optimized site with our pre-optimized version
- 1:31How and why to make our paths relative by configuring the grunt-injector plugin
- 2:03Why browser prefixing CSS manually or with Compass is problematic
- 2:39How to use the Grunt Autoprefixer plugin to add and update browser prefixes in our CSS
- 3:26How to configure grunt-autoprefixer, and comparing our CSS before and after prefixing
- 0:19Switching back to development mode by running Grunt
Improving Web Accessibility
- 3:33How to resume from this point (part 1, step 45)
- 1:59What "accessibility" means in terms of the web
- 2:49Section 508 versus WCAG and how to justify spending resources on accessibility
- 3:51How to use the WCAG Quick Reference to improve your understanding of accessibility
- 0:43How web accessibility is a continuum
- 2:39How to test support of keyboard navigation on your site
- 1:45How to make custom radio buttons accessible with the keyboard
- 4:24How to allow users to skip to the main content of a page with the keyboard
- 2:25How to use Chrome's Accessibility Developer Tools to audit a site for accessibility
- 1:59Adding labels to our search form for accessibility and hiding them
- 4:01Adding labels to our contact form and hiding them with a SMACSS state
- 0:41Adding an "alt" attribute to our logo
- 0:53About using meaningful images as CSS backgrounds and accessibility
- 2:45How contrast ratios and WCAG ratings work
- 1:13Reviewing links with unclear link text
- 1:27How to run an accessibility audit with Firefox's AInspector Sidebar add-on
- 2:13What ARIA is, how "landmarks" work and adding a "main" landmark
- 3:15How and why to use the "navigation" role on HTML "nav" elements
- 1:49Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles
- 2:01How and why to add ARIA landmark labels
- 1:01How to add a language code to your web page
- 1:17Reviewing our other "Styles / Content" accessibility audit checks
- 0:47Reviewing our AInspector Sidebar "Links" accessibility violations
- 2:35How to add text in a link for accessibility but hide it from view
- 1:27Fixing an accessibility issue with our hidden labels
- 2:29How to use the "fieldset" and "legend" HTML tags for input groups
- 2:21Wrapping up our accessibility audit review
Congratulations and Bonus
Upgrading to Drupal 8
Introduction
Installation and Theme Improvements
- 3:21Comparing Drupal 7 and Drupal 8's installation process
- 0:35Making minor adjustments to the interface to more accurately compare Drupal 7 and 8
- 2:05Demonstrating Drupal 8's responsive home page
- 2:29Comparing Drupal 8's responsive administrative toolbar with Drupal 7
- 1:07Reviewing Drupal 8's changes to Bartik's default color scheme and logo
- 3:32A review of the Drupal 8 home page blocks and views
- 1:19Reviewing IE support changes and CSS and JavaScript aggregation settings in Drupal 8
- 2:09Comparing theme settings in Drupal 7 and Drupal 8
- 2:37Comparing Drupal 7 and Drupal 8's included themes
- 1:01Reviewing changes to the "Seven" theme in Drupal 8 and why the overlay was removed
- 1:47About Drupal 8's administrative style guide
Content Authoring
- 2:17Comparing menu administration in Drupal 8 and Drupal 7
- 1:23The benefits of using a drop-down button
- 3:43A tour of Drupal 8's Wysiwyg
- 2:17Comparing the secondary options when creating content in Drupal 8 and Drupal 7
- 0:27Improvements to form buttons in Drupal 8
- 1:33Comparing the content preview tool in Drupal 7 and Drupal 8
- 0:37 Differences between the content management page in Drupal 7 and Drupal 8
- 1:03Demonstration of in-place editing of content in Drupal 8
- 1:37Overview of default text formats in Drupal 8 and Drupal 7
- 2:55How to configure the Wysiwyg in Drupal 8
- 1:53Comparing text format filters in Drupal 7 and 8
Views and Configuration Management
- 2:07Exploring the minor differences between the Views module in Drupal 7 and 8
- 0:53How responsive tables work in Views in Drupal 8
- 3:01How to use the configuration management in Drupal 8 to backup and restore configuration
- 0:40A simple procedure for storing Drupal 8 configuration changes in version control
Content Type Management
- 2:19Why parts of the content type "manage fields" interface has been moved to "manage form display"
- 2:29Overview of new field types in Drupal 8
- 2:37Comparing the workflow for adding and editing fields in Drupal 7 and Drupal 8
- 0:51How responsive tabs work in Drupal 8
- 0:41Comparing content type settings in Drupal 7 and 8
- 1:27How the "manage form display" content type settings work in Drupal 8
- 1:11Comparing the "manage display" content type settings in Drupal 8 and 7
- 1:21How view modes work in Drupal 7 and Drupal 8
- 1:05How and why to create a new view mode in Drupal 8
- 0:31Reviewing additional minor differences in field display settings in Drupal 8
- 1:31How "form modes" work in Drupal 8 and how to add and edit them
- 0:43Comparing how to add existing fields to content types in Drupal 7 and Drupal 8
- 5:04How to rewite the output of a content (node) page using Views
Changes in Comments, Blocks and Contact Forms
- 1:59Comparing comment settings in Drupal 8 and Drupal 7
- 1:07How "comment types" work in Drupal 8
- 0:41How to hide the comment "subject" field in Drupal 8
- 0:29Cleaning up our added comment field and how field "storage settings" works
- 0:27Comparing comment management in Drupal 8 and Drupal 7
- 0:35How to view a list of managed files in the Drupal 8 interface
- 1:41Comparing the block layout interface in Drupal 7 and Drupal 8
- 2:29Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7
- 1:17Comparing adding custom blocks and block types in Drupal 8 and Drupal 7
- 4:13Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module
- 1:40Comparing the Webform module to the Drupal 8 form builder
User Management
- 2:31Comparing the account settings in Drupal 7 and Drupal 8
- 1:31Comparing user fields in Drupal 8 and Drupal 7
- 0:29Where to find "IP address blocking" in Drupal 8
- 0:41How the admin role works in Drupal 8 and updated navigation for permissions and roles
- 3:09Overview of permission changes in Drupal 8
- 1:17Comparing user shortcut management in Drupal 7 and 8
- 1:15Comparing taxonomy management in Drupal 7 and 8
Modules That Have Been Added, Removed, Moved or Modified
- 2:01Reviewing differences in the modules listing page and module disabling process
- 1:57Changes to the Actions, Trigger, Tracker, Automated Cron, Ban and Blog modules
- 4:01How the Breakpoint and Responsive Image modules work in Drupal 8 and how to view breakpoints in the UI
- 1:43Changes to CKEditor, Configuration Manager, Custom Block and Dashboard on the module page
- 0:25Changes to File, Image and List on the modules listing page
- 1:01How multilingual modules have been adjusted on the modules listing page in Drupal 8
- 1:15Why the Open ID and Overlay modules were removed in Drupal 8
- 1:05Why the PHP Filter module was removed in Drupal 8
- 1:03Why the Poll module was removed and what the Responsive Images and Text Editor modules do
- 1:05Demonstration of how the Tour module can provide contextual step-by-step help in overlays
- 0:33The difference between the Views and Views UI modules in Drupal 8
- 1:01What the "Core (Experimental)" section is for and how Inline Form Errors works
- 0:51What the Migrate and Migrate Drupal modules are for
- 0:55How the Datetime, Link and Telephone modules work
- 0:29What the "Web Services" modules are for
Site Configuration
- 1:09Comparing the "Site information" and "Cron" admin pages in Drupal 8 and Drupal 7
- 2:23Reviewing improvements to caching and performance in Drupal 8
- 0:19Comparing the "Logging and errors" page in Drupal 7 and Drupal 8
- 2:53How to avoid overriding important changes with importing configuration in Drupal 8
- 1:21Comparing changes to the file system settings in Drupal 7 and Drupal 8
- 1:55Comparing changes to the image styles interface in Drupal 8 and 7
- 0:23Comparing the Image Toolkit interface in Drupal 7 and 8
- 2:15Comparing search configuration in Drupal 7 and Drupal 8
- 0:47How clean URLs work in Drupal 8
- 1:41How date and time formats have been improved in Drupal 8
- 0:59How the "Trusted host settings" option works
Translation Workflow Changes
Build Your First Drupal 7 Web Site
Introduction to Our Project and Reviewing Mockups
- 1:49Updates to the "Build Your First Drupal 7 Web Site" collection
- 3:15Introduction
- 2:23Review of the resources sent by the client
- 3:11Review of the home page mockup
- 4:26Review of the calendar, contact us and guide page mockups
- 0:45Recap of files in our client resource pack
- 4:44How to map a mockup to existing Drupal elements
- 3:03How to use the administration menu and breadcrumbs to get around
- 4:32Overview of the Appearance page, how theme settings work and how to upload a new logo
- 2:02How to hide the site name in the header
- 4:02How to work around the disappearing logo bug
- 1:50Chapter review and challenges for the "Introduction to Our Project and Reviewing Mockups" chapter
How to Create and Edit Content
- 2:16What this chapter covers and how to change the site name
- 6:31How to add a new page and overview of settings on the "add content" form
- 2:19What "node" means and how the notifications area works
- 3:14How to edit a piece of content
- 3:09How to set the default home page
- 4:16How to add content as a menu item and how weight works
- 1:44How URL aliases work
- 1:47Finishing adding the About Us page
- 1:15How to change the position of a menu item with weight
- 5:06Review of the Contact Us form mockup and how the Module listing page works
- 1:14How to find a core module that you need and enable it
- 2:09Chapter review and challenges for the "How to Create and Edit Content" chapter
How to Work With Menus, Modules and Webform
- 3:57How to work with the menu listing page
- 1:24How to work with the menu "list links" page
- 4:07How to enable, edit and move a menu item
- 1:40How menu sorting impacts menu item weight
- 4:53How to find help and configure the Contact module
- 2:41How to disable and uninstall a module
- 4:32How to use the Update Manager module to install a module
- 2:53How to set up the initial webform container
- 6:01How to add an input to a webform, overview of component types and input options
- 4:01Adding an email input and how machine names and tokens work
- 1:54Chapter review and challenges for the "How to Work With Menus, Modules and Webform" chapter
How to Work With Content Types and Fields
- 4:04Finishing up the contact us webform
- 3:29How to create a single item checkbox (sign up for newsletter) with Webform
- 2:24Testing our contact form as logged in and logged out users (anonymous and authenticated)
- 6:28How to view webform submissions and set up e-mail templates
- 2:02How content types work
- 3:46How to disable "published by" information and a review of the content type edit form
- 4:05How to add a new content type
- 5:38How fields work and how to use the field edit form to change a field title
- 3:56How to add a new field to a content type
- 3:23Adding the rest of the fields we need for the Tour content type
- 2:04Chapter review and challenges for the "How to Work With Content Types and Fields" chapter
How to Work With Pathauto and Introduction to Views
- 3:06Previewing our "add tour" form and introduction to the Pathauto module
- 3:49How to install module dependencies
- 4:27How to change automated URL alias settings for a content type with Pathauto
- 1:14How to find a piece of content that doesn't have a menu item
- 4:28How to update URL aliases after a pattern change with Pathauto
- 2:00How to work with shortcuts in the shortcut bar
- 5:28What the Views module is for and how to install it
- 1:32A deeper explanation of the Views module and the view listing page
- 3:56Filling out the "add view" wizard
- 5:59Overview of the "add view" settings page and how a view "display" works
- 1:55Chapter review and challenges for the "How to Work With Pathauto and Introduction to Views" chapter
How to Add Fields to a View and Work With the Date Module
- 3:05How to add a new field to a view
- 3:31How to set the label, wrap HTML and set default text for a field in a view
- 2:57How to rewrite the output of a field to include other fields
- 1:39How to edit a view from the view display
- 2:22Adding our remaining view fields in quick succession
- 3:22How to adjust the sort order of content in a view
- 4:53How to deal with module installation errors and install the Date module
- 4:58How to add and configure a date field
- 4:05How to work with the pop up calendar and extend the year range
- 1:53Chapter review and challenges for the "How to Add Fields to a View and Work With the Date Module" chapter
How to Fix Broken Views and Work With Taxonomy
- 1:17How to delete a field from a content type
- 4:30How to deal with broken views handlers and restore unsaved view changes
- 3:52How to modify date formats both globally and in a view
- 2:42How to sort view fields and fix broken sort handlers
- 5:00How to change view menu settings and add a header
- 4:41How to add a date-based filter to a view
- 1:53How to delete a piece of content and modify multiple pieces of content at the same time
- 3:17Reviewing our guide data and adding another content type
- 1:02A brief explanation of taxonomy
- 2:11How to add a taxonomy vocabulary with terms
- 3:44How to add a taxonomy term reference field to a content type
- 2:06Chapter review and challenges for the "How to Fix Broken Views and Work With Taxonomy" chapter
How to use Term and Node Reference Fields
- 4:53Updating the guide automatic alias pattern and adding the guide data
- 5:41How to share a field between two content types and why you would want to
- 3:39Updating our calendar view to use a new field
- 1:31Overview of the multiple ways to link a Views field to other related content
- 2:38Overview of development (dev) versions of modules and installing the References module
- 3:27Adding a node reference field and updating our content
- 3:06Updating our calendar view to use the new node reference field
- 4:08How to add an autocomplete (free tagging) field to a content type
- 2:16How to use an autocomplete field
- 2:02Quickly removing a field and updating our view to use a different field
- 2:08Chapter review and challenges for "How to Use Term and Node Reference Fields" chapter
How to Work With Blocks and Permissions
- 2:00A comparison of our current site to the mockups
- 4:30What blocks and regions are, and how to use the blocks administration page
- 2:01How to hide the user login and "Powered by Drupal" blocks
- 3:40How to add a "log in" menu item to the user menu
- 2:04How to enable a menu block and hide a block title
- 1:28How to hide the secondary menu (user menu)
- 5:20What permissions are and how to modify them
- 4:40How to configure search and how cron runs work
- 2:22How to add a new user
- 1:58How roles work and how to add a new role
- 1:43Chapter review and challenges for "How to Work With Blocks and Permissions" chapter
Overview of Permissions and Text Formats
- 1:24Review of how roles and permissions work
- 1:15What each permission does, from the Block to Menu modules
- 5:44What each Node or content-related permission does
- 2:52What each permission does, from the Path to System modules
- 3:37What each permission does, from the Taxonomy to Views modules
- 2:56What each Webform permission does, and a review of our Guide role
- 1:49Different methods for testing the site as another user
- 3:36How to use the Masquerade module to act like another user
- 2:28Adding a piece of content as a Guide
- 4:00How text formats work
- 1:34Chapter review and challenges for "Overview of Permissions and Text Formats" chapter
Configuring Text Formats and Setting Up a Wysiwyg
- 3:58Review of the text format settings page and how filters work
- 1:34How to re-order text format filters and why order matters
- 2:54How to configure text format filters
- 2:11How to add a new text format
- 3:58How to configure permissions for text formats
- 2:05What Wysiwygs are and how to install the Wysiwyg module
- 1:03The problems with Wysiwygs and possible alternatives
- 2:39How libraries work
- 2:38How to install the TinyMCE library for the Wysiwyg module
- 3:05How the Wysiwyg "Basic settings" and "Buttons and Plugins" options work
- 3:20How the Wysiwyg "Editor appearance" and "Cleanup and output" options work
- 3:13How the Wysiwyg "CSS" settings work and our Wysiwyg in action
- 1:57Chapter review and challenges for "Configuring Text Formats and Setting Up a Wysiwyg" chapter
Working With Custom Blocks and Image Styles
- 3:43How to add a custom block
- 2:41The difference between "URL" and "path" and how to use a "Show on specific pages" input
- 2:08How to modify the visibility settings for a block
- 0:50Seeing our new block in action
- 4:33How to deal with shared field conflicts (unlimited vs. limited values)
- 6:15How to add and configure an image field
- 1:48Previewing the display of our image field
- 1:38How to hide a field label on a node display page
- 3:26What image styles are and a review of existing image styles
- 3:16How image style effects work and how to add a new image style
- 1:45How to link up an image style with an image field
- 1:50Chapter review and challenges for "Working With Custom Blocks and Image Styles" chapter
How to Work With CSS
- 3:24A recap of what we have covered so far, and what is to come
- 1:35How to change the order of fields on the node display page
- 1:10How to install Firebug in the Firefox browser
- 2:37How to use Firebug to inspect any element
- 3:38How to manipulate CSS with firebug
- 4:00How to find a good selector and apply styles to a specific element
- 3:29How to rapidly experiment with CSS in Firebug
- 3:30How to install the CSS Injector module and find most module configuration pages
- 4:16How to add a custom CSS stylesheet to certain pages based on path with CSS Injector
- 1:53How to use Firebug to learn more about what an element is
- 2:36How to hide breadcrumbs (or any other element) using CSS
- 1:52Chapter review and challenges for "How to Work With CSS" chapter
Troubleshooting Module Installation and Configuration
- 3:24Updating other guide nodes and using alt and title attributes for an image field
- 2:07Review of what we need to complete our template
- 2:10How to install the Media module
- 3:22How to find a module dependency when it is not its own module project
- 2:46Where to find information about a newly installed module
- 1:41How managed and unmanaged files work, and the benefits of using the Media module
- 3:32How to upload an image with the Media module and use it as a background
- 4:54What to do when CSS changes aren't being applied
- 3:17What to do when you get a fatal error and how to clear all caches
- 3:57How to search for an error in Google and tips for reading a long issue
- 1:42The difference between module development versions and official releases
- 2:04Chapter review and challenges for the "Troubleshooting Module Installation and Configuration" chapter
Updating Modules and Manipulating CSS
- 2:27How to check for module updates from your site
- 3:36How to update a module with the Update Manager
- 1:31How and why to clear Drupal's caches
- 4:10How to update a module manually
- 3:43How to fix our issue by reading the module help page
- 1:36Summary of the steps we took to fix module errors
- 3:10How to ensure image URLs work on a remote server
- 3:30How to remove the background color of main menu tabs
- 5:41What to do about disappearing CSS properties in Firebug
- 2:12How to change the font size of the main menu items
- 2:19Chapter review and challenges for the "Updating Modules and Manipulating CSS" chapter
More CSS Updates and Troubleshooting Text Formats
- 6:12How to adjust CSS in the footer using Firebug for testing
- 3:03Adding and troubleshooting our footer CSS changes with CSS Injector
- 1:47Finishing up our footer margin changes
- 4:45How to add a repeating background image to the footer
- 3:30Adding a new user with a new role
- 2:23Giving our new user permission to add, edit and delete pages
- 2:17How to fix "This field has been disabled because you do not have sufficient permissions to edit it"
- 2:58How content and text formats are related, and how to deal with placeholder text
- 3:37How to integrate the Media module with a WYSIWYG
- 2:14Chapter review and challenges for the "More CSS Updates and Troubleshooting Text Formats" chapter
How to Evaluate Modules and Install IMCE
- 4:32How to turn the Media browser Wysiwyg plugin on
- 2:47How to troubleshoot permissions issues with a module
- 2:33How to find solutions on Drupal.org by using Google and reading comments first
- 4:28How to assess the health of a module by reviewing the module project page
- 3:21How to learn more about what a module does by reading the module project page
- 2:21Viewing a demo of IMCE and installing the IMCE module
- 1:58Overview of the IMCE main configuration page
- 4:31How an IMCE profile configuration works
- 1:27Comparing two IMCE configurations
- 1:38How to set up a new IMCE configuration profile
- 1:52Chapter review and challenges for the "How to Evaluate Modules and Install IMCE" chapter
How to configure IMCE and Wrap Up Our Project
- 4:59How to associate IMCE profiles with user roles and upload an image
- 5:04How to embed an image in a Wysiwyg with IMCE
- 4:10Why styles sometimes display properly in a Wysiwyg but not when viewing the content
- 1:56Overview of two solutions to the Wysiwyg style inconsistency issue
- 2:57Overview of how to set up a Wysiwyg to use a drop-down selector for CSS classes
- 3:05How to configure the styles available in the Wysiwyg
- 0:57How to add a class to an element in a Wysiwyg with the "font style" plugin
- 1:18How to add easy-to-read aliases for class names in a Wysiwyg
- 3:20How to troubleshoot line break or paragraph problems in the Wysiwyg
- 1:36Comparing our home page to the mockup
- 4:10How to set a custom 404 "page not found" error page and navigate up paths
- 1:38Adding a missing piece of content
- 4:10Why it's a good idea to review all the settings when creating a piece of content
- 1:44Chapter review and challenges for the "How to Configure IMCE and Wrap Up Our Project" chapter
- 3:37Congratulations
Advanced Site Building in Drupal 7
Welcome to Advanced Site Building
- 1:52Welcome to "Advanced Site Building"
- 3:34About our project and how project roles work
- 4:11What a "site builder" is and the powerful tools they work with
- 1:22What wireframes are and where to find them in our resource pack
- 2:48Identifying the components in our blog home page wireframe
- 2:47Reviewing our blog post and review page wireframes
- 0:52About our step-by-step approach
- 6:12How to set up our Drupal installation with Acquia Dev Desktop
How to Set Up Administration Tools to Speed Up Productivity
- 1:39About the administration modules we'll be using
- 3:28How to install a module the traditional way and configure the Administration Menu module
- 6:08How to install a module using Drush, and how we approach installing modules in this series
- 1:14How to use the Coffee module
- 1:17How the Navigate module works
- 2:54How the Backup and Migrate module works and creating our first backup (Backup 1)
- 1:32How to restore a Backup and Migrate backup
- 2:03How Backup and Migrate works with cron and cache tables
- 3:56How the Module Filter module works
- 2:31How the Module Instructions module works
- 0:39About the Admin module and why we're waiting to install it
- 1:54How to set up some basic visual branding
- 0:57A quick summary of our work and backing up (Backup 2)
How to Configure Content Type Settings and Splitting Fields Between Types
- 1:56How to determine when to split up content into two content types
- 3:43How to set sane default publishing settings for a content type
- 1:36Why you would want to share existing fields between content types
- 4:35How to set up an image field and why to use individual folders for media fields
- 3:05How to choose a good, basic URL scheme and adding our first product
- 1:26About the special role of the first created user (user 1)
- 1:39Setting up our "review" content type
- 2:39How to install module dependencies and installing the Entity Reference module
- 2:19The difference between a field and a field instance, and setting up an entity reference field
- 1:44About the Fivestar and Voting API modules
- 4:04How to add a fivestar field and configure voting tags
- 4:37Adding our additional fivestar fields and why site building can sometimes feel tedious
- 2:43How to put field labels inline and hide the text below a fivestar rating
How to Use Display Suite for Grouping Fields and Positioning Content
- 1:07Creating a backup and why things are going to start getting interesting (Backup 3)
- 3:23An overview of the two methods to group fields in a display: view modes and the views module
- 2:26The 4 more common methods of positioning content on a page
- 0:58Quick recap of the 4 methods of positioning content
- 3:16How to choose the correct view mode for a particular context
- 2:33Overview of the Display Suite modules and which ones we should enable
- 2:07How to enable editing view modes and adding a custom view mode with Display Suite
- 2:06How to enable a custom view mode and test it out
- 2:09How to hide the 'submitted by' information and node title by setting a Display Suite layout
- 1:43How to add a field with custom content to a view mode with Display Suite
- 1:48How to choose an image style for a particular context
- 2:28When to create a new image style and how to name it
- 0:38Creating a backup and nice work (Backup 4)
- 3:36How to display content in a sidebar within the content region using Display Suite
- 1:43How the 'region to block' feature works and what we mean by 'region'
- 6:10How to display fields in blocks that can be enabled in theme regions using Display Suite
- 1:56Removing the block title, label and shrinking our image style
- 1:26Making another backup (Backup 5)
How to Use the Context Module for Positioning Content
- 2:03The limitations of the default blocks listing page and what the Context module does
- 1:25Overview of the modules that come in the Context package and installing Context
- 4:00How the Context module works and how to create a context
- 1:04Why it might make sense to use Context for positioning all blocks
- 5:34How to use Context instead of the default blocks configuration page
- 0:36Creating a backup before diving into Panels (Backup 6)
How to Use Panels for Positioning Content
- 1:11Why we're looking at so many ways of doing the same thing
- 2:54About your responsibilities as a site builder, and thinking in terms of boxes
- 1:17Why Panels is so powerful and potentially intimidating
- 2:40How to install Panels and what the Page Manager module does
- 4:22How variants work in Panels
- 3:46How to use the Panels builder layout to understand regions, rows, columns and canvas
- 1:51How to add a panel pane that contains a full node
- 2:13How to add a pane for a node field and what we still need to complete our Panels layout
- 0:55How to modify a context with the Context module
- 1:52How we will approach aligning the title with the content sidebar in Panels
- 2:28How to install the Meta tags and Token modules
- 4:29Attempting to display the title of our panel by using the node title pane (and failing)
- 1:57Why using the page title Panel pane doesn't work for our panel page title
- 2:07How to add custom content to a panel pane
- 3:03How to inspect an HTML element to find out why it looks different than we want it to
- 0:42A pre-exploritory backup (Backup 7)
- 4:28Comparing Panels and Display Suite side-by-side
How to Import Content With Feeds
- 1:31About what's coming up next (Feeds and Views)
- 1:32About what the Feeds and Migrate modules accomplish
- 2:56About the Feeds modules, alpha releases and why the UI (user interface) is in a separate module
- 2:47What to do when there isn't a recommended module release, and about development releases
- 3:13How to structure a CSV (comma-separated values) file for Feeds and a bit about our import
- 4:47How to import nodes with the Feeds module (basic settings and importer)
- 6:01How to import nodes with the Feeds module (parser and processor settings)
- 2:02How to import nodes with the Feeds module (mapping title, body and image)
- 2:32How to import nodes with Feeds and undo our import
- 2:26Setting up our node images in our files directory and what we need to rewrite an image path
- 2:03How to install the Feeds Tamper module
- 5:01How to use Feeds Tamper to rewrite the path of an image so it imports properly
- 2:47Setting up our product review Feeds importer
- 3:36Setting up our mappings for the product review Feeds importer
- 2:24Updating our product review nodes manually
- 2:01How to bulk publish nodes and strategy for importing content for site building
- 0:39Backing up our project (Backup 8)
Advanced Views
- 3:10Why to display a single piece of content with Views, installing Views, and why we're building the same view 3 times
- 5:29How to group views displays, and how to decide what entity to base a view on
- 1:46How to fill in the views wizard to create a block
- 1:51How contextual filters work in the Views module
- 2:27How to add a views contextual filter for the node currently being viewed
- 1:23How to preview a view with a contextual filter
- 3:48How to display a full node in a views block
- 1:09Why to disable a block even when it's not visible, and displaying a block only for certain node types
- 1:37How to display a block for certain node types using Context
- 2:30Comparison between using Context and the default blocks configuration workflow
- 2:39The difference between our two views and filling out the views wizard
- 1:43How relationships work in Views and how to add a referencing entity relationship
- 2:49How to create a contextual filter with a relationship in Views
- 2:27How to use fields or rendered entities when using a relationship in Views
- 0:53Enabling our product-based block with Context
- 1:49How to hide a block title using the Context module and why it's a bad idea
- 1:38How to hide a Views block title
- 0:56About how we're going to rebuild these views using fields instead of a view mode
- 5:44How rebuilding our review-based view using fields adds complexity
- 2:16How to rebuild our product-based view to use fields
Where Display Modules Overlap and URL Strategy
- 0:32Backing up our work (Backup 9)
- 2:25Where Panels, Views, Display Suite and Context overlap in functionality
- 5:22Overview of options for displaying blocks in sidebars (Panels, Views, Display Suite, Context)
- 3:23How to use Mini-Panels to create one block that includes all our global blocks
- 2:00How to position a Mini-Panel block using the Context module
- 2:24How and why to hide PHP errors with the "Logging and errors" settings
- 1:30How to disable a view and removing blocks using Context
- 1:35Why ordering blocks across multiple contexts is tricky, and what we're about to do
- 2:33How we will approach creating an exception for a site-wide context
- 2:38How to set good default URL alias patterns and installing the Pathauto module
- 1:31Why it's important to establish a URL alias strategy before launching a site
- 1:33How to bulk update the URL aliases of existing nodes and how the Global Redirect module works
- 2:09How to use multiple conditions in a context and exclude certain paths
- 1:02Adding our mini-panel block back in through the "review page" context
How to Work With User Fields and Import Users
- 0:25Backing up our work (Backup 10)
- 2:07About the views-based blocks we're about to build
- 2:35How to add a textual bio field to a user
- 3:38How to install the Link module and configure a link field
- 2:30The problem with using Feeds with user images, and adding a user avatar
- 3:15Setting up our user image field
- 4:05How to use an image field as the user avatar with the User Picture Field module
- 0:56Hiding our default user avatar and why we did this switch again
- 3:14Reviewing our settings for our user feeds importer
- 3:17Setting up our mappings and tamperings for our user feeds importer
- 2:34Importing our users and moving our user images over
Formatting a Blog Entry Page
- 0:38Backing up our work (Backup 11)
- 3:15When to use the core blog module, and when to create your own from scratch
- 1:50Reviewing our blog content structure in a CSV file
- 3:11Creating our basic blog entry content type
- 6:03Adding a 'tags' field and image field to our blog entry content type
- 1:19Moving our blog images over to prepare for the feeds importer
- 2:09Verifying and adjusting our blog entry feeds importer settings
- 2:47Setting up our blog entry feeds importer mappings
- 2:30How to import multiple entries into a single field using the "explode" feeds tamper plugin
- 1:46Why to use multiple roles with fewer permissions, and why our import fails
- 1:41How to add a "blog contributor" role and assign roles to multiple users at once
- 1:37Importing and verifying our blog entry content
- 3:35Cleaning up the display of our blog entry display
- 2:01How we will approach building our "About the author" block
- 4:34How to set up basic settings and contextual filter for a node-based "About the author" view
- 3:28How to use Views "style settings" and displaying a username with a relationship
- 1:53Adding an image and bio field to our "About the author" view block
- 1:21How we will approach building the link to the author's web site
- 3:46How to rewrite the output of a Views field and combine multiple fields into one
- 4:48How to use hidden fields to add to other fields in Views and why you might need them
- 0:48Cleaning up an unneeded field and creating a backup (Backup 12)
Custom Formatters and Creating an "About the Author" Block
- 2:33How custom formatters work, our use case, and installing the Custom Formatters module
- 1:57How to create a custom formatter with the Custom Formatters module
- 1:26How to use the Entity Tokens module to get access to more components for custom formatters
- 2:15How to use a custom formatter in a view and on the user profile page
- 1:38Why using custom formatters is a good idea, and possible exceptions
- 2:27Positioning our "About the author" block using the Context module
- 2:03How to install and configure the Admin module to work alongside other administrative modules
- 0:44The difference between using Admin and Administration Menu for navigating the menu system
- 1:57How to use Admin's Context Editor to position blocks from multiple contexts with drag-and-drop
- 1:07Overview of our next steps including re-creating our "About the author" block with Panels
- 1:10How to use selection rules in Panels to use variant on a single node type
- 2:16How to add a second panel page variant with selection rules as part of the wizard
- 2:27How to rewrite a panel pane to display the author name in heading tags
- 3:31How to add a relationship in Panels and how modules share concepts
- 2:36Adding our bio and homepage link, and how relationship-based substitution names work in Panels
- 0:35How to disable a Panels variant
- 3:32How to re-create our "About the author" block using a user-based view
- 1:22How to get node information in a user-based view using a relationship
- 2:02Adding the additional bio, image and homepage link to our user-based view
- 3:09Positioning our new "About the author" view block and making a backup (Backup 13)
More Advanced Views (Aggregation and Relationships With Relationships)
- 2:10How to set up a "top tags" block using a taxonomy-based view
- 3:46How to add a relationship and turn on aggregation to allow a "count" field in our view
- 3:19How to display views fields inline and sort by aggregated count
- 0:58Positioning our "top tags" view block with Context
- 1:55How to set up an "Also by this author" view block
- 4:50How to use a relationship within another relationship in Views
- 4:00How to exclude the currently viewed node in a list of nodes using Views
- 1:47Positioning our "Also by this author" view block with Context
- 1:51How to create and position a "Latest blog entries" views block
- 0:29Backing up our work (Backup 14)
Using Views to Create a Blog Home Page and Creating a Quick Sub-theme
- 2:46Why it sometimes makes sense to not make components re-usable
- 2:28How to fill out the Views wizard to start building a blog home page
- 2:56How to make a Views title a heading, and why we're going to build a sub-theme
- 2:19How to add an image and body field to a blog post in a view
- 3:14Two approaches we can take to rewriting the "submitted by" section of a post using Views
- 0:59How to add and position the 'username' part of our 'submitted by' area with Views
- 4:15How to use a custom date format in a Views 'post date' field
- 1:06Wrapping up the creation of our custom 'submitted by' Views content
- 3:06How the 'Add comment link' Views field is inflexible and why we'll need another approach
- 2:35How to create a custom comment count and "Add comment" button in Views
- 1:27How to point a custom "Add comment" Views link to the comment form
- 1:37Cleaning up our blog view and backing up our work (Backup 15)
- 3:21How to create a Bartik subtheme (bare bones version)
- 2:31How to add our sub-theme CSS file, enable the theme and adjust its settings
- 1:51Summary of steps we took to create a sub-theme
- 3:12How to add color selector integration into our Bartik sub-theme
- 2:21How to add a CSS class to a Views field and float an image to the right
- 1:15How to add a CSS class to a Views row and how the 'clearfix' class works
Building a Slideshow Using Views Slideshow
- 1:00How we're going to approach building our slideshow
- 3:50How the Libraries and Views Slideshow modules work, and installing both
- 2:24How exposed filters and attachments work in Views
- 4:06About using multiple displays in a single view, and about our slideshow components
- 3:42How to set up the jQuery Cycle plugin for Views Slideshow
- 4:56About the "Cycle options" available in Views Slideshow
- 3:24How the pager and controls widget settings work in Views Slideshow
- 1:44What we need to do to complete our slideshow view
- 4:46Setting up our node display with custom image style for the slideshow
- 1:45How to add a views filter to show just nodes with images
- 4:02How to create a pager of thumbnail images in Views Slideshow
- 3:42How to display our Views Slideshow thumbnail pager inline
- 1:55How to add a border around an active pager item
- 2:27Fixing alignment, adding wireframe boxes and adding some spacing to our slideshow
- 4:53How to style a slideshow's next and previous buttons as images
- 3:26Why the Nodequeue module is so useful, and installing it
- 3:26How to create and modify a Nodequeue queue
- 2:00How to use a Nodequeue queue in a view to filter nodes
- 1:28How we're going to hide the slideshow on every page but the first one
- 4:10How to use a contextual filter to show a Views attachment display only on the first page
- 0:51Backing up our work (Backup 16)
- 4:04Overview of additional slideshow-related modules
Working With Comments
- 3:23The 3 levels of comment security
- 0:41About spam protection on other forms, including the user registration form
- 2:51What questions to ask clients (or yourself) before setting up commenting
- 2:29How to set up permissions to allow anonymous users to post comments and what's coming up
- 2:04What a CAPTCHA is and how to install the CAPTCHA module
- 4:23How to configure the CAPTCHA module and enable it on multiple forms
- 2:59How to configure an image CAPTCHA
- 0:56How to allow authenticated users to bypass a CAPTCHA
- 2:32What reCAPTCHA is and installing the module
- 3:25How to configure reCAPTCHA with public and private keys, and setting a theme
- 2:03How the "honeypot" and "timegate" methods work for preventing bot-generated spam
- 3:56How to install and configure the Honeypot module
- 1:12How to disable the user registration form
- 0:28Backing up our work (Backup 17)
- 1:59How Mollom works for spam protection, and installing the module
- 4:42How to configure Mollom
- 4:16How to configure Mollom to protect our comment form and running some spam tests
- 0:50A quick summary of the spam protection tools and techniques we used
PHP Programming Basics
Series Introduction and Your First PHP Script
- 3:02Welcome to PHP Programming Basics
- 5:14What programming is and tips for following along
- 1:59Overview of the AMP stack (Apache, MySQL, and PHP)
- 2:20How to install Acquia Dev Desktop on a Mac
- 2:42How to install Acquia Dev Desktop on Windows
- 2:55How to import a default Drupal site on Dev Desktop
- 4:06Setting up our example folder and creating our first web page
- 3:41Creating our first PHP script and the structure of a simple PHP statement
Working With Strings and Variables in PHP
- 1:46What an IDE is and the benefits of using one
- 2:12How to work with white space and comments
- 4:41How to work with strings
- 2:44How to use a variable
- 7:04How to work with string, number and boolean variables
- 5:56How to identify and fix common syntax errors
- 2:49How a PHP function is structured and how to use strstr()
- 3:03How to use the string functions nl2br(), trim() and strlen()
- 1:38Practical uses for strstr(), nl2br(), trim() and strlen()
- 3:39How to use additional string functions like str_replace() and strip_tags()
- 3:03How to use the date() function to display a readable date
- 6:01How to read a PHP.net function page
- 1:21String function challenges
How to Work With Arrays in PHP
- 5:39How to work with simple arrays and use var_dump()
- 4:12How to work with associative arrays
- 8:09How to work with multi-dimensional arrays
- 7:44How to use array functions like asort(), array_pop() and array_rand()
- 4:52How to work with array-like objects
- 1:19Array function challenges
Logic, Control Structures and Looping
- 1:30What logic is and how we're approaching learning it
- 3:32How to use an "if" control structure
- 4:35How to use an "if ... elseif" control structure
- 6:08Incorporating what we know about arrays and control structures in a random generator script
- 5:51Adding additional elements of randomness to our random generator script
- 3:36How to use a "foreach" loop
- 6:43How to use a foreach loop to generate an HTML table from an array
- 4:37How to use a "while" loop
- 1:00How to use a "for" loop and how it compares to "while"
- 2:36How to modify PHP settings with the php.ini file and stop runaway scripts
Creating Custom Functions and Working With External Data
- 1:13Why separating data from logic is important
- 6:12How to use include() and include_once()
- 1:55Moving our data into a user-friendly text file
- 3:54How to use an output buffer to store data from an external file as a string
- 5:34How to create a parser that converts a comma-separated string (CSV) into an array
- 3:09How and why to create a simple custom function
- 1:35How to create a function that accepts parameters
- 4:05How to create a function that has optional parameters and build a virtual dice roller
- 1:46A deeper explanation of the purpose of custom functions
- 4:14How to work with references in a function (i.e. variables with an ampersand)
- 1:39A quick summary of what we've covered so far, and what's to come
- 3:22How to wrap existing code in a function
- 5:38How to generalize our random text generator code to make it more powerful
- 3:24Using our random text generator script to create a virtual Twister spinner
- 4:12Wrapping our people parser in a function, reviewing the code and identifying improvements
- 7:38Reviewing our generalized parsing function, part 1
- 5:57Reviewing our generalized parsing function, part 2
- 6:32Exploring our generalized table rendering function
- 2:50Re-using our table rendering function and evaluating our changes
Troubleshooting errors and using operators
- 2:32Accidentally assigning a variable instead of comparing it
- 2:54Troubleshooting a missing closing bracket
- 1:34Troubleshooting a missing opening bracket
- 2:11Troubleshooting a missing parenthesis
- 1:20Troubleshooting the "Wrong parameter count" error
- 3:32How to use assignment and string operators
- 2:40How to use comparison operators
- 1:47How to use arithmetic and incrementing operators
- 2:03How to use logical operators
- 2:01How to use array operators
Working With Forms in PHP
- 4:07The lifecycle of a form and chapter overview
- 6:06How to process a simple form with PHP
- 1:40A quick overview of the next three form examples
- 4:10How to use a hidden input to distinguish multiple forms on one page and how $_REQUEST works
- 2:00The HTML structure of a simple contact form
- 2:06How to pre-fill form inputs, and seeing our rendered forms
- 4:00How to use a switch statement and the $_POST variable
- 6:10How to process a contact form and send a plain text mail with PHP
- 3:42How to keep data in an input after a form is submitted, and a quick review
- 9:17How to run our examples in a remote development environment with Pantheon
- 8:04How to run our examples in a remote development environment with WebEnabled
- 5:19How to use a ternary operator and our search form in action
- 3:11Stepping through our search form code the first time the form is generated
- 8:50Stepping through our search form code after a search is submitted
- 3:33Demoing our random text generator with a form for user-set tokens
- 3:39Stepping through our random text generator form code the first time it's generated
- 6:44Stepping through our random text generator form code after it's been submitted
- 5:10How to use file comparison tools to see differences between files
- 1:48Demoing our random text form with loop-generated infinite inputs
- 5:56Stepping through our infinite randomness code the first time it's loaded
- 2:09Stepping through our infinite randomness code after submitting the "number of inputs" form
- 3:32Stepping through our infinite randomness code after submitting the "random generation" form
Working With Sessions in PHP
- 4:11How use to sessions and the $_SESSION variable to store user information
- 1:18Demoing our log in form
- 3:00How to create a log in form
- 4:34How to handle log in errors when submitting an invalid username and password
- 3:05How to log a user in after submitting a valid username and password
- 2:12How to log out a user and pass variables through the URL
- 3:59A demo of our text adventure game
- 13:12Stepping through our code the first time the game is loaded, and how global variables work
- 9:37Entering a command in our text adventure game, and using the eval() function
- 6:12Stepping through our game code as we move south and north
- 8:55Stepping through our game code as we pick up and item, use it, then reset our game
- 4:38How an index.php page works, and a quick demo of our refactored game
- 2:20The pros and cons of using .inc files, and a review of our new file structure
- 3:02The benefits of creating a function library and reviewing our index and function files
- 6:12Reviewing the updates we made to avoid using global variables
- 6:01Continuing our review, the benefits of generalizing code and caching data
- 4:22Wrapping up our review of changes in our refactored text adventure
- 3:29Creating a render function for our game as a final touch
Working With the (MySQL) Database
- 4:22The benefits of using a database (MySQL)
- 4:42What databases and tables are, plus a quick tour of PHPMyAdmin
- 5:06What SQL is and how to write a simple SELECT query
- 2:45How to filter SQL query results with LIKE and wildcards
- 4:47How to create your first database and table
- 4:04How to change column types using PHPMyAdmin and adding our final entry
- 5:40How to use AND and LIKE with two wildcards in a query
- 6:03How to connect to a MySQL database with PHP
- 3:11How to run a MySQL database query in PHP
- 2:44How to use ORDER BY to sort query results and a couple other query examples
- 2:23How to move our database connect script to a commonly included file
- 3:36How to add new fields to a table and a warning about modifying existing tables
- 2:46Populating our new people table columns and demoing our login form
- 2:36Comparing our array-based login form to our database-based version
- 1:17How to turn off magic quotes for a more realistic server enviornment
- 4:38What an SQL injection attack is and how to create one
- 2:51How to protect against an SQL injection attack
- 1:37The two types of attack, and brief explanation of defense strategy
Working with CRUD functionality and our database
- 2:27What CRUD is (Create, Read, Update, Delete) and how to backup a database in PHPMyAdmin
- 4:23How to import from PHPMyAdmin and protect against Cross Site Request Forgeries (CSRF)
- 3:21How to display a list of database data in an HTML table using PHP
- 2:34How to create a "delete" HTML link that deletes a database record
- 2:36How an INSERT statement is structured, and a demo of our insert form
- 3:05Reviewing the differences after added the insert form to our script
- 4:59How to generate an INSERT statement using a loop, and a review of our workflow
- 2:55Why to validate forms, and a demo of validating numbers, usernames and empty inputs
- 3:32Comparing the validation changes made in our CRUD script
- 5:46How to use looping in validation and validate empty and numeric inputs
- 3:44How to validate alphanumeric inputs and unique usernames
- 2:14Demo of our update form script
- 1:17How to structure an UPDATE statement and the importance of not forgetting WHERE
- 5:54Reviewing changes where we added the ability to update a record
- 4:19How to use the same form to both create and update records
- 6:02Walking through our add and edit form code as it is processed
- 2:13Ways that our CRUD script could be refactored and improved
- 6:09Comparing our refactored changes to our previous CRUD script
- 1:32A quick review of our CRUD form improvements
How to Build Your Own Content Management System and Understand Drupal Better
- 2:41Additional ways that we could use databases and our next big example
- 3:13Reviewing the visual structure of our static site
- 1:07Reviewing the folder and file structure of our static site
- 5:35Comparing the HTML structure of our home and about pages
- 3:23How to create a header template file
- 3:53Creating our footer and applying our templates to the home page
- 2:07Applying our header and footer to our other pages
- 1:52Reviewing our product page and identifying repetition that can be turned into a function
- 4:03How to render our products with a function to reduce HTML repetition
- 3:01When to use unique identifiers (IDs) and what a universally unique ID is (UUID)
- 5:00How to use a central product array for both of our product listings
- 1:54Applying our product rendering function to the product page
- 1:27The benefits of routing every page request through a single file with mod_rewrite
- 2:24How a .htaccess file works and how to set one up
- 5:41How to route all URLs through a single file (the Front Controller pattern)
- 3:29How to use the URL query string to trigger an include
- 1:32How to use the heredoc syntax to avoid escaping multiple quotes
- 2:06Why to use a full page template file instead of a header and footer
- 2:50A quick summary of our changes and a review of our other include files
- 1:27Why it's useful to have configurable settings for the end user and to reuse on other sites
- 6:04Walking through changes after adding configurable settings
- 2:14Why it's better to use a function for settings instead of direct variables
- 3:24What still needs to happen to allow end users to manipulate data on our site
- 3:19Creating the database and users table for our next steps
- 1:38Demo of our CMS login form
- 5:42Adding our database connect script, notices function and login links
- 3:52How our login and logout features work
- 2:18Demo of our new edit, delete and add user features
- 0:48Reviewing changes in our login form
- 6:53What happens in our updated CRUD code when we submit a user edit form
- 5:52What happens in our updated CRUD code when we add a user
- 5:24The problem with using relative or absolute paths in subfolders
- 4:23Using a URL function to route all requests to the right location regardless of subfolder
- 3:28Creating our products database table and populating it
- 2:41Discussing the similiarties that will exist between our product and user administration pages
- 1:04Demo of our updated product CRUD script
- 4:17Comparing the code in our user and product CRUD scripts
- 2:25Reviewing changes in our product rendering code, and how the WHERE IN SQL syntax works
Generalizing Functionality and Object Oriented Programming Primer
- 1:37Why generalizing CRUD functionality makes so much sense
- 1:35Setting up the next steps and a demo of our generalized CRUD script
- 5:30How to distill CRUD configuration options into an array
- 1:25Overview of the functions in our generalized CRUD script
- 6:09How to create a generalized record listing function
- 6:51How to build a generalized CRUD edit and add form function
- 5:39How to build a generalized CRUD form validation function
- 3:46How to create a generalized CRUD form processing script
- 1:54Summary of what we've accomplished, and a few challenges
- 2:00How to set up a database table to store page data
- 5:26Demoing our page administration tools and adding our adding our first pages
- 6:00How to load pages from both files and the database
- 3:29How to convert file-based pages to database-based pages, and deciding which to convert
- 1:16How this split file and database structure relates to Drupal
- 3:41What we've accomplished with our CMS, compared to other CMS's like Drupal
- 3:07Challenge your new PHP skills with these CMS enhancements
- 1:20Why there's no need to be scared of OOP (Object Oriented Programming)
- 2:30Demonstration of our new object oriented CRUD code
- 2:38The weaknesses of function-based coding, and what objects are in OOP
- 3:57How classes, methods, properties and constructors work
- 3:29How instantiation works, and comparing our old render function to our new OOP one
- 1:39How to use properties in a class
- 1:35What extending a class means
- 0:26Congratulations on finishing PHP Programming Basics
Drupal 7 Development Core Concepts
Welcome to Module Building
- 6:24Why to build a module instead of modifying source code, and how this video series works
- 2:58Setting up the module folder
- 3:36About the .info file
- 6:35Coding the .module file
- 2:53Our module recreated in 2 minutes and next steps
How to Build Module Scaffolding
- 3:35Setting up the .module file structure
- 4:06The .info file in detail
- 11:52The .module file in detail
- 7:47Adding a module settings page in an include file
- 5:52Adding documentation with the README file
- 2:31Review and next steps for the "How to Build Module Scaffolding" chapter
How Hooks Work and How to Use Them
- 5:58What hooks are and a demo of our final module
- 9:57How hooks are invoked with module_invoke_all()
- 3:31How hooks are invoked with module_invoke()
- 5:21How hooks are invoked through custom functions
- 0:41Summary of hook implementations
- 4:57Using hook_init() to execute code on every page
- 2:04How to watch data change in the database
- 2:36How to implement hook_permission()
- 7:43Adding a settings page with hook_menu()
- 4:25Implementing scheduled events with hook_cron()
- 3:30Adding a block starting with hook_block_info()
- 5:19Adding block configuration with hook_block_configure()
- 10:40Displaying a block with hook_block_view() and checking permissions with user_access()
- 3:19Seeing our final module in action and next steps
Overview of Coding Standards
- 6:25Why coding standards are useful and important
- 2:50Using the Coder module to find problems
- 2:47Working with white space
- 2:16Using operators
- 1:25Defining functions and class constructors
- 1:30Working with arrays
- 2:08Quotes and string concatenation
- 2:26Writing good comments
- 2:28Including code files, php tags and semi-colons
- 2:14A few miscellaneous items
Development Tips and Tricks
- 3:04About the Tips module
- 11:18Using url() and l() to generate URLs and links
- 5:51Using the t() function to make text translatable
- 8:41Using variable_set(), variable_get() and variable_del()
- 13:05IDE features and comparison
- 6:29How to find out if your module exists already
- 2:46Review and next steps for the "Development Tips and Tricks" chapter
How to Build and Manipulate Forms with the Form API
- 6:16The benefits of using the Form API
- 7:25Creating a simple form
- 3:33Creating an embedded form
- 5:31Using validation functions
- 2:33Creating submission functions
- 6:37Exploring more form elements and attributes
- 5:09Adding usability with the #states attribute
- 7:54Modifying forms with hook_form_alter()
- 7:33Adding autocomplete to a text input
- 12:44Using the #ajax attribute for dynamic form building
- 8:51Creating confirmation forms
- 7:16Creating a module settings form
How to Add and Manipulate Pages With the Menu System
- 4:42How the menu system works
- 5:47A simple menu callback
- 9:41How to use render arrays and tabs
- 2:09How to use sub-tabs
- 2:01How to add a page without adding a menu item
- 5:29How to pass arguments through the path
- 5:02How to use placehoders to pass arguments in the middle of a path
- 8:13How to load objects through placeholders
- 4:09How to create dynamic titles with a title callback
- 7:53How to modify page output with hook_page_alter()
- 4:03How to modify menu items with hook_menu_alter()
- 5:22How to use include files to improve performance and next steps
How to Add to and Manipulate the Theme Layer
- 4:12How the theme layer helps designers and coders work together
- 4:39How to invoke a theme function
- 1:36A more complex example of theme_item_list()
- 5:14How to theme tables and the essence of theming
- 6:44How to implement a theme function and how the theme registry works
- 6:47How to create template files
- 7:41How to use preprocessing functions
- 5:41How to add CSS files in theme functions and template files
- 5:50How to override theme functions with hook_theme_alter()
- 4:15How to override template files and next steps
How to Work With the Database
- 3:31What is the Database API
- 2:31Preview of the final module
- 6:39Review of existing module
- 3:19How to use table schemas and a description of the Schema module
- 3:54Building a database table in an external application
- 6:55Setting up the install file and generating a schema with the schema module
- 6:48The wrong way to write queries, and restructuring the module
- 5:36How to write an INSERT query with the Database API
- 3:17The 4 big benefits of using the Database API
- 3:42How to write a static SELECT query with the Database API
- 2:28How to write a DELETE query with the Database API
- 9:12How to write a dynamic SELECT query and easily paginate a result set
- 3:20A dynamic SQL query in action
- 5:48Using hook_update_N() to add a new table
- 8:58Adding utility queries and functions for INSERT, SELECT and DELETE
- 1:49Review and next steps for the "How to Work With the Database" chapter
How to Work With Users
- 2:44What this video covers and a preview of the final module
- 5:00How to modify the user settings form
- 11:18How to save data to an authenticated user
- 6:23How to modify the user page
- 6:21How to work with user permissions (complete)
- 3:33How to respond to a user login or logout
- 4:10How to add user bulk operations
- 9:14How to store anonymous user data in a cookie
- 4:04How to store user data in a session variable
- 1:45Review and next steps of the "How to Work With Users" chapter
How to Work With Nodes
- 2:03Introduction to the Node API
- 10:09How to load and view a single node and create fake content
- 2:47How to load and view multiple nodes at once
- 3:13How to manipulate node data with node_save()
- 13:03How to add custom data to a node with hook_node_insert() and hook_node_update()
- 8:35How to display custom node data in forms and in the node display
- 5:00How to add a custom view mode
- 4:19How to add bulk operations
- 6:02How to control node-based access using hook_node_access()
- 7:37How to control node-based access using grants
- 9:27How to add a new node type with a module
- 3:43How to remove custom content types when a module is uninstalled
- 5:57How to add a custom field formatter
- 1:31Review and next steps for the "How to Work With Nodes" chapter
How to Work With JavaScript and jQuery
- 5:59Two major use cases for jQuery and JavaScript and what this video covers
- 6:51How to include a JavaScript file on every page and intro to the jQuery object
- 7:08How to load JavaScript after a page is done loading
- 3:22How to use the dollar sign as an alias for the jQuery object
- 9:18How to use jQuery selectors
- 9:03How to manipulate content in the DOM (Document Object Model) with jQuery
- 6:10How to use jQuery events to add interactivity
- 6:14How to use effects and work with CSS in jQuery
- 11:22How to use Drupal behaviors to add JavaScript functionality to new content
- 10:58How to use drupal_add_js() to include and set the weight of JavaScript files
- 6:15How to use drupal_add_js() to add inline JavaScript, use the footer, and store settings
- 5:09How to include and define a Drupal JavaScript library
- 3:25How to use hook_library_alter() to see what JavaScript libraries are available
- 14:54How to use the Drupal Ajax library to load dynamic HTML
- 2:38How to dynamically load JavaScript and CSS with Ajax
- 2:26How to display status messages when using Ajax
- 3:06How to add CSS styles, classes, and JavaScript alerts through Ajax commands
- 7:14An overview of JavaScript utilities included in core Drupal
- 2:14Review and next steps of the "How to Work With JavaScript and jQuery" chapter
How to Work With Files and the File API
- 2:43What this video covers and a demo of our node-free image gallery module
- 2:24What the difference is between a URI and a URL
- 3:22What stream wrappers are and how they work
- 1:36How the private file system works
- 5:15How file and folder permissions work, and best practices
- 2:41How to set up PHP to properly handle file uploading
- 5:45How to create a simple form with an unmanaged file input
- 5:02How to use a form validation function to validate a file
- 3:36How to use hook_file_validate() to validate an uploaded file
- 6:43How to use core file validation functions and define your own validator
How to Work With Files and the File API, Part 2
- 7:56How to process an unmanaged file and recursively create a directory
- 7:32How to use file_unmanaged_copy() to move a file to a permanent location
- 7:37How to loop through a file directory and create a URL from a URI
- 6:49How to delete an unmanaged file
- 4:52How to recursively delete all unmanaged files in a directory
- 10:07How to use the private file system with unmanaged files
- 7:30How private files are delivered and how to troubleshoot private file issues
- 10:34How to add a managed file input to a form
- 5:57How to validate a managed file, prevent it from being deleted and add a usage marker
- 5:58How to use the EntityFieldQuery class to match certain criteria and display the results
- 6:42How to delete managed files
- 6:08How to work with private managed files
- 4:19How to configure and use X-Sendfile to improve private file performance
- 6:05A quick look at the code behind stream wrappers
Drupal 8 Developer Prep
Welcome to Drupal 8 Developer Prep
- 3:31Why you should be excited about Drupal 8
- 1:43How we're dealing with the fact that there's no official Drupal 8 release yet
- 5:15Who the "Drupal 8 Developer Prep" series for and what we will be covering
- 4:35How to install our Drupal 8 snapshot with Dev Desktop
Building a Simple Drupal 8 Module
- 2:42How to set up basic module scaffolding in Drupal 8
- 3:21How a .info.yml file works, the purpose of using YAML and what the 'type' attribute is for
- 5:27Adding a hook_page_alter() and hook_form_alter() to our module
- 6:16How to add a page programmatically with a module
- 1:02A brief comparison to adding a page programmatically in Drupal 7
- 2:05Reviewing the code in our Controller class file
- 2:51Reviewing the code in our routing.yml file
- 1:27Reviewing our hook_menu() code
- 2:28Overview of what we're about to cover (OOP, autoloading, namespaces and Symfony)
Object Oriented Programming Basics
- 4:26The difference between procedural and object-oriented programming
- 3:21Setting up an examples folder and demoing our contact form script
- 3:26Walkthrough of our procedural code example, part 1 (outline of the code)
- 6:08Walkthrough of our procedural code example, part 2 (building the form)
- 4:46Walkthrough of our procedural code example, part 3 (processing the form)
- 1:45How to derive objects from procedural code
- 4:45How classes are structured, what methods and properties are, and how a constructor works
- 1:14How to name classes and methods according to both Drupal and general standards
- 2:31How a class structure makes the relationship between methods explicit
- 5:04What instantiation means, the difference between class and object, and the advantage of properties
- 2:53Reviewing the rest of our code after moving functions into class methods
- 3:02Review of the advantages of object-oriented programming that we've covered so far
- 2:16How the Agile phiolosophy will help you stay sane when figuring out how to structure a project
- 2:07How to decide when to re-factor your code, or split classes into smaller classes
- 1:43A summary of staying sane with OOP, and our use case for re-factoring
- 5:21How and why to use static methods in classes
- 5:09Refactoring to add a new "Builder" class, and how to decide when to use a static method
- 3:41What a "controller" is, and how to implement one in our code
- 3:51How to inherit methods and properties from another class
- 2:18How inheritance allows for abstraction of concepts, and how that can make code difficult to understand
- 4:36How to use an "interface" for defining inherited class structure
- 3:20How and why to use an abstract class
- 3:28What a public interface or API really is and how OOP helps make an API more explicit
- 4:07The difference between the "public", "private" and "protected" visibility settings
- 4:43How to split a single large file into individual class files
- 1:03How to name class files
Namespacing and Autoloading in PHP
- 3:03How using third-party libraries or working on a team can create naming conflicts
- 7:11How to use namespaces in PHP
- 2:34How to use namespaces to avoid naming conflicts
- 1:14How to use namespace aliases with the "as" keyword
- 1:32How to use a Fully Qualified Name for classes and methods
- 1:58The benefits of namespacing and a summary of how namespaces work
- 2:12What "autoloading" is and how namespacing relates to it
- 2:24How to create a simple autoloader
- 2:02Walking through our simple autoloader with a debugger
- 3:12How a typical PHP library will be structured and what each of the nested folders mean
- 1:32What FIG (Framework Interoperability Group) is and why PSR-0 (PHP Standards Recommendation) exists
- 8:43How to build a PSR-0 compliant autoloader, and a walkthrough of PSR-0 requirements
- 1:24Why it's good to use an established autoloader instead of creating your own
- 4:44How to make our own project PSR-0 compatible
How to use Composer and Packagist
- 1:39How Composer and Packagist work together to help manage reusable PHP components
- 3:13How to install Composer on a Mac or Linux and what a .phar file is
- 1:23How to install Composer in Windows
- 2:21How to set up our Composer example folder and set up a basic Composer project
- 1:31How JSON (JavaScript Object Notation) and our composer.json file work
- 1:25What Semantic Versioning is and how to use it
- 2:55What happens during 'composer install' and how the download is structured
- 1:56How to use Composer's autoloader and use a package in our code
- 1:39A quick look at how Drupal 8 uses Composer
- 1:48How to look for packages, and how Packagist is like a module repository for PHP
How to Work With Symfony Components
- 2:41What Symfony is and the difference between a CMS and a framework
- 3:19Building a simple example script and illustrating its flaws
- 5:21Refactoring our code, and how character encoding works
- 5:00How to incorporate the Http Foundation Symfony component to add object orientation to our simple script
- 3:18How the Request and Response classes work
- 1:56Why using global variables is dangerous, and how Http Foundation solves this problem and allows for extending functionality
- 7:04Examples of how we can use the Request class to access variables, and what a reverse proxy is
- 3:04Examples of using the Response class to set status codes, content and content type headers
- 3:37Adding a second page and an include file for common code
- 4:07How to add a front controller
- 2:21Adjusting our pages to use the front controller, and how to add new pages
- 2:47Reorganizing our page files to make it easier to add new pages
- 3:38How to convert a PHP file into a template
- 5:16How to use the extract() function to convert an array to string variables to use in a template
- 3:04The weaknesses of our current routing strategy, how to update a Composer project and set up the routing component
- 3:23How to set up a file to store our routes and use the routing component
- 2:37Updating our front controller to use the routing component
- 3:04How a try ... catch block works and why you would want to use it
- 5:27An in-depth look at how to use try ... catch and throwing exceptions
- 4:12How to use the routing component to generate URLs based on route name, and exploring additional methods of the Matcher class
- 5:16How to convert our pages to use a controller function
- 3:23Updating our routes to include a '_controller' attribute, and what a 'closure' or 'anonymous function’ is
- 2:55Replacing our app with one that calculates leap years
- 2:47How to create a controller class, and how to tell what are valid PHP callbacks
- 3:32How to use the controller resolver and install the Http Kernel component
- 2:59Updating our routes and controller to use the controller resolver, and how type hinting works
- 2:11How we can use multiple front controllers for different environments
- 2:55Creating a reusable Framework class
- 0:53Simplifying our front controller while leveraging our Framework class
- 0:57One minute of reassurance
- 2:31How to add Composer autoloading for our custom code by making it PSR-0 compatible
How to Work With Symfony Components, Part 2
- 4:05How to split up our leap year code into a controller class and a model class
- 2:33Adding PSR-0 compatibility to our leap year code, and updating our app.php file
- 1:43What unit testing is and how it can make your code better and more flexible
- 3:11The difference between unit testing, functional testing and regression testing
- 2:25How to install PHPUnit on a Mac or Linux
- 5:09How to install PHPUnit on a Windows machine, what PEAR is and how it compares with Packagist
- 2:40How to set up PHPUnit configuration and set up our first unit tests
- 3:57How setting up interfaces for your classes helps with unit testing
- 2:05What dependency injection is, and updating our framework to use interfaces
- 2:28Looking at how our test and assertion actually work, and where to find out which assertions we can use
- 2:29Adding additional PHPUnit tests for our controller and 500 errors
- 2:29What the Event Dispatcher Symfony component does, and how to add it to our project
- 3:58How to add an event with the Event Dispatcher
- 2:18How to create an event class for our event
- 4:26How to add a listener with our event dispatcher
- 2:49A recap of how we set up our event dispatcher and listener
- 2:51Adding a second listener and setting its priority
- 4:06How to create a class for an event listener
- 2:03Reviewing the code in our event listener classes
- 2:09How a subscriber is different than a listener, and what a 'code smell’ is
- 3:41How to add a subscriber to our event dispatcher
- 1:47Overview of what we covered around the event dispatcher
- 6:29How to add caching support to our framework and controllers
- 4:34How to use the Http Kernel component to replace our entire framework
- 1:00The difference between setter injection and constructor injection
- 3:28How to add custom error reporting to our framework
- 5:45How to create a subscriber that allows controllers to return strings instead of response objects
- 3:17Reducing our front controller code by moving it to our Framework class
- 3:07The disadvantage of instantiating objects inside our framework and how a dependency injection container can help
- 5:29How to create and use a dependency injection container, and what a singleton pattern is
- 3:26How to prepare objects in the dependency injection container with parameters and methods
- 0:54Why you should never use a dependency injection container within a class even though it's tempting
- 1:04Updating our framework code to leverage the dependency injection container
- 2:46How to use dependency injection container properties to store settings
- 5:56An overview of what we learned in these Symfony videos
Updating Our Environment and Using PHPStorm
- 1:55Overview of how we will prepare for the next Drupal 8 videos
- 4:19How to install Drupal 8 Alpha 12 with Dev Desktop 2 Beta
- 1:20How to create a Drupal-based project in PHPStorm
- 2:36The benefits of using PHPStorm for an IDE for Drupal work
- 4:47The benefits of using PHPStorm for general development
- 3:19How to get our example folder set up
How to Use YAML
- 0:59Why we are going to do a deep dive into YAML
- 6:21How to create a YAML file for routes
- 5:27How to parse a routing YAML file
- 3:56How to parse generic YAML files and setting up our YAML syntax examples
- 6:20Overview of YAML syntax, part 1 - Simple arrays and variable types
- 5:08Overview of YAML syntax, part 2 - Associative and nested arrays
- 5:42What "Separation of Concerns" means and how it applies to YAML and code
- 6:33How to convert our dependency injector container into a services YAML file
- 3:43How to load services into a dependency injector container with a YAML file
- 0:45How to make sure you're loading the right files in your project
How the Dependency Injection Container Works in Drupal 8
- 1:15How the dependency injection container acts like a backbone to Drupal 8
- 2:35Taking at look at our our first Drupal 8 services.yml file
- 5:09How to find the dependency injection container in Drupal 8, and an overview of how it is structured
- 5:25How the dependency injection container accesses its services
- 3:46How to figure out what code to use to call a service
Working With Symfony Components in Drupal 8, Part 1 - Using and Creating Services
- 3:16Setting up our example module scaffolding
- 2:50Why hook_menu() was removed and why Drupal switched to PSR-4 autoloading
- 2:07How Drupal uses PSR-4 autoloading under the hood
- 5:47Adding a page to our example module by using a route and controller
- 3:15How to use services in a custom module
- 3:54How to find out which class is responsible for a service
- 4:15How to create a service with a custom module
- 1:55How to call our custom service
- 5:05An overview of why we should use services instead of simple functions or classes
- 1:19The differences and similarities between subscribers and hooks
- 3:39How to find an example subscriber class, and an overview of its structure
- 4:03How to find out what events we can subscribe to
- 3:37How to create a subscriber class
- 4:13How to register a subscriber as a service
- 1:36How to figure out what objects and methods we have to work with in a subscriber
Working With Symfony Components in Drupal 8, Part 2 - Creating Events and Sub-Requests
- 3:37How to get the route name for the current page and how “inheritdoc” works
- 4:02How to fix a "Class not found" error in Drupal 8
- 6:24How to perform a redirect and how hook_init() has been replaced
- 2:33Why you might choose to create events instead of hooks
- 5:29How to create a custom event quickly with the GenericEvent class
- 2:35How to subscribe to a custom event
- 5:04How to create a specialized custom event class
- 0:46A final word on what we’ve learned about events
- 6:05How to override an existing service
- 0:53The benefits of using an interface for a service
- 2:31Overview of what we've covered, and how we're going to use the HTTP Kernel component to create sub-requests
- 3:17How to create a subrequest with the HTTP Kernel service
Upgrading a Module to Drupal 8, Part 1 - Plugins, Annotations and Subscribers
- 2:47The three groups of knowledge that you need to work with Drupal 8 effectively
- 2:55A tour of our Drupal 7 module's front-end feature set
- 5:03A tour of our Drupal 7 module's code base, part 1
- 3:26A tour of our Drupal 7 module's code base, part 2
- 1:38Getting our module to upgrade set up, and running into our first upgrade problem
- 3:47Overview of resources to use when upgrading a module to Drupal 8
- 3:37How to upgrade a .info file to a .info.yml file and install our module
- 1:22How to find a good source in the user interface for an example block
- 2:20How to find a piece of code by searching for a unique string from the interface
- 1:43How a block plugin class is structured
- 2:11What annotations are and how they work
- 2:11Overview of the alternatives to annotations, and why we're not using them
- 1:41A brief description of what a Drupal plugin is
- 2:47How to troubleshoot overlays not showing and how blocks are now actually block factories
- 4:46How to create a block plugin
- 3:14How to modify the default caching settings for a block plugin
- 3:59How to move our hook_init() code into a subscriber
Upgrading a Module to Drupal 8, Part 2 - State API, Configuration API, Forms and Blocks
- 2:37A comparison of the State API and the Configuration API and how they replace variable_get()
- 2:07How to use the State API to store arbitrary values
- 0:55How to replace variable_get() with a State API call
- 2:40How to replace drupal_get_title() with a call to the "title resolver" service
- 1:23How to replace variable_set() with a State API call
- 3:40How to replace the $_GET['q'] and what to do when getting a "Drupal class not found" error
- 1:03How to replace variable_del() with a State API call
- 4:31How to upgrade hook_block_view() and format_interval()
- 3:21Overview of the pieces we need for our module configuration form, and finding a good example
- 2:07How forms are structured in Drupal 8
- 5:25Removing unnecessary overrides and upgrading drupal_map_asscoc()
- 4:18How to use the Configuration API to store default module settings, replacing variable_set()
- 1:23How to update configuration with the Configuration API and submitting a module settings form
- 4:44How to add a page for our module configuration form
- 1:14How to get our default configuration value to register while doing development
- 0:34Which files to use if you're starting this series from here
- 5:03How to register a menu link and find the ID for an existing menu link
- 1:13How to show a link to our module configuration form from the module listing page
- 5:27How to set up a block configuration form, and a benefit of using plugins
- 3:35How to use block settings in a block configuration form
- 1:48How to use the Configuration API as a service
- 1:32Testing out our module settings and troubleshooting a problem with saving the value
- 3:35Troubleshooting our block configuration form
- 1:24Adding a second block and ways to improve our block configuration
- 5:32Updating our .module file's hook_permission() and hook_help()
- 2:34Cleaning up our .module file and updating hook_cron()
- 1:13How to fix an "Undefined offset" error
Using the Twig template engine in Drupal 8
- 2:51Overview of how Twig works and why Twig is so useful
- 3:43How to set up a Twig template file and a brief description of Twig variables
- 2:50How to register a Twig template file with hook_theme()
- 2:16How to wire up a Twig template to a render array
- 2:08How to easily debug Twig templates by reloading updated template files automatically
- 2:52How to use Twig filters and translate content in a template with the t filter
- 1:16How to replace variables in a translated string using the "t" filter in a Twig template
- 2:04How to set up a new variable to use in our Twig template file
- 2:31How to decide how granular a template file should be
- 1:50How to see what variables you have to work with in a Twig template using "dump"
- 3:08How to do a foreach loop in a Twig template
- 0:52How to use the dump tool in Twig to see just the names of the available variables
- 1:38How to figure out what Twig template file is responsible for any output on the page
- 2:13Congratulations and a quick review of what we covered in this course
Change Management and Version Control
Installing Git and Working on the Command Line
- 5:59Welcome to "Change Management and Version Control"
- 7:36How to install Git on Windows with mysysgit
- 3:05How to install git and SmartGit on a Mac
- 7:30How to create a Git repository and add a complete Drupal site to it
- 7:12Why the command line can be scary, and the benefits of conquering your fear
- 7:08How to navigate file structures and stop processes on the command line
- 3:23How to edit and save text files on the command line with VIM
- 2:51How to use built-in help on the command line
- 5:00How to create, move, copy and remove files on the command line
Staging, Committing and Undoing in Git
- 10:53Introduction to version control
- 6:31How to stage and unstage files and what staging means
- 2:28How to commit a file and stage multiple files
- 5:59Why certain files are ignored and how to add your own ignored files
- 3:05How to commit unstaged changes and modify staged files
- 4:49How to use the diff command to review modifications
- 3:27How to use git help
- 5:00How to use SmartGit to view graphical diffs and revision trees
- 5:52How to undo modifications to staged and unstaged files
- 2:17How to use the log command for viewing revision information
- 5:51How to undo commits
- 2:06Quick summary of undoing in Git
Branching, Merging and Tagging in Git
- 3:54How to move files in Git
- 4:06Introduction to branching and merging in Git
- 5:09How to create a new branch and navigate existing branches
- 5:14How to merge with and without branch history
- 1:31How to modify an existing commit message
- 0:52How to delete a branch
- 5:19How to use a stash to save uncommited changes when switching branches
- 3:01How to apply a saved stash
- 2:23Quickly commiting, merging and deleting a branch
- 3:20How to add, remove, list and rename tags
Working With Remote Git Repositories
- 2:58How remote central repositories work
- 11:05How to create an account on GitHub and set up SSH key pair authentication
- 6:11How to set up a remote repository and connect to it
- 1:16What we'll be doing now with our remote repository
- 3:09How to clone our remote repository into a production environment
- 5:00How to push a change from dev to production with push, fetch and merge
- 1:33How to push a change from dev to production with push and pull
- 6:50How to undo commits to a remote repository
- 3:17How to push changes from production to dev
- 8:56What conflicts are and how to resolve them
- 3:23How to create a branch and track it remotely
- 6:58How to create a release with a develop-master branch system
- 3:01How to set up a new environment for a team member
Deploying Releases, Features, and Fixes With Git
- 6:41How to use a scalable Git branching model called Gitflow
- 1:38Summary of how to use release, hotfix and feature branches
- 8:37How to create, deploy and clean up a release branch
- 1:26Release branch cycle summary
- 5:09How to create, deploy and clean up a hotfix branch
- 8:55How to troubleshoot pushes, pulls and conflicts with a feature branch
- 3:02Merging an update into a feature branch, then deploying and cleaning up
- 2:37Summary of lessons learned in the feature branch cycle
How to Version Control the Database
- 5:50Overview of database components you can add to version control
- 2:57Where to store version controlled assets
- 2:03How to set up an assets folder that is not accessible via the web
- 3:31How to export a database schema for version control
- 4:09How to export database content for version control
- 3:03Cleaning up our assets folder and rolling our assets into a feature branch
- 3:22How often should you update version controlled database dumps and why
How To Version Control Site Configuration With Features
- 9:25Overview of a typical push cycle, with and without version control
- 1:50How to download and install the Features module
- 10:09How to build a feature module, and how each component group works
- 1:47The 3 big benefits of having our components in a feature module
- 2:48How to revert a modification to a feature module component
- 3:41How to install and use the Diff module to view feature module overrides
- 7:44How to learn more about your feature by reviewing the code
- 5:33How to update a feature and review updates with Git diff
- 1:43How to revert a feature once changes are in code
- 3:08How to deploy a feature module
- 2:38Overview of merging multi-user changes to the same component
- 3:04Pushing a feature modification and explaining unsolicited changes
- 8:41How to merge our feature component changes and update a feature module
- 4:09How to organize features and implications of getting everything into code
- 2:57How to re-organize components into new features with the UI or the .info file
- 4:52Overview of other exportable components and enabling a copied feature module
How To Manage Non-Exportable Configuration Changes
- 2:07Overview of using Selenium IDE to store config-building macros
- 7:08How to create and modify a Selenium macro that builds a node
- 4:17How to export Selenium tests and creating one more test
- 2:36How to keep team members up to speed with manual changes using a simple list
- 3:39How to package several repository modifications into multiple commits
- 6:02How to load and play back Selenium tests to update another environment
How to Override Shared Features and Modify Text
- 4:53The challenges of overriding shared feature modules and some solutions
- 4:45How to override a box title, and how to learn about what else we can change
- 4:00How to override block position, and a brief overview of the Context module
- 2:57How to override user permissions
- 5:40How to override Views options like title, ajax and number per page
- 4:40How to override a Views query, like changing node type or order
- 2:52How to override a menu item title
- 4:51How to override variables and how the Strongarm module works
- 3:44How to modify interface text and version control the overrides
- 5:19How to use a version controlled settings.php include to share settings
- 6:09How to find and override strings with dynamic content or links
- 7:15How to override a feature module by cloning
How to Upgrade Drupal and Patch Contributed Modules
- 8:38How to patch a module
- 3:46How to upgrade a module sustainably
- 4:11How to prepare for a minor Drupal upgrade
- 7:59How to use a patch to upgrade the Drupal codebase
- 4:56How to upgrade the Drupal codebase the traditional way
- 3:42How to complete a minor upgrade
How to Install Drupal, Manage Features and Perform Common Tasks Using Drush
- 5:31Introduction to Drush, the ultimate Drupal productivity tool
- 2:53How to install Drush on a Mac
- 1:12How to install Drush on Windows
- 4:25How to use Drush status, help, clear-cache and archive-dump
- 2:04Overview of using Drush to speed up Features
- 5:44How to update, review and revert feature modules with Drush
- 3:44How to add new components to a feature module with the .info file and Drush
- 5:35How to download and install Drupal using Drush
- 2:14How to download and enable a module or theme using Drush
- 3:58How to update Drupal core and contributed modules using Drush
How to Configure Drush and use Drush Make
- 3:59How to set up a Drush configuration file (drushrc.php) and use shell aliases
- 1:52How to set up a global Drush configuration file
- 4:35How to use Drush aliases to simultaneously work with multiple Drupal installations
- 3:43How to set up a remote site alias for Drush
- 3:20Why building site scaffolding is tricky and how Drush Make can save you time
- 1:45How to install Drush Make and any Drush extension
- 6:27How to create and run a Drush Make file
- 3:27How to generate a Drush Make file from an existing Drupal installation
- 2:29How to quickly generate a Drush Make file with drushmake.me
How to Extend Drush and Other Useful Drush Tools
- 3:53How to review and filter Watchdog log messages with Drush
- 4:43How to add, remove and manage users with Drush
- 5:01How to extend Drush with PHP scripts and run arbitrary PHP on-the-fly
- 5:42How to pass arguments to a custom PHP script for use with the Drush php-script command
- 4:09How to install and use the Drush sandwich example command
- 4:51How the Drush example custom sandwich command works
- 5:20How to create a custom Drush command
- 3:23How to perform SQL queries in Drush and quickly set variables
Drupal 7 Theming Essentials
Important Drupal Theming Concepts
- 3:14Who these theming videos are for and what they do (and don't) cover
- 7:18What is the difference between designing, theming and coding, and why do they overlap so much?
- 10:40What are all of the different ways to modify Drupal output?
- 3:25How to determine which method to use when modifying output
- 2:31A conceptual introduction to the Features module for exporting configuration options as code
- 4:04How to decide whether to use a module or a theme for your modifications
- 2:42How to decide when to use a theme function or template file
- 9:52How the theme registry works
- 5:11How to find out where any piece of output comes from
- 6:05What view modes are and why you would use them
- 7:10How to adjust node view modes through the user interface
- 5:55What field formatters are and how to use them to modify field output
- 5:24How coding standards apply to the theme layer, and how to add comments to template files
- 10:53Template file coding standards and conventions
- 2:48How to apply CSS coding standards
- 4:35Theme troubleshooting and what to do when you don't see your theme output changes applied
- 7:31How to troubleshoot CSS problems in your theme
- 4:01Review of 'Important Drupal Theming Concepts' and review
How to Build and Modify a Drupal Theme or Sub-Theme
- 7:18Overview of included themes and the themes directory, and where to put new themes
- 6:45How the different parts of a theme work
- 9:01Learning about theme structures by reviewing core Drupal themes
- 4:52Learning from the Zen theme file structure
- 2:40Learning from the Basic theme file structure
- 2:56Learning from the Fusion theme file structure
- 2:25Learning from the Marinelli theme file structure
- 8:20Review of the theme .info file options
- 4:43How to create a theme folder, add an info file and enable a custom theme
- 5:00How to add a screenshot
- 2:56How to add a default logo file
- 5:18How to override the page template with a page.tpl.php file
- 9:28How to add a new region and what regions are
- 4:46How to add a CSS file
- 4:57How to add a JavaScript file
How to Build and Modify a Drupal Theme or Sub-Theme, Part 2
- 5:45How to add a new setting to the theme settings form
- 4:46How to set a default for a theme setting and use it in a template file
- 9:25How the template.php file works and a review of the Bartik theme template.php file
- 5:57Learning from the Garland and Seven template.php files
- 4:52How to add a template.php file and use a page preprocessing function
- 4:12The advantages and disadvantages of using a sub-theme
- 5:54How to create a sub-theme
- 5:15How sub-themes inherit or override base theme components
- 6:34How to override CSS, JavaScript and screenshot files of a base theme using a sub-theme
- 3:11The advantages of copying an existing theme
- 10:54How to create a new theme by copying an existing theme
- 6:13Overview of theme CSS file structures
Theme CSS File Structure and Extended Drupal Theme Building
- 10:33A close look at the Bartik stylesheet structure
- 2:58A quick look at the Garland and Seven theme stylesheet structures
- 5:50How the Zen theme uses extensive CSS files for learning
- 6:42Review of the Basic and Fusion CSS file structures
- 5:19How to enable element toggling with theme
- 10:13How to add CSS or JavaScript files to a theme conditionally based on node type
- 9:27How to add CSS or JavaScript files to a theme conditionally based on path or user role
- 3:43Review and next steps for the "Theme CSS File Structure and Extended Drupal Theme Building" chapter
Template Files, Theme Function Overrides and Preprocessing Functions
- 4:20Before you start, is there a simpler way?
- 13:26Why use template files, how file suggestions work, and setting up for later examples
- 8:54How to use the page template file (page.tpl.php) and override it by path
- 9:06How to use the node template file (node.tpl.php) and override it by content type or node ID
- 10:59How to use the block template file (block.tpl.php) and override it by module, region or delta
- 8:23How to use the comment (comment.tpl.php) and comment wrapper (comment-wrapper.tpl.php) template files
- 4:25How to name preprocessing functions to use with theme functions and template files
- 5:52How to use simple preprocessing functions
- 3:52How to apply preprocessing code only in certain situations
- 4:01How template file suggestions work in depth and adding new suggestions
- 10:29How to override template files for specific conditions using template file suggestions
- 2:02How to override a theme function
- 7:18Theme function override examples
- 8:10How to conditionally add CSS classes to the body, page and node wrapper tags for easier styling
- 4:34A practical example of adding a conditional body class
- 3:28Review and next steps for the "Template Files, Theme Function Overrides and Preprocessing Functions" chapter
How to Work With Drupal Theme Settings
- 6:35What this chapter covers and basic global toggle options available in the theme setting
- 4:56Overview of additional element toggle options such as main and secondary menus
- 7:13How to tell when global or theme-specific settings are used, and how to uninstall a theme
- 5:54How to add a custom theme setting and set a default for it
- 2:43How to use the custom theme setting in code using theme_get_setting()
- 3:21Overview of how the color module works to add custom color selections to a theme
- 2:10What steps are required to integrate the color module with your theme
- 6:31Overview of color module integration files part 1, including the color.inc file
- 7:37Overview of color module integration files part 2, including the preview.js file
- 10:45How to add a new color selector to your theme with the color module
- 2:19Review of the "How to Work With Drupal Theme Settings" chapter
Drupal 6 Development and Tools
Essential Concepts
- 3:30How to install and uninstall a module
- 14:03How to build your first Drupal module
- 13:47Introduction to hooks
- 8:21How to add permissions
- 27:13Introduction to the Form API
- 12:44How to make your module customizable
- 21:33How to add and configure blocks
- 10:13How to add JavaScript and CSS
- 15:07How to theme a Drupal module
- 16:18How to create an install script
- 19:00How to create, format and validate a form
- 21:24How to improve form validation and process a form
- 18:47How to create edit and delete forms and alter other forms
- 10:29How to apply for a Drupal CVS account
Working with jQuery and Javascript
Securing a Module
- 19:29A review of module security and the t() function
- 16:50How to use string filtering functions, l() and url()
- 17:22How to use drupal_get_token() and user_access()
- 13:22How to work with the database securely
Testing and Debugging a Module
- 21:40How to use a PHP debugger in Drupal
- 19:49How to use Selenium for Drupal testing
- 17:20How to use SimpleTest to automate testing
PHP and MySQL Basics
- 24:25How to work with PHP arrays
- 24:25How to work with PHP functions
- 23:01Introduction to MySQL, tools and SELECT queries
- 24:40How to use JOINs, insert variables and INSERT, UPDATE and DELETE
Using Komodo Edit as an IDE
- 5:23How to create a project in Komodo Edit
- 8:59How to work with projects in Komodo Edit
- 11:03How to work with files in Komodo Edit
- 12:28Understanding the Komodo Edit interface
- 10:19How to create snippets with variables and options
- 11:26Advanced snippet usage: Key binding, tabstops and abbreviations
- 13:47How to use templates in Komodo Edit