BuildAModule Video Index (i.e. MegaPage)

Introduction

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

8. 1:49How to change the logo and header background colors
9. 1:33What a "theme" is and how to hide the site title
10. 1:55How to use the administration menus and add shortcuts
11. 1:29What a "module" is and how to install and uninstall modules
12. 1:37Why some very useful modules are not part of core Drupal
13. 4:27How to evaluate the health of a contributed module for use in a project
14. 0:35How development (dev) releases of modules work
15. 1:27What "alpha," "beta," "rc" and "stable" releases are and their security implications
16. 1:05How to install and enable a contributed module through the user interface
17. 0:53Why the terms "install" and "enable" might be confusing when it comes to modules
18. 2:09How to apply our module assessment checklist to the Coffee module
19. 1:11How to manually install a contributed module
20. 0:45How to jump to any administration page using the Coffee module
21. 1:29Quiz and challenges origin story
22. 1:17Quiz for chapter 2 of "Drupal 8 Site Building"
23. 0:45Challenges for chapter 2 of "Drupal 8 Site Building"
24. 7:10Solutions for chapter 2 of "Drupal 8 Site Building"

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

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

50. 0:43Why it's useful to know how to back up and restore a site
51. 0:47How to back up a Drupal site's files
52. 0:57How to back up a Drupal site's database
53. 0:57How to restore a Drupal site's files from a backup
54. 0:21How to restore a Drupal site's database from a backup with phpMyAdmin
55. 2:11How to restore a snapshot for any chapter in this series

How to work with users and permissions

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

How to use reference fields, views relationships and image styles

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

How to debug email and fight spam

85. 1:33How to prevent email from being accidentally sent by using Maillog
86. 0:39Why to create a list of tasks to execute before going live
87. 0:45How to get to a module's configuration page
88. 1:35How to configure Maillog and how to review sent messages
89. 1:55How the user registration form works and options for combatting spam
90. 0:41How to unblock or approve a user account
91. 1:07What a new user will see when logging into a site for the first time
92. 4:01How to hide the user registration form and a walkthrough of user account settings
93. 1:25How and why to install the Honeypot module
94. 1:35How to configure Honeypot to protect a form
95. 1:29How to verify the Honeypot module is working for a form
96. 3:25How to install and configure the CAPTCHA module to deter spam
97. 0:41How to add a CAPTCHA to a form
98. 1:53How to install and configure reCAPTCHA
99. 0:43Why a CAPTCHA can result in frustrated users
100. 1:45How and why to set up a Mollom account for spam filtering
101. 3:55How to install and configure the Mollom module
102. 0:55How to uninstall modules that are dependencies of other modules
103. 1:07Why it makes sense to completely uninstall unused modules
104. 1:59How the built-in flood control protection for the log in form works
105. 0:53How to log in when your account has been blocked for too many failed login attempts
106. 1:51Quiz for chapter 7 of "Drupal 8 Site Building"
107. 0:23Challenges for chapter 7 of "Drupal 8 Site Building"
108. 8:43Solutions for chapter 7 of "Drupal 8 Site Building"

How to use taxonomy and comments

109. 2:33Reviewing our blog entry and blog listing wireframes
110. 0:31Configuring our blog entry content type
111. 1:39What the terms "taxonomy," "vocabulary" and "term" mean
112. 1:09How to add terms directly to a vocabulary and view a term page
113. 1:17How to add a taxonomy reference field (i.e. tagging) to a content type
114. 1:19Adding a blog entry and testing out our tag field
115. 1:05How to change a taxonomy field to use a more tag-like input mechanism
116. 2:43How to add an image field and display it as a thumbnail
117. 2:01How to use the Colorbox module to provide a photo gallery overlay
118. 1:55How to find documentation on a contributed module when it doesn't quite work right
119. 0:35How to set up the "libraries" folder and add a jQuery plugin
120. 1:37How to flush Drupal's cache and why we would need to clear it
121. 1:01How to add multiple images at once and view multiple images in Colorbox
122. 2:25How to add commenting via a comment field
123. 1:25Testing our comment field and an overview what we need to do to make our comment form public
124. 0:53How to allow anonymous users to add moderated comments
125. 1:09How to moderate unpublished comments
126. 1:47How to allow anonymous users to post unmoderated comments and protect our comment form
127. 1:47The pros and cons of using a third-party service like Disqus or Facebook for comments
128. 0:33How to set up a Disqus account
129. 3:17How to install and configure the Disqus module
130. 1:11Quiz for chapter 8 of "Drupal 8 Site Building"
131. 0:33Challenges for chapter 8 of "Drupal 8 Site Building"
132. 7:50Solutions for chapter 8 of "Drupal 8 Site Building"

How to add CSS, edit date formats, modify view modes, and use Display Suite

133. 1:29What CSS is and how we'll use it to fix a layout issue
134. 1:21How to use a browser to discover which element's CSS you need to modify
135. 0:55Comparing adding CSS via a module like Asset Injector and creating a custom theme
136. 3:03How to inject CSS through the user interface with the Asset Injector module
137. 1:39How to troubleshoot issues with CSS from Asset Injector not working
138. 0:59How to add CSS to display image field images in a row
139. 0:37Where to find the CSS we use and reassurance that CSS is tricky
140. 0:39Reviewing the differences between our wireframe and the default "Submitted by" line
141. 1:37How to modify the date format used in the "Submitted by" line
142. 1:01How to add a custom date format
143. 2:03Installing Display Suite and Token and how to tell when a module has dependencies
144. 1:45How to use Display Suite to adjust page layout and give greater control over fields
145. 2:37How to add a custom field in Display Suite to replace the "Submitted by" line and how Token works
146. 2:33What view modes are and how to modify hidden view modes
147. 2:05How to add a custom view mode and use it in a view
148. 2:37How to modify the teaser view mode
149. 1:17Modifying our CSS injector rules and selectors to apply our CSS to the new view
150. 1:07Quiz for chapter 9 of "Drupal 8 Site Building"
151. 0:27Challenges for chapter 9 of "Drupal 8 Site Building"
152. 7:17Solutions for chapter 9 of "Drupal 8 Site Building"

How to set up paths and redirects, and working with blocks and block types

153. 1:11The benefits of using a readable url and how Pathauto can help
154. 1:11How to install Pathauto and why Drush is useful for installing modules with dependencies
155. 1:21How to configure a pattern in Pathauto to automatically generate URL aliases for new content
156. 0:53How to bulk generate aliases for existing content with Pathauto
157. 0:57Creating Pathauto patterns and bulk generating aliases for tour types and blog entries
158. 1:31How we can use the Redirect module to prevent duplicate URLs and why that's important
159. 1:47Demonstrating how Redirect adds redirects from old URLs and what a 301 redirect is
160. 0:29How to browse URL redirects and change the redirect status code
161. 1:45How to use the Diff module to see the differences between content revisions
162. 0:33Reviewing a message from our boss
163. 1:29What "blocks" and "regions" are and how to hide a block
164. 1:13Overview of enabled blocks and a more detailed explaination of blocks and regions
165. 0:45How to add a module-supplied block to a region and create a copy of an existing block
166. 1:07Two approaches we can take to creating a custom block
167. 1:55How to create a custom block type
168. 0:25How to adjust how fields in a custom block type are displayed and ordered
169. 1:23How to create a custom block of a particular custom block type
170. 1:13How to place an instance of a custom block and making some minor adjustments to the block
171. 1:27Adding a "featured adventurer" content type
172. 1:37How to create and place a Views block
173. 1:57When it makes sense to use a content type instead of a custom block type
174. 0:59Quiz for chapter 10 of "Drupal 8 Site Building"
175. 0:25Challenges for chapter 10 of "Drupal 8 Site Building"
176. 5:22Solutions for chapter 10 of "Drupal 8 Site Building"

How to use exposed filters and contextual filters in views

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

How to create custom forms and manage menus

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

How to customize search, run cron and improve performance

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

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

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

How to translate content and the interface

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

