BuildAModule Video Index (i.e. MegaPage)

For a more detailed view of each collection with some additional features, visit the collections page.

Collapse all

Drupal 8 Site Building


  1. 3:53Welcome to "Drupal 8 Site Building"
  2. 3:23What makes Drupal different than other site building tools
  3. 1:19How we're going to deal with updates to Drupal 8 and contributed modules
  4. 1:07About the web site we're about to build
  5. 1:41How to install a new Drupal 8 site with Dev Desktop
  6. 1:17How to set up a Drupal installation
  7. 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. 1:49How to change the logo and header background colors
  2. 1:33What a "theme" is and how to hide the site title
  3. 1:55How to use the administration menus and add shortcuts
  4. 1:29What a "module" is and how to install and uninstall modules
  5. 1:37Why some very useful modules are not part of core Drupal
  6. 4:27How to evaluate the health of a contributed module for use in a project
  7. 0:35How development (dev) releases of modules work
  8. 1:27What "alpha," "beta," "rc" and "stable" releases are and their security implications
  9. 1:05How to install and enable a contributed module through the user interface
  10. 0:53Why the terms "install" and "enable" might be confusing when it comes to modules
  11. 2:09How to apply our module assessment checklist to the Coffee module
  12. 1:11How to manually install a contributed module
  13. 0:45How to jump to any administration page using the Coffee module
  14. 1:29Quiz and challenges origin story
  15. 1:17Quiz for chapter 2 of "Drupal 8 Site Building"
  16. 0:45Challenges for chapter 2 of "Drupal 8 Site Building"
  17. 7:10Solutions for chapter 2 of "Drupal 8 Site Building"

How to set up content types, create content and create simple views

  1. 3:07How to create content and what the content creation form settings mean
  2. 0:33How to edit content in-place and through the content edit form
  3. 0:59What the term "node" means and why "content" gets used more in the interface
  4. 0:57How to change the default home page
  5. 1:27Adding our "About us" page
  6. 1:03Reviewing our "tour type" and "tour types" wireframes
  7. 1:55The benefits to modeling data instead of using flat HTML
  8. 0:55What a CSV file is and how to view it as a spreadsheet
  9. 2:43How to add and configure a custom content type
  10. 1:35How to change the label and settings on a default "body" field
  11. 1:27Overview of textual field types
  12. 1:17The pros and cons of reusing fields across multiple content types
  13. 0:49Adding a plain textarea field
  14. 0:35Adding our first tour type content
  15. 1:43How to change field order and position field labels
  16. 0:27How to hide the "submitted by" text on a content page
  17. 0:31How the "Back to site" link works
  18. 0:43Adding our other tour type content in
  19. 3:49How to add a view, and what settings the Views wizard affects
  20. 1:11How to add fields to a view
  21. 1:55How to change the HTML element used for fields and field labels in a view
  22. 0:33Reflecting on the value of data modeling versus flat HTML now that we've used Views
  23. 1:35Quiz for chapter 3 of "Drupal 8 Site Building"
  24. 0:41Challenges for chapter 3 of "Drupal 8 Site Building"
  25. 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

  1. 0:43Why it's useful to know how to back up and restore a site
  2. 0:47How to back up a Drupal site's files
  3. 0:57How to back up a Drupal site's database
  4. 0:57How to restore a Drupal site's files from a backup
  5. 0:21How to restore a Drupal site's database from a backup with phpMyAdmin
  6. 2:11How to restore a snapshot for any chapter in this series

How to work with users and permissions

  1. 1:49How to add a new user
  2. 1:25How to use Masquerade to log in as any user and how to log in as two users at once
  3. 2:13How roles and permissions work, and what the anonymous, authenticated and administrator roles are for
  4. 1:55How to add a role and why to keep permissions to a minimum
  5. 0:13How to assign a role to a user
  6. 0:53How to assign a user authorship of content so they can edit it
  7. 2:03Assigning authorship of our tour type content to allow creators to edit them
  8. 0:49How to add a field to users
  9. 2:01What an entity is, the difference between user and node entities and how the Profile module works
  10. 1:17Quiz for chapter 5 of "Drupal 8 Site Building"
  11. 0:19Challenges for chapter 5 of "Drupal 8 Site Building"
  12. 4:37Solutions for chapter 5 of "Drupal 8 Site Building"

How to use reference fields, views relationships and image styles

  1. 3:09Options for merging multiple fields automatically into a node's title, and creating our "staff" content type
  2. 1:42How to add a select box or list field to a content type or other entity
  3. 4:26How to add an image field, what "machine name" means and comparing private and public files
  4. 1:51How to change the order of fields in a content creation form and change select boxes to checkboxes
  5. 2:37Adding our staff content
  6. 1:11How to merge a field with multiple values in a view and what "delta" means
  7. 3:09How to use image styles to render an image at any size and shape
  8. 0:17Adding a body field to our view
  9. 1:21How the personal contact form works, and how to create a user-based view
  10. 0:55Explaining why we need a reference field and adding another user
  11. 4:57How to add a reference field and a relationship to connect two entities and pull data from both into a view
  12. 4:03How to rewrite the output of a field in a view to include content from multiple fields
  13. 0:39Reviewing our view an an anonymous user and how to log out via a URL
  14. 1:03How the anonymous and authenticated roles don't stack, and how to give permission to use the personal contact form
  15. 1:17Quiz for chapter 6 of "Drupal 8 Site Building"
  16. 0:31Challenges for chapter 6 of "Drupal 8 Site Building"
  17. 5:09Solutions for chapter 6 of "Drupal 8 Site Building"

How to debug email and fight spam

  1. 1:33How to prevent email from being accidentally sent by using Maillog
  2. 0:39Why to create a list of tasks to execute before going live
  3. 0:45How to get to a module's configuration page
  4. 1:35How to configure Maillog and how to review sent messages
  5. 1:55How the user registration form works and options for combatting spam
  6. 0:41How to unblock or approve a user account
  7. 1:07What a new user will see when logging into a site for the first time
  8. 4:01How to hide the user registration form and a walkthrough of user account settings
  9. 1:25How and why to install the Honeypot module
  10. 1:35How to configure Honeypot to protect a form
  11. 1:29How to verify the Honeypot module is working for a form
  12. 3:25How to install and configure the CAPTCHA module to deter spam
  13. 0:41How to add a CAPTCHA to a form
  14. 1:53How to install and configure reCAPTCHA
  15. 0:43Why a CAPTCHA can result in frustrated users
  16. 1:45How and why to set up a Mollom account for spam filtering
  17. 3:55How to install and configure the Mollom module
  18. 0:55How to uninstall modules that are dependencies of other modules
  19. 1:07Why it makes sense to completely uninstall unused modules
  20. 1:59How the built-in flood control protection for the log in form works
  21. 0:53How to log in when your account has been blocked for too many failed login attempts
  22. 1:51Quiz for chapter 7 of "Drupal 8 Site Building"
  23. 0:23Challenges for chapter 7 of "Drupal 8 Site Building"
  24. 8:43Solutions for chapter 7 of "Drupal 8 Site Building"

How to use taxonomy and comments

  1. 2:33Reviewing our blog entry and blog listing wireframes
  2. 0:31Configuring our blog entry content type
  3. 1:39What the terms "taxonomy," "vocabulary" and "term" mean
  4. 1:09How to add terms directly to a vocabulary and view a term page
  5. 1:17How to add a taxonomy reference field (i.e. tagging) to a content type
  6. 1:19Adding a blog entry and testing out our tag field
  7. 1:05How to change a taxonomy field to use a more tag-like input mechanism
  8. 2:43How to add an image field and display it as a thumbnail
  9. 2:01How to use the Colorbox module to provide a photo gallery overlay
  10. 1:55How to find documentation on a contributed module when it doesn't quite work right
  11. 0:35How to set up the "libraries" folder and add a jQuery plugin
  12. 1:37How to flush Drupal's cache and why we would need to clear it
  13. 1:01How to add multiple images at once and view multiple images in Colorbox
  14. 2:25How to add commenting via a comment field
  15. 1:25Testing our comment field and an overview what we need to do to make our comment form public
  16. 0:53How to allow anonymous users to add moderated comments
  17. 1:09How to moderate unpublished comments
  18. 1:47How to allow anonymous users to post unmoderated comments and protect our comment form
  19. 1:47The pros and cons of using a third-party service like Disqus or Facebook for comments
  20. 0:33How to set up a Disqus account
  21. 3:17How to install and configure the Disqus module
  22. 1:11Quiz for chapter 8 of "Drupal 8 Site Building"
  23. 0:33Challenges for chapter 8 of "Drupal 8 Site Building"
  24. 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. 1:29What CSS is and how we'll use it to fix a layout issue
  2. 1:21How to use a browser to discover which element's CSS you need to modify
  3. 0:55Comparing adding CSS via a module like Asset Injector and creating a custom theme
  4. 3:03How to inject CSS through the user interface with the Asset Injector module
  5. 1:39How to troubleshoot issues with CSS from Asset Injector not working
  6. 0:59How to add CSS to display image field images in a row
  7. 0:37Where to find the CSS we use and reassurance that CSS is tricky
  8. 0:39Reviewing the differences between our wireframe and the default "Submitted by" line
  9. 1:37How to modify the date format used in the "Submitted by" line
  10. 1:01How to add a custom date format
  11. 2:03Installing Display Suite and Token and how to tell when a module has dependencies
  12. 1:45How to use Display Suite to adjust page layout and give greater control over fields
  13. 2:37How to add a custom field in Display Suite to replace the "Submitted by" line and how Token works
  14. 2:33What view modes are and how to modify hidden view modes
  15. 2:05How to add a custom view mode and use it in a view
  16. 2:37How to modify the teaser view mode
  17. 1:17Modifying our CSS injector rules and selectors to apply our CSS to the new view
  18. 1:07Quiz for chapter 9 of "Drupal 8 Site Building"
  19. 0:27Challenges for chapter 9 of "Drupal 8 Site Building"
  20. 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. 1:11The benefits of using a readable url and how Pathauto can help
  2. 1:11How to install Pathauto and why Drush is useful for installing modules with dependencies
  3. 1:21How to configure a pattern in Pathauto to automatically generate URL aliases for new content
  4. 0:53How to bulk generate aliases for existing content with Pathauto
  5. 0:57Creating Pathauto patterns and bulk generating aliases for tour types and blog entries
  6. 1:31How we can use the Redirect module to prevent duplicate URLs and why that's important
  7. 1:47Demonstrating how Redirect adds redirects from old URLs and what a 301 redirect is
  8. 0:29How to browse URL redirects and change the redirect status code
  9. 1:45How to use the Diff module to see the differences between content revisions
  10. 0:33Reviewing a message from our boss
  11. 1:29What "blocks" and "regions" are and how to hide a block
  12. 1:13Overview of enabled blocks and a more detailed explaination of blocks and regions
  13. 0:45How to add a module-supplied block to a region and create a copy of an existing block
  14. 1:07Two approaches we can take to creating a custom block
  15. 1:55How to create a custom block type
  16. 0:25How to adjust how fields in a custom block type are displayed and ordered
  17. 1:23How to create a custom block of a particular custom block type
  18. 1:13How to place an instance of a custom block and making some minor adjustments to the block
  19. 1:27Adding a "featured adventurer" content type
  20. 1:37How to create and place a Views block
  21. 1:57When it makes sense to use a content type instead of a custom block type
  22. 0:59Quiz for chapter 10 of "Drupal 8 Site Building"
  23. 0:25Challenges for chapter 10 of "Drupal 8 Site Building"
  24. 5:22Solutions for chapter 10 of "Drupal 8 Site Building"

How to use exposed filters and contextual filters in views

  1. 3:49Adding our "tour" content type with a date field, number field and content reference fields
  2. 0:29How to switch a reference field input to use a select box instead of an auto-complete in
  3. 0:59Why we're going to use a view to filter out options for a reference field input
  4. 1:45How you can use "displays" to share common configuration between views
  5. 1:39How to filter options that display in an entity reference field using a view and what "delta" means
  6. 1:05Adding our tour nodes
  7. 1:11How to quickly add multiple fields from the same content type to a view
  8. 0:53How to customize the date format in a views field
  9. 1:01Finishing the process of configuring and reordering our fields in the calendar view
  10. 0:47How to prevent past events from displaying in a calender-type view
  11. 0:45How to make columns sortable in a table-style view
  12. 0:57How to add a form (exposed filter) to a view to allow users to filter results
  13. 1:51How to add an exposed filter for a reference field in views using a relationship
  14. 1:47How to make a views exposed filter a dropdown with grouped filters
  15. 0:27How to change the text in the "apply" button for an exposed filter
  16. 0:59How to turn on Ajax reloading for views and the advantages of leaving it off
  17. 1:07How to hide the title of a filter and horizontally align an exposed filter's "apply" button
  18. 1:03How to add content above a view with a views header
  19. 2:23Adding a second views display for our calendar block and placing an instance of the block
  20. 1:55What a contextual filter is and how to show content that references the current page's node
  21. 1:05How to roll back a change applied to all views displays that should only apply to one
  22. 1:17How to display custom content in a view when there are no matching results
  23. 0:47Quiz for chapter 11 of "Drupal 8 Site Building"
  24. 0:29Challenges for chapter 11 of "Drupal 8 Site Building"
  25. 5:56Solutions for chapter 11 of "Drupal 8 Site Building"

How to create custom forms and manage menus

  1. 0:59Reviewing our contact form and submission confirmation wireframes
  2. 2:09How contact forms work, what the configuration options means and how to use "weight"
  3. 0:23Reviewing what elements we need to change to make the default contact form match the wireframe
  4. 0:53How to change the contact form subject text input to a dropdown of options
  5. 1:13How to add a short text field with a placeholder to a contact form
  6. 0:15How to reorder fields in a contact form
  7. 0:39How to hide the "send yourself a copy" checkbox on a contact form and set a field to be required
  8. 1:05How to use the Contact Storage module to change the submit button text and hide the preview button on contact forms
  9. 1:57How to redirect to a custom page after a contact form is submitted
  10. 0:31How to review saved contact form submissions with the Contact Storage module
  11. 0:47Changes that will likely take place in future versions of the Contact module
  12. 1:37How to add a menu item to a menu directly and review our menu wireframe
  13. 0:39How to reorder menu items and add a menu item from the content edit form
  14. 0:45How to add a link to a views page to a menu
  15. 1:15Adding our calendar, blog and contact menu items and how we have to add contact form links manually
  16. 0:55How to move menus and how menus display as blocks
  17. 0:55How to add a menu, place a menu as a block, and delete a menu
  18. 1:11Quiz for chapter 12 of "Drupal 8 Site Building"
  19. 0:23Challenges for chapter 12 of "Drupal 8 Site Building"
  20. 5:44Solutions for chapter 12 of "Drupal 8 Site Building"

How to customize search, run cron and improve performance

  1. 0:39Review of our search requirements and wireframe
  2. 1:03Demonstrating how search works by default and how to narrow down results by content type
  3. 1:57How cron works, what a cron job is and how to run cron tasks manually
  4. 1:43Overview of configuration options for search
  5. 1:53How to replace the default search with a more configurable view
  6. 1:51How to display an exposed filter as a block to create a search form block
  7. 1:43Removing the label, changing the button text and adding no results text for our views search
  8. 2:11How CSS and JavaScript aggregation work to speed up page load times
  9. 2:11How caching and cache tags work in Drupal 8
  10. 1:37How the BigPipe module works and what experimental modules are
  11. 1:29Quiz for chapter 13 of "Drupal 8 Site Building"
  12. 0:27Challenges for chapter 13 of "Drupal 8 Site Building"
  13. 4:31Solutions for chapter 13 of "Drupal 8 Site Building"

How to evaluate the security of your site and configure text formats

  1. 1:57How to review permissions manually for security risks and installing the Security Review module
  2. 1:13How to check the security of permissions with the Security Review module
  3. 2:23Reviewing additional Security Review notices around trusted hosts and writable files
  4. 0:45What a text format is, and a review of its configuration
  5. 3:29How each text format filter works and how managed files are tracked in a database
  6. 2:07How text formats strip unallowed HTML upon viewing on a page or in a Wysiwyg
  7. 1:01Why the order of text format filters matter
  8. 0:59Reviewing our "callout" style wireframe
  9. 1:53How to add a CSS style dropdown to the Wysiwyg
  10. 0:31Applying our new callout style to the About page mission statement
  11. 2:33How to use the IMCE module to share images between users
  12. 1:27How to configure permissions for IMCE to prevent destructive actions
  13. 0:57Explaining the security implications of allowing the "img" HTML tag in a text format
  14. 0:55How to use the "Recent log entries" page to discover possible security and performance issues
  15. 0:35How to use the "top page not found" page to fix broken links
  16. 1:23Quiz for chapter 14 of "Drupal 8 Site Building"
  17. 0:27Challenges for chapter 14 of "Drupal 8 Site Building"
  18. 4:04Solutions for chapter 14 of "Drupal 8 Site Building"

How to translate content and the interface

  1. 1:11How we're about to translate the interface, translate content and override specific interface text
  2. 1:15How to download and enable a new language for the Drupal interface
  3. 0:51How to remove the default language two letter prefix from URLs
  4. 1:11How to allow users to set their preferred language
  5. 2:15How to translate content into multiple languages
  6. 1:11How to replace nearly any text in the interface with your own text
  7. 1:05Quiz for chapter 15 of "Drupal 8 Site Building"
  8. 0:17Challenges for chapter 15 of "Drupal 8 Site Building"
  9. 4:00Solutions for chapter 15 of "Drupal 8 Site Building"

How to update Drupal and contributed modules

  1. 0:43What we are about to do and how to restore a snapshot to practice upgrading
  2. 2:15How to update a contributed module
  3. 1:51How to update core Drupal from one minor or patch version to another
  4. 9:12Credits for "Drupal 8 Site Building"

Setting Up a Web Environment With Drupal

Front End Development

Welcome to Front End Development

  1. 1:57Why this series exists and what we'll be covering
  2. 3:19What front end development means
  3. 3:37Getting set up with our mockup and resource pack