How to update Drupal and contributed modules

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

Introduction to Setting Up a Web Enviornment

1. 3:21Options for quicky setting up a web environment

Setting Up a Web Environment With Drupal on Windows

2. 3:09How to use Dev Desktop to set up a web environment and install Drupal on Windows
3. 1:06How to use Dev Desktop to set up an empty web project on Windows

Setting Up a Web Environment with Drupal on OSX (Mac)

4. 3:29How to use Dev Desktop to set up a web environment and install Drupal on Mac OSX
5. 0:43How to use Dev Desktop to set up an empty web project on Mac OSX

Setting Up a Web Environment with Drupal on Linux (Ubuntu)

6. 5:47How to install a web stack on Ubuntu Linux with XAMPP
7. 3:53How to install Drupal on Ubuntu Linux with XAMPP and Bitnami
8. 5:01How to add configure XAMPP for multiple web projects
9. 3:16How to install Drupal manually in XAMPP

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

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

HTML and CSS Basics, Part 2

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

How to Organize CSS and Use SMACSS

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

CSS Resets, Normalize.css and Package Management with Bower

68. 3:37How to override the browser's default styles with the 'body' selector
69. 4:01How to use the universal CSS selector and the problems with doing so
70. 1:39How to deal with slight color variations and the benefits of a standard color palette
71. 5:09How to set sensible default styles without a universal selector
72. 2:31Reviewing other typographical styles to determine if they should override the browser
73. 1:02How to resume from this point (part 1, step 17)
74. 2:20Why to consider cross-browser consistency with CSS early on
75. 1:27How the Universal Selector CSS Reset works
76. 3:27How the Eric Meyer's CSS Reset works
77. 1:35Comparing the pros and cons of using a CSS reset
78. 2:31How Normalize.css works
79. 1:55How to download and integrate Normalize.css
80. 3:15What a package manager is and why we would want to use one
81. 2:05How to install Node.js and npm on a Mac
82. 1:03How to install Node.js and npm on Windows
83. 1:57How to install Bower and the Normalize.css Bower package
84. 1:20What JSON is and exploring our first Bower package
85. 3:57Overview of Semantic Versioning and using a package manager for version management
86. 2:51How to create a bower.json file for private projects
87. 3:25How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*)
88. 1:39How to update bower packages and the benefits of using Bower

How CSS Units Work

89. 3:43The difference between absolute and relative CSS units and what a pixel unit is
90. 2:15How the 'em' relative CSS unit works
91. 1:37How using absolute CSS units like 'px' prevents font resizing
92. 2:29How the 'rem' CSS unit works and why it can be hard to use
93. 1:45How 'unitless' CSS measurements work
94. 1:59Comparing resources for learning more about CSS units
95. 1:43Why some people use older browsers
96. 2:37How to use 'caniuse.com' to evaluate browser support for CSS and HTML
97. 1:51How we're going to decide if we can use rem CSS units
98. 0:45How JavaScript polyfills can fill the gap in browser support

CSS Preprocessing and SASS

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

Project Organization With SASS and Using Source Maps

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

Using Bundler to Manage SASS Extensions

135. 1:15How to install Bundler
136. 2:29How to generate a Gemfile with Bundler
137. 3:35How to add dependencies to a Bundler Gemfile
138. 1:31How to use project-specific versions of gems with 'bundle exec'
139. 2:12How the Bundler Gemfile.lock file works
140. 1:55How to use 'bundle exec' with 'sass watch' and 'sass globbing'
141. 1:57How to specify a version range in Bundler that updates to the latest patch version
142. 2:37Setting up a README.md file and how we're automating documentation
143. 2:43How to troubleshoot SASS nesting and prefixing conflicts
144. 0:47Review of the typographic elements we have templated
145. 4:37How to use a footer HTML tag and add a copyright symbol
146. 3:07Adding SASS scaffolding for the footer
147. 2:04Setting a default text color for the footer
148. 2:07Why to avoid creating classes for common CSS property values between elements
149. 2:19Troubleshooting editing SASS partial styles with the browser inspector
150. 1:39How to adjust spacing between paragraphs in CSS
151. 3:47How variable scope works in SASS
152. 1:01How to use HTML comments and preparing to code the footer menu
153. 1:11Why to avoid using HTML lists for navigational elements
154. 4:17How to use the nav HTML element
155. 1:45How to space links in horizontal navigation
156. 0:51The difference between how horizontal and vertical margin work
157. 2:10How to convert a pixel measurement to a relative 'em' unit
158. 3:09How to perform mathematical operations and string concatenation in SASS

How to Use SASS Functions

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

Styling Typography With CSS

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

Working With Icon Fonts

192. 2:09Why it makes sense to use fonts instead of images for icons
193. 1:47What Font Awesome is and how to download it
194. 0:45What the .min file extension means and why it makes sense to minify CSS and JavaScript
195. 2:05How the @font-face CSS rule works
196. 1:45How to create a file for temporary CSS and what a "shame" file is
197. 2:02How to install a web font so you can use it in CSS
198. 1:49How to add an icon with Font Awesome and ways we can style the icon
199. 1:27Adding a phone icon to our green button
200. 4:01How to create a circle icon in CSS
201. 3:03How to find specific icons in Font Awesome
202. 1:07How to create a reliable circle icon by setting a fixed width
203. 2:19How to decide when an element should be its own component or part of another component
204. 1:33Refactoring our circle icons as elements of the icon box component
205. 2:01Restructuring our icon boxes as sub-components to allow for variation
206. 2:35Adding our second circle icon and making the updated styles permanent
207. 1:53Adding our final two circle icons
208. 2:09How to use the "before" pseudo-class to display non-semantic content
209. 3:31How to use CSS to add icons as content
210. 0:53Where to put our @font-family rule and cleaning up our HTML and CSS
211. 2:41Restructuring our phone icon HTML and CSS
212. 4:25Overview of the features in the full Font Awesome framework
213. 4:49The pros and cons of using a front-end framework like Bootstrap
214. 0:48Why we're deciding not to use the full Font Awesome framework
215. 1:27How to evaluate Bower packages for legitimacy
216. 3:27How to install Font Awesome as a Bower package
217. 6:55How to use aspects of the Font Awesome framework by including specific SASS partials
218. 2:15Why using a complete icon font on your site can be problematic
219. 2:29How to cherry-pick specific font icons using using Fontastic
220. 3:09The pros and cons of Fontastic, and how to combine fonts and upload custom icons
221. 0:29Why we're not using Fontastic just yet
222. 3:35How to use Symbolset to convert words to icons with ligatures
223. 2:39How to use FontSquirell to browse free fonts and generate web font packages
224. 2:30How to use Google Fonts to browse free fonts and generate hosted fonts
225. 4:05Creating the HTML and CSS for our header account link with an icon
226. 3:05How to inspect pseudo-elements in Chrome and use zoom to compare relative sizes
227. 1:23Discussing how we might use font icons for our slider navigation and contact form radio buttons
228. 1:27Adding the phone icon to our footer phone number
229. 7:17Creating the HTML and CSS for a Facebook social icon in our footer
230. 1:51How to use SASS variables to establish a relationship between different numbers in CSS rules
231. 0:41How to prevent CSS from adding padding and border to height and width with "box-sizing"
232. 1:09How to use line height to center text vertically
233. 1:15Reorganizing the styles for our social icon to apply to all social icons
234. 2:19Creating the HTML and CSS for our other social icons
235. 1:41How to adjust our CSS to allow for easily re-sizable circle icons
236. 2:13How to add semantics to an icon with a title attribute or hidden element
237. 1:08The pros and cons of opening links in a new window, and how to do it
238. 3:03How to resume from this point (part 1, step 23)

Customizing Forms

239. 4:47A very brief overview of the structure of an HTML form
240. 2:05How to create HTML and CSS form scaffolding and a submit button in HTML
241. 2:35How to style our submit button to match our other buttons
242. 1:50How to add a multi-line text input to a form with the "textarea" element
243. 0:27How to add a name attribute to form inputs to identify form data
244. 5:37How to style a textarea input with CSS
245. 2:05How to use the "placeholder" attribute to add instructions inside a form element
246. 2:19How to create the HTML structure for a select input
247. 4:23How to style a select input and address padding issues with height and the "text-indent" property
248. 1:38How we'll approach changing the text color and icon in our select box
249. 3:37Overview of 4 options for styling select inputs consistently across all browsers
250. 1:19Overview of 3rd party libraries for replacing select box inputs with more easily style elements
251. 2:29How to download selectize.js with Bower and set up an example
252. 1:39Why we're not using aggregated and minified versions of JavaScript and CSS
253. 1:47How to find and include dependencies for a 3rd party JavaScript library
254. 1:13How to check for JavaScript errors in Chrome
255. 5:45How to style a selectize.js input
256. 1:03Reviewing our selectize.js input in various browsers and operating systems
257. 0:37What a JavaScript polyfill is and why we might want to use one
258. 2:51Finding and installing a polyfill to add placeholders for Internet Explorer 9
259. 2:13How to create an arrow with pure CSS using transparent borders
260. 0:53Refining the style of the text in our select input
261. 2:15How to style a text input with CSS
262. 1:37Considering our options for sharing styles between different form inputs
263. 3:25How SASS "placeholders" can be useful for sharing CSS between elements
264. 1:03Adding another text input for an email address
265. 3:09Making the margin between our form elements consistent
266. 1:31Options for sharing common styles between our selectize input and our other inputs
267. 2:11Creating a naming convention for placeholder SASS rules
268. 2:19How a radio button input is structured and why not to use the "id" attribute for styling
269. 2:51How to set up HTML scaffolding for a radio button group
270. 1:11A quick overview of how we will approach styling our radio buttons
271. 3:48How to customize a radio group, part 1 - adding a font icon to replace the radio
272. 2:11How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label
273. 4:07How to customize a radio group, part 3 - hiding the radio and centering the labels
274. 3:05Styling the textual label for our radio group
275. 0:59Centering our contact form in the browser horizontally
276. 0:35A brief summary of what we have left to do
277. 1:33Overview of the elements in our search form and why we're not using a framework for it
278. 3:03Setting up the HTML scaffolding for our search form
279. 2:04Setting up the CSS scaffolding for our search form select input
280. 3:32How to change the icon and icon position of a select input
281. 3:39Adjusting the select box styles on our search form
282. 1:00How to set differently sized rounded corners for each corner of an element
283. 1:49Summary of what we still need to style in our search form and starting the process
284. 1:59How the "vertical-align" CSS property works and aligning our elements to the top
285. 1:49Adjusting the height of our search form inputs to align them
286. 0:49Discussing why the selectize.js dropdown icon showed up after we hid it with CSS
287. 1:21How to override any CSS with the "!important" keyword and why it's so problematic
288. 0:41Finding a solution other than "!important" to solve our reappearing icon issue
289. 1:51Fixing an issue where our select is a pixel too high by setting height on a different element
290. 0:49How to remove horizontal spaces between elements by setting the font size to zero
291. 0:55How to remove horizontal space between elements with the "float" CSS property
292. 1:55Removing the horizontal space in our search form and adjusting the borders
293. 2:17How using a "button" HTML input instead of a submit input allows for pseudo-elements
294. 2:28Refining the CSS of our search form submit button and text input
295. 5:01How to add a custom icon by creating a new icon font with Fontastic
296. 1:17Refining the styles on our updated magnifying glass icon submit button
297. 1:23Testing our search form and moving the HTML to the right place in the template

Working With Responsive Images and Breakpoints

298. 2:23How to save a transparent image in Photoshop and why images on the web are tricky
299. 0:50Adding our logo image for testing
300. 0:40How to resume from this point (part 1, step 41)
301. 0:59How images display differently depending on the pixel resolution of the viewing screen
302. 0:21The pros and cons of using lower resolution images
303. 3:26The pros and cons of using high resolution images
304. 3:03How to serve both low and high resolution images with Retina.js
305. 2:43How to set up a lightweight web server with Node.js to get around local file browser issues
306. 1:35How to avoid 404 errors when using Retina.js
307. 13:27What a 404 error is and why we should try to avoid them
308. 1:39The downside of using Retina.js to serve high density images to high resolution screens
309. 1:19What "responsive design" means and a brief history
310. 1:31What responsive design implies for the layout of our site
311. 0:53What responsive design implies for our images
312. 1:05Why the browser can't serve the right images for the right scenario without our help
313. 4:15How to use the "srcset" property in the image tag to help the browser fetch the right image
314. 1:55How "media queries" work to pull in different CSS based on conditions in the browser
315. 1:19How the "sizes" image attribute works to provide breakpoint information to the server
316. 1:07What a "breakpoint" means in connection to CSS media queries
317. 3:25How to use the srcset attribute safely until there's bettter browser support with picturefill
318. 1:05Setting up our logo image to match the mockup
319. 3:19How to use SVG images for scalable vector graphics on the web
320. 3:27The difference between bitmap and vector graphics, and saving our slideshow background images
321. 1:58Adding the HTML and CSS scaffolding for our slideshow background image
322. 4:13How to set a background image so that it covers an element but does not repeat
323. 2:55How to create a media query to swap background images based on the browser width
324. 1:57How to swap images with a media query based on screen resolution
325. 2:35How to use "min-width" to set multiple breakpoints in your CSS based on browser width
326. 3:45How the SASS "breakpoint" extension works, and troubleshooting installation
327. 1:09How to install Compass
328. 2:32Encouragement for when you run into dependency issues with Ruby, node.js or Compass
329. 3:19How to set up a Compass project
330. 2:29How to set up the breakpoint extension with Compass and use it to simplify our SASS
331. 0:43Summary of why the "breakpoint" SASS extension is so useful
332. 0:45Summary of how many projects set up their media query breakpoints
333. 2:33Merging our "slide" and "slideshow" components and refactoring our classes
334. 1:31How we will approach styling our circular, bordered images
335. 4:23Why we're using a background image for our circular images, and building out the basic CSS
336. 2:45How to style a circular image with a border and drop shadow
337. 1:14Adding our second image, and moving our snippet HTML to the right place

Styling Slideshows and Carousels