HTML and CSS Basics

  1. 2:57What HTML is and a simple HTML example
  2. 2:02A simple CSS example and what HTML attributes are
  3. 3:28How to structure an HTML document and how DOCTYPE works
  4. 4:19How CSS can be used to make any element look like any other element
  5. 3:25Why to use meaningful HTML tags, also known as semantic HTML
  6. 2:02How to choose an HTML tag that matches the meaning you want to convey
  7. 2:11How every HTML element is a box
  8. 3:59A review of our design, what typography means and how to choose a starting point
  9. 2:21How to create an image from part of a Photoshop design
  10. 4:15A comparison of and as HTML references
  11. 1:43Why to use HTML and CSS instead of images
  12. 3:15The advantages and disadvantages of spending the time to do things right
  13. 1:53How to choose an HTML heading level
  14. 4:31How to use the font-family CSS property
  15. 4:22How to measure parts of your screen and use the font-size and font-style CSS properties
  16. 3:06How to use the font-weight CSS property
  17. 4:06How to select colors on your screen and use the CSS color property
  18. 0:18How to hide the advertisements on
  19. 2:28How to use text-transform to uppercase text
  20. 1:44How to use the text-indent and letter-spacing CSS properties

HTML and CSS Basics, Part 2

  1. 4:43Why to use CSS selectors instead of adding styles inline
  2. 0:25How to resume from this point (part 1, step 7)
  3. 1:59How to decide which element a CSS style should be applied to when there are multiple options
  4. 5:05How to work with border properties in CSS
  5. 0:53How to use the text-align CSS property
  6. 4:31How padding, margin and the box model work
  7. 2:25How to use a class to apply CSS styles to a single element
  8. 3:23How classes work and why creating class names and selectors is so challenging
  9. 2:47How CSS selectors work and how to learn more about them
  10. 1:47How to identify sections in our design
  11. 3:51How the HTML section tag works
  12. 3:01How to use compound CSS selectors and set a background color
  13. 2:59How to calculate the combination of margin and padding to get the right white space
  14. 2:25How to use the padding shorthand properties and adding padding to our section
  15. 0:35How to resume from this point (part 1, step 8)
  16. 1:13How to decide which elements to convert next
  17. 6:55Converting a second heading in the design to HTML
  18. 2:53How and why to choose a descriptive CSS class name
  19. 2:33Overriding some additional CSS styles in our header
  20. 0:45Affirmation of any weird feelings you have about overriding your own CSS
  21. 3:55How to style elements with parent CSS selectors
  22. 1:57How child selectors work and when to use them
  23. 3:49What CSS (Cascading Stylesheets) means and how CSS selector hierarchy works
  24. 0:51How to organize basic CSS
  25. 2:25How to create an external CSS stylesheet and include it in your HTML file
  26. 3:44How to set up Chrome to edit CSS and HTML directly
  27. 2:09How using class selectors allows you to change HTML structure and reduce overriding
  28. 3:19How and why to create semantic CSS class names
  29. 5:57How and why to decouple CSS from HTML and make styles additive

How to Organize CSS and Use SMACSS

  1. 3:00What SMACSS is and how we'll use it throughout this series
  2. 3:40What a component (or module) is in CSS and HTML
  3. 2:59How sub-components work and how to name their classes
  4. 1:24Why we're focusing so much on HTML and CSS principles and standards
  5. 0:26How to resume from this point (part 1, step 10)
  6. 3:05Deciding what to do next and adding HTML for our next heading
  7. 4:19Adding styles for our H3 heading
  8. 3:53Adding our last headings to our template
  9. 5:21How the line-height CSS property works and converting our first paragraph
  10. 2:38How to factor in line-height when determining margin
  11. 4:31Adding our second styled paragraphs
  12. 5:23Creating markup for our article snippet text
  13. 3:41How to style an anchor tag and use the same CSS with multiple selectors
  14. 0:51How we will soon reduce repetition with a CSS preprocessor called SASS
  15. 1:17How to use the font-style CSS property and finishing the snippet text

CSS Resets, Normalize.css and Package Management with Bower

  1. 3:37How to override the browser's default styles with the 'body' selector
  2. 4:01How to use the universal CSS selector and the problems with doing so
  3. 1:39How to deal with slight color variations and the benefits of a standard color palette
  4. 5:09How to set sensible default styles without a universal selector
  5. 2:31Reviewing other typographical styles to determine if they should override the browser
  6. 1:02How to resume from this point (part 1, step 17)
  7. 2:20Why to consider cross-browser consistency with CSS early on
  8. 1:27How the Universal Selector CSS Reset works
  9. 3:27How the Eric Meyer's CSS Reset works
  10. 1:35Comparing the pros and cons of using a CSS reset
  11. 2:31How Normalize.css works
  12. 1:55How to download and integrate Normalize.css
  13. 3:15What a package manager is and why we would want to use one
  14. 2:05How to install Node.js and npm on a Mac
  15. 1:03How to install Node.js and npm on Windows
  16. 1:57How to install Bower and the Normalize.css Bower package
  17. 1:20What JSON is and exploring our first Bower package
  18. 3:57Overview of Semantic Versioning and using a package manager for version management
  19. 2:51How to create a bower.json file for private projects
  20. 3:25How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*)
  21. 1:39How to update bower packages and the benefits of using Bower

How CSS Units Work

  1. 3:43The difference between absolute and relative CSS units and what a pixel unit is
  2. 2:15How the 'em' relative CSS unit works
  3. 1:37How using absolute CSS units like 'px' prevents font resizing
  4. 2:29How the 'rem' CSS unit works and why it can be hard to use
  5. 1:45How 'unitless' CSS measurements work
  6. 1:59Comparing resources for learning more about CSS units
  7. 1:43Why some people use older browsers
  8. 2:37How to use '' to evaluate browser support for CSS and HTML
  9. 1:51How we're going to decide if we can use rem CSS units
  10. 0:45How JavaScript polyfills can fill the gap in browser support

CSS Preprocessing and SASS

  1. 2:43Why we would want to use a CSS preprocessor like SASS
  2. 1:33Why we're using SASS instead of LESS and Stylus
  3. 1:11Why we're using the command line version of SASS
  4. 0:47How to install SASS on a Mac
  5. 5:05How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues
  6. 1:39What a CSS preprocessor does and why we're using the .scss syntax instead of .sass
  7. 1:23How to convert a .scss file to a .css file
  8. 4:28How and why to use variables in SASS
  9. 1:43How to trigger CSS compiling when a file is changed with the SASS 'watch' command
  10. 3:59Why to create a common color palette and converting our SASS to use one
  11. 2:49How to add comments in CSS and SASS
  12. 1:41How to use TODOs to mark code to change later without interrupting your workflow
  13. 1:01Wrapping up our review of values that could be converted to variables
  14. 3:27How to use nesting in SASS to reduce selector repetition
  15. 3:09Why it makes sense to use separate SASS files for each component

Project Organization With SASS and Using Source Maps

  1. 3:29How to use parent selectors as a prefix with the ampersand in SASS
  2. 0:37Why it's important to review the CSS that your SASS creates
  3. 2:11How to efficiently code an anchor tag with multiple states in SASS
  4. 2:39How to resume from this point (part 1, step 19)
  5. 3:01Re-organizing our file structure into folders and how to use SASS watch on folders
  6. 3:21How to use partials to split SASS into smaller files
  7. 2:05Moving the rest of our component SASS into separate partials
  8. 0:39Updating the paths in our HTML to reflect the new file structure
  9. 2:09How to split our variables and base styles into meaningful SASS partials
  10. 1:25Reassurance that splitting our single SASS files into multiple partials is not over-engineering
  11. 3:31How CSS source maps work and how they allow us to inspect the SASS source of CSS properties
  12. 0:41How to use CSS source maps in Firefox
  13. 0:42How to navigate to SASS variable definitions in the browser
  14. 1:31Why it makes sense to use the SASS Globbing extension for automatically including partials
  15. 3:25How to install a SASS extension and automatically include partials from a folder
  16. 1:27The benefits and costs of using the SASS Globbing extension
  17. 1:49The pros and cons of using local software like SASS and Bower for front end development
  18. 4:19Map of local software needed for front end development and how the parts releate to one another
  19. 0:38Why there are so many individual pieces of front end software
  20. 2:37How to learn more about SASS with the SASS documentation
  21. 1:11Why we're choosing not to use Compass just yet

Using Bundler to Manage SASS Extensions

  1. 1:15How to install Bundler
  2. 2:29How to generate a Gemfile with Bundler
  3. 3:35How to add dependencies to a Bundler Gemfile
  4. 1:31How to use project-specific versions of gems with 'bundle exec'
  5. 2:12How the Bundler Gemfile.lock file works
  6. 1:55How to use 'bundle exec' with 'sass watch' and 'sass globbing'
  7. 1:57How to specify a version range in Bundler that updates to the latest patch version
  8. 2:37Setting up a file and how we're automating documentation
  9. 2:43How to troubleshoot SASS nesting and prefixing conflicts
  10. 0:47Review of the typographic elements we have templated
  11. 4:37How to use a footer HTML tag and add a copyright symbol
  12. 3:07Adding SASS scaffolding for the footer
  13. 2:04Setting a default text color for the footer
  14. 2:07Why to avoid creating classes for common CSS property values between elements
  15. 2:19Troubleshooting editing SASS partial styles with the browser inspector
  16. 1:39How to adjust spacing between paragraphs in CSS
  17. 3:47How variable scope works in SASS
  18. 1:01How to use HTML comments and preparing to code the footer menu
  19. 1:11Why to avoid using HTML lists for navigational elements
  20. 4:17How to use the nav HTML element
  21. 1:45How to space links in horizontal navigation
  22. 0:51The difference between how horizontal and vertical margin work
  23. 2:10How to convert a pixel measurement to a relative 'em' unit
  24. 3:09How to perform mathematical operations and string concatenation in SASS

How to Use SASS Functions

  1. 2:19The difference between a SASS function and a mixin
  2. 2:17How to write a function in SASS
  3. 2:05How to set the default value for a function argument in SASS
  4. 1:29Converting absolute values and creating a SASS partial for functions
  5. 3:31Creating a SASS function to calculate rem units from pixels
  6. 1:29Why sometimes it's simpler to not use a function for calculating relative units
  7. 6:23Updating our SASS to use relative instead of absolute units

Styling Typography With CSS

  1. 1:39Fixing the text color of our headers by changing the base text color
  2. 1:59Styling the primary navigation in the footer
  3. 0:47Styling the secondary navigation in the footer
  4. 3:49How to organize shared styles between two similar elements
  5. 4:25How to add a border between our two footer menus
  6. 2:23How to limit the length of a horizontal border to the contents of an element
  7. 1:41How to center an HTML element by setting horizontal margin to "auto"
  8. 1:59How to resume from this point (part 1, step 22)
  9. 3:07How an HTML header tag works and using one for our site header
  10. 4:07Setting up the HTML and CSS scaffolding for our header
  11. 2:40Dividing our header into two sections with div tags and setting the background color
  12. 2:48How to use SMACSS "states" to define CSS for specific situations
  13. 2:21How the CSS "display" property works, and how to fix elements overlapping their container
  14. 2:02Refining the CSS for our header navigation
  15. 2:15Evaluating using the "border-radius" property to add rounded corners in our project
  16. 1:39How CSS vendor prefixes work and why we would use them
  17. 2:03Overview of automated tools for adding CSS vendor prefixes
  18. 0:43How to use the CSS "border-radius" property to add rounded corners to an element
  19. 1:11Breaking down the visual elements of our buttons
  20. 2:05How to structure HTML for a button-like link
  21. 4:21How to style a basic anchor tag button in CSS
  22. 3:22How to use the lighten() and darken() SASS functions to set relative colors
  23. 2:33How to use the "text-shadow" CSS property to create a drop shadow on text
  24. 2:15How to add transparency or alpha to a color with an RGBA value
  25. 5:57How to add pill-like rounded corners with CSS and cleaning up our button styles
  26. 0:35In celebration of completely templating the typographical elements in our mockup

Working With Icon Fonts

  1. 2:09Why it makes sense to use fonts instead of images for icons
  2. 1:47What Font Awesome is and how to download it
  3. 0:45What the .min file extension means and why it makes sense to minify CSS and JavaScript
  4. 2:05How the @font-face CSS rule works
  5. 1:45How to create a file for temporary CSS and what a "shame" file is
  6. 2:02How to install a web font so you can use it in CSS
  7. 1:49How to add an icon with Font Awesome and ways we can style the icon
  8. 1:27Adding a phone icon to our green button
  9. 4:01How to create a circle icon in CSS
  10. 3:03How to find specific icons in Font Awesome
  11. 1:07How to create a reliable circle icon by setting a fixed width
  12. 2:19How to decide when an element should be its own component or part of another component
  13. 1:33Refactoring our circle icons as elements of the icon box component
  14. 2:01Restructuring our icon boxes as sub-components to allow for variation
  15. 2:35Adding our second circle icon and making the updated styles permanent
  16. 1:53Adding our final two circle icons
  17. 2:09How to use the "before" pseudo-class to display non-semantic content
  18. 3:31How to use CSS to add icons as content
  19. 0:53Where to put our @font-family rule and cleaning up our HTML and CSS
  20. 2:41Restructuring our phone icon HTML and CSS
  21. 4:25Overview of the features in the full Font Awesome framework
  22. 4:49The pros and cons of using a front-end framework like Bootstrap
  23. 0:48Why we're deciding not to use the full Font Awesome framework
  24. 1:27How to evaluate Bower packages for legitimacy
  25. 3:27How to install Font Awesome as a Bower package
  26. 6:55How to use aspects of the Font Awesome framework by including specific SASS partials
  27. 2:15Why using a complete icon font on your site can be problematic
  28. 2:29How to cherry-pick specific font icons using using Fontastic
  29. 3:09The pros and cons of Fontastic, and how to combine fonts and upload custom icons
  30. 0:29Why we're not using Fontastic just yet
  31. 3:35How to use Symbolset to convert words to icons with ligatures
  32. 2:39How to use FontSquirell to browse free fonts and generate web font packages
  33. 2:30How to use Google Fonts to browse free fonts and generate hosted fonts
  34. 4:05Creating the HTML and CSS for our header account link with an icon
  35. 3:05How to inspect pseudo-elements in Chrome and use zoom to compare relative sizes
  36. 1:23Discussing how we might use font icons for our slider navigation and contact form radio buttons
  37. 1:27Adding the phone icon to our footer phone number
  38. 7:17Creating the HTML and CSS for a Facebook social icon in our footer
  39. 1:51How to use SASS variables to establish a relationship between different numbers in CSS rules
  40. 0:41How to prevent CSS from adding padding and border to height and width with "box-sizing"
  41. 1:09How to use line height to center text vertically
  42. 1:15Reorganizing the styles for our social icon to apply to all social icons
  43. 2:19Creating the HTML and CSS for our other social icons
  44. 1:41How to adjust our CSS to allow for easily re-sizable circle icons
  45. 2:13How to add semantics to an icon with a title attribute or hidden element
  46. 1:08The pros and cons of opening links in a new window, and how to do it
  47. 3:03How to resume from this point (part 1, step 23)

Customizing Forms

  1. 4:47A very brief overview of the structure of an HTML form
  2. 2:05How to create HTML and CSS form scaffolding and a submit button in HTML
  3. 2:35How to style our submit button to match our other buttons
  4. 1:50How to add a multi-line text input to a form with the "textarea" element
  5. 0:27How to add a name attribute to form inputs to identify form data
  6. 5:37How to style a textarea input with CSS
  7. 2:05How to use the "placeholder" attribute to add instructions inside a form element
  8. 2:19How to create the HTML structure for a select input
  9. 4:23How to style a select input and address padding issues with height and the "text-indent" property
  10. 1:38How we'll approach changing the text color and icon in our select box
  11. 3:37Overview of 4 options for styling select inputs consistently across all browsers
  12. 1:19Overview of 3rd party libraries for replacing select box inputs with more easily style elements
  13. 2:29How to download selectize.js with Bower and set up an example
  14. 1:39Why we're not using aggregated and minified versions of JavaScript and CSS
  15. 1:47How to find and include dependencies for a 3rd party JavaScript library
  16. 1:13How to check for JavaScript errors in Chrome
  17. 5:45How to style a selectize.js input
  18. 1:03Reviewing our selectize.js input in various browsers and operating systems
  19. 0:37What a JavaScript polyfill is and why we might want to use one
  20. 2:51Finding and installing a polyfill to add placeholders for Internet Explorer 9
  21. 2:13How to create an arrow with pure CSS using transparent borders
  22. 0:53Refining the style of the text in our select input
  23. 2:15How to style a text input with CSS
  24. 1:37Considering our options for sharing styles between different form inputs
  25. 3:25How SASS "placeholders" can be useful for sharing CSS between elements
  26. 1:03Adding another text input for an email address
  27. 3:09Making the margin between our form elements consistent
  28. 1:31Options for sharing common styles between our selectize input and our other inputs
  29. 2:11Creating a naming convention for placeholder SASS rules
  30. 2:19How a radio button input is structured and why not to use the "id" attribute for styling
  31. 2:51How to set up HTML scaffolding for a radio button group
  32. 1:11A quick overview of how we will approach styling our radio buttons
  33. 3:48How to customize a radio group, part 1 - adding a font icon to replace the radio
  34. 2:11How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label
  35. 4:07How to customize a radio group, part 3 - hiding the radio and centering the labels
  36. 3:05Styling the textual label for our radio group
  37. 0:59Centering our contact form in the browser horizontally
  38. 0:35A brief summary of what we have left to do
  39. 1:33Overview of the elements in our search form and why we're not using a framework for it
  40. 3:03Setting up the HTML scaffolding for our search form
  41. 2:04Setting up the CSS scaffolding for our search form select input
  42. 3:32How to change the icon and icon position of a select input
  43. 3:39Adjusting the select box styles on our search form
  44. 1:00How to set differently sized rounded corners for each corner of an element
  45. 1:49Summary of what we still need to style in our search form and starting the process
  46. 1:59How the "vertical-align" CSS property works and aligning our elements to the top
  47. 1:49Adjusting the height of our search form inputs to align them
  48. 0:49Discussing why the selectize.js dropdown icon showed up after we hid it with CSS
  49. 1:21How to override any CSS with the "!important" keyword and why it's so problematic
  50. 0:41Finding a solution other than "!important" to solve our reappearing icon issue
  51. 1:51Fixing an issue where our select is a pixel too high by setting height on a different element
  52. 0:49How to remove horizontal spaces between elements by setting the font size to zero
  53. 0:55How to remove horizontal space between elements with the "float" CSS property
  54. 1:55Removing the horizontal space in our search form and adjusting the borders
  55. 2:17How using a "button" HTML input instead of a submit input allows for pseudo-elements
  56. 2:28Refining the CSS of our search form submit button and text input
  57. 5:01How to add a custom icon by creating a new icon font with Fontastic
  58. 1:17Refining the styles on our updated magnifying glass icon submit button
  59. 1:23Testing our search form and moving the HTML to the right place in the template

Working With Responsive Images and Breakpoints

  1. 2:23How to save a transparent image in Photoshop and why images on the web are tricky
  2. 0:50Adding our logo image for testing
  3. 0:40How to resume from this point (part 1, step 41)
  4. 0:59How images display differently depending on the pixel resolution of the viewing screen
  5. 0:21The pros and cons of using lower resolution images
  6. 3:26The pros and cons of using high resolution images
  7. 3:03How to serve both low and high resolution images with Retina.js
  8. 2:43How to set up a lightweight web server with Node.js to get around local file browser issues
  9. 1:35How to avoid 404 errors when using Retina.js
  10. 13:27What a 404 error is and why we should try to avoid them
  11. 1:39The downside of using Retina.js to serve high density images to high resolution screens
  12. 1:19What "responsive design" means and a brief history
  13. 1:31What responsive design implies for the layout of our site
  14. 0:53What responsive design implies for our images
  15. 1:05Why the browser can't serve the right images for the right scenario without our help
  16. 4:15How to use the "srcset" property in the image tag to help the browser fetch the right image
  17. 1:55How "media queries" work to pull in different CSS based on conditions in the browser
  18. 1:19How the "sizes" image attribute works to provide breakpoint information to the server
  19. 1:07What a "breakpoint" means in connection to CSS media queries
  20. 3:25How to use the srcset attribute safely until there's bettter browser support with picturefill
  21. 1:05Setting up our logo image to match the mockup
  22. 3:19How to use SVG images for scalable vector graphics on the web
  23. 3:27The difference between bitmap and vector graphics, and saving our slideshow background images
  24. 1:58Adding the HTML and CSS scaffolding for our slideshow background image
  25. 4:13How to set a background image so that it covers an element but does not repeat
  26. 2:55How to create a media query to swap background images based on the browser width
  27. 1:57How to swap images with a media query based on screen resolution
  28. 2:35How to use "min-width" to set multiple breakpoints in your CSS based on browser width
  29. 3:45How the SASS "breakpoint" extension works, and troubleshooting installation
  30. 1:09How to install Compass
  31. 2:32Encouragement for when you run into dependency issues with Ruby, node.js or Compass
  32. 3:19How to set up a Compass project
  33. 2:29How to set up the breakpoint extension with Compass and use it to simplify our SASS
  34. 0:43Summary of why the "breakpoint" SASS extension is so useful
  35. 0:45Summary of how many projects set up their media query breakpoints
  36. 2:33Merging our "slide" and "slideshow" components and refactoring our classes
  37. 1:31How we will approach styling our circular, bordered images
  38. 4:23Why we're using a background image for our circular images, and building out the basic CSS
  39. 2:45How to style a circular image with a border and drop shadow
  40. 1:14Adding our second image, and moving our snippet HTML to the right place

Styling Slideshows and Carousels

  1. 2:43Reviewing what functionality we need for our slideshow sliders
  2. 2:43Overview of the "Flexslider" feature set and review of examples
  3. 4:05How to install Flexslider and add a working example
  4. 2:01How to connect Flexslider to existing HTML to convert it to a slider
  5. 0:59Tracking down why the Flexslider navigation does not appear over the slider
  6. 4:40How the relative, absolute, static and fixed CSS "position" values work for element layout
  7. 3:23Why adding left padding to slides in our slideshow container doesn't work
  8. 0:49Solving our slideshow left padding issue by applying padding to the slideshow container
  9. 0:25Setting the width of our slideshow slides
  10. 2:07A discussion of options for vertically aligning our slideshow content
  11. 2:13How the CSS "flex" display, or "Flexbox", works
  12. 2:27How to use Flexbox to vertically align a block element
  13. 1:21Why using Flexbox doesn't make sense for every project
  14. 1:31Why we can't vertically align compound elements with the "vertical-align" property
  15. 0:41Why vertically aligning with "line-height" doesn't work for multi-line elements
  16. 1:33How HTML tables work and why they were once used for layout
  17. 2:08How to make any element work like a table cell with CSS
  18. 1:29Using the absolute positioning and negative margin solution for vertically aligning an element
  19. 1:13How to use a CSS transform to vertically align an element
  20. 0:39Reviewing browser support for CSS transforms
  21. 0:21Why we're not using JavaScript to vertically align our slides
  22. 1:07How to use the CSS "transform" property to alter the display or position of an element
  23. 2:11Permanently applying our CSS tranform solution to vertically align our slides
  24. 0:55Adding back our slide padding and fixed width
  25. 1:43How to fix many Flexslider behavior issues by adding the "flexslider" class
  26. 1:13How Flexslider uses a font for their previous and next icons, and what we'll do next
  27. 1:37How to create a vector SVG icon from a bitmap image with Illustrator
  28. 1:15Creating our "previous" icon and importing our new icons into our custom Fontastic font
  29. 0:41How to update a Fontastic font locally when the icons have changed
  30. 1:55How to replace Flexslider icons with our own custom icons
  31. 1:47How to adjust Flexslider settings with some simple JavaScript
  32. 3:03How to change the size of the Flexslider next and previous icons
  33. 2:39How to adjust the position, color and shadow on the Flexslider next and previous navigation
  34. 2:35Moving the styles for our next icon from the browser to permanent code
  35. 2:03Styling our previous slideshow icon and troubleshooting spacing
  36. 0:35How to hide the text of an anchor element by using a fixed width
  37. 1:13Using negative margin to position our slideshow's previous icon
  38. 1:37How to adjust the position of the slider page navigation
  39. 0:43How to set Flexslider to not cycle automatically
  40. 2:49How to modify the look of the Flexslider pagination with CSS
  41. 0:43Overview of our strategy for overriding third party library CSS selectors
  42. 0:45Fixing some CSS errors introduced through sleep-deprived developer error
  43. 1:13How to change the spacing between Flexslider paging elements
  44. 2:51How to resume from this point (part 1, step 43)
  45. 2:37How to create multiple vertical columns for content using float and margin
  46. 1:53Using the float and margin strategy for our author image and snippet content
  47. 3:11How to use multiple floats to separate content into columns
  48. 1:59How to use the CSS "overflow" property
  49. 1:17Refining the margins for our snippet content
  50. 3:15Moving our snippet styles from the browser to permanent SASS rules
  51. 2:05How to add margin between grouped, floated elements
  52. 0:59Why it makes sense to apply CSS changes in the browser before committing them to code
  53. 2:35Reviewing how we added margin between snippets and making the CSS permanent
  54. 2:57The implications using absolute or relative units for content layout
  55. 1:39Testing variations in base font size with our layout and making corrections
  56. 1:17When it's better to use absolute units for sizing when dealing with layout
  57. 4:41How to set up Flexslider to work as a carousel
  58. 3:35How to set the width and spacing of our Flexslider carousel to fit the template
  59. 3:07How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation
  60. 0:49Modifying the colors in our carousel previous and next icons
  61. 3:05How to move an element outside of its container with the "left" or "right" CSS properties
  62. 2:35Moving our carousel CSS from the browser to our SASS
  63. 3:25How to simulate a hover state in the browser in order to style CSS
  64. 1:03Refining our carousel slideshow CSS to use SASS variables for common values

How to Work With Responsive Layouts

  1. 0:45Congratulations for rendering all of the elements in our mockup, and moving onto layout
  2. 3:11How fluid and fixed layouts worked before responsive design became more ubiquitous
  3. 3:19The limitations of maintaining a separate mobile site
  4. 2:41Variations in how clients will approach a responsive project
  5. 0:55What "mobile first" means in terms of business strategy
  6. 1:15What "mobile first" means in terms of design
  7. 2:15What "mobile first" means in terms of CSS
  8. 0:39Summary of which ways we can approach this project "mobile first"
  9. 2:25Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches
  10. 1:39How our footer will react to differences in browser size
  11. 0:49How we will code our footer CSS desktop-first and then compare with a mobile-first approach
  12. 2:05How to group elements with wrapper div tags for layout styling
  13. 1:35Reorganizing our CSS to work with wrapper elements
  14. 3:03How to use "float" to align elements to the right and left of the browser in a flexible way
  15. 0:43How moving around markup for layout can be an accessibility issue
  16. 1:57Using negative margin to align our footer elements
  17. 3:33Adjusting styles to collapse the footer into a single column
  18. 4:06Adding breakpoints to collapse our footer into a single column using "max-width"
  19. 1:41Adding a breakpoint to collapse our footer navigation
  20. 4:53How to convert desktop-first CSS to mobile-first CSS by switching to "min-width"
  21. 1:11Discussing how the "qualities" section should react responsively
  22. 2:01Adjusting the padding in our stacked hero sections
  23. 3:55How to bump an element out of the container box and center it above the content
  24. 1:53Adjusting the text position and layout in our "qualities" boxes
  25. 2:41When it makes sense to use relative units for width, and moving our CSS to our SASS files
  26. 3:37Making the relationships of our SASS values explicit with variables and equations
  27. 2:45Adjusting the margins within and around our icon box
  28. 4:33Aligning the icon boxes to the center and adding margin between them
  29. 0:37What we want our icon boxes to look like as the browser gets smaller
  30. 3:43How to figure out how the site's padding and overall layout should work from a mockup
  31. 1:25Adding the overall layout CSS to our "qualities" section
  32. 1:19Options for applying site layout styles to multiple elements
  33. 4:17 Setting up a SASS placeholder for full-browser layout styling with breakpoints
  34. 2:01Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be
  35. 3:17Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2
  36. 1:03Fixing the margin between the "qualities" title and the icon boxes
  37. 1:57How the "max-width" CSS property works
  38. 0:41Adjusting our icon box margin one last time
  39. 0:41How you can use these layout strategies for any grid of elements
  40. 3:38How to adjust a Flexslider carousel to work at different breakpoints
  41. 5:05Making our responsive carousel CSS permanent
  42. 2:39Adding a breakpoint to change the position of our carousel navigation on small screens
  43. 2:13How to generate CSS source maps in Compass, and reconnecting the source files in Chrome
  44. 1:29Adding a breakpoint to hide superfluous snippet content on smaller screens
  45. 2:31How to fix unexplained white space that forces horizontal scrolling
  46. 1:01How to remove the white border around the Flexslider slideshow
  47. 1:23Fixing horizontal scrolling issue created by our "snippet" carousel
  48. 2:17Adjusting our carousel to stretch across smaller browser windows
  49. 1:15Converting our carousel's "max-width" breakpoints to "min-width"
  50. 1:21How to hide Flexslider navigation in smaller browser windows
  51. 2:15Adjusting the styles of our alt hero section title to be responsive
  52. 1:35Adjusting the contact form CSS to be responsive
  53. 1:46How to use the CSS "whitespace" property to prevent text from wrapping to another line
  54. 1:51Re-ordering the content in our template to match the mockup
  55. 3:37Discussion of how we plan to adjust the header for different viewport sizes
  56. 3:09Adding the HTML and CSS scaffolding for our top header section
  57. 3:23Positioning our top header elements in the browser
  58. 3:51Moving our top header CSS from the browser into our stylesheets
  59. 0:49How we want our top header to behave as the browser gets smaller
  60. 3:53Adjusting our header bottom to stretch across the entire browser and center its content
  61. 2:15Aligning the elements in the header bottom and adding a border

How to Work With Responsive Layouts, Part 2

  1. 0:55Removing extra padding from the header bottom section
  2. 3:55Adding responsiveness to our top header by adjusting CSS in the browser
  3. 1:17Moving our responsive header CSS from the browser to our SASS files
  4. 0:43Adding a breakpoint to stretch the logo the full browser width on small screens
  5. 0:55Why it's important to add extra padding for touch screens
  6. 0:45Making the menu in our header bottom responsive
  7. 1:07How to simulate mobile and desktop devices with Chrome DevTools
  8. 3:03How to use the "viewport" meta tag to tell the browser a site supports mobile devices
  9. 1:19How to test a site at different download speeds with Chrome DevTools
  10. 1:49How to see how media queries affect a site with the Chrome device simulator
  11. 2:39Styling our header bottom to be responsive
  12. 4:57When it makes sense to use "max-width" and converting header breakpoints to "min-width"
  13. 3:37Adjusting our slideshow CSS for smaller viewports
  14. 1:15Converting our slideshow breakpoints to "min-width"
  15. 1:38Evening out the vertical padding in our slideshow
  16. 5:03Reviewing our template at different browser sizes for possible touch-ups
  17. 2:51How the "z-index" property works and how layers are positioned by default
  18. 1:53Why z-index poses issues as templates get more complex, and how to solve those issues
  19. 1:11How to test if z-index will solve a layer ordering issue
  20. 1:23Fixing the layering issue with our selectize dropdown
  21. 1:41Talking through how to create a rounded drop-shadow under a rectangular element
  22. 4:27How to add a curved drop shadow to an element with CSS
  23. 0:45Moving our curved drop shadow CSS to SASS to make the changes permanent
  24. 0:55Basic approaches to testing a template in multiple browsers
  25. 2:29Reviewing our template in the Firefox browser for Mac
  26. 1:03Reviewing our template in Chrome for Windows
  27. 1:01Reviewing our template in Firefox for Windows
  28. 0:55Overview of strategies for testing a site on multiple versions of Internet Explorer
  29. 1:43Reviewing our template in Internet Explorer
  30. 0:37 How cross-browser reviews typically work with completed sites

Optimizing Front End Performance and Adding Automation

  1. 1:33What we've covered in terms of front end performance, and what we'll cover now
  2. 0:57How to open the network dialog in DevTools and disable local caching
  3. 1:13Why front end performance (i.e. speed) is important
  4. 1:41How to view the number of downloaded files and their sizes in the Chrome DevTools network tab
  5. 1:05Why the site loading speed on your machine might not reflect an average experience
  6. 1:01How download size is often not the biggest factor in site loading speed
  7. 0:40How the "DNS Lookup" bar works in the DevTools network tab
  8. 0:44How the "Initial connection" bar works in the DevTools network tab
  9. 0:35What "Round Trip Time" (RTT) and "handshake" mean in the context of downloading files
  10. 1:33How the "Request sent" and "Waiting (TTFB)" - Time To First Byte - bars work in DevTools
  11. 0:31What we can and can't do to optimize the loading time of our index.html file
  12. 0:33How to sort files in the DevTools network tab to reflect actual download order
  13. 1:01Reviewing the loading time for our jquery.js file
  14. 3:19How the browser opens multiple connections to download files in tandem and sequentially
  15. 1:53Summary of where load time comes from for downloaded files
  16. 1:23How we can reduce the size and number of files through minification and concatenation
  17. 1:43What the DOM is and what "DOMContentLoaded" time means
  18. 0:43What an empty bar might mean in the Chrome DevTools network tab
  19. 1:55How and why to research internet speeds in other parts of the world
  20. 3:57How to determine Round Trip Time (RTT) to a site from other parts of the world
  21. 1:17Why we're going to concatenate and minify our files, and why we'll use automation to do it
  22. 1:55How to concatenate multiple JavaScript files manually and why it's a bad idea
  23. 2:45How to minifiy code by hand, what minification does and why it's tough to debug
  24. 1:57Why we would swap out concatenated, minified code for separate files while testing
  25. 1:17How automation can save time, reduce error and get a team on the same page
  26. 0:37Why we're using the Grunt automation tool for this project
  27. 2:14How to install Grunt
  28. 2:57How to install a project-specific version of Grunt
  29. 1:31How to install a Grunt extension for concatenating files
  30. 2:31How the different parts of a Gruntfile.js file work
  31. 3:09How to configure grunt-contrib-concat in our Gruntfile.js
  32. 0:51How to run the default Grunt configuration on the command line
  33. 1:11How to create Grunt task variations and run specific ones when our task runs
  34. 1:19Adding our JavaScript files to our Grunt concatenation configuration
  35. 1:43The advantages of putting JavaScript at the end of the body tag instead of the beginning
  36. 1:41Why to move custom JavaScript to a separate file, and why JavaScript file load order matters
  37. 1:07Wrapping up the configuration of our JavaScript concatenation and generating a concatenated file
  38. 1:27Setting up the Grunt configuration to concatenate our CSS files
  39. 0:51Reviewing the performance effect of concatenating our JavaScript and CSS
  40. 0:31How minifying CSS works
  41. 3:03How to minifiy JavaScript with Grunt and Uglify
  42. 3:07How to minify CSS with Grunt and the grunt-contrib-cssmin plugin
  43. 0:27Reviewing our performance gains from concatenating and minifying both JavaScript and CSS
  44. 6:43How to use grunt-injector to add JavaScript and CSS file references in your template on demand
  45. 1:57How to add a second configuration to a Grunt plugin
  46. 1:12How to add separate dev and production tasks in our Gruntfile.js
  47. 3:27How to fix our concatenated CSS by removing our concatenation separator setting
  48. 3:35Comparing the performance of our optimized site with our pre-optimized version
  49. 1:31How and why to make our paths relative by configuring the grunt-injector plugin
  50. 2:03Why browser prefixing CSS manually or with Compass is problematic
  51. 2:39How to use the Grunt Autoprefixer plugin to add and update browser prefixes in our CSS
  52. 3:26How to configure grunt-autoprefixer, and comparing our CSS before and after prefixing
  53. 0:19Switching back to development mode by running Grunt