338. 2:43Reviewing what functionality we need for our slideshow sliders
339. 2:43Overview of the "Flexslider" feature set and review of examples
340. 4:05How to install Flexslider and add a working example
341. 2:01How to connect Flexslider to existing HTML to convert it to a slider
342. 0:59Tracking down why the Flexslider navigation does not appear over the slider
343. 4:40How the relative, absolute, static and fixed CSS "position" values work for element layout
344. 3:23Why adding left padding to slides in our slideshow container doesn't work
345. 0:49Solving our slideshow left padding issue by applying padding to the slideshow container
346. 0:25Setting the width of our slideshow slides
347. 2:07A discussion of options for vertically aligning our slideshow content
348. 2:13How the CSS "flex" display, or "Flexbox", works
349. 2:27How to use Flexbox to vertically align a block element
350. 1:21Why using Flexbox doesn't make sense for every project
351. 1:31Why we can't vertically align compound elements with the "vertical-align" property
352. 0:41Why vertically aligning with "line-height" doesn't work for multi-line elements
353. 1:33How HTML tables work and why they were once used for layout
354. 2:08How to make any element work like a table cell with CSS
355. 1:29Using the absolute positioning and negative margin solution for vertically aligning an element
356. 1:13How to use a CSS transform to vertically align an element
357. 0:39Reviewing browser support for CSS transforms
358. 0:21Why we're not using JavaScript to vertically align our slides
359. 1:07How to use the CSS "transform" property to alter the display or position of an element
360. 2:11Permanently applying our CSS tranform solution to vertically align our slides
361. 0:55Adding back our slide padding and fixed width
362. 1:43How to fix many Flexslider behavior issues by adding the "flexslider" class
363. 1:13How Flexslider uses a font for their previous and next icons, and what we'll do next
364. 1:37How to create a vector SVG icon from a bitmap image with Illustrator
365. 1:15Creating our "previous" icon and importing our new icons into our custom Fontastic font
366. 0:41How to update a Fontastic font locally when the icons have changed
367. 1:55How to replace Flexslider icons with our own custom icons
368. 1:47How to adjust Flexslider settings with some simple JavaScript
369. 3:03How to change the size of the Flexslider next and previous icons
370. 2:39How to adjust the position, color and shadow on the Flexslider next and previous navigation
371. 2:35Moving the styles for our next icon from the browser to permanent code
372. 2:03Styling our previous slideshow icon and troubleshooting spacing
373. 0:35How to hide the text of an anchor element by using a fixed width
374. 1:13Using negative margin to position our slideshow's previous icon
375. 1:37How to adjust the position of the slider page navigation
376. 0:43How to set Flexslider to not cycle automatically
377. 2:49How to modify the look of the Flexslider pagination with CSS
378. 0:43Overview of our strategy for overriding third party library CSS selectors
379. 0:45Fixing some CSS errors introduced through sleep-deprived developer error
380. 1:13How to change the spacing between Flexslider paging elements
381. 2:51How to resume from this point (part 1, step 43)
382. 2:37How to create multiple vertical columns for content using float and margin
383. 1:53Using the float and margin strategy for our author image and snippet content
384. 3:11How to use multiple floats to separate content into columns
385. 1:59How to use the CSS "overflow" property
386. 1:17Refining the margins for our snippet content
387. 3:15Moving our snippet styles from the browser to permanent SASS rules
388. 2:05How to add margin between grouped, floated elements
389. 0:59Why it makes sense to apply CSS changes in the browser before committing them to code
390. 2:35Reviewing how we added margin between snippets and making the CSS permanent
391. 2:57The implications using absolute or relative units for content layout
392. 1:39Testing variations in base font size with our layout and making corrections
393. 1:17When it's better to use absolute units for sizing when dealing with layout
394. 4:41How to set up Flexslider to work as a carousel
395. 3:35How to set the width and spacing of our Flexslider carousel to fit the template
396. 3:07How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation
397. 0:49Modifying the colors in our carousel previous and next icons
398. 3:05How to move an element outside of its container with the "left" or "right" CSS properties
399. 2:35Moving our carousel CSS from the browser to our SASS
400. 3:25How to simulate a hover state in the browser in order to style CSS
401. 1:03Refining our carousel slideshow CSS to use SASS variables for common values

How to Work With Responsive Layouts

402. 0:45Congratulations for rendering all of the elements in our mockup, and moving onto layout
403. 3:11How fluid and fixed layouts worked before responsive design became more ubiquitous
404. 3:19The limitations of maintaining a separate mobile site
405. 2:41Variations in how clients will approach a responsive project
406. 0:55What "mobile first" means in terms of business strategy
407. 1:15What "mobile first" means in terms of design
408. 2:15What "mobile first" means in terms of CSS
409. 0:39Summary of which ways we can approach this project "mobile first"
410. 2:25Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches
411. 1:39How our footer will react to differences in browser size
412. 0:49How we will code our footer CSS desktop-first and then compare with a mobile-first approach
413. 2:05How to group elements with wrapper div tags for layout styling
414. 1:35Reorganizing our CSS to work with wrapper elements
415. 3:03How to use "float" to align elements to the right and left of the browser in a flexible way
416. 0:43How moving around markup for layout can be an accessibility issue
417. 1:57Using negative margin to align our footer elements
418. 3:33Adjusting styles to collapse the footer into a single column
419. 4:06Adding breakpoints to collapse our footer into a single column using "max-width"
420. 1:41Adding a breakpoint to collapse our footer navigation
421. 4:53How to convert desktop-first CSS to mobile-first CSS by switching to "min-width"
422. 1:11Discussing how the "qualities" section should react responsively
423. 2:01Adjusting the padding in our stacked hero sections
424. 3:55How to bump an element out of the container box and center it above the content
425. 1:53Adjusting the text position and layout in our "qualities" boxes
426. 2:41When it makes sense to use relative units for width, and moving our CSS to our SASS files
427. 3:37Making the relationships of our SASS values explicit with variables and equations
428. 2:45Adjusting the margins within and around our icon box
429. 4:33Aligning the icon boxes to the center and adding margin between them
430. 0:37What we want our icon boxes to look like as the browser gets smaller
431. 3:43How to figure out how the site's padding and overall layout should work from a mockup
432. 1:25Adding the overall layout CSS to our "qualities" section
433. 1:19Options for applying site layout styles to multiple elements
434. 4:17 Setting up a SASS placeholder for full-browser layout styling with breakpoints
435. 2:01Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be
436. 3:17Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2
437. 1:03Fixing the margin between the "qualities" title and the icon boxes
438. 1:57How the "max-width" CSS property works
439. 0:41Adjusting our icon box margin one last time
440. 0:41How you can use these layout strategies for any grid of elements
441. 3:38How to adjust a Flexslider carousel to work at different breakpoints
442. 5:05Making our responsive carousel CSS permanent
443. 2:39Adding a breakpoint to change the position of our carousel navigation on small screens
444. 2:13How to generate CSS source maps in Compass, and reconnecting the source files in Chrome
445. 1:29Adding a breakpoint to hide superfluous snippet content on smaller screens
446. 2:31How to fix unexplained white space that forces horizontal scrolling
447. 1:01How to remove the white border around the Flexslider slideshow
448. 1:23Fixing horizontal scrolling issue created by our "snippet" carousel
449. 2:17Adjusting our carousel to stretch across smaller browser windows
450. 1:15Converting our carousel's "max-width" breakpoints to "min-width"
451. 1:21How to hide Flexslider navigation in smaller browser windows
452. 2:15Adjusting the styles of our alt hero section title to be responsive
453. 1:35Adjusting the contact form CSS to be responsive
454. 1:46How to use the CSS "whitespace" property to prevent text from wrapping to another line
455. 1:51Re-ordering the content in our template to match the mockup
456. 3:37Discussion of how we plan to adjust the header for different viewport sizes
457. 3:09Adding the HTML and CSS scaffolding for our top header section
458. 3:23Positioning our top header elements in the browser
459. 3:51Moving our top header CSS from the browser into our stylesheets
460. 0:49How we want our top header to behave as the browser gets smaller
461. 3:53Adjusting our header bottom to stretch across the entire browser and center its content
462. 2:15Aligning the elements in the header bottom and adding a border

How to Work With Responsive Layouts, Part 2

463. 0:55Removing extra padding from the header bottom section
464. 3:55Adding responsiveness to our top header by adjusting CSS in the browser
465. 1:17Moving our responsive header CSS from the browser to our SASS files
466. 0:43Adding a breakpoint to stretch the logo the full browser width on small screens
467. 0:55Why it's important to add extra padding for touch screens
468. 0:45Making the menu in our header bottom responsive
469. 1:07How to simulate mobile and desktop devices with Chrome DevTools
470. 3:03How to use the "viewport" meta tag to tell the browser a site supports mobile devices
471. 1:19How to test a site at different download speeds with Chrome DevTools
472. 1:49How to see how media queries affect a site with the Chrome device simulator
473. 2:39Styling our header bottom to be responsive
474. 4:57When it makes sense to use "max-width" and converting header breakpoints to "min-width"
475. 3:37Adjusting our slideshow CSS for smaller viewports
476. 1:15Converting our slideshow breakpoints to "min-width"
477. 1:38Evening out the vertical padding in our slideshow
478. 5:03Reviewing our template at different browser sizes for possible touch-ups
479. 2:51How the "z-index" property works and how layers are positioned by default
480. 1:53Why z-index poses issues as templates get more complex, and how to solve those issues
481. 1:11How to test if z-index will solve a layer ordering issue
482. 1:23Fixing the layering issue with our selectize dropdown
483. 1:41Talking through how to create a rounded drop-shadow under a rectangular element
484. 4:27How to add a curved drop shadow to an element with CSS
485. 0:45Moving our curved drop shadow CSS to SASS to make the changes permanent
486. 0:55Basic approaches to testing a template in multiple browsers
487. 2:29Reviewing our template in the Firefox browser for Mac
488. 1:03Reviewing our template in Chrome for Windows
489. 1:01Reviewing our template in Firefox for Windows
490. 0:55Overview of strategies for testing a site on multiple versions of Internet Explorer
491. 1:43Reviewing our template in Internet Explorer
492. 0:37 How cross-browser reviews typically work with completed sites

Optimizing Front End Performance and Adding Automation

493. 1:33What we've covered in terms of front end performance, and what we'll cover now
494. 0:57How to open the network dialog in DevTools and disable local caching
495. 1:13Why front end performance (i.e. speed) is important
496. 1:41How to view the number of downloaded files and their sizes in the Chrome DevTools network tab
497. 1:05Why the site loading speed on your machine might not reflect an average experience
498. 1:01How download size is often not the biggest factor in site loading speed
499. 0:40How the "DNS Lookup" bar works in the DevTools network tab
500. 0:44How the "Initial connection" bar works in the DevTools network tab
501. 0:35What "Round Trip Time" (RTT) and "handshake" mean in the context of downloading files
502. 1:33How the "Request sent" and "Waiting (TTFB)" - Time To First Byte - bars work in DevTools
503. 0:31What we can and can't do to optimize the loading time of our index.html file
504. 0:33How to sort files in the DevTools network tab to reflect actual download order
505. 1:01Reviewing the loading time for our jquery.js file
506. 3:19How the browser opens multiple connections to download files in tandem and sequentially
507. 1:53Summary of where load time comes from for downloaded files
508. 1:23How we can reduce the size and number of files through minification and concatenation
509. 1:43What the DOM is and what "DOMContentLoaded" time means
510. 0:43What an empty bar might mean in the Chrome DevTools network tab
511. 1:55How and why to research internet speeds in other parts of the world
512. 3:57How to determine Round Trip Time (RTT) to a site from other parts of the world
513. 1:17Why we're going to concatenate and minify our files, and why we'll use automation to do it
514. 1:55How to concatenate multiple JavaScript files manually and why it's a bad idea
515. 2:45How to minifiy code by hand, what minification does and why it's tough to debug
516. 1:57Why we would swap out concatenated, minified code for separate files while testing
517. 1:17How automation can save time, reduce error and get a team on the same page
518. 0:37Why we're using the Grunt automation tool for this project
519. 2:14How to install Grunt
520. 2:57How to install a project-specific version of Grunt
521. 1:31How to install a Grunt extension for concatenating files
522. 2:31How the different parts of a Gruntfile.js file work
523. 3:09How to configure grunt-contrib-concat in our Gruntfile.js
524. 0:51How to run the default Grunt configuration on the command line
525. 1:11How to create Grunt task variations and run specific ones when our task runs
526. 1:19Adding our JavaScript files to our Grunt concatenation configuration
527. 1:43The advantages of putting JavaScript at the end of the body tag instead of the beginning
528. 1:41Why to move custom JavaScript to a separate file, and why JavaScript file load order matters
529. 1:07Wrapping up the configuration of our JavaScript concatenation and generating a concatenated file
530. 1:27Setting up the Grunt configuration to concatenate our CSS files
531. 0:51Reviewing the performance effect of concatenating our JavaScript and CSS
532. 0:31How minifying CSS works
533. 3:03How to minifiy JavaScript with Grunt and Uglify
534. 3:07How to minify CSS with Grunt and the grunt-contrib-cssmin plugin
535. 0:27Reviewing our performance gains from concatenating and minifying both JavaScript and CSS
536. 6:43How to use grunt-injector to add JavaScript and CSS file references in your template on demand
537. 1:57How to add a second configuration to a Grunt plugin
538. 1:12How to add separate dev and production tasks in our Gruntfile.js
539. 3:27How to fix our concatenated CSS by removing our concatenation separator setting
540. 3:35Comparing the performance of our optimized site with our pre-optimized version
541. 1:31How and why to make our paths relative by configuring the grunt-injector plugin
542. 2:03Why browser prefixing CSS manually or with Compass is problematic
543. 2:39How to use the Grunt Autoprefixer plugin to add and update browser prefixes in our CSS
544. 3:26How to configure grunt-autoprefixer, and comparing our CSS before and after prefixing
545. 0:19Switching back to development mode by running Grunt

Improving Web Accessibility

546. 3:33How to resume from this point (part 1, step 45)
547. 1:59What "accessibility" means in terms of the web
548. 2:49Section 508 versus WCAG and how to justify spending resources on accessibility
549. 3:51How to use the WCAG Quick Reference to improve your understanding of accessibility
550. 0:43How web accessibility is a continuum
551. 2:39How to test support of keyboard navigation on your site
552. 1:45How to make custom radio buttons accessible with the keyboard
553. 4:24How to allow users to skip to the main content of a page with the keyboard
554. 2:25How to use Chrome's Accessibility Developer Tools to audit a site for accessibility
555. 1:59Adding labels to our search form for accessibility and hiding them
556. 4:01Adding labels to our contact form and hiding them with a SMACSS state
557. 0:41Adding an "alt" attribute to our logo
558. 0:53About using meaningful images as CSS backgrounds and accessibility
559. 2:45How contrast ratios and WCAG ratings work
560. 1:13Reviewing links with unclear link text
561. 1:27How to run an accessibility audit with Firefox's AInspector Sidebar add-on
562. 2:13What ARIA is, how "landmarks" work and adding a "main" landmark
563. 3:15How and why to use the "navigation" role on HTML "nav" elements
564. 1:49Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles
565. 2:01How and why to add ARIA landmark labels
566. 1:01How to add a language code to your web page
567. 1:17Reviewing our other "Styles / Content" accessibility audit checks
568. 0:47Reviewing our AInspector Sidebar "Links" accessibility violations
569. 2:35How to add text in a link for accessibility but hide it from view
570. 1:27Fixing an accessibility issue with our hidden labels
571. 2:29How to use the "fieldset" and "legend" HTML tags for input groups
572. 2:21Wrapping up our accessibility audit review

Congratulations and Bonus

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

Introduction

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

Installation and Theme Improvements

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

Content Authoring

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

Views and Configuration Management

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

Content Type Management

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

Changes in Comments, Blocks and Contact Forms

42. 1:59Comparing comment settings in Drupal 8 and Drupal 7
43. 1:07How "comment types" work in Drupal 8
44. 0:41How to hide the comment "subject" field in Drupal 8
45. 0:29Cleaning up our added comment field and how field "storage settings" works
46. 0:27Comparing comment management in Drupal 8 and Drupal 7
47. 0:35How to view a list of managed files in the Drupal 8 interface
48. 1:41Comparing the block layout interface in Drupal 7 and Drupal 8
49. 2:29Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7
50. 1:17Comparing adding custom blocks and block types in Drupal 8 and Drupal 7
51. 4:13Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module
52. 1:40Comparing the Webform module to the Drupal 8 form builder

User Management

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

Modules That Have Been Added, Removed, Moved or Modified

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

Site Configuration

75. 1:09Comparing the "Site information" and "Cron" admin pages in Drupal 8 and Drupal 7
76. 2:23Reviewing improvements to caching and performance in Drupal 8
77. 0:19Comparing the "Logging and errors" page in Drupal 7 and Drupal 8
78. 2:53How to avoid overriding important changes with importing configuration in Drupal 8
79. 1:21Comparing changes to the file system settings in Drupal 7 and Drupal 8
80. 1:55Comparing changes to the image styles interface in Drupal 8 and 7
81. 0:23Comparing the Image Toolkit interface in Drupal 7 and 8
82. 2:15Comparing search configuration in Drupal 7 and Drupal 8
83. 0:47How clean URLs work in Drupal 8
84. 1:41How date and time formats have been improved in Drupal 8
85. 0:59How the "Trusted host settings" option works