Improving Web Accessibility

  1. 3:33How to resume from this point (part 1, step 45)
  2. 1:59What "accessibility" means in terms of the web
  3. 2:49Section 508 versus WCAG and how to justify spending resources on accessibility
  4. 3:51How to use the WCAG Quick Reference to improve your understanding of accessibility
  5. 0:43How web accessibility is a continuum
  6. 2:39How to test support of keyboard navigation on your site
  7. 1:45How to make custom radio buttons accessible with the keyboard
  8. 4:24How to allow users to skip to the main content of a page with the keyboard
  9. 2:25How to use Chrome's Accessibility Developer Tools to audit a site for accessibility
  10. 1:59Adding labels to our search form for accessibility and hiding them
  11. 4:01Adding labels to our contact form and hiding them with a SMACSS state
  12. 0:41Adding an "alt" attribute to our logo
  13. 0:53About using meaningful images as CSS backgrounds and accessibility
  14. 2:45How contrast ratios and WCAG ratings work
  15. 1:13Reviewing links with unclear link text
  16. 1:27How to run an accessibility audit with Firefox's AInspector Sidebar add-on
  17. 2:13What ARIA is, how "landmarks" work and adding a "main" landmark
  18. 3:15How and why to use the "navigation" role on HTML "nav" elements
  19. 1:49Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles
  20. 2:01How and why to add ARIA landmark labels
  21. 1:01How to add a language code to your web page
  22. 1:17Reviewing our other "Styles / Content" accessibility audit checks
  23. 0:47Reviewing our AInspector Sidebar "Links" accessibility violations
  24. 2:35How to add text in a link for accessibility but hide it from view
  25. 1:27Fixing an accessibility issue with our hidden labels
  26. 2:29How to use the "fieldset" and "legend" HTML tags for input groups
  27. 2:21Wrapping up our accessibility audit review

Congratulations and Bonus

  1. 1:51Congratulations on completing "Front End Development!"
  2. 3:25Bonus: How to add a favicon to your site

Upgrading to Drupal 8


  1. 2:05Welcome to "Upgrading to Drupal 8"
  2. 6:37Whirlwind tour of Drupal 8's user experience improvements

Installation and Theme Improvements

  1. 3:21Comparing Drupal 7 and Drupal 8's installation process
  2. 0:35Making minor adjustments to the interface to more accurately compare Drupal 7 and 8
  3. 2:05Demonstrating Drupal 8's responsive home page
  4. 2:29Comparing Drupal 8's responsive administrative toolbar with Drupal 7
  5. 1:07Reviewing Drupal 8's changes to Bartik's default color scheme and logo
  6. 3:32A review of the Drupal 8 home page blocks and views
  7. 1:19Reviewing IE support changes and CSS and JavaScript aggregation settings in Drupal 8
  8. 2:09Comparing theme settings in Drupal 7 and Drupal 8
  9. 2:37Comparing Drupal 7 and Drupal 8's included themes
  10. 1:01Reviewing changes to the "Seven" theme in Drupal 8 and why the overlay was removed
  11. 1:47About Drupal 8's administrative style guide

Content Authoring

  1. 2:17Comparing menu administration in Drupal 8 and Drupal 7
  2. 1:23The benefits of using a drop-down button
  3. 3:43A tour of Drupal 8's Wysiwyg
  4. 2:17Comparing the secondary options when creating content in Drupal 8 and Drupal 7
  5. 0:27Improvements to form buttons in Drupal 8
  6. 1:33Comparing the content preview tool in Drupal 7 and Drupal 8
  7. 0:37 Differences between the content management page in Drupal 7 and Drupal 8
  8. 1:03Demonstration of in-place editing of content in Drupal 8
  9. 1:37Overview of default text formats in Drupal 8 and Drupal 7
  10. 2:55How to configure the Wysiwyg in Drupal 8
  11. 1:53Comparing text format filters in Drupal 7 and 8

Views and Configuration Management

  1. 2:07Exploring the minor differences between the Views module in Drupal 7 and 8
  2. 0:53How responsive tables work in Views in Drupal 8
  3. 3:01How to use the configuration management in Drupal 8 to backup and restore configuration
  4. 0:40A simple procedure for storing Drupal 8 configuration changes in version control

Content Type Management

  1. 2:19Why parts of the content type "manage fields" interface has been moved to "manage form display"
  2. 2:29Overview of new field types in Drupal 8
  3. 2:37Comparing the workflow for adding and editing fields in Drupal 7 and Drupal 8
  4. 0:51How responsive tabs work in Drupal 8
  5. 0:41Comparing content type settings in Drupal 7 and 8
  6. 1:27How the "manage form display" content type settings work in Drupal 8
  7. 1:11Comparing the "manage display" content type settings in Drupal 8 and 7
  8. 1:21How view modes work in Drupal 7 and Drupal 8
  9. 1:05How and why to create a new view mode in Drupal 8
  10. 0:31Reviewing additional minor differences in field display settings in Drupal 8
  11. 1:31How "form modes" work in Drupal 8 and how to add and edit them
  12. 0:43Comparing how to add existing fields to content types in Drupal 7 and Drupal 8
  13. 5:04How to rewite the output of a content (node) page using Views

Changes in Comments, Blocks and Contact Forms

  1. 1:59Comparing comment settings in Drupal 8 and Drupal 7
  2. 1:07How "comment types" work in Drupal 8
  3. 0:41How to hide the comment "subject" field in Drupal 8
  4. 0:29Cleaning up our added comment field and how field "storage settings" works
  5. 0:27Comparing comment management in Drupal 8 and Drupal 7
  6. 0:35How to view a list of managed files in the Drupal 8 interface
  7. 1:41Comparing the block layout interface in Drupal 7 and Drupal 8
  8. 2:29Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7
  9. 1:17Comparing adding custom blocks and block types in Drupal 8 and Drupal 7
  10. 4:13Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module
  11. 1:40Comparing the Webform module to the Drupal 8 form builder

User Management

  1. 2:31Comparing the account settings in Drupal 7 and Drupal 8
  2. 1:31Comparing user fields in Drupal 8 and Drupal 7
  3. 0:29Where to find "IP address blocking" in Drupal 8
  4. 0:41How the admin role works in Drupal 8 and updated navigation for permissions and roles
  5. 3:09Overview of permission changes in Drupal 8
  6. 1:17Comparing user shortcut management in Drupal 7 and 8
  7. 1:15Comparing taxonomy management in Drupal 7 and 8

Modules That Have Been Added, Removed, Moved or Modified

  1. 2:01Reviewing differences in the modules listing page and module disabling process
  2. 1:57Changes to the Actions, Trigger, Tracker, Automated Cron, Ban and Blog modules
  3. 4:01How the Breakpoint and Responsive Image modules work in Drupal 8 and how to view breakpoints in the UI
  4. 1:43Changes to CKEditor, Configuration Manager, Custom Block and Dashboard on the module page
  5. 0:25Changes to File, Image and List on the modules listing page
  6. 1:01How multilingual modules have been adjusted on the modules listing page in Drupal 8
  7. 1:15Why the Open ID and Overlay modules were removed in Drupal 8
  8. 1:05Why the PHP Filter module was removed in Drupal 8
  9. 1:03Why the Poll module was removed and what the Responsive Images and Text Editor modules do
  10. 1:05Demonstration of how the Tour module can provide contextual step-by-step help in overlays
  11. 0:33The difference between the Views and Views UI modules in Drupal 8
  12. 1:01What the "Core (Experimental)" section is for and how Inline Form Errors works
  13. 0:51What the Migrate and Migrate Drupal modules are for
  14. 0:55How the Datetime, Link and Telephone modules work
  15. 0:29What the "Web Services" modules are for

Site Configuration

  1. 1:09Comparing the "Site information" and "Cron" admin pages in Drupal 8 and Drupal 7
  2. 2:23Reviewing improvements to caching and performance in Drupal 8
  3. 0:19Comparing the "Logging and errors" page in Drupal 7 and Drupal 8
  4. 2:53How to avoid overriding important changes with importing configuration in Drupal 8
  5. 1:21Comparing changes to the file system settings in Drupal 7 and Drupal 8
  6. 1:55Comparing changes to the image styles interface in Drupal 8 and 7
  7. 0:23Comparing the Image Toolkit interface in Drupal 7 and 8
  8. 2:15Comparing search configuration in Drupal 7 and Drupal 8
  9. 0:47How clean URLs work in Drupal 8
  10. 1:41How date and time formats have been improved in Drupal 8
  11. 0:59How the "Trusted host settings" option works

Translation Workflow Changes

  1. 2:39How to import a language and translate the interface in Drupal 7 and Drupal 8
  2. 2:33How to translate content in Drupal 7 and Drupal 8

Build Your First Drupal 7 Web Site

Introduction to Our Project and Reviewing Mockups

  1. 1:49Updates to the "Build Your First Drupal 7 Web Site" collection
  2. 3:15Introduction
  3. 2:23Review of the resources sent by the client
  4. 3:11Review of the home page mockup
  5. 4:26Review of the calendar, contact us and guide page mockups
  6. 0:45Recap of files in our client resource pack
  7. 4:44How to map a mockup to existing Drupal elements
  8. 3:03How to use the administration menu and breadcrumbs to get around
  9. 4:32Overview of the Appearance page, how theme settings work and how to upload a new logo
  10. 2:02How to hide the site name in the header
  11. 4:02How to work around the disappearing logo bug
  12. 1:50Chapter review and challenges for the "Introduction to Our Project and Reviewing Mockups" chapter

How to Create and Edit Content

  1. 2:16What this chapter covers and how to change the site name
  2. 6:31How to add a new page and overview of settings on the "add content" form
  3. 2:19What "node" means and how the notifications area works
  4. 3:14How to edit a piece of content
  5. 3:09How to set the default home page
  6. 4:16How to add content as a menu item and how weight works
  7. 1:44How URL aliases work
  8. 1:47Finishing adding the About Us page
  9. 1:15How to change the position of a menu item with weight
  10. 5:06Review of the Contact Us form mockup and how the Module listing page works
  11. 1:14How to find a core module that you need and enable it
  12. 2:09Chapter review and challenges for the "How to Create and Edit Content" chapter

How to Work With Menus, Modules and Webform

  1. 3:57How to work with the menu listing page
  2. 1:24How to work with the menu "list links" page
  3. 4:07How to enable, edit and move a menu item
  4. 1:40How menu sorting impacts menu item weight
  5. 4:53How to find help and configure the Contact module
  6. 2:41How to disable and uninstall a module
  7. 4:32How to use the Update Manager module to install a module
  8. 2:53How to set up the initial webform container
  9. 6:01How to add an input to a webform, overview of component types and input options
  10. 4:01Adding an email input and how machine names and tokens work
  11. 1:54Chapter review and challenges for the "How to Work With Menus, Modules and Webform" chapter

How to Work With Content Types and Fields

  1. 4:04Finishing up the contact us webform
  2. 3:29How to create a single item checkbox (sign up for newsletter) with Webform
  3. 2:24Testing our contact form as logged in and logged out users (anonymous and authenticated)
  4. 6:28How to view webform submissions and set up e-mail templates
  5. 2:02How content types work
  6. 3:46How to disable "published by" information and a review of the content type edit form
  7. 4:05How to add a new content type
  8. 5:38How fields work and how to use the field edit form to change a field title
  9. 3:56How to add a new field to a content type
  10. 3:23Adding the rest of the fields we need for the Tour content type
  11. 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

  1. 3:06Previewing our "add tour" form and introduction to the Pathauto module
  2. 3:49How to install module dependencies
  3. 4:27How to change automated URL alias settings for a content type with Pathauto
  4. 1:14How to find a piece of content that doesn't have a menu item
  5. 4:28How to update URL aliases after a pattern change with Pathauto
  6. 2:00How to work with shortcuts in the shortcut bar
  7. 5:28What the Views module is for and how to install it
  8. 1:32A deeper explanation of the Views module and the view listing page
  9. 3:56Filling out the "add view" wizard
  10. 5:59Overview of the "add view" settings page and how a view "display" works
  11. 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

  1. 3:05How to add a new field to a view
  2. 3:31How to set the label, wrap HTML and set default text for a field in a view
  3. 2:57How to rewrite the output of a field to include other fields
  4. 1:39How to edit a view from the view display
  5. 2:22Adding our remaining view fields in quick succession
  6. 3:22How to adjust the sort order of content in a view
  7. 4:53How to deal with module installation errors and install the Date module
  8. 4:58How to add and configure a date field
  9. 4:05How to work with the pop up calendar and extend the year range
  10. 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. 1:17How to delete a field from a content type
  2. 4:30How to deal with broken views handlers and restore unsaved view changes
  3. 3:52How to modify date formats both globally and in a view
  4. 2:42How to sort view fields and fix broken sort handlers
  5. 5:00How to change view menu settings and add a header
  6. 4:41How to add a date-based filter to a view
  7. 1:53How to delete a piece of content and modify multiple pieces of content at the same time
  8. 3:17Reviewing our guide data and adding another content type
  9. 1:02A brief explanation of taxonomy
  10. 2:11How to add a taxonomy vocabulary with terms
  11. 3:44How to add a taxonomy term reference field to a content type
  12. 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

  1. 4:53Updating the guide automatic alias pattern and adding the guide data
  2. 5:41How to share a field between two content types and why you would want to
  3. 3:39Updating our calendar view to use a new field
  4. 1:31Overview of the multiple ways to link a Views field to other related content
  5. 2:38Overview of development (dev) versions of modules and installing the References module
  6. 3:27Adding a node reference field and updating our content
  7. 3:06Updating our calendar view to use the new node reference field
  8. 4:08How to add an autocomplete (free tagging) field to a content type
  9. 2:16How to use an autocomplete field
  10. 2:02Quickly removing a field and updating our view to use a different field
  11. 2:08Chapter review and challenges for "How to Use Term and Node Reference Fields" chapter

How to Work With Blocks and Permissions

  1. 2:00A comparison of our current site to the mockups
  2. 4:30What blocks and regions are, and how to use the blocks administration page
  3. 2:01How to hide the user login and "Powered by Drupal" blocks
  4. 3:40How to add a "log in" menu item to the user menu
  5. 2:04How to enable a menu block and hide a block title
  6. 1:28How to hide the secondary menu (user menu)
  7. 5:20What permissions are and how to modify them
  8. 4:40How to configure search and how cron runs work
  9. 2:22How to add a new user
  10. 1:58How roles work and how to add a new role
  11. 1:43Chapter review and challenges for "How to Work With Blocks and Permissions" chapter

Overview of Permissions and Text Formats

  1. 1:24Review of how roles and permissions work
  2. 1:15What each permission does, from the Block to Menu modules
  3. 5:44What each Node or content-related permission does
  4. 2:52What each permission does, from the Path to System modules
  5. 3:37What each permission does, from the Taxonomy to Views modules
  6. 2:56What each Webform permission does, and a review of our Guide role
  7. 1:49Different methods for testing the site as another user
  8. 3:36How to use the Masquerade module to act like another user
  9. 2:28Adding a piece of content as a Guide
  10. 4:00How text formats work
  11. 1:34Chapter review and challenges for "Overview of Permissions and Text Formats" chapter

Configuring Text Formats and Setting Up a Wysiwyg

  1. 3:58Review of the text format settings page and how filters work
  2. 1:34How to re-order text format filters and why order matters
  3. 2:54How to configure text format filters
  4. 2:11How to add a new text format
  5. 3:58How to configure permissions for text formats
  6. 2:05What Wysiwygs are and how to install the Wysiwyg module
  7. 1:03The problems with Wysiwygs and possible alternatives
  8. 2:39How libraries work
  9. 2:38How to install the TinyMCE library for the Wysiwyg module
  10. 3:05How the Wysiwyg "Basic settings" and "Buttons and Plugins" options work
  11. 3:20How the Wysiwyg "Editor appearance" and "Cleanup and output" options work
  12. 3:13How the Wysiwyg "CSS" settings work and our Wysiwyg in action
  13. 1:57Chapter review and challenges for "Configuring Text Formats and Setting Up a Wysiwyg" chapter

Working With Custom Blocks and Image Styles

  1. 3:43How to add a custom block
  2. 2:41The difference between "URL" and "path" and how to use a "Show on specific pages" input
  3. 2:08How to modify the visibility settings for a block
  4. 0:50Seeing our new block in action
  5. 4:33How to deal with shared field conflicts (unlimited vs. limited values)
  6. 6:15How to add and configure an image field
  7. 1:48Previewing the display of our image field
  8. 1:38How to hide a field label on a node display page
  9. 3:26What image styles are and a review of existing image styles
  10. 3:16How image style effects work and how to add a new image style
  11. 1:45How to link up an image style with an image field
  12. 1:50Chapter review and challenges for "Working With Custom Blocks and Image Styles" chapter

How to Work With CSS

  1. 3:24A recap of what we have covered so far, and what is to come
  2. 1:35How to change the order of fields on the node display page
  3. 1:10How to install Firebug in the Firefox browser
  4. 2:37How to use Firebug to inspect any element
  5. 3:38How to manipulate CSS with firebug
  6. 4:00How to find a good selector and apply styles to a specific element
  7. 3:29How to rapidly experiment with CSS in Firebug
  8. 3:30How to install the CSS Injector module and find most module configuration pages
  9. 4:16How to add a custom CSS stylesheet to certain pages based on path with CSS Injector
  10. 1:53How to use Firebug to learn more about what an element is
  11. 2:36How to hide breadcrumbs (or any other element) using CSS
  12. 1:52Chapter review and challenges for "How to Work With CSS" chapter

Troubleshooting Module Installation and Configuration

  1. 3:24Updating other guide nodes and using alt and title attributes for an image field
  2. 2:07Review of what we need to complete our template
  3. 2:10How to install the Media module
  4. 3:22How to find a module dependency when it is not its own module project
  5. 2:46Where to find information about a newly installed module
  6. 1:41How managed and unmanaged files work, and the benefits of using the Media module
  7. 3:32How to upload an image with the Media module and use it as a background
  8. 4:54What to do when CSS changes aren't being applied
  9. 3:17What to do when you get a fatal error and how to clear all caches
  10. 3:57How to search for an error in Google and tips for reading a long issue
  11. 1:42The difference between module development versions and official releases
  12. 2:04Chapter review and challenges for the "Troubleshooting Module Installation and Configuration" chapter