Translation Workflow Changes

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

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

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

How to Work With Menus, Modules and Webform

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

How to Work With Content Types and Fields

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

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

58. 3:05How to add a new field to a view
59. 3:31How to set the label, wrap HTML and set default text for a field in a view
60. 2:57How to rewrite the output of a field to include other fields
61. 1:39How to edit a view from the view display
62. 2:22Adding our remaining view fields in quick succession
63. 3:22How to adjust the sort order of content in a view
64. 4:53How to deal with module installation errors and install the Date module
65. 4:58How to add and configure a date field
66. 4:05How to work with the pop up calendar and extend the year range
67. 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

68. 1:17How to delete a field from a content type
69. 4:30How to deal with broken views handlers and restore unsaved view changes
70. 3:52How to modify date formats both globally and in a view
71. 2:42How to sort view fields and fix broken sort handlers
72. 5:00How to change view menu settings and add a header
73. 4:41How to add a date-based filter to a view
74. 1:53How to delete a piece of content and modify multiple pieces of content at the same time
75. 3:17Reviewing our guide data and adding another content type
76. 1:02A brief explanation of taxonomy
77. 2:11How to add a taxonomy vocabulary with terms
78. 3:44How to add a taxonomy term reference field to a content type
79. 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

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

How to Work With Blocks and Permissions

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

Overview of Permissions and Text Formats

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

Configuring Text Formats and Setting Up a Wysiwyg

113. 3:58Review of the text format settings page and how filters work
114. 1:34How to re-order text format filters and why order matters
115. 2:54How to configure text format filters
116. 2:11How to add a new text format
117. 3:58How to configure permissions for text formats
118. 2:05What Wysiwygs are and how to install the Wysiwyg module
119. 1:03The problems with Wysiwygs and possible alternatives
120. 2:39How libraries work
121. 2:38How to install the TinyMCE library for the Wysiwyg module
122. 3:05How the Wysiwyg "Basic settings" and "Buttons and Plugins" options work
123. 3:20How the Wysiwyg "Editor appearance" and "Cleanup and output" options work
124. 3:13How the Wysiwyg "CSS" settings work and our Wysiwyg in action
125. 1:57Chapter review and challenges for "Configuring Text Formats and Setting Up a Wysiwyg" chapter

Working With Custom Blocks and Image Styles

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

How to Work With CSS

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

Troubleshooting Module Installation and Configuration

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

Updating Modules and Manipulating CSS

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

More CSS Updates and Troubleshooting Text Formats

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

How to Evaluate Modules and Install IMCE

183. 4:32How to turn the Media browser Wysiwyg plugin on
184. 2:47How to troubleshoot permissions issues with a module
185. 2:33How to find solutions on Drupal.org by using Google and reading comments first
186. 4:28How to assess the health of a module by reviewing the module project page
187. 3:21How to learn more about what a module does by reading the module project page
188. 2:21Viewing a demo of IMCE and installing the IMCE module
189. 1:58Overview of the IMCE main configuration page
190. 4:31How an IMCE profile configuration works
191. 1:27Comparing two IMCE configurations
192. 1:38How to set up a new IMCE configuration profile
193. 1:52Chapter review and challenges for the "How to Evaluate Modules and Install IMCE" chapter

How to configure IMCE and Wrap Up Our Project

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

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

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

How to Configure Content Type Settings and Splitting Fields Between Types

22. 1:56How to determine when to split up content into two content types
23. 3:43How to set sane default publishing settings for a content type
24. 1:36Why you would want to share existing fields between content types
25. 4:35How to set up an image field and why to use individual folders for media fields
26. 3:05How to choose a good, basic URL scheme and adding our first product
27. 1:26About the special role of the first created user (user 1)
28. 1:39Setting up our "review" content type
29. 2:39How to install module dependencies and installing the Entity Reference module
30. 2:19The difference between a field and a field instance, and setting up an entity reference field
31. 1:44About the Fivestar and Voting API modules
32. 4:04How to add a fivestar field and configure voting tags
33. 4:37Adding our additional fivestar fields and why site building can sometimes feel tedious
34. 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

35. 1:07Creating a backup and why things are going to start getting interesting (Backup 3)
36. 3:23An overview of the two methods to group fields in a display: view modes and the views module
37. 2:26The 4 more common methods of positioning content on a page
38. 0:58Quick recap of the 4 methods of positioning content
39. 3:16How to choose the correct view mode for a particular context
40. 2:33Overview of the Display Suite modules and which ones we should enable
41. 2:07How to enable editing view modes and adding a custom view mode with Display Suite
42. 2:06How to enable a custom view mode and test it out
43. 2:09How to hide the 'submitted by' information and node title by setting a Display Suite layout
44. 1:43How to add a field with custom content to a view mode with Display Suite
45. 1:48How to choose an image style for a particular context
46. 2:28When to create a new image style and how to name it
47. 0:38Creating a backup and nice work (Backup 4)
48. 3:36How to display content in a sidebar within the content region using Display Suite
49. 1:43How the 'region to block' feature works and what we mean by 'region'
50. 6:10How to display fields in blocks that can be enabled in theme regions using Display Suite
51. 1:56Removing the block title, label and shrinking our image style
52. 1:26Making another backup (Backup 5)

How to Use the Context Module for Positioning Content

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

How to Use Panels for Positioning Content

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

How to Import Content With Feeds

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

Advanced Views

93. 3:10Why to display a single piece of content with Views, installing Views, and why we're building the same view 3 times
94. 5:29How to group views displays, and how to decide what entity to base a view on
95. 1:46How to fill in the views wizard to create a block
96. 1:51How contextual filters work in the Views module
97. 2:27How to add a views contextual filter for the node currently being viewed
98. 1:23How to preview a view with a contextual filter
99. 3:48How to display a full node in a views block
100. 1:09Why to disable a block even when it's not visible, and displaying a block only for certain node types
101. 1:37How to display a block for certain node types using Context
102. 2:30Comparison between using Context and the default blocks configuration workflow
103. 2:39The difference between our two views and filling out the views wizard
104. 1:43How relationships work in Views and how to add a referencing entity relationship
105. 2:49How to create a contextual filter with a relationship in Views
106. 2:27How to use fields or rendered entities when using a relationship in Views
107. 0:53Enabling our product-based block with Context
108. 1:49How to hide a block title using the Context module and why it's a bad idea
109. 1:38How to hide a Views block title
110. 0:56About how we're going to rebuild these views using fields instead of a view mode
111. 5:44How rebuilding our review-based view using fields adds complexity
112. 2:16How to rebuild our product-based view to use fields

Where Display Modules Overlap and URL Strategy

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

How to Work With User Fields and Import Users

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

Formatting a Blog Entry Page

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

Custom Formatters and Creating an "About the Author" Block

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

More Advanced Views (Aggregation and Relationships With Relationships)

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

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

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

Building a Slideshow Using Views Slideshow

207. 1:00How we're going to approach building our slideshow
208. 3:50How the Libraries and Views Slideshow modules work, and installing both
209. 2:24How exposed filters and attachments work in Views
210. 4:06About using multiple displays in a single view, and about our slideshow components
211. 3:42How to set up the jQuery Cycle plugin for Views Slideshow
212. 4:56About the "Cycle options" available in Views Slideshow
213. 3:24How the pager and controls widget settings work in Views Slideshow
214. 1:44What we need to do to complete our slideshow view
215. 4:46Setting up our node display with custom image style for the slideshow
216. 1:45How to add a views filter to show just nodes with images
217. 4:02How to create a pager of thumbnail images in Views Slideshow
218. 3:42How to display our Views Slideshow thumbnail pager inline
219. 1:55How to add a border around an active pager item
220. 2:27Fixing alignment, adding wireframe boxes and adding some spacing to our slideshow
221. 4:53How to style a slideshow's next and previous buttons as images
222. 3:26Why the Nodequeue module is so useful, and installing it
223. 3:26How to create and modify a Nodequeue queue
224. 2:00How to use a Nodequeue queue in a view to filter nodes
225. 1:28How we're going to hide the slideshow on every page but the first one
226. 4:10How to use a contextual filter to show a Views attachment display only on the first page
227. 0:51Backing up our work (Backup 16)
228. 4:04Overview of additional slideshow-related modules