Updating Modules and Manipulating CSS

  1. 2:27How to check for module updates from your site
  2. 3:36How to update a module with the Update Manager
  3. 1:31How and why to clear Drupal's caches
  4. 4:10How to update a module manually
  5. 3:43How to fix our issue by reading the module help page
  6. 1:36Summary of the steps we took to fix module errors
  7. 3:10How to ensure image URLs work on a remote server
  8. 3:30How to remove the background color of main menu tabs
  9. 5:41What to do about disappearing CSS properties in Firebug
  10. 2:12How to change the font size of the main menu items
  11. 2:19Chapter review and challenges for the "Updating Modules and Manipulating CSS" chapter

More CSS Updates and Troubleshooting Text Formats

  1. 6:12How to adjust CSS in the footer using Firebug for testing
  2. 3:03Adding and troubleshooting our footer CSS changes with CSS Injector
  3. 1:47Finishing up our footer margin changes
  4. 4:45How to add a repeating background image to the footer
  5. 3:30Adding a new user with a new role
  6. 2:23Giving our new user permission to add, edit and delete pages
  7. 2:17How to fix "This field has been disabled because you do not have sufficient permissions to edit it"
  8. 2:58How content and text formats are related, and how to deal with placeholder text
  9. 3:37How to integrate the Media module with a WYSIWYG
  10. 2:14Chapter review and challenges for the "More CSS Updates and Troubleshooting Text Formats" chapter

How to Evaluate Modules and Install IMCE

  1. 4:32How to turn the Media browser Wysiwyg plugin on
  2. 2:47How to troubleshoot permissions issues with a module
  3. 2:33How to find solutions on by using Google and reading comments first
  4. 4:28How to assess the health of a module by reviewing the module project page
  5. 3:21How to learn more about what a module does by reading the module project page
  6. 2:21Viewing a demo of IMCE and installing the IMCE module
  7. 1:58Overview of the IMCE main configuration page
  8. 4:31How an IMCE profile configuration works
  9. 1:27Comparing two IMCE configurations
  10. 1:38How to set up a new IMCE configuration profile
  11. 1:52Chapter review and challenges for the "How to Evaluate Modules and Install IMCE" chapter

How to configure IMCE and Wrap Up Our Project

  1. 4:59How to associate IMCE profiles with user roles and upload an image
  2. 5:04How to embed an image in a Wysiwyg with IMCE
  3. 4:10Why styles sometimes display properly in a Wysiwyg but not when viewing the content
  4. 1:56Overview of two solutions to the Wysiwyg style inconsistency issue
  5. 2:57Overview of how to set up a Wysiwyg to use a drop-down selector for CSS classes
  6. 3:05How to configure the styles available in the Wysiwyg
  7. 0:57How to add a class to an element in a Wysiwyg with the "font style" plugin
  8. 1:18How to add easy-to-read aliases for class names in a Wysiwyg
  9. 3:20How to troubleshoot line break or paragraph problems in the Wysiwyg
  10. 1:36Comparing our home page to the mockup
  11. 4:10How to set a custom 404 "page not found" error page and navigate up paths
  12. 1:38Adding a missing piece of content
  13. 4:10Why it's a good idea to review all the settings when creating a piece of content
  14. 1:44Chapter review and challenges for the "How to Configure IMCE and Wrap Up Our Project" chapter
  15. 3:37Congratulations

Advanced Site Building in Drupal 7

Welcome to Advanced Site Building

  1. 1:52Welcome to "Advanced Site Building"
  2. 3:34About our project and how project roles work
  3. 4:11What a "site builder" is and the powerful tools they work with
  4. 1:22What wireframes are and where to find them in our resource pack
  5. 2:48Identifying the components in our blog home page wireframe
  6. 2:47Reviewing our blog post and review page wireframes
  7. 0:52About our step-by-step approach
  8. 6:12How to set up our Drupal installation with Acquia Dev Desktop

How to Set Up Administration Tools to Speed Up Productivity

  1. 1:39About the administration modules we'll be using
  2. 3:28How to install a module the traditional way and configure the Administration Menu module
  3. 6:08How to install a module using Drush, and how we approach installing modules in this series
  4. 1:14How to use the Coffee module
  5. 1:17How the Navigate module works
  6. 2:54How the Backup and Migrate module works and creating our first backup (Backup 1)
  7. 1:32How to restore a Backup and Migrate backup
  8. 2:03How Backup and Migrate works with cron and cache tables
  9. 3:56How the Module Filter module works
  10. 2:31How the Module Instructions module works
  11. 0:39About the Admin module and why we're waiting to install it
  12. 1:54How to set up some basic visual branding
  13. 0:57A quick summary of our work and backing up (Backup 2)

How to Configure Content Type Settings and Splitting Fields Between Types

  1. 1:56How to determine when to split up content into two content types
  2. 3:43How to set sane default publishing settings for a content type
  3. 1:36Why you would want to share existing fields between content types
  4. 4:35How to set up an image field and why to use individual folders for media fields
  5. 3:05How to choose a good, basic URL scheme and adding our first product
  6. 1:26About the special role of the first created user (user 1)
  7. 1:39Setting up our "review" content type
  8. 2:39How to install module dependencies and installing the Entity Reference module
  9. 2:19The difference between a field and a field instance, and setting up an entity reference field
  10. 1:44About the Fivestar and Voting API modules
  11. 4:04How to add a fivestar field and configure voting tags
  12. 4:37Adding our additional fivestar fields and why site building can sometimes feel tedious
  13. 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. 1:07Creating a backup and why things are going to start getting interesting (Backup 3)
  2. 3:23An overview of the two methods to group fields in a display: view modes and the views module
  3. 2:26The 4 more common methods of positioning content on a page
  4. 0:58Quick recap of the 4 methods of positioning content
  5. 3:16How to choose the correct view mode for a particular context
  6. 2:33Overview of the Display Suite modules and which ones we should enable
  7. 2:07How to enable editing view modes and adding a custom view mode with Display Suite
  8. 2:06How to enable a custom view mode and test it out
  9. 2:09How to hide the 'submitted by' information and node title by setting a Display Suite layout
  10. 1:43How to add a field with custom content to a view mode with Display Suite
  11. 1:48How to choose an image style for a particular context
  12. 2:28When to create a new image style and how to name it
  13. 0:38Creating a backup and nice work (Backup 4)
  14. 3:36How to display content in a sidebar within the content region using Display Suite
  15. 1:43How the 'region to block' feature works and what we mean by 'region'
  16. 6:10How to display fields in blocks that can be enabled in theme regions using Display Suite
  17. 1:56Removing the block title, label and shrinking our image style
  18. 1:26Making another backup (Backup 5)

How to Use the Context Module for Positioning Content

  1. 2:03The limitations of the default blocks listing page and what the Context module does
  2. 1:25Overview of the modules that come in the Context package and installing Context
  3. 4:00How the Context module works and how to create a context
  4. 1:04Why it might make sense to use Context for positioning all blocks
  5. 5:34How to use Context instead of the default blocks configuration page
  6. 0:36Creating a backup before diving into Panels (Backup 6)

How to Use Panels for Positioning Content

  1. 1:11Why we're looking at so many ways of doing the same thing
  2. 2:54About your responsibilities as a site builder, and thinking in terms of boxes
  3. 1:17Why Panels is so powerful and potentially intimidating
  4. 2:40How to install Panels and what the Page Manager module does
  5. 4:22How variants work in Panels
  6. 3:46How to use the Panels builder layout to understand regions, rows, columns and canvas
  7. 1:51How to add a panel pane that contains a full node
  8. 2:13How to add a pane for a node field and what we still need to complete our Panels layout
  9. 0:55How to modify a context with the Context module
  10. 1:52How we will approach aligning the title with the content sidebar in Panels
  11. 2:28How to install the Meta tags and Token modules
  12. 4:29Attempting to display the title of our panel by using the node title pane (and failing)
  13. 1:57Why using the page title Panel pane doesn't work for our panel page title
  14. 2:07How to add custom content to a panel pane
  15. 3:03How to inspect an HTML element to find out why it looks different than we want it to
  16. 0:42A pre-exploritory backup (Backup 7)
  17. 4:28Comparing Panels and Display Suite side-by-side

How to Import Content With Feeds

  1. 1:31About what's coming up next (Feeds and Views)
  2. 1:32About what the Feeds and Migrate modules accomplish
  3. 2:56About the Feeds modules, alpha releases and why the UI (user interface) is in a separate module
  4. 2:47What to do when there isn't a recommended module release, and about development releases
  5. 3:13How to structure a CSV (comma-separated values) file for Feeds and a bit about our import
  6. 4:47How to import nodes with the Feeds module (basic settings and importer)
  7. 6:01How to import nodes with the Feeds module (parser and processor settings)
  8. 2:02How to import nodes with the Feeds module (mapping title, body and image)
  9. 2:32How to import nodes with Feeds and undo our import
  10. 2:26Setting up our node images in our files directory and what we need to rewrite an image path
  11. 2:03How to install the Feeds Tamper module
  12. 5:01How to use Feeds Tamper to rewrite the path of an image so it imports properly
  13. 2:47Setting up our product review Feeds importer
  14. 3:36Setting up our mappings for the product review Feeds importer
  15. 2:24Updating our product review nodes manually
  16. 2:01How to bulk publish nodes and strategy for importing content for site building
  17. 0:39Backing up our project (Backup 8)

Advanced Views

  1. 3:10Why to display a single piece of content with Views, installing Views, and why we're building the same view 3 times
  2. 5:29How to group views displays, and how to decide what entity to base a view on
  3. 1:46How to fill in the views wizard to create a block
  4. 1:51How contextual filters work in the Views module
  5. 2:27How to add a views contextual filter for the node currently being viewed
  6. 1:23How to preview a view with a contextual filter
  7. 3:48How to display a full node in a views block
  8. 1:09Why to disable a block even when it's not visible, and displaying a block only for certain node types
  9. 1:37How to display a block for certain node types using Context
  10. 2:30Comparison between using Context and the default blocks configuration workflow
  11. 2:39The difference between our two views and filling out the views wizard
  12. 1:43How relationships work in Views and how to add a referencing entity relationship
  13. 2:49How to create a contextual filter with a relationship in Views
  14. 2:27How to use fields or rendered entities when using a relationship in Views
  15. 0:53Enabling our product-based block with Context
  16. 1:49How to hide a block title using the Context module and why it's a bad idea
  17. 1:38How to hide a Views block title
  18. 0:56About how we're going to rebuild these views using fields instead of a view mode
  19. 5:44How rebuilding our review-based view using fields adds complexity
  20. 2:16How to rebuild our product-based view to use fields

Where Display Modules Overlap and URL Strategy

  1. 0:32Backing up our work (Backup 9)
  2. 2:25Where Panels, Views, Display Suite and Context overlap in functionality
  3. 5:22Overview of options for displaying blocks in sidebars (Panels, Views, Display Suite, Context)
  4. 3:23How to use Mini-Panels to create one block that includes all our global blocks
  5. 2:00How to position a Mini-Panel block using the Context module
  6. 2:24How and why to hide PHP errors with the "Logging and errors" settings
  7. 1:30How to disable a view and removing blocks using Context
  8. 1:35Why ordering blocks across multiple contexts is tricky, and what we're about to do
  9. 2:33How we will approach creating an exception for a site-wide context
  10. 2:38How to set good default URL alias patterns and installing the Pathauto module
  11. 1:31Why it's important to establish a URL alias strategy before launching a site
  12. 1:33How to bulk update the URL aliases of existing nodes and how the Global Redirect module works
  13. 2:09How to use multiple conditions in a context and exclude certain paths
  14. 1:02Adding our mini-panel block back in through the "review page" context

How to Work With User Fields and Import Users

  1. 0:25Backing up our work (Backup 10)
  2. 2:07About the views-based blocks we're about to build
  3. 2:35How to add a textual bio field to a user
  4. 3:38How to install the Link module and configure a link field
  5. 2:30The problem with using Feeds with user images, and adding a user avatar
  6. 3:15Setting up our user image field
  7. 4:05How to use an image field as the user avatar with the User Picture Field module
  8. 0:56Hiding our default user avatar and why we did this switch again
  9. 3:14Reviewing our settings for our user feeds importer
  10. 3:17Setting up our mappings and tamperings for our user feeds importer
  11. 2:34Importing our users and moving our user images over

Formatting a Blog Entry Page

  1. 0:38Backing up our work (Backup 11)
  2. 3:15When to use the core blog module, and when to create your own from scratch
  3. 1:50Reviewing our blog content structure in a CSV file
  4. 3:11Creating our basic blog entry content type
  5. 6:03Adding a 'tags' field and image field to our blog entry content type
  6. 1:19Moving our blog images over to prepare for the feeds importer
  7. 2:09Verifying and adjusting our blog entry feeds importer settings
  8. 2:47Setting up our blog entry feeds importer mappings
  9. 2:30How to import multiple entries into a single field using the "explode" feeds tamper plugin
  10. 1:46Why to use multiple roles with fewer permissions, and why our import fails
  11. 1:41How to add a "blog contributor" role and assign roles to multiple users at once
  12. 1:37Importing and verifying our blog entry content
  13. 3:35Cleaning up the display of our blog entry display
  14. 2:01How we will approach building our "About the author" block
  15. 4:34How to set up basic settings and contextual filter for a node-based "About the author" view
  16. 3:28How to use Views "style settings" and displaying a username with a relationship
  17. 1:53Adding an image and bio field to our "About the author" view block
  18. 1:21How we will approach building the link to the author's web site
  19. 3:46How to rewrite the output of a Views field and combine multiple fields into one
  20. 4:48How to use hidden fields to add to other fields in Views and why you might need them
  21. 0:48Cleaning up an unneeded field and creating a backup (Backup 12)

Custom Formatters and Creating an "About the Author" Block

  1. 2:33How custom formatters work, our use case, and installing the Custom Formatters module
  2. 1:57How to create a custom formatter with the Custom Formatters module
  3. 1:26How to use the Entity Tokens module to get access to more components for custom formatters
  4. 2:15How to use a custom formatter in a view and on the user profile page
  5. 1:38Why using custom formatters is a good idea, and possible exceptions
  6. 2:27Positioning our "About the author" block using the Context module
  7. 2:03How to install and configure the Admin module to work alongside other administrative modules
  8. 0:44The difference between using Admin and Administration Menu for navigating the menu system
  9. 1:57How to use Admin's Context Editor to position blocks from multiple contexts with drag-and-drop
  10. 1:07Overview of our next steps including re-creating our "About the author" block with Panels
  11. 1:10How to use selection rules in Panels to use variant on a single node type
  12. 2:16How to add a second panel page variant with selection rules as part of the wizard
  13. 2:27How to rewrite a panel pane to display the author name in heading tags
  14. 3:31How to add a relationship in Panels and how modules share concepts
  15. 2:36Adding our bio and homepage link, and how relationship-based substitution names work in Panels
  16. 0:35How to disable a Panels variant
  17. 3:32How to re-create our "About the author" block using a user-based view
  18. 1:22How to get node information in a user-based view using a relationship
  19. 2:02Adding the additional bio, image and homepage link to our user-based view
  20. 3:09Positioning our new "About the author" view block and making a backup (Backup 13)

More Advanced Views (Aggregation and Relationships With Relationships)

  1. 2:10How to set up a "top tags" block using a taxonomy-based view
  2. 3:46How to add a relationship and turn on aggregation to allow a "count" field in our view
  3. 3:19How to display views fields inline and sort by aggregated count
  4. 0:58Positioning our "top tags" view block with Context
  5. 1:55How to set up an "Also by this author" view block
  6. 4:50How to use a relationship within another relationship in Views
  7. 4:00How to exclude the currently viewed node in a list of nodes using Views
  8. 1:47Positioning our "Also by this author" view block with Context
  9. 1:51How to create and position a "Latest blog entries" views block
  10. 0:29Backing up our work (Backup 14)

Using Views to Create a Blog Home Page and Creating a Quick Sub-theme

  1. 2:46Why it sometimes makes sense to not make components re-usable
  2. 2:28How to fill out the Views wizard to start building a blog home page
  3. 2:56How to make a Views title a heading, and why we're going to build a sub-theme
  4. 2:19How to add an image and body field to a blog post in a view
  5. 3:14Two approaches we can take to rewriting the "submitted by" section of a post using Views
  6. 0:59How to add and position the 'username' part of our 'submitted by' area with Views
  7. 4:15How to use a custom date format in a Views 'post date' field
  8. 1:06Wrapping up the creation of our custom 'submitted by' Views content
  9. 3:06How the 'Add comment link' Views field is inflexible and why we'll need another approach
  10. 2:35How to create a custom comment count and "Add comment" button in Views
  11. 1:27How to point a custom "Add comment" Views link to the comment form
  12. 1:37Cleaning up our blog view and backing up our work (Backup 15)
  13. 3:21How to create a Bartik subtheme (bare bones version)
  14. 2:31How to add our sub-theme CSS file, enable the theme and adjust its settings
  15. 1:51Summary of steps we took to create a sub-theme
  16. 3:12How to add color selector integration into our Bartik sub-theme
  17. 2:21How to add a CSS class to a Views field and float an image to the right
  18. 1:15How to add a CSS class to a Views row and how the 'clearfix' class works

Building a Slideshow Using Views Slideshow

  1. 1:00How we're going to approach building our slideshow
  2. 3:50How the Libraries and Views Slideshow modules work, and installing both
  3. 2:24How exposed filters and attachments work in Views
  4. 4:06About using multiple displays in a single view, and about our slideshow components
  5. 3:42How to set up the jQuery Cycle plugin for Views Slideshow
  6. 4:56About the "Cycle options" available in Views Slideshow
  7. 3:24How the pager and controls widget settings work in Views Slideshow
  8. 1:44What we need to do to complete our slideshow view
  9. 4:46Setting up our node display with custom image style for the slideshow
  10. 1:45How to add a views filter to show just nodes with images
  11. 4:02How to create a pager of thumbnail images in Views Slideshow
  12. 3:42How to display our Views Slideshow thumbnail pager inline
  13. 1:55How to add a border around an active pager item
  14. 2:27Fixing alignment, adding wireframe boxes and adding some spacing to our slideshow
  15. 4:53How to style a slideshow's next and previous buttons as images
  16. 3:26Why the Nodequeue module is so useful, and installing it
  17. 3:26How to create and modify a Nodequeue queue
  18. 2:00How to use a Nodequeue queue in a view to filter nodes
  19. 1:28How we're going to hide the slideshow on every page but the first one
  20. 4:10How to use a contextual filter to show a Views attachment display only on the first page
  21. 0:51Backing up our work (Backup 16)
  22. 4:04Overview of additional slideshow-related modules

Working With Comments

  1. 3:23The 3 levels of comment security
  2. 0:41About spam protection on other forms, including the user registration form
  3. 2:51What questions to ask clients (or yourself) before setting up commenting
  4. 2:29How to set up permissions to allow anonymous users to post comments and what's coming up
  5. 2:04What a CAPTCHA is and how to install the CAPTCHA module
  6. 4:23How to configure the CAPTCHA module and enable it on multiple forms
  7. 2:59How to configure an image CAPTCHA
  8. 0:56How to allow authenticated users to bypass a CAPTCHA
  9. 2:32What reCAPTCHA is and installing the module
  10. 3:25How to configure reCAPTCHA with public and private keys, and setting a theme
  11. 2:03How the "honeypot" and "timegate" methods work for preventing bot-generated spam
  12. 3:56How to install and configure the Honeypot module
  13. 1:12How to disable the user registration form
  14. 0:28Backing up our work (Backup 17)
  15. 1:59How Mollom works for spam protection, and installing the module
  16. 4:42How to configure Mollom
  17. 4:16How to configure Mollom to protect our comment form and running some spam tests
  18. 0:50A quick summary of the spam protection tools and techniques we used

PHP Programming Basics

Series Introduction and Your First PHP Script

  1. 3:02Welcome to PHP Programming Basics
  2. 5:14What programming is and tips for following along
  3. 1:59Overview of the AMP stack (Apache, MySQL, and PHP)
  4. 2:20How to install Acquia Dev Desktop on a Mac
  5. 2:42How to install Acquia Dev Desktop on Windows
  6. 2:55How to import a default Drupal site on Dev Desktop
  7. 4:06Setting up our example folder and creating our first web page
  8. 3:41Creating our first PHP script and the structure of a simple PHP statement

Working With Strings and Variables in PHP

  1. 1:46What an IDE is and the benefits of using one
  2. 2:12How to work with white space and comments
  3. 4:41How to work with strings
  4. 2:44How to use a variable
  5. 7:04How to work with string, number and boolean variables
  6. 5:56How to identify and fix common syntax errors
  7. 2:49How a PHP function is structured and how to use strstr()
  8. 3:03How to use the string functions nl2br(), trim() and strlen()
  9. 1:38Practical uses for strstr(), nl2br(), trim() and strlen()
  10. 3:39How to use additional string functions like str_replace() and strip_tags()
  11. 3:03How to use the date() function to display a readable date
  12. 6:01How to read a function page
  13. 1:21String function challenges

How to Work With Arrays in PHP

  1. 5:39How to work with simple arrays and use var_dump()
  2. 4:12How to work with associative arrays
  3. 8:09How to work with multi-dimensional arrays
  4. 7:44How to use array functions like asort(), array_pop() and array_rand()
  5. 4:52How to work with array-like objects
  6. 1:19Array function challenges

Logic, Control Structures and Looping

  1. 1:30What logic is and how we're approaching learning it
  2. 3:32How to use an "if" control structure
  3. 4:35How to use an "if ... elseif" control structure
  4. 6:08Incorporating what we know about arrays and control structures in a random generator script
  5. 5:51Adding additional elements of randomness to our random generator script
  6. 3:36How to use a "foreach" loop
  7. 6:43How to use a foreach loop to generate an HTML table from an array
  8. 4:37How to use a "while" loop
  9. 1:00How to use a "for" loop and how it compares to "while"
  10. 2:36How to modify PHP settings with the php.ini file and stop runaway scripts

Creating Custom Functions and Working With External Data

  1. 1:13Why separating data from logic is important
  2. 6:12How to use include() and include_once()
  3. 1:55Moving our data into a user-friendly text file
  4. 3:54How to use an output buffer to store data from an external file as a string
  5. 5:34How to create a parser that converts a comma-separated string (CSV) into an array
  6. 3:09How and why to create a simple custom function
  7. 1:35How to create a function that accepts parameters
  8. 4:05How to create a function that has optional parameters and build a virtual dice roller
  9. 1:46A deeper explanation of the purpose of custom functions
  10. 4:14How to work with references in a function (i.e. variables with an ampersand)
  11. 1:39A quick summary of what we've covered so far, and what's to come
  12. 3:22How to wrap existing code in a function
  13. 5:38How to generalize our random text generator code to make it more powerful
  14. 3:24Using our random text generator script to create a virtual Twister spinner
  15. 4:12Wrapping our people parser in a function, reviewing the code and identifying improvements
  16. 7:38Reviewing our generalized parsing function, part 1
  17. 5:57Reviewing our generalized parsing function, part 2
  18. 6:32Exploring our generalized table rendering function
  19. 2:50Re-using our table rendering function and evaluating our changes

Troubleshooting errors and using operators

  1. 2:32Accidentally assigning a variable instead of comparing it
  2. 2:54Troubleshooting a missing closing bracket
  3. 1:34Troubleshooting a missing opening bracket
  4. 2:11Troubleshooting a missing parenthesis
  5. 1:20Troubleshooting the "Wrong parameter count" error
  6. 3:32How to use assignment and string operators
  7. 2:40How to use comparison operators
  8. 1:47How to use arithmetic and incrementing operators
  9. 2:03How to use logical operators
  10. 2:01How to use array operators

Working With Forms in PHP

  1. 4:07The lifecycle of a form and chapter overview
  2. 6:06How to process a simple form with PHP
  3. 1:40A quick overview of the next three form examples
  4. 4:10How to use a hidden input to distinguish multiple forms on one page and how $_REQUEST works
  5. 2:00The HTML structure of a simple contact form
  6. 2:06How to pre-fill form inputs, and seeing our rendered forms
  7. 4:00How to use a switch statement and the $_POST variable
  8. 6:10How to process a contact form and send a plain text mail with PHP
  9. 3:42How to keep data in an input after a form is submitted, and a quick review
  10. 9:17How to run our examples in a remote development environment with Pantheon
  11. 8:04How to run our examples in a remote development environment with WebEnabled
  12. 5:19How to use a ternary operator and our search form in action
  13. 3:11Stepping through our search form code the first time the form is generated
  14. 8:50Stepping through our search form code after a search is submitted
  15. 3:33Demoing our random text generator with a form for user-set tokens
  16. 3:39Stepping through our random text generator form code the first time it's generated
  17. 6:44Stepping through our random text generator form code after it's been submitted
  18. 5:10How to use file comparison tools to see differences between files
  19. 1:48Demoing our random text form with loop-generated infinite inputs
  20. 5:56Stepping through our infinite randomness code the first time it's loaded
  21. 2:09Stepping through our infinite randomness code after submitting the "number of inputs" form
  22. 3:32Stepping through our infinite randomness code after submitting the "random generation" form

Working With Sessions in PHP

  1. 4:11How use to sessions and the $_SESSION variable to store user information
  2. 1:18Demoing our log in form
  3. 3:00How to create a log in form
  4. 4:34How to handle log in errors when submitting an invalid username and password
  5. 3:05How to log a user in after submitting a valid username and password
  6. 2:12How to log out a user and pass variables through the URL
  7. 3:59A demo of our text adventure game
  8. 13:12Stepping through our code the first time the game is loaded, and how global variables work
  9. 9:37Entering a command in our text adventure game, and using the eval() function
  10. 6:12Stepping through our game code as we move south and north
  11. 8:55Stepping through our game code as we pick up and item, use it, then reset our game
  12. 4:38How an index.php page works, and a quick demo of our refactored game
  13. 2:20The pros and cons of using .inc files, and a review of our new file structure
  14. 3:02The benefits of creating a function library and reviewing our index and function files
  15. 6:12Reviewing the updates we made to avoid using global variables
  16. 6:01Continuing our review, the benefits of generalizing code and caching data
  17. 4:22Wrapping up our review of changes in our refactored text adventure
  18. 3:29Creating a render function for our game as a final touch

Working With the (MySQL) Database

  1. 4:22The benefits of using a database (MySQL)
  2. 4:42What databases and tables are, plus a quick tour of PHPMyAdmin
  3. 5:06What SQL is and how to write a simple SELECT query
  4. 2:45How to filter SQL query results with LIKE and wildcards
  5. 4:47How to create your first database and table
  6. 4:04How to change column types using PHPMyAdmin and adding our final entry
  7. 5:40How to use AND and LIKE with two wildcards in a query
  8. 6:03How to connect to a MySQL database with PHP
  9. 3:11How to run a MySQL database query in PHP
  10. 2:44How to use ORDER BY to sort query results and a couple other query examples
  11. 2:23How to move our database connect script to a commonly included file
  12. 3:36How to add new fields to a table and a warning about modifying existing tables
  13. 2:46Populating our new people table columns and demoing our login form
  14. 2:36Comparing our array-based login form to our database-based version
  15. 1:17How to turn off magic quotes for a more realistic server enviornment
  16. 4:38What an SQL injection attack is and how to create one
  17. 2:51How to protect against an SQL injection attack
  18. 1:37The two types of attack, and brief explanation of defense strategy

Working with CRUD functionality and our database

  1. 2:27What CRUD is (Create, Read, Update, Delete) and how to backup a database in PHPMyAdmin
  2. 4:23How to import from PHPMyAdmin and protect against Cross Site Request Forgeries (CSRF)
  3. 3:21How to display a list of database data in an HTML table using PHP
  4. 2:34How to create a "delete" HTML link that deletes a database record
  5. 2:36How an INSERT statement is structured, and a demo of our insert form
  6. 3:05Reviewing the differences after added the insert form to our script
  7. 4:59How to generate an INSERT statement using a loop, and a review of our workflow
  8. 2:55Why to validate forms, and a demo of validating numbers, usernames and empty inputs
  9. 3:32Comparing the validation changes made in our CRUD script
  10. 5:46How to use looping in validation and validate empty and numeric inputs
  11. 3:44How to validate alphanumeric inputs and unique usernames
  12. 2:14Demo of our update form script
  13. 1:17How to structure an UPDATE statement and the importance of not forgetting WHERE
  14. 5:54Reviewing changes where we added the ability to update a record
  15. 4:19How to use the same form to both create and update records
  16. 6:02Walking through our add and edit form code as it is processed
  17. 2:13Ways that our CRUD script could be refactored and improved
  18. 6:09Comparing our refactored changes to our previous CRUD script
  19. 1:32A quick review of our CRUD form improvements

How to Build Your Own Content Management System and Understand Drupal Better

  1. 2:41Additional ways that we could use databases and our next big example
  2. 3:13Reviewing the visual structure of our static site
  3. 1:07Reviewing the folder and file structure of our static site
  4. 5:35Comparing the HTML structure of our home and about pages
  5. 3:23How to create a header template file
  6. 3:53Creating our footer and applying our templates to the home page
  7. 2:07Applying our header and footer to our other pages
  8. 1:52Reviewing our product page and identifying repetition that can be turned into a function
  9. 4:03How to render our products with a function to reduce HTML repetition
  10. 3:01When to use unique identifiers (IDs) and what a universally unique ID is (UUID)
  11. 5:00How to use a central product array for both of our product listings
  12. 1:54Applying our product rendering function to the product page
  13. 1:27The benefits of routing every page request through a single file with mod_rewrite
  14. 2:24How a .htaccess file works and how to set one up
  15. 5:41How to route all URLs through a single file (the Front Controller pattern)
  16. 3:29How to use the URL query string to trigger an include
  17. 1:32How to use the heredoc syntax to avoid escaping multiple quotes
  18. 2:06Why to use a full page template file instead of a header and footer
  19. 2:50A quick summary of our changes and a review of our other include files
  20. 1:27Why it's useful to have configurable settings for the end user and to reuse on other sites
  21. 6:04Walking through changes after adding configurable settings
  22. 2:14Why it's better to use a function for settings instead of direct variables
  23. 3:24What still needs to happen to allow end users to manipulate data on our site
  24. 3:19Creating the database and users table for our next steps
  25. 1:38Demo of our CMS login form
  26. 5:42Adding our database connect script, notices function and login links
  27. 3:52How our login and logout features work
  28. 2:18Demo of our new edit, delete and add user features
  29. 0:48Reviewing changes in our login form
  30. 6:53What happens in our updated CRUD code when we submit a user edit form
  31. 5:52What happens in our updated CRUD code when we add a user
  32. 5:24The problem with using relative or absolute paths in subfolders
  33. 4:23Using a URL function to route all requests to the right location regardless of subfolder
  34. 3:28Creating our products database table and populating it
  35. 2:41Discussing the similiarties that will exist between our product and user administration pages
  36. 1:04Demo of our updated product CRUD script
  37. 4:17Comparing the code in our user and product CRUD scripts
  38. 2:25Reviewing changes in our product rendering code, and how the WHERE IN SQL syntax works

Generalizing Functionality and Object Oriented Programming Primer

  1. 1:37Why generalizing CRUD functionality makes so much sense
  2. 1:35Setting up the next steps and a demo of our generalized CRUD script
  3. 5:30How to distill CRUD configuration options into an array
  4. 1:25Overview of the functions in our generalized CRUD script
  5. 6:09How to create a generalized record listing function
  6. 6:51How to build a generalized CRUD edit and add form function
  7. 5:39How to build a generalized CRUD form validation function
  8. 3:46How to create a generalized CRUD form processing script
  9. 1:54Summary of what we've accomplished, and a few challenges
  10. 2:00How to set up a database table to store page data
  11. 5:26Demoing our page administration tools and adding our adding our first pages
  12. 6:00How to load pages from both files and the database
  13. 3:29How to convert file-based pages to database-based pages, and deciding which to convert
  14. 1:16How this split file and database structure relates to Drupal
  15. 3:41What we've accomplished with our CMS, compared to other CMS's like Drupal
  16. 3:07Challenge your new PHP skills with these CMS enhancements
  17. 1:20Why there's no need to be scared of OOP (Object Oriented Programming)
  18. 2:30Demonstration of our new object oriented CRUD code
  19. 2:38The weaknesses of function-based coding, and what objects are in OOP
  20. 3:57How classes, methods, properties and constructors work
  21. 3:29How instantiation works, and comparing our old render function to our new OOP one
  22. 1:39How to use properties in a class
  23. 1:35What extending a class means
  24. 0:26Congratulations on finishing PHP Programming Basics

Drupal 7 Development Core Concepts

Welcome to Module Building

  1. 6:24Why to build a module instead of modifying source code, and how this video series works
  2. 2:58Setting up the module folder
  3. 3:36About the .info file
  4. 6:35Coding the .module file
  5. 2:53Our module recreated in 2 minutes and next steps

How to Build Module Scaffolding

  1. 3:35Setting up the .module file structure
  2. 4:06The .info file in detail
  3. 11:52The .module file in detail
  4. 7:47Adding a module settings page in an include file
  5. 5:52Adding documentation with the README file
  6. 2:31Review and next steps for the "How to Build Module Scaffolding" chapter

How Hooks Work and How to Use Them

  1. 5:58What hooks are and a demo of our final module
  2. 9:57How hooks are invoked with module_invoke_all()
  3. 3:31How hooks are invoked with module_invoke()
  4. 5:21How hooks are invoked through custom functions
  5. 0:41Summary of hook implementations
  6. 4:57Using hook_init() to execute code on every page
  7. 2:04How to watch data change in the database
  8. 2:36How to implement hook_permission()
  9. 7:43Adding a settings page with hook_menu()
  10. 4:25Implementing scheduled events with hook_cron()
  11. 3:30Adding a block starting with hook_block_info()
  12. 5:19Adding block configuration with hook_block_configure()
  13. 10:40Displaying a block with hook_block_view() and checking permissions with user_access()
  14. 3:19Seeing our final module in action and next steps

Overview of Coding Standards

  1. 6:25Why coding standards are useful and important
  2. 2:50Using the Coder module to find problems
  3. 2:47Working with white space
  4. 2:16Using operators
  5. 1:25Defining functions and class constructors
  6. 1:30Working with arrays
  7. 2:08Quotes and string concatenation
  8. 2:26Writing good comments
  9. 2:28Including code files, php tags and semi-colons
  10. 2:14A few miscellaneous items

Development Tips and Tricks

  1. 3:04About the Tips module
  2. 11:18Using url() and l() to generate URLs and links
  3. 5:51Using the t() function to make text translatable
  4. 8:41Using variable_set(), variable_get() and variable_del()
  5. 13:05IDE features and comparison
  6. 6:29How to find out if your module exists already
  7. 2:46Review and next steps for the "Development Tips and Tricks" chapter

How to Build and Manipulate Forms with the Form API

  1. 6:16The benefits of using the Form API
  2. 7:25Creating a simple form
  3. 3:33Creating an embedded form
  4. 5:31Using validation functions
  5. 2:33Creating submission functions
  6. 6:37Exploring more form elements and attributes
  7. 5:09Adding usability with the #states attribute
  8. 7:54Modifying forms with hook_form_alter()
  9. 7:33Adding autocomplete to a text input
  10. 12:44Using the #ajax attribute for dynamic form building
  11. 8:51Creating confirmation forms
  12. 7:16Creating a module settings form

How to Add and Manipulate Pages With the Menu System

  1. 4:42How the menu system works
  2. 5:47A simple menu callback
  3. 9:41How to use render arrays and tabs
  4. 2:09How to use sub-tabs
  5. 2:01How to add a page without adding a menu item
  6. 5:29How to pass arguments through the path
  7. 5:02How to use placehoders to pass arguments in the middle of a path
  8. 8:13How to load objects through placeholders
  9. 4:09How to create dynamic titles with a title callback
  10. 7:53How to modify page output with hook_page_alter()
  11. 4:03How to modify menu items with hook_menu_alter()
  12. 5:22How to use include files to improve performance and next steps