Working With Comments

229. 3:23The 3 levels of comment security
230. 0:41About spam protection on other forms, including the user registration form
231. 2:51What questions to ask clients (or yourself) before setting up commenting
232. 2:29How to set up permissions to allow anonymous users to post comments and what's coming up
233. 2:04What a CAPTCHA is and how to install the CAPTCHA module
234. 4:23How to configure the CAPTCHA module and enable it on multiple forms
235. 2:59How to configure an image CAPTCHA
236. 0:56How to allow authenticated users to bypass a CAPTCHA
237. 2:32What reCAPTCHA is and installing the module
238. 3:25How to configure reCAPTCHA with public and private keys, and setting a theme
239. 2:03How the "honeypot" and "timegate" methods work for preventing bot-generated spam
240. 3:56How to install and configure the Honeypot module
241. 1:12How to disable the user registration form
242. 0:28Backing up our work (Backup 17)
243. 1:59How Mollom works for spam protection, and installing the module
244. 4:42How to configure Mollom
245. 4:16How to configure Mollom to protect our comment form and running some spam tests
246. 0:50A quick summary of the spam protection tools and techniques we used

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

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

How to Work With Arrays in PHP

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

Logic, Control Structures and Looping

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

Creating Custom Functions and Working With External Data

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

Troubleshooting errors and using operators

57. 2:32Accidentally assigning a variable instead of comparing it
58. 2:54Troubleshooting a missing closing bracket
59. 1:34Troubleshooting a missing opening bracket
60. 2:11Troubleshooting a missing parenthesis
61. 1:20Troubleshooting the "Wrong parameter count" error
62. 3:32How to use assignment and string operators
63. 2:40How to use comparison operators
64. 1:47How to use arithmetic and incrementing operators
65. 2:03How to use logical operators
66. 2:01How to use array operators

Working With Forms in PHP

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

Working With Sessions in PHP

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

Working With the (MySQL) Database

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

Working with CRUD functionality and our database

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

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

144. 2:41Additional ways that we could use databases and our next big example
145. 3:13Reviewing the visual structure of our static site
146. 1:07Reviewing the folder and file structure of our static site
147. 5:35Comparing the HTML structure of our home and about pages
148. 3:23How to create a header template file
149. 3:53Creating our footer and applying our templates to the home page
150. 2:07Applying our header and footer to our other pages
151. 1:52Reviewing our product page and identifying repetition that can be turned into a function
152. 4:03How to render our products with a function to reduce HTML repetition
153. 3:01When to use unique identifiers (IDs) and what a universally unique ID is (UUID)
154. 5:00How to use a central product array for both of our product listings
155. 1:54Applying our product rendering function to the product page
156. 1:27The benefits of routing every page request through a single file with mod_rewrite
157. 2:24How a .htaccess file works and how to set one up
158. 5:41How to route all URLs through a single file (the Front Controller pattern)
159. 3:29How to use the URL query string to trigger an include
160. 1:32How to use the heredoc syntax to avoid escaping multiple quotes
161. 2:06Why to use a full page template file instead of a header and footer
162. 2:50A quick summary of our changes and a review of our other include files
163. 1:27Why it's useful to have configurable settings for the end user and to reuse on other sites
164. 6:04Walking through changes after adding configurable settings
165. 2:14Why it's better to use a function for settings instead of direct variables
166. 3:24What still needs to happen to allow end users to manipulate data on our site
167. 3:19Creating the database and users table for our next steps
168. 1:38Demo of our CMS login form
169. 5:42Adding our database connect script, notices function and login links
170. 3:52How our login and logout features work
171. 2:18Demo of our new edit, delete and add user features
172. 0:48Reviewing changes in our login form
173. 6:53What happens in our updated CRUD code when we submit a user edit form
174. 5:52What happens in our updated CRUD code when we add a user
175. 5:24The problem with using relative or absolute paths in subfolders
176. 4:23Using a URL function to route all requests to the right location regardless of subfolder
177. 3:28Creating our products database table and populating it
178. 2:41Discussing the similiarties that will exist between our product and user administration pages
179. 1:04Demo of our updated product CRUD script
180. 4:17Comparing the code in our user and product CRUD scripts
181. 2:25Reviewing changes in our product rendering code, and how the WHERE IN SQL syntax works

Generalizing Functionality and Object Oriented Programming Primer

182. 1:37Why generalizing CRUD functionality makes so much sense
183. 1:35Setting up the next steps and a demo of our generalized CRUD script
184. 5:30How to distill CRUD configuration options into an array
185. 1:25Overview of the functions in our generalized CRUD script
186. 6:09How to create a generalized record listing function
187. 6:51How to build a generalized CRUD edit and add form function
188. 5:39How to build a generalized CRUD form validation function
189. 3:46How to create a generalized CRUD form processing script
190. 1:54Summary of what we've accomplished, and a few challenges
191. 2:00How to set up a database table to store page data
192. 5:26Demoing our page administration tools and adding our adding our first pages
193. 6:00How to load pages from both files and the database
194. 3:29How to convert file-based pages to database-based pages, and deciding which to convert
195. 1:16How this split file and database structure relates to Drupal
196. 3:41What we've accomplished with our CMS, compared to other CMS's like Drupal
197. 3:07Challenge your new PHP skills with these CMS enhancements
198. 1:20Why there's no need to be scared of OOP (Object Oriented Programming)
199. 2:30Demonstration of our new object oriented CRUD code
200. 2:38The weaknesses of function-based coding, and what objects are in OOP
201. 3:57How classes, methods, properties and constructors work
202. 3:29How instantiation works, and comparing our old render function to our new OOP one
203. 1:39How to use properties in a class
204. 1:35What extending a class means
205. 0:26Congratulations on finishing PHP Programming Basics

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

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

How Hooks Work and How to Use Them

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

Overview of Coding Standards

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

Development Tips and Tricks

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

How to Build and Manipulate Forms with the Form API

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

How to Add and Manipulate Pages With the Menu System

55. 4:42How the menu system works
56. 5:47A simple menu callback
57. 9:41How to use render arrays and tabs
58. 2:09How to use sub-tabs
59. 2:01How to add a page without adding a menu item
60. 5:29How to pass arguments through the path
61. 5:02How to use placehoders to pass arguments in the middle of a path
62. 8:13How to load objects through placeholders
63. 4:09How to create dynamic titles with a title callback
64. 7:53How to modify page output with hook_page_alter()
65. 4:03How to modify menu items with hook_menu_alter()
66. 5:22How to use include files to improve performance and next steps

How to Add to and Manipulate the Theme Layer

67. 4:12How the theme layer helps designers and coders work together
68. 4:39How to invoke a theme function
69. 1:36A more complex example of theme_item_list()
70. 5:14How to theme tables and the essence of theming
71. 6:44How to implement a theme function and how the theme registry works
72. 6:47How to create template files
73. 7:41How to use preprocessing functions
74. 5:41How to add CSS files in theme functions and template files
75. 5:50How to override theme functions with hook_theme_alter()
76. 4:15How to override template files and next steps

How to Work With the Database

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

How to Work With Users

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

How to Work With Nodes

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

How to Work With JavaScript and jQuery

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

How to Work With Files and the File API

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

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