How to Add to and Manipulate the Theme Layer

  1. 4:12How the theme layer helps designers and coders work together
  2. 4:39How to invoke a theme function
  3. 1:36A more complex example of theme_item_list()
  4. 5:14How to theme tables and the essence of theming
  5. 6:44How to implement a theme function and how the theme registry works
  6. 6:47How to create template files
  7. 7:41How to use preprocessing functions
  8. 5:41How to add CSS files in theme functions and template files
  9. 5:50How to override theme functions with hook_theme_alter()
  10. 4:15How to override template files and next steps

How to Work With the Database

  1. 3:31What is the Database API
  2. 2:31Preview of the final module
  3. 6:39Review of existing module
  4. 3:19How to use table schemas and a description of the Schema module
  5. 3:54Building a database table in an external application
  6. 6:55Setting up the install file and generating a schema with the schema module
  7. 6:48The wrong way to write queries, and restructuring the module
  8. 5:36How to write an INSERT query with the Database API
  9. 3:17The 4 big benefits of using the Database API
  10. 3:42How to write a static SELECT query with the Database API
  11. 2:28How to write a DELETE query with the Database API
  12. 9:12How to write a dynamic SELECT query and easily paginate a result set
  13. 3:20A dynamic SQL query in action
  14. 5:48Using hook_update_N() to add a new table
  15. 8:58Adding utility queries and functions for INSERT, SELECT and DELETE
  16. 1:49Review and next steps for the "How to Work With the Database" chapter

How to Work With Users

  1. 2:44What this video covers and a preview of the final module
  2. 5:00How to modify the user settings form
  3. 11:18How to save data to an authenticated user
  4. 6:23How to modify the user page
  5. 6:21How to work with user permissions (complete)
  6. 3:33How to respond to a user login or logout
  7. 4:10How to add user bulk operations
  8. 9:14How to store anonymous user data in a cookie
  9. 4:04How to store user data in a session variable
  10. 1:45Review and next steps of the "How to Work With Users" chapter

How to Work With Nodes

  1. 2:03Introduction to the Node API
  2. 10:09How to load and view a single node and create fake content
  3. 2:47How to load and view multiple nodes at once
  4. 3:13How to manipulate node data with node_save()
  5. 13:03How to add custom data to a node with hook_node_insert() and hook_node_update()
  6. 8:35How to display custom node data in forms and in the node display
  7. 5:00How to add a custom view mode
  8. 4:19How to add bulk operations
  9. 6:02How to control node-based access using hook_node_access()
  10. 7:37How to control node-based access using grants
  11. 9:27How to add a new node type with a module
  12. 3:43How to remove custom content types when a module is uninstalled
  13. 5:57How to add a custom field formatter
  14. 1:31Review and next steps for the "How to Work With Nodes" chapter

How to Work With JavaScript and jQuery

  1. 5:59Two major use cases for jQuery and JavaScript and what this video covers
  2. 6:51How to include a JavaScript file on every page and intro to the jQuery object
  3. 7:08How to load JavaScript after a page is done loading
  4. 3:22How to use the dollar sign as an alias for the jQuery object
  5. 9:18How to use jQuery selectors
  6. 9:03How to manipulate content in the DOM (Document Object Model) with jQuery
  7. 6:10How to use jQuery events to add interactivity
  8. 6:14How to use effects and work with CSS in jQuery
  9. 11:22How to use Drupal behaviors to add JavaScript functionality to new content
  10. 10:58How to use drupal_add_js() to include and set the weight of JavaScript files
  11. 6:15How to use drupal_add_js() to add inline JavaScript, use the footer, and store settings
  12. 5:09How to include and define a Drupal JavaScript library
  13. 3:25How to use hook_library_alter() to see what JavaScript libraries are available
  14. 14:54How to use the Drupal Ajax library to load dynamic HTML
  15. 2:38How to dynamically load JavaScript and CSS with Ajax
  16. 2:26How to display status messages when using Ajax
  17. 3:06How to add CSS styles, classes, and JavaScript alerts through Ajax commands
  18. 7:14An overview of JavaScript utilities included in core Drupal
  19. 2:14Review and next steps of the "How to Work With JavaScript and jQuery" chapter

How to Work With Files and the File API

  1. 2:43What this video covers and a demo of our node-free image gallery module
  2. 2:24What the difference is between a URI and a URL
  3. 3:22What stream wrappers are and how they work
  4. 1:36How the private file system works
  5. 5:15How file and folder permissions work, and best practices
  6. 2:41How to set up PHP to properly handle file uploading
  7. 5:45How to create a simple form with an unmanaged file input
  8. 5:02How to use a form validation function to validate a file
  9. 3:36How to use hook_file_validate() to validate an uploaded file
  10. 6:43How to use core file validation functions and define your own validator

How to Work With Files and the File API, Part 2

  1. 7:56How to process an unmanaged file and recursively create a directory
  2. 7:32How to use file_unmanaged_copy() to move a file to a permanent location
  3. 7:37How to loop through a file directory and create a URL from a URI
  4. 6:49How to delete an unmanaged file
  5. 4:52How to recursively delete all unmanaged files in a directory
  6. 10:07How to use the private file system with unmanaged files
  7. 7:30How private files are delivered and how to troubleshoot private file issues
  8. 10:34How to add a managed file input to a form
  9. 5:57How to validate a managed file, prevent it from being deleted and add a usage marker
  10. 5:58How to use the EntityFieldQuery class to match certain criteria and display the results
  11. 6:42How to delete managed files
  12. 6:08How to work with private managed files
  13. 4:19How to configure and use X-Sendfile to improve private file performance
  14. 6:05A quick look at the code behind stream wrappers

Drupal 8 Developer Prep

Welcome to Drupal 8 Developer Prep

  1. 3:31Why you should be excited about Drupal 8
  2. 1:43How we're dealing with the fact that there's no official Drupal 8 release yet
  3. 5:15Who the "Drupal 8 Developer Prep" series for and what we will be covering
  4. 4:35How to install our Drupal 8 snapshot with Dev Desktop

Building a Simple Drupal 8 Module

  1. 2:42How to set up basic module scaffolding in Drupal 8
  2. 3:21How a .info.yml file works, the purpose of using YAML and what the 'type' attribute is for
  3. 5:27Adding a hook_page_alter() and hook_form_alter() to our module
  4. 6:16How to add a page programmatically with a module
  5. 1:02A brief comparison to adding a page programmatically in Drupal 7
  6. 2:05Reviewing the code in our Controller class file
  7. 2:51Reviewing the code in our routing.yml file
  8. 1:27Reviewing our hook_menu() code
  9. 2:28Overview of what we're about to cover (OOP, autoloading, namespaces and Symfony)

Object Oriented Programming Basics

  1. 4:26The difference between procedural and object-oriented programming
  2. 3:21Setting up an examples folder and demoing our contact form script
  3. 3:26Walkthrough of our procedural code example, part 1 (outline of the code)
  4. 6:08Walkthrough of our procedural code example, part 2 (building the form)
  5. 4:46Walkthrough of our procedural code example, part 3 (processing the form)
  6. 1:45How to derive objects from procedural code
  7. 4:45How classes are structured, what methods and properties are, and how a constructor works
  8. 1:14How to name classes and methods according to both Drupal and general standards
  9. 2:31How a class structure makes the relationship between methods explicit
  10. 5:04What instantiation means, the difference between class and object, and the advantage of properties
  11. 2:53Reviewing the rest of our code after moving functions into class methods
  12. 3:02Review of the advantages of object-oriented programming that we've covered so far
  13. 2:16How the Agile phiolosophy will help you stay sane when figuring out how to structure a project
  14. 2:07How to decide when to re-factor your code, or split classes into smaller classes
  15. 1:43A summary of staying sane with OOP, and our use case for re-factoring
  16. 5:21How and why to use static methods in classes
  17. 5:09Refactoring to add a new "Builder" class, and how to decide when to use a static method
  18. 3:41What a "controller" is, and how to implement one in our code
  19. 3:51How to inherit methods and properties from another class
  20. 2:18How inheritance allows for abstraction of concepts, and how that can make code difficult to understand
  21. 4:36How to use an "interface" for defining inherited class structure
  22. 3:20How and why to use an abstract class
  23. 3:28What a public interface or API really is and how OOP helps make an API more explicit
  24. 4:07The difference between the "public", "private" and "protected" visibility settings
  25. 4:43How to split a single large file into individual class files
  26. 1:03How to name class files

Namespacing and Autoloading in PHP

  1. 3:03How using third-party libraries or working on a team can create naming conflicts
  2. 7:11How to use namespaces in PHP
  3. 2:34How to use namespaces to avoid naming conflicts
  4. 1:14How to use namespace aliases with the "as" keyword
  5. 1:32How to use a Fully Qualified Name for classes and methods
  6. 1:58The benefits of namespacing and a summary of how namespaces work
  7. 2:12What "autoloading" is and how namespacing relates to it
  8. 2:24How to create a simple autoloader
  9. 2:02Walking through our simple autoloader with a debugger
  10. 3:12How a typical PHP library will be structured and what each of the nested folders mean
  11. 1:32What FIG (Framework Interoperability Group) is and why PSR-0 (PHP Standards Recommendation) exists
  12. 8:43How to build a PSR-0 compliant autoloader, and a walkthrough of PSR-0 requirements
  13. 1:24Why it's good to use an established autoloader instead of creating your own
  14. 4:44How to make our own project PSR-0 compatible

How to use Composer and Packagist

  1. 1:39How Composer and Packagist work together to help manage reusable PHP components
  2. 3:13How to install Composer on a Mac or Linux and what a .phar file is
  3. 1:23How to install Composer in Windows
  4. 2:21How to set up our Composer example folder and set up a basic Composer project
  5. 1:31How JSON (JavaScript Object Notation) and our composer.json file work
  6. 1:25What Semantic Versioning is and how to use it
  7. 2:55What happens during 'composer install' and how the download is structured
  8. 1:56How to use Composer's autoloader and use a package in our code
  9. 1:39A quick look at how Drupal 8 uses Composer
  10. 1:48How to look for packages, and how Packagist is like a module repository for PHP

How to Work With Symfony Components

  1. 2:41What Symfony is and the difference between a CMS and a framework
  2. 3:19Building a simple example script and illustrating its flaws
  3. 5:21Refactoring our code, and how character encoding works
  4. 5:00How to incorporate the Http Foundation Symfony component to add object orientation to our simple script
  5. 3:18How the Request and Response classes work
  6. 1:56Why using global variables is dangerous, and how Http Foundation solves this problem and allows for extending functionality
  7. 7:04Examples of how we can use the Request class to access variables, and what a reverse proxy is
  8. 3:04Examples of using the Response class to set status codes, content and content type headers
  9. 3:37Adding a second page and an include file for common code
  10. 4:07How to add a front controller
  11. 2:21Adjusting our pages to use the front controller, and how to add new pages
  12. 2:47Reorganizing our page files to make it easier to add new pages
  13. 3:38How to convert a PHP file into a template
  14. 5:16How to use the extract() function to convert an array to string variables to use in a template
  15. 3:04The weaknesses of our current routing strategy, how to update a Composer project and set up the routing component
  16. 3:23How to set up a file to store our routes and use the routing component
  17. 2:37Updating our front controller to use the routing component
  18. 3:04How a try ... catch block works and why you would want to use it
  19. 5:27An in-depth look at how to use try ... catch and throwing exceptions
  20. 4:12How to use the routing component to generate URLs based on route name, and exploring additional methods of the Matcher class
  21. 5:16How to convert our pages to use a controller function
  22. 3:23Updating our routes to include a '_controller' attribute, and what a 'closure' or 'anonymous function’ is
  23. 2:55Replacing our app with one that calculates leap years
  24. 2:47How to create a controller class, and how to tell what are valid PHP callbacks
  25. 3:32How to use the controller resolver and install the Http Kernel component
  26. 2:59Updating our routes and controller to use the controller resolver, and how type hinting works
  27. 2:11How we can use multiple front controllers for different environments
  28. 2:55Creating a reusable Framework class
  29. 0:53Simplifying our front controller while leveraging our Framework class
  30. 0:57One minute of reassurance
  31. 2:31How to add Composer autoloading for our custom code by making it PSR-0 compatible

How to Work With Symfony Components, Part 2

  1. 4:05How to split up our leap year code into a controller class and a model class
  2. 2:33Adding PSR-0 compatibility to our leap year code, and updating our app.php file
  3. 1:43What unit testing is and how it can make your code better and more flexible
  4. 3:11The difference between unit testing, functional testing and regression testing
  5. 2:25How to install PHPUnit on a Mac or Linux
  6. 5:09How to install PHPUnit on a Windows machine, what PEAR is and how it compares with Packagist
  7. 2:40How to set up PHPUnit configuration and set up our first unit tests
  8. 3:57How setting up interfaces for your classes helps with unit testing
  9. 2:05What dependency injection is, and updating our framework to use interfaces
  10. 2:28Looking at how our test and assertion actually work, and where to find out which assertions we can use
  11. 2:29Adding additional PHPUnit tests for our controller and 500 errors
  12. 2:29What the Event Dispatcher Symfony component does, and how to add it to our project
  13. 3:58How to add an event with the Event Dispatcher
  14. 2:18How to create an event class for our event
  15. 4:26How to add a listener with our event dispatcher
  16. 2:49A recap of how we set up our event dispatcher and listener
  17. 2:51Adding a second listener and setting its priority
  18. 4:06How to create a class for an event listener
  19. 2:03Reviewing the code in our event listener classes
  20. 2:09How a subscriber is different than a listener, and what a 'code smell’ is
  21. 3:41How to add a subscriber to our event dispatcher
  22. 1:47Overview of what we covered around the event dispatcher
  23. 6:29How to add caching support to our framework and controllers
  24. 4:34How to use the Http Kernel component to replace our entire framework
  25. 1:00The difference between setter injection and constructor injection
  26. 3:28How to add custom error reporting to our framework
  27. 5:45How to create a subscriber that allows controllers to return strings instead of response objects
  28. 3:17Reducing our front controller code by moving it to our Framework class
  29. 3:07The disadvantage of instantiating objects inside our framework and how a dependency injection container can help
  30. 5:29How to create and use a dependency injection container, and what a singleton pattern is
  31. 3:26How to prepare objects in the dependency injection container with parameters and methods
  32. 0:54Why you should never use a dependency injection container within a class even though it's tempting
  33. 1:04Updating our framework code to leverage the dependency injection container
  34. 2:46How to use dependency injection container properties to store settings
  35. 5:56An overview of what we learned in these Symfony videos

Updating Our Environment and Using PHPStorm

  1. 1:55Overview of how we will prepare for the next Drupal 8 videos
  2. 4:19How to install Drupal 8 Alpha 12 with Dev Desktop 2 Beta
  3. 1:20How to create a Drupal-based project in PHPStorm
  4. 2:36The benefits of using PHPStorm for an IDE for Drupal work
  5. 4:47The benefits of using PHPStorm for general development
  6. 3:19How to get our example folder set up

How to Use YAML

  1. 0:59Why we are going to do a deep dive into YAML
  2. 6:21How to create a YAML file for routes
  3. 5:27How to parse a routing YAML file
  4. 3:56How to parse generic YAML files and setting up our YAML syntax examples
  5. 6:20Overview of YAML syntax, part 1 - Simple arrays and variable types
  6. 5:08Overview of YAML syntax, part 2 - Associative and nested arrays
  7. 5:42What "Separation of Concerns" means and how it applies to YAML and code
  8. 6:33How to convert our dependency injector container into a services YAML file
  9. 3:43How to load services into a dependency injector container with a YAML file
  10. 0:45How to make sure you're loading the right files in your project

How the Dependency Injection Container Works in Drupal 8

  1. 1:15How the dependency injection container acts like a backbone to Drupal 8
  2. 2:35Taking at look at our our first Drupal 8 services.yml file
  3. 5:09How to find the dependency injection container in Drupal 8, and an overview of how it is structured
  4. 5:25How the dependency injection container accesses its services
  5. 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

  1. 3:16Setting up our example module scaffolding
  2. 2:50Why hook_menu() was removed and why Drupal switched to PSR-4 autoloading
  3. 2:07How Drupal uses PSR-4 autoloading under the hood
  4. 5:47Adding a page to our example module by using a route and controller
  5. 3:15How to use services in a custom module
  6. 3:54How to find out which class is responsible for a service
  7. 4:15How to create a service with a custom module
  8. 1:55How to call our custom service
  9. 5:05An overview of why we should use services instead of simple functions or classes
  10. 1:19The differences and similarities between subscribers and hooks
  11. 3:39How to find an example subscriber class, and an overview of its structure
  12. 4:03How to find out what events we can subscribe to
  13. 3:37How to create a subscriber class
  14. 4:13How to register a subscriber as a service
  15. 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

  1. 3:37How to get the route name for the current page and how “inheritdoc” works
  2. 4:02How to fix a "Class not found" error in Drupal 8
  3. 6:24How to perform a redirect and how hook_init() has been replaced
  4. 2:33Why you might choose to create events instead of hooks
  5. 5:29How to create a custom event quickly with the GenericEvent class
  6. 2:35How to subscribe to a custom event
  7. 5:04How to create a specialized custom event class
  8. 0:46A final word on what we’ve learned about events
  9. 6:05How to override an existing service
  10. 0:53The benefits of using an interface for a service
  11. 2:31Overview of what we've covered, and how we're going to use the HTTP Kernel component to create sub-requests
  12. 3:17How to create a subrequest with the HTTP Kernel service

Upgrading a Module to Drupal 8, Part 1 - Plugins, Annotations and Subscribers

  1. 2:47The three groups of knowledge that you need to work with Drupal 8 effectively
  2. 2:55A tour of our Drupal 7 module's front-end feature set
  3. 5:03A tour of our Drupal 7 module's code base, part 1
  4. 3:26A tour of our Drupal 7 module's code base, part 2
  5. 1:38Getting our module to upgrade set up, and running into our first upgrade problem
  6. 3:47Overview of resources to use when upgrading a module to Drupal 8
  7. 3:37How to upgrade a .info file to a .info.yml file and install our module
  8. 1:22How to find a good source in the user interface for an example block
  9. 2:20How to find a piece of code by searching for a unique string from the interface
  10. 1:43How a block plugin class is structured
  11. 2:11What annotations are and how they work
  12. 2:11Overview of the alternatives to annotations, and why we're not using them
  13. 1:41A brief description of what a Drupal plugin is
  14. 2:47How to troubleshoot overlays not showing and how blocks are now actually block factories
  15. 4:46How to create a block plugin
  16. 3:14How to modify the default caching settings for a block plugin
  17. 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

  1. 2:37A comparison of the State API and the Configuration API and how they replace variable_get()
  2. 2:07How to use the State API to store arbitrary values
  3. 0:55How to replace variable_get() with a State API call
  4. 2:40How to replace drupal_get_title() with a call to the "title resolver" service
  5. 1:23How to replace variable_set() with a State API call
  6. 3:40How to replace the $_GET['q'] and what to do when getting a "Drupal class not found" error
  7. 1:03How to replace variable_del() with a State API call
  8. 4:31How to upgrade hook_block_view() and format_interval()
  9. 3:21Overview of the pieces we need for our module configuration form, and finding a good example
  10. 2:07How forms are structured in Drupal 8
  11. 5:25Removing unnecessary overrides and upgrading drupal_map_asscoc()
  12. 4:18How to use the Configuration API to store default module settings, replacing variable_set()
  13. 1:23How to update configuration with the Configuration API and submitting a module settings form
  14. 4:44How to add a page for our module configuration form
  15. 1:14How to get our default configuration value to register while doing development
  16. 0:34Which files to use if you're starting this series from here
  17. 5:03How to register a menu link and find the ID for an existing menu link
  18. 1:13How to show a link to our module configuration form from the module listing page
  19. 5:27How to set up a block configuration form, and a benefit of using plugins
  20. 3:35How to use block settings in a block configuration form
  21. 1:48How to use the Configuration API as a service
  22. 1:32Testing out our module settings and troubleshooting a problem with saving the value
  23. 3:35Troubleshooting our block configuration form
  24. 1:24Adding a second block and ways to improve our block configuration
  25. 5:32Updating our .module file's hook_permission() and hook_help()
  26. 2:34Cleaning up our .module file and updating hook_cron()
  27. 1:13How to fix an "Undefined offset" error

Using the Twig template engine in Drupal 8

  1. 2:51Overview of how Twig works and why Twig is so useful
  2. 3:43How to set up a Twig template file and a brief description of Twig variables
  3. 2:50How to register a Twig template file with hook_theme()
  4. 2:16How to wire up a Twig template to a render array
  5. 2:08How to easily debug Twig templates by reloading updated template files automatically
  6. 2:52How to use Twig filters and translate content in a template with the t filter
  7. 1:16How to replace variables in a translated string using the "t" filter in a Twig template
  8. 2:04How to set up a new variable to use in our Twig template file
  9. 2:31How to decide how granular a template file should be
  10. 1:50How to see what variables you have to work with in a Twig template using "dump"
  11. 3:08How to do a foreach loop in a Twig template
  12. 0:52How to use the dump tool in Twig to see just the names of the available variables
  13. 1:38How to figure out what Twig template file is responsible for any output on the page
  14. 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

  1. 5:59Welcome to "Change Management and Version Control"
  2. 7:36How to install Git on Windows with mysysgit
  3. 3:05How to install git and SmartGit on a Mac
  4. 7:30How to create a Git repository and add a complete Drupal site to it
  5. 7:12Why the command line can be scary, and the benefits of conquering your fear
  6. 7:08How to navigate file structures and stop processes on the command line
  7. 3:23How to edit and save text files on the command line with VIM
  8. 2:51How to use built-in help on the command line
  9. 5:00How to create, move, copy and remove files on the command line

Staging, Committing and Undoing in Git

  1. 10:53Introduction to version control
  2. 6:31How to stage and unstage files and what staging means
  3. 2:28How to commit a file and stage multiple files
  4. 5:59Why certain files are ignored and how to add your own ignored files
  5. 3:05How to commit unstaged changes and modify staged files
  6. 4:49How to use the diff command to review modifications
  7. 3:27How to use git help
  8. 5:00How to use SmartGit to view graphical diffs and revision trees
  9. 5:52How to undo modifications to staged and unstaged files
  10. 2:17How to use the log command for viewing revision information
  11. 5:51How to undo commits
  12. 2:06Quick summary of undoing in Git

Branching, Merging and Tagging in Git

  1. 3:54How to move files in Git
  2. 4:06Introduction to branching and merging in Git
  3. 5:09How to create a new branch and navigate existing branches
  4. 5:14How to merge with and without branch history
  5. 1:31How to modify an existing commit message
  6. 0:52How to delete a branch
  7. 5:19How to use a stash to save uncommited changes when switching branches
  8. 3:01How to apply a saved stash
  9. 2:23Quickly commiting, merging and deleting a branch
  10. 3:20How to add, remove, list and rename tags

Working With Remote Git Repositories

  1. 2:58How remote central repositories work
  2. 11:05How to create an account on GitHub and set up SSH key pair authentication
  3. 6:11How to set up a remote repository and connect to it
  4. 1:16What we'll be doing now with our remote repository
  5. 3:09How to clone our remote repository into a production environment
  6. 5:00How to push a change from dev to production with push, fetch and merge
  7. 1:33How to push a change from dev to production with push and pull
  8. 6:50How to undo commits to a remote repository
  9. 3:17How to push changes from production to dev
  10. 8:56What conflicts are and how to resolve them
  11. 3:23How to create a branch and track it remotely
  12. 6:58How to create a release with a develop-master branch system
  13. 3:01How to set up a new environment for a team member

Deploying Releases, Features, and Fixes With Git

  1. 6:41How to use a scalable Git branching model called Gitflow
  2. 1:38Summary of how to use release, hotfix and feature branches
  3. 8:37How to create, deploy and clean up a release branch
  4. 1:26Release branch cycle summary
  5. 5:09How to create, deploy and clean up a hotfix branch
  6. 8:55How to troubleshoot pushes, pulls and conflicts with a feature branch
  7. 3:02Merging an update into a feature branch, then deploying and cleaning up
  8. 2:37Summary of lessons learned in the feature branch cycle

How to Version Control the Database

  1. 5:50Overview of database components you can add to version control
  2. 2:57Where to store version controlled assets
  3. 2:03How to set up an assets folder that is not accessible via the web
  4. 3:31How to export a database schema for version control
  5. 4:09How to export database content for version control
  6. 3:03Cleaning up our assets folder and rolling our assets into a feature branch
  7. 3:22How often should you update version controlled database dumps and why

How To Version Control Site Configuration With Features

  1. 9:25Overview of a typical push cycle, with and without version control
  2. 1:50How to download and install the Features module
  3. 10:09How to build a feature module, and how each component group works
  4. 1:47The 3 big benefits of having our components in a feature module
  5. 2:48How to revert a modification to a feature module component
  6. 3:41How to install and use the Diff module to view feature module overrides
  7. 7:44How to learn more about your feature by reviewing the code
  8. 5:33How to update a feature and review updates with Git diff
  9. 1:43How to revert a feature once changes are in code
  10. 3:08How to deploy a feature module
  11. 2:38Overview of merging multi-user changes to the same component
  12. 3:04Pushing a feature modification and explaining unsolicited changes
  13. 8:41How to merge our feature component changes and update a feature module
  14. 4:09How to organize features and implications of getting everything into code
  15. 2:57How to re-organize components into new features with the UI or the .info file
  16. 4:52Overview of other exportable components and enabling a copied feature module

How To Manage Non-Exportable Configuration Changes

  1. 2:07Overview of using Selenium IDE to store config-building macros
  2. 7:08How to create and modify a Selenium macro that builds a node
  3. 4:17How to export Selenium tests and creating one more test
  4. 2:36How to keep team members up to speed with manual changes using a simple list
  5. 3:39How to package several repository modifications into multiple commits
  6. 6:02How to load and play back Selenium tests to update another environment

How to Override Shared Features and Modify Text

  1. 4:53The challenges of overriding shared feature modules and some solutions
  2. 4:45How to override a box title, and how to learn about what else we can change
  3. 4:00How to override block position, and a brief overview of the Context module
  4. 2:57How to override user permissions
  5. 5:40How to override Views options like title, ajax and number per page
  6. 4:40How to override a Views query, like changing node type or order
  7. 2:52How to override a menu item title
  8. 4:51How to override variables and how the Strongarm module works
  9. 3:44How to modify interface text and version control the overrides
  10. 5:19How to use a version controlled settings.php include to share settings
  11. 6:09How to find and override strings with dynamic content or links
  12. 7:15How to override a feature module by cloning

How to Upgrade Drupal and Patch Contributed Modules

  1. 8:38How to patch a module
  2. 3:46How to upgrade a module sustainably
  3. 4:11How to prepare for a minor Drupal upgrade
  4. 7:59How to use a patch to upgrade the Drupal codebase
  5. 4:56How to upgrade the Drupal codebase the traditional way
  6. 3:42How to complete a minor upgrade

How to Install Drupal, Manage Features and Perform Common Tasks Using Drush

  1. 5:31Introduction to Drush, the ultimate Drupal productivity tool
  2. 2:53How to install Drush on a Mac
  3. 1:12How to install Drush on Windows
  4. 4:25How to use Drush status, help, clear-cache and archive-dump
  5. 2:04Overview of using Drush to speed up Features
  6. 5:44How to update, review and revert feature modules with Drush
  7. 3:44How to add new components to a feature module with the .info file and Drush
  8. 5:35How to download and install Drupal using Drush
  9. 2:14How to download and enable a module or theme using Drush
  10. 3:58How to update Drupal core and contributed modules using Drush

How to Configure Drush and use Drush Make

  1. 3:59How to set up a Drush configuration file (drushrc.php) and use shell aliases
  2. 1:52How to set up a global Drush configuration file
  3. 4:35How to use Drush aliases to simultaneously work with multiple Drupal installations
  4. 3:43How to set up a remote site alias for Drush
  5. 3:20Why building site scaffolding is tricky and how Drush Make can save you time
  6. 1:45How to install Drush Make and any Drush extension
  7. 6:27How to create and run a Drush Make file
  8. 3:27How to generate a Drush Make file from an existing Drupal installation
  9. 2:29How to quickly generate a Drush Make file with

How to Extend Drush and Other Useful Drush Tools

  1. 3:53How to review and filter Watchdog log messages with Drush
  2. 4:43How to add, remove and manage users with Drush
  3. 5:01How to extend Drush with PHP scripts and run arbitrary PHP on-the-fly
  4. 5:42How to pass arguments to a custom PHP script for use with the Drush php-script command
  5. 4:09How to install and use the Drush sandwich example command
  6. 4:51How the Drush example custom sandwich command works
  7. 5:20How to create a custom Drush command
  8. 3:23How to perform SQL queries in Drush and quickly set variables

Drupal 7 Theming Essentials

Important Drupal Theming Concepts

  1. 3:14Who these theming videos are for and what they do (and don't) cover
  2. 7:18What is the difference between designing, theming and coding, and why do they overlap so much?
  3. 10:40What are all of the different ways to modify Drupal output?
  4. 3:25How to determine which method to use when modifying output
  5. 2:31A conceptual introduction to the Features module for exporting configuration options as code
  6. 4:04How to decide whether to use a module or a theme for your modifications
  7. 2:42How to decide when to use a theme function or template file
  8. 9:52How the theme registry works
  9. 5:11How to find out where any piece of output comes from
  10. 6:05What view modes are and why you would use them
  11. 7:10How to adjust node view modes through the user interface
  12. 5:55What field formatters are and how to use them to modify field output
  13. 5:24How coding standards apply to the theme layer, and how to add comments to template files
  14. 10:53Template file coding standards and conventions
  15. 2:48How to apply CSS coding standards
  16. 4:35Theme troubleshooting and what to do when you don't see your theme output changes applied
  17. 7:31How to troubleshoot CSS problems in your theme
  18. 4:01Review of 'Important Drupal Theming Concepts' and review

How to Build and Modify a Drupal Theme or Sub-Theme

  1. 7:18Overview of included themes and the themes directory, and where to put new themes
  2. 6:45How the different parts of a theme work
  3. 9:01Learning about theme structures by reviewing core Drupal themes
  4. 4:52Learning from the Zen theme file structure
  5. 2:40Learning from the Basic theme file structure
  6. 2:56Learning from the Fusion theme file structure
  7. 2:25Learning from the Marinelli theme file structure
  8. 8:20Review of the theme .info file options
  9. 4:43How to create a theme folder, add an info file and enable a custom theme
  10. 5:00How to add a screenshot
  11. 2:56How to add a default logo file
  12. 5:18How to override the page template with a page.tpl.php file
  13. 9:28How to add a new region and what regions are
  14. 4:46How to add a CSS file
  15. 4:57How to add a JavaScript file

How to Build and Modify a Drupal Theme or Sub-Theme, Part 2

  1. 5:45How to add a new setting to the theme settings form
  2. 4:46How to set a default for a theme setting and use it in a template file
  3. 9:25How the template.php file works and a review of the Bartik theme template.php file
  4. 5:57Learning from the Garland and Seven template.php files
  5. 4:52How to add a template.php file and use a page preprocessing function
  6. 4:12The advantages and disadvantages of using a sub-theme
  7. 5:54How to create a sub-theme
  8. 5:15How sub-themes inherit or override base theme components
  9. 6:34How to override CSS, JavaScript and screenshot files of a base theme using a sub-theme
  10. 3:11The advantages of copying an existing theme
  11. 10:54How to create a new theme by copying an existing theme
  12. 6:13Overview of theme CSS file structures

Theme CSS File Structure and Extended Drupal Theme Building

  1. 10:33A close look at the Bartik stylesheet structure
  2. 2:58A quick look at the Garland and Seven theme stylesheet structures
  3. 5:50How the Zen theme uses extensive CSS files for learning
  4. 6:42Review of the Basic and Fusion CSS file structures
  5. 5:19How to enable element toggling with theme
  6. 10:13How to add CSS or JavaScript files to a theme conditionally based on node type
  7. 9:27How to add CSS or JavaScript files to a theme conditionally based on path or user role
  8. 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

  1. 4:20Before you start, is there a simpler way?
  2. 13:26Why use template files, how file suggestions work, and setting up for later examples
  3. 8:54How to use the page template file (page.tpl.php) and override it by path
  4. 9:06How to use the node template file (node.tpl.php) and override it by content type or node ID
  5. 10:59How to use the block template file (block.tpl.php) and override it by module, region or delta
  6. 8:23How to use the comment (comment.tpl.php) and comment wrapper (comment-wrapper.tpl.php) template files
  7. 4:25How to name preprocessing functions to use with theme functions and template files
  8. 5:52How to use simple preprocessing functions
  9. 3:52How to apply preprocessing code only in certain situations
  10. 4:01How template file suggestions work in depth and adding new suggestions
  11. 10:29How to override template files for specific conditions using template file suggestions
  12. 2:02How to override a theme function
  13. 7:18Theme function override examples
  14. 8:10How to conditionally add CSS classes to the body, page and node wrapper tags for easier styling
  15. 4:34A practical example of adding a conditional body class
  16. 3:28Review and next steps for the "Template Files, Theme Function Overrides and Preprocessing Functions" chapter

How to Work With Drupal Theme Settings

  1. 6:35What this chapter covers and basic global toggle options available in the theme setting
  2. 4:56Overview of additional element toggle options such as main and secondary menus
  3. 7:13How to tell when global or theme-specific settings are used, and how to uninstall a theme
  4. 5:54How to add a custom theme setting and set a default for it
  5. 2:43How to use the custom theme setting in code using theme_get_setting()
  6. 3:21Overview of how the color module works to add custom color selections to a theme
  7. 2:10What steps are required to integrate the color module with your theme
  8. 6:31Overview of color module integration files part 1, including the file
  9. 7:37Overview of color module integration files part 2, including the preview.js file
  10. 10:45How to add a new color selector to your theme with the color module
  11. 2:19Review of the "How to Work With Drupal Theme Settings" chapter

Drupal 6 Development and Tools

Essential Concepts

  1. 3:30How to install and uninstall a module
  2. 14:03How to build your first Drupal module
  3. 13:47Introduction to hooks
  4. 8:21How to add permissions
  5. 27:13Introduction to the Form API
  6. 12:44How to make your module customizable
  7. 21:33How to add and configure blocks
  8. 10:13How to add JavaScript and CSS
  9. 15:07How to theme a Drupal module
  10. 16:18How to create an install script
  11. 19:00How to create, format and validate a form
  12. 21:24How to improve form validation and process a form
  13. 18:47How to create edit and delete forms and alter other forms
  14. 10:29How to apply for a Drupal CVS account

Working with jQuery and Javascript

  1. 14:25How to work with Ajax in Drupal
  2. 12:40How to implement Drupal JavaScript behaviors

Securing a Module

  1. 19:29A review of module security and the t() function
  2. 16:50How to use string filtering functions, l() and url()
  3. 17:22How to use drupal_get_token() and user_access()
  4. 13:22How to work with the database securely

Testing and Debugging a Module

  1. 21:40How to use a PHP debugger in Drupal
  2. 19:49How to use Selenium for Drupal testing
  3. 17:20How to use SimpleTest to automate testing

PHP and MySQL Basics

  1. 24:25How to work with PHP arrays
  2. 24:25How to work with PHP functions
  3. 23:01Introduction to MySQL, tools and SELECT queries
  4. 24:40How to use JOINs, insert variables and INSERT, UPDATE and DELETE

Using Komodo Edit as an IDE

  1. 5:23How to create a project in Komodo Edit
  2. 8:59How to work with projects in Komodo Edit
  3. 11:03How to work with files in Komodo Edit
  4. 12:28Understanding the Komodo Edit interface
  5. 10:19How to create snippets with variables and options
  6. 11:26Advanced snippet usage: Key binding, tabstops and abbreviations
  7. 13:47How to use templates in Komodo Edit
Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
Contact us

Below are the supported keyboard shortcuts for our video player.

Start / stop video
Go to next video
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
Jump to a percentage (2 is 20%, for example)
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
1 month
6 months
10% off
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.