146. 7:56How to process an unmanaged file and recursively create a directory
147. 7:32How to use file_unmanaged_copy() to move a file to a permanent location
148. 7:37How to loop through a file directory and create a URL from a URI
149. 6:49How to delete an unmanaged file
150. 4:52How to recursively delete all unmanaged files in a directory
151. 10:07How to use the private file system with unmanaged files
152. 7:30How private files are delivered and how to troubleshoot private file issues
153. 10:34How to add a managed file input to a form
154. 5:57How to validate a managed file, prevent it from being deleted and add a usage marker
155. 5:58How to use the EntityFieldQuery class to match certain criteria and display the results
156. 6:42How to delete managed files
157. 6:08How to work with private managed files
158. 4:19How to configure and use X-Sendfile to improve private file performance
159. 6:05A quick look at the code behind stream wrappers

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

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

Object Oriented Programming Basics

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

Namespacing and Autoloading in PHP

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

How to use Composer and Packagist

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

How to Work With Symfony Components

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

How to Work With Symfony Components, Part 2

95. 4:05How to split up our leap year code into a controller class and a model class
96. 2:33Adding PSR-0 compatibility to our leap year code, and updating our app.php file
97. 1:43What unit testing is and how it can make your code better and more flexible
98. 3:11The difference between unit testing, functional testing and regression testing
99. 2:25How to install PHPUnit on a Mac or Linux
100. 5:09How to install PHPUnit on a Windows machine, what PEAR is and how it compares with Packagist
101. 2:40How to set up PHPUnit configuration and set up our first unit tests
102. 3:57How setting up interfaces for your classes helps with unit testing
103. 2:05What dependency injection is, and updating our framework to use interfaces
104. 2:28Looking at how our test and assertion actually work, and where to find out which assertions we can use
105. 2:29Adding additional PHPUnit tests for our controller and 500 errors
106. 2:29What the Event Dispatcher Symfony component does, and how to add it to our project
107. 3:58How to add an event with the Event Dispatcher
108. 2:18How to create an event class for our event
109. 4:26How to add a listener with our event dispatcher
110. 2:49A recap of how we set up our event dispatcher and listener
111. 2:51Adding a second listener and setting its priority
112. 4:06How to create a class for an event listener
113. 2:03Reviewing the code in our event listener classes
114. 2:09How a subscriber is different than a listener, and what a 'code smell’ is
115. 3:41How to add a subscriber to our event dispatcher
116. 1:47Overview of what we covered around the event dispatcher
117. 6:29How to add caching support to our framework and controllers
118. 4:34How to use the Http Kernel component to replace our entire framework
119. 1:00The difference between setter injection and constructor injection
120. 3:28How to add custom error reporting to our framework
121. 5:45How to create a subscriber that allows controllers to return strings instead of response objects
122. 3:17Reducing our front controller code by moving it to our Framework class
123. 3:07The disadvantage of instantiating objects inside our framework and how a dependency injection container can help
124. 5:29How to create and use a dependency injection container, and what a singleton pattern is
125. 3:26How to prepare objects in the dependency injection container with parameters and methods
126. 0:54Why you should never use a dependency injection container within a class even though it's tempting
127. 1:04Updating our framework code to leverage the dependency injection container
128. 2:46How to use dependency injection container properties to store settings
129. 5:56An overview of what we learned in these Symfony videos

Updating Our Environment and Using PHPStorm

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

How to Use YAML

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

How the Dependency Injection Container Works in Drupal 8

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

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

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

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

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

195. 2:37A comparison of the State API and the Configuration API and how they replace variable_get()
196. 2:07How to use the State API to store arbitrary values
197. 0:55How to replace variable_get() with a State API call
198. 2:40How to replace drupal_get_title() with a call to the "title resolver" service
199. 1:23How to replace variable_set() with a State API call
200. 3:40How to replace the $_GET['q'] and what to do when getting a "Drupal class not found" error
201. 1:03How to replace variable_del() with a State API call
202. 4:31How to upgrade hook_block_view() and format_interval()
203. 3:21Overview of the pieces we need for our module configuration form, and finding a good example
204. 2:07How forms are structured in Drupal 8
205. 5:25Removing unnecessary overrides and upgrading drupal_map_asscoc()
206. 4:18How to use the Configuration API to store default module settings, replacing variable_set()
207. 1:23How to update configuration with the Configuration API and submitting a module settings form
208. 4:44How to add a page for our module configuration form
209. 1:14How to get our default configuration value to register while doing development
210. 0:34Which files to use if you're starting this series from here
211. 5:03How to register a menu link and find the ID for an existing menu link
212. 1:13How to show a link to our module configuration form from the module listing page
213. 5:27How to set up a block configuration form, and a benefit of using plugins
214. 3:35How to use block settings in a block configuration form
215. 1:48How to use the Configuration API as a service
216. 1:32Testing out our module settings and troubleshooting a problem with saving the value
217. 3:35Troubleshooting our block configuration form
218. 1:24Adding a second block and ways to improve our block configuration
219. 5:32Updating our .module file's hook_permission() and hook_help()
220. 2:34Cleaning up our .module file and updating hook_cron()
221. 1:13How to fix an "Undefined offset" error

Using the Twig template engine in Drupal 8

222. 2:51Overview of how Twig works and why Twig is so useful
223. 3:43How to set up a Twig template file and a brief description of Twig variables
224. 2:50How to register a Twig template file with hook_theme()
225. 2:16How to wire up a Twig template to a render array
226. 2:08How to easily debug Twig templates by reloading updated template files automatically
227. 2:52How to use Twig filters and translate content in a template with the t filter
228. 1:16How to replace variables in a translated string using the "t" filter in a Twig template
229. 2:04How to set up a new variable to use in our Twig template file
230. 2:31How to decide how granular a template file should be
231. 1:50How to see what variables you have to work with in a Twig template using "dump"
232. 3:08How to do a foreach loop in a Twig template
233. 0:52How to use the dump tool in Twig to see just the names of the available variables
234. 1:38How to figure out what Twig template file is responsible for any output on the page
235. 2:13Congratulations and a quick review of what we covered in this course

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

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

Branching, Merging and Tagging in Git

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

Working With Remote Git Repositories

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

Deploying Releases, Features, and Fixes With Git

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

How to Version Control the Database

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

How To Version Control Site Configuration With Features

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

How To Manage Non-Exportable Configuration Changes

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

How to Override Shared Features and Modify Text

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

How to Upgrade Drupal and Patch Contributed Modules

94. 8:38How to patch a module
95. 3:46How to upgrade a module sustainably
96. 4:11How to prepare for a minor Drupal upgrade
97. 7:59How to use a patch to upgrade the Drupal codebase
98. 4:56How to upgrade the Drupal codebase the traditional way
99. 3:42How to complete a minor upgrade

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

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

How to Configure Drush and use Drush Make

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

How to Extend Drush and Other Useful Drush Tools

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

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

19. 7:18Overview of included themes and the themes directory, and where to put new themes
20. 6:45How the different parts of a theme work
21. 9:01Learning about theme structures by reviewing core Drupal themes
22. 4:52Learning from the Zen theme file structure
23. 2:40Learning from the Basic theme file structure
24. 2:56Learning from the Fusion theme file structure
25. 2:25Learning from the Marinelli theme file structure
26. 8:20Review of the theme .info file options
27. 4:43How to create a theme folder, add an info file and enable a custom theme
28. 5:00How to add a screenshot
29. 2:56How to add a default logo file
30. 5:18How to override the page template with a page.tpl.php file
31. 9:28How to add a new region and what regions are
32. 4:46How to add a CSS file
33. 4:57How to add a JavaScript file

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

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

Theme CSS File Structure and Extended Drupal Theme Building

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

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

How to Work With Drupal Theme Settings

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

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

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

Securing a Module

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

Testing and Debugging a Module

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

PHP and MySQL Basics

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

Using Komodo Edit as an IDE

28. 5:23How to create a project in Komodo Edit
29. 8:59How to work with projects in Komodo Edit
30. 11:03How to work with files in Komodo Edit
31. 12:28Understanding the Komodo Edit interface
32. 10:19How to create snippets with variables and options
33. 11:26Advanced snippet usage: Key binding, tabstops and abbreviations
34. 13:47How to use templates in Komodo Edit