574 videos, 21h 51m

How to adjust a Flexslider carousel to work at different breakpoints

Display
Show videos in one column
Show videos in split view
Actions
Mark multiple complete (member-only)
Add multiple to a playlist (member-only)
Change speed.5x1x1.5x2x3x

Chapters

  1. 8:53Welcome 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
  2. 58:25HTML and CSS Basics
    1. 2:57What HTML is and a simple HTML example
    2. 2:02A simple CSS example and what HTML attributes are
    3. 3:28How to structure an HTML document and how DOCTYPE works
    4. 4:19How CSS can be used to make any element look like any other element
    5. 3:25Why to use meaningful HTML tags, also known as semantic HTML
    6. 2:02How to choose an HTML tag that matches the meaning you want to convey
    7. 2:11How every HTML element is a box
    8. 3:59A review of our design, what typography means and how to choose a starting point
    9. 2:21How to create an image from part of a Photoshop design
    10. 4:15A comparison of w3schools.com and developer.mozilla.org as HTML references
    11. 1:43Why to use HTML and CSS instead of images
    12. 3:15The advantages and disadvantages of spending the time to do things right
    13. 1:53How to choose an HTML heading level
    14. 4:31How to use the font-family CSS property
    15. 4:22How to measure parts of your screen and use the font-size and font-style CSS properties
    16. 3:06How to use the font-weight CSS property
    17. 4:06How to select colors on your screen and use the CSS color property
    18. 0:18How to hide the advertisements on w3schools.com
    19. 2:28How to use text-transform to uppercase text
    20. 1:44How to use the text-indent and letter-spacing CSS properties
  3. 83:14HTML and CSS Basics, Part 2
    1. 4:43Why to use CSS selectors instead of adding styles inline
    2. 0:25How to resume from this point (part 1, step 7)
    3. 1:59How to decide which element a CSS style should be applied to when there are multiple options
    4. 5:05How to work with border properties in CSS
    5. 0:53How to use the text-align CSS property
    6. 4:31How padding, margin and the box model work
    7. 2:25How to use a class to apply CSS styles to a single element
    8. 3:23How classes work and why creating class names and selectors is so challenging
    9. 2:47How CSS selectors work and how to learn more about them
    10. 1:47How to identify sections in our design
    11. 3:51How the HTML section tag works
    12. 3:01How to use compound CSS selectors and set a background color
    13. 2:59How to calculate the combination of margin and padding to get the right white space
    14. 2:25How to use the padding shorthand properties and adding padding to our section
    15. 0:35How to resume from this point (part 1, step 8)
    16. 1:13How to decide which elements to convert next
    17. 6:55Converting a second heading in the design to HTML
    18. 2:53How and why to choose a descriptive CSS class name
    19. 2:33Overriding some additional CSS styles in our header
    20. 0:45Affirmation of any weird feelings you have about overriding your own CSS
    21. 3:55How to style elements with parent CSS selectors
    22. 1:57How child selectors work and when to use them
    23. 3:49What CSS (Cascading Stylesheets) means and how CSS selector hierarchy works
    24. 0:51How to organize basic CSS
    25. 2:25How to create an external CSS stylesheet and include it in your HTML file
    26. 3:44How to set up Chrome to edit CSS and HTML directly
    27. 2:09How using class selectors allows you to change HTML structure and reduce overriding
    28. 3:19How and why to create semantic CSS class names
    29. 5:57How and why to decouple CSS from HTML and make styles additive
  4. 46:28How to Organize CSS and Use SMACSS
    1. 3:00What SMACSS is and how we'll use it throughout this series
    2. 3:40What a component (or module) is in CSS and HTML
    3. 2:59How sub-components work and how to name their classes
    4. 1:24Why we're focusing so much on HTML and CSS principles and standards
    5. 0:26How to resume from this point (part 1, step 10)
    6. 3:05Deciding what to do next and adding HTML for our next heading
    7. 4:19Adding styles for our H3 heading
    8. 3:53Adding our last headings to our template
    9. 5:21How the line-height CSS property works and converting our first paragraph
    10. 2:38How to factor in line-height when determining margin
    11. 4:31Adding our second styled paragraphs
    12. 5:23Creating markup for our article snippet text
    13. 3:41How to style an anchor tag and use the same CSS with multiple selectors
    14. 0:51How we will soon reduce repetition with a CSS preprocessor called SASS
    15. 1:17How to use the font-style CSS property and finishing the snippet text
  5. 52:46CSS Resets, Normalize.css and Package Management with Bower
    1. 3:37How to override the browser's default styles with the 'body' selector
    2. 4:01How to use the universal CSS selector and the problems with doing so
    3. 1:39How to deal with slight color variations and the benefits of a standard color palette
    4. 5:09How to set sensible default styles without a universal selector
    5. 2:31Reviewing other typographical styles to determine if they should override the browser
    6. 1:02How to resume from this point (part 1, step 17)
    7. 2:20Why to consider cross-browser consistency with CSS early on
    8. 1:27How the Universal Selector CSS Reset works
    9. 3:27How the Eric Meyer's CSS Reset works
    10. 1:35Comparing the pros and cons of using a CSS reset
    11. 2:31How Normalize.css works
    12. 1:55How to download and integrate Normalize.css
    13. 3:15What a package manager is and why we would want to use one
    14. 2:05How to install Node.js and npm on a Mac
    15. 1:03How to install Node.js and npm on Windows
    16. 1:57How to install Bower and the Normalize.css Bower package
    17. 1:20What JSON is and exploring our first Bower package
    18. 3:57Overview of Semantic Versioning and using a package manager for version management
    19. 2:51How to create a bower.json file for private projects
    20. 3:25How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*)
    21. 1:39How to update bower packages and the benefits of using Bower
  6. 20:44How CSS Units Work
    1. 3:43The difference between absolute and relative CSS units and what a pixel unit is
    2. 2:15How the 'em' relative CSS unit works
    3. 1:37How using absolute CSS units like 'px' prevents font resizing
    4. 2:29How the 'rem' CSS unit works and why it can be hard to use
    5. 1:45How 'unitless' CSS measurements work
    6. 1:59Comparing resources for learning more about CSS units
    7. 1:43Why some people use older browsers
    8. 2:37How to use 'caniuse.com' to evaluate browser support for CSS and HTML
    9. 1:51How we're going to decide if we can use rem CSS units
    10. 0:45How JavaScript polyfills can fill the gap in browser support
  7. 36:38CSS Preprocessing and SASS
    1. 2:43Why we would want to use a CSS preprocessor like SASS
    2. 1:33Why we're using SASS instead of LESS and Stylus
    3. 1:11Why we're using the command line version of SASS
    4. 0:47How to install SASS on a Mac
    5. 5:05How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues
    6. 1:39What a CSS preprocessor does and why we're using the .scss syntax instead of .sass
    7. 1:23How to convert a .scss file to a .css file
    8. 4:28How and why to use variables in SASS
    9. 1:43How to trigger CSS compiling when a file is changed with the SASS 'watch' command
    10. 3:59Why to create a common color palette and converting our SASS to use one
    11. 2:49How to add comments in CSS and SASS
    12. 1:41How to use TODOs to mark code to change later without interrupting your workflow
    13. 1:01Wrapping up our review of values that could be converted to variables
    14. 3:27How to use nesting in SASS to reduce selector repetition
    15. 3:09Why it makes sense to use separate SASS files for each component
  8. 43:27Project Organization With SASS and Using Source Maps
    1. 3:29How to use parent selectors as a prefix with the ampersand in SASS
    2. 0:37Why it's important to review the CSS that your SASS creates
    3. 2:11How to efficiently code an anchor tag with multiple states in SASS
    4. 2:39How to resume from this point (part 1, step 19)
    5. 3:01Re-organizing our file structure into folders and how to use SASS watch on folders
    6. 3:21How to use partials to split SASS into smaller files
    7. 2:05Moving the rest of our component SASS into separate partials
    8. 0:39Updating the paths in our HTML to reflect the new file structure
    9. 2:09How to split our variables and base styles into meaningful SASS partials
    10. 1:25Reassurance that splitting our single SASS files into multiple partials is not over-engineering
    11. 3:31How CSS source maps work and how they allow us to inspect the SASS source of CSS properties
    12. 0:41How to use CSS source maps in Firefox
    13. 0:42How to navigate to SASS variable definitions in the browser
    14. 1:31Why it makes sense to use the SASS Globbing extension for automatically including partials
    15. 3:25How to install a SASS extension and automatically include partials from a folder
    16. 1:27The benefits and costs of using the SASS Globbing extension
    17. 1:49The pros and cons of using local software like SASS and Bower for front end development
    18. 4:19Map of local software needed for front end development and how the parts releate to one another
    19. 0:38Why there are so many individual pieces of front end software
    20. 2:37How to learn more about SASS with the SASS documentation
    21. 1:11Why we're choosing not to use Compass just yet
  9. 55:05Using Bundler to Manage SASS Extensions
    1. 1:15How to install Bundler
    2. 2:29How to generate a Gemfile with Bundler
    3. 3:35How to add dependencies to a Bundler Gemfile
    4. 1:31How to use project-specific versions of gems with 'bundle exec'
    5. 2:12How the Bundler Gemfile.lock file works
    6. 1:55How to use 'bundle exec' with 'sass watch' and 'sass globbing'
    7. 1:57How to specify a version range in Bundler that updates to the latest patch version
    8. 2:37Setting up a README.md file and how we're automating documentation
    9. 2:43How to troubleshoot SASS nesting and prefixing conflicts
    10. 0:47Review of the typographic elements we have templated
    11. 4:37How to use a footer HTML tag and add a copyright symbol
    12. 3:07Adding SASS scaffolding for the footer
    13. 2:04Setting a default text color for the footer
    14. 2:07Why to avoid creating classes for common CSS property values between elements
    15. 2:19Troubleshooting editing SASS partial styles with the browser inspector
    16. 1:39How to adjust spacing between paragraphs in CSS
    17. 3:47How variable scope works in SASS
    18. 1:01How to use HTML comments and preparing to code the footer menu
    19. 1:11Why to avoid using HTML lists for navigational elements
    20. 4:17How to use the nav HTML element
    21. 1:45How to space links in horizontal navigation
    22. 0:51The difference between how horizontal and vertical margin work
    23. 2:10How to convert a pixel measurement to a relative 'em' unit
    24. 3:09How to perform mathematical operations and string concatenation in SASS
  10. 19:33How to Use SASS Functions
    1. 2:19The difference between a SASS function and a mixin
    2. 2:17How to write a function in SASS
    3. 2:05How to set the default value for a function argument in SASS
    4. 1:29Converting absolute values and creating a SASS partial for functions
    5. 3:31Creating a SASS function to calculate rem units from pixels
    6. 1:29Why sometimes it's simpler to not use a function for calculating relative units
    7. 6:23Updating our SASS to use relative instead of absolute units
  11. 64:46Styling Typography With CSS
    1. 1:39Fixing the text color of our headers by changing the base text color
    2. 1:59Styling the primary navigation in the footer
    3. 0:47Styling the secondary navigation in the footer
    4. 3:49How to organize shared styles between two similar elements
    5. 4:25How to add a border between our two footer menus
    6. 2:23How to limit the length of a horizontal border to the contents of an element
    7. 1:41How to center an HTML element by setting horizontal margin to "auto"
    8. 1:59How to resume from this point (part 1, step 22)
    9. 3:07How an HTML header tag works and using one for our site header
    10. 4:07Setting up the HTML and CSS scaffolding for our header
    11. 2:40Dividing our header into two sections with div tags and setting the background color
    12. 2:48How to use SMACSS "states" to define CSS for specific situations
    13. 2:21How the CSS "display" property works, and how to fix elements overlapping their container
    14. 2:02Refining the CSS for our header navigation
    15. 2:15Evaluating using the "border-radius" property to add rounded corners in our project
    16. 1:39How CSS vendor prefixes work and why we would use them
    17. 2:03Overview of automated tools for adding CSS vendor prefixes
    18. 0:43How to use the CSS "border-radius" property to add rounded corners to an element
    19. 1:11Breaking down the visual elements of our buttons
    20. 2:05How to structure HTML for a button-like link
    21. 4:21How to style a basic anchor tag button in CSS
    22. 3:22How to use the lighten() and darken() SASS functions to set relative colors
    23. 2:33How to use the "text-shadow" CSS property to create a drop shadow on text
    24. 2:15How to add transparency or alpha to a color with an RGBA value
    25. 5:57How to add pill-like rounded corners with CSS and cleaning up our button styles
    26. 0:35In celebration of completely templating the typographical elements in our mockup
  12. 113:09Working With Icon Fonts
    1. 2:09Why it makes sense to use fonts instead of images for icons
    2. 1:47What Font Awesome is and how to download it
    3. 0:45What the .min file extension means and why it makes sense to minify CSS and JavaScript
    4. 2:05How the @font-face CSS rule works
    5. 1:45How to create a file for temporary CSS and what a "shame" file is
    6. 2:02How to install a web font so you can use it in CSS
    7. 1:49How to add an icon with Font Awesome and ways we can style the icon
    8. 1:27Adding a phone icon to our green button
    9. 4:01How to create a circle icon in CSS
    10. 3:03How to find specific icons in Font Awesome
    11. 1:07How to create a reliable circle icon by setting a fixed width
    12. 2:19How to decide when an element should be its own component or part of another component
    13. 1:33Refactoring our circle icons as elements of the icon box component
    14. 2:01Restructuring our icon boxes as sub-components to allow for variation
    15. 2:35Adding our second circle icon and making the updated styles permanent
    16. 1:53Adding our final two circle icons
    17. 2:09How to use the "before" pseudo-class to display non-semantic content
    18. 3:31How to use CSS to add icons as content
    19. 0:53Where to put our @font-family rule and cleaning up our HTML and CSS
    20. 2:41Restructuring our phone icon HTML and CSS
    21. 4:25Overview of the features in the full Font Awesome framework
    22. 4:49The pros and cons of using a front-end framework like Bootstrap
    23. 0:48Why we're deciding not to use the full Font Awesome framework
    24. 1:27How to evaluate Bower packages for legitimacy
    25. 3:27How to install Font Awesome as a Bower package
    26. 6:55How to use aspects of the Font Awesome framework by including specific SASS partials
    27. 2:15Why using a complete icon font on your site can be problematic
    28. 2:29How to cherry-pick specific font icons using using Fontastic
    29. 3:09The pros and cons of Fontastic, and how to combine fonts and upload custom icons
    30. 0:29Why we're not using Fontastic just yet
    31. 3:35How to use Symbolset to convert words to icons with ligatures
    32. 2:39How to use FontSquirell to browse free fonts and generate web font packages
    33. 2:30How to use Google Fonts to browse free fonts and generate hosted fonts
    34. 4:05Creating the HTML and CSS for our header account link with an icon
    35. 3:05How to inspect pseudo-elements in Chrome and use zoom to compare relative sizes
    36. 1:23Discussing how we might use font icons for our slider navigation and contact form radio buttons
    37. 1:27Adding the phone icon to our footer phone number
    38. 7:17Creating the HTML and CSS for a Facebook social icon in our footer
    39. 1:51How to use SASS variables to establish a relationship between different numbers in CSS rules
    40. 0:41How to prevent CSS from adding padding and border to height and width with "box-sizing"
    41. 1:09How to use line height to center text vertically
    42. 1:15Reorganizing the styles for our social icon to apply to all social icons
    43. 2:19Creating the HTML and CSS for our other social icons
    44. 1:41How to adjust our CSS to allow for easily re-sizable circle icons
    45. 2:13How to add semantics to an icon with a title attribute or hidden element
    46. 1:08The pros and cons of opening links in a new window, and how to do it
    47. 3:03How to resume from this point (part 1, step 23)
  13. 130:44Customizing Forms
    1. 4:47A very brief overview of the structure of an HTML form
    2. 2:05How to create HTML and CSS form scaffolding and a submit button in HTML
    3. 2:35How to style our submit button to match our other buttons
    4. 1:50How to add a multi-line text input to a form with the "textarea" element
    5. 0:27How to add a name attribute to form inputs to identify form data
    6. 5:37How to style a textarea input with CSS
    7. 2:05How to use the "placeholder" attribute to add instructions inside a form element
    8. 2:19How to create the HTML structure for a select input
    9. 4:23How to style a select input and address padding issues with height and the "text-indent" property
    10. 1:38How we'll approach changing the text color and icon in our select box
    11. 3:37Overview of 4 options for styling select inputs consistently across all browsers
    12. 1:19Overview of 3rd party libraries for replacing select box inputs with more easily style elements
    13. 2:29How to download selectize.js with Bower and set up an example
    14. 1:39Why we're not using aggregated and minified versions of JavaScript and CSS
    15. 1:47How to find and include dependencies for a 3rd party JavaScript library
    16. 1:13How to check for JavaScript errors in Chrome
    17. 5:45How to style a selectize.js input
    18. 1:03Reviewing our selectize.js input in various browsers and operating systems
    19. 0:37What a JavaScript polyfill is and why we might want to use one
    20. 2:51Finding and installing a polyfill to add placeholders for Internet Explorer 9
    21. 2:13How to create an arrow with pure CSS using transparent borders
    22. 0:53Refining the style of the text in our select input
    23. 2:15How to style a text input with CSS
    24. 1:37Considering our options for sharing styles between different form inputs
    25. 3:25How SASS "placeholders" can be useful for sharing CSS between elements
    26. 1:03Adding another text input for an email address
    27. 3:09Making the margin between our form elements consistent
    28. 1:31Options for sharing common styles between our selectize input and our other inputs
    29. 2:11Creating a naming convention for placeholder SASS rules
    30. 2:19How a radio button input is structured and why not to use the "id" attribute for styling
    31. 2:51How to set up HTML scaffolding for a radio button group
    32. 1:11A quick overview of how we will approach styling our radio buttons
    33. 3:48How to customize a radio group, part 1 - adding a font icon to replace the radio
    34. 2:11How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label
    35. 4:07How to customize a radio group, part 3 - hiding the radio and centering the labels
    36. 3:05Styling the textual label for our radio group
    37. 0:59Centering our contact form in the browser horizontally
    38. 0:35A brief summary of what we have left to do
    39. 1:33Overview of the elements in our search form and why we're not using a framework for it
    40. 3:03Setting up the HTML scaffolding for our search form
    41. 2:04Setting up the CSS scaffolding for our search form select input
    42. 3:32How to change the icon and icon position of a select input
    43. 3:39Adjusting the select box styles on our search form
    44. 1:00How to set differently sized rounded corners for each corner of an element
    45. 1:49Summary of what we still need to style in our search form and starting the process
    46. 1:59How the "vertical-align" CSS property works and aligning our elements to the top
    47. 1:49Adjusting the height of our search form inputs to align them
    48. 0:49Discussing why the selectize.js dropdown icon showed up after we hid it with CSS
    49. 1:21How to override any CSS with the "!important" keyword and why it's so problematic
    50. 0:41Finding a solution other than "!important" to solve our reappearing icon issue
    51. 1:51Fixing an issue where our select is a pixel too high by setting height on a different element
    52. 0:49How to remove horizontal spaces between elements by setting the font size to zero
    53. 0:55How to remove horizontal space between elements with the "float" CSS property
    54. 1:55Removing the horizontal space in our search form and adjusting the borders
    55. 2:17How using a "button" HTML input instead of a submit input allows for pseudo-elements
    56. 2:28Refining the CSS of our search form submit button and text input
    57. 5:01How to add a custom icon by creating a new icon font with Fontastic
    58. 1:17Refining the styles on our updated magnifying glass icon submit button
    59. 1:23Testing our search form and moving the HTML to the right place in the template
  14. 96:32Working With Responsive Images and Breakpoints
    1. 2:23How to save a transparent image in Photoshop and why images on the web are tricky
    2. 0:50Adding our logo image for testing
    3. 0:40How to resume from this point (part 1, step 41)
    4. 0:59How images display differently depending on the pixel resolution of the viewing screen
    5. 0:21The pros and cons of using lower resolution images
    6. 3:26The pros and cons of using high resolution images
    7. 3:03How to serve both low and high resolution images with Retina.js
    8. 2:43How to set up a lightweight web server with Node.js to get around local file browser issues
    9. 1:35How to avoid 404 errors when using Retina.js
    10. 13:27What a 404 error is and why we should try to avoid them
    11. 1:39The downside of using Retina.js to serve high density images to high resolution screens
    12. 1:19What "responsive design" means and a brief history
    13. 1:31What responsive design implies for the layout of our site
    14. 0:53What responsive design implies for our images
    15. 1:05Why the browser can't serve the right images for the right scenario without our help
    16. 4:15How to use the "srcset" property in the image tag to help the browser fetch the right image
    17. 1:55How "media queries" work to pull in different CSS based on conditions in the browser
    18. 1:19How the "sizes" image attribute works to provide breakpoint information to the server
    19. 1:07What a "breakpoint" means in connection to CSS media queries
    20. 3:25How to use the srcset attribute safely until there's bettter browser support with picturefill
    21. 1:05Setting up our logo image to match the mockup
    22. 3:19How to use SVG images for scalable vector graphics on the web
    23. 3:27The difference between bitmap and vector graphics, and saving our slideshow background images
    24. 1:58Adding the HTML and CSS scaffolding for our slideshow background image
    25. 4:13How to set a background image so that it covers an element but does not repeat
    26. 2:55How to create a media query to swap background images based on the browser width
    27. 1:57How to swap images with a media query based on screen resolution
    28. 2:35How to use "min-width" to set multiple breakpoints in your CSS based on browser width
    29. 3:45How the SASS "breakpoint" extension works, and troubleshooting installation
    30. 1:09How to install Compass
    31. 2:32Encouragement for when you run into dependency issues with Ruby, node.js or Compass
    32. 3:19How to set up a Compass project
    33. 2:29How to set up the breakpoint extension with Compass and use it to simplify our SASS
    34. 0:43Summary of why the "breakpoint" SASS extension is so useful
    35. 0:45Summary of how many projects set up their media query breakpoints
    36. 2:33Merging our "slide" and "slideshow" components and refactoring our classes
    37. 1:31How we will approach styling our circular, bordered images
    38. 4:23Why we're using a background image for our circular images, and building out the basic CSS
    39. 2:45How to style a circular image with a border and drop shadow
    40. 1:14Adding our second image, and moving our snippet HTML to the right place
  15. 124:48Styling Slideshows and Carousels
    1. 2:43Reviewing what functionality we need for our slideshow sliders
    2. 2:43Overview of the "Flexslider" feature set and review of examples
    3. 4:05How to install Flexslider and add a working example
    4. 2:01How to connect Flexslider to existing HTML to convert it to a slider
    5. 0:59Tracking down why the Flexslider navigation does not appear over the slider
    6. 4:40How the relative, absolute, static and fixed CSS "position" values work for element layout
    7. 3:23Why adding left padding to slides in our slideshow container doesn't work
    8. 0:49Solving our slideshow left padding issue by applying padding to the slideshow container
    9. 0:25Setting the width of our slideshow slides
    10. 2:07A discussion of options for vertically aligning our slideshow content
    11. 2:13How the CSS "flex" display, or "Flexbox", works
    12. 2:27How to use Flexbox to vertically align a block element
    13. 1:21Why using Flexbox doesn't make sense for every project
    14. 1:31Why we can't vertically align compound elements with the "vertical-align" property
    15. 0:41Why vertically aligning with "line-height" doesn't work for multi-line elements
    16. 1:33How HTML tables work and why they were once used for layout
    17. 2:08How to make any element work like a table cell with CSS
    18. 1:29Using the absolute positioning and negative margin solution for vertically aligning an element
    19. 1:13How to use a CSS transform to vertically align an element
    20. 0:39Reviewing browser support for CSS transforms
    21. 0:21Why we're not using JavaScript to vertically align our slides
    22. 1:07How to use the CSS "transform" property to alter the display or position of an element
    23. 2:11Permanently applying our CSS tranform solution to vertically align our slides
    24. 0:55Adding back our slide padding and fixed width
    25. 1:43How to fix many Flexslider behavior issues by adding the "flexslider" class
    26. 1:13How Flexslider uses a font for their previous and next icons, and what we'll do next
    27. 1:37How to create a vector SVG icon from a bitmap image with Illustrator
    28. 1:15Creating our "previous" icon and importing our new icons into our custom Fontastic font
    29. 0:41How to update a Fontastic font locally when the icons have changed
    30. 1:55How to replace Flexslider icons with our own custom icons
    31. 1:47How to adjust Flexslider settings with some simple JavaScript
    32. 3:03How to change the size of the Flexslider next and previous icons
    33. 2:39How to adjust the position, color and shadow on the Flexslider next and previous navigation
    34. 2:35Moving the styles for our next icon from the browser to permanent code
    35. 2:03Styling our previous slideshow icon and troubleshooting spacing
    36. 0:35How to hide the text of an anchor element by using a fixed width
    37. 1:13Using negative margin to position our slideshow's previous icon
    38. 1:37How to adjust the position of the slider page navigation
    39. 0:43How to set Flexslider to not cycle automatically
    40. 2:49How to modify the look of the Flexslider pagination with CSS
    41. 0:43Overview of our strategy for overriding third party library CSS selectors
    42. 0:45Fixing some CSS errors introduced through sleep-deprived developer error
    43. 1:13How to change the spacing between Flexslider paging elements
    44. 2:51How to resume from this point (part 1, step 43)
    45. 2:37How to create multiple vertical columns for content using float and margin
    46. 1:53Using the float and margin strategy for our author image and snippet content
    47. 3:11How to use multiple floats to separate content into columns
    48. 1:59How to use the CSS "overflow" property
    49. 1:17Refining the margins for our snippet content
    50. 3:15Moving our snippet styles from the browser to permanent SASS rules
    51. 2:05How to add margin between grouped, floated elements
    52. 0:59Why it makes sense to apply CSS changes in the browser before committing them to code
    53. 2:35Reviewing how we added margin between snippets and making the CSS permanent
    54. 2:57The implications using absolute or relative units for content layout
    55. 1:39Testing variations in base font size with our layout and making corrections
    56. 1:17When it's better to use absolute units for sizing when dealing with layout
    57. 4:41How to set up Flexslider to work as a carousel
    58. 3:35How to set the width and spacing of our Flexslider carousel to fit the template
    59. 3:07How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation
    60. 0:49Modifying the colors in our carousel previous and next icons
    61. 3:05How to move an element outside of its container with the "left" or "right" CSS properties
    62. 2:35Moving our carousel CSS from the browser to our SASS
    63. 3:25How to simulate a hover state in the browser in order to style CSS
    64. 1:03Refining our carousel slideshow CSS to use SASS variables for common values
  16. 140:22How to Work With Responsive Layouts
    1. 0:45Congratulations for rendering all of the elements in our mockup, and moving onto layout
    2. 3:11How fluid and fixed layouts worked before responsive design became more ubiquitous
    3. 3:19The limitations of maintaining a separate mobile site
    4. 2:41Variations in how clients will approach a responsive project
    5. 0:55What "mobile first" means in terms of business strategy
    6. 1:15What "mobile first" means in terms of design
    7. 2:15What "mobile first" means in terms of CSS
    8. 0:39Summary of which ways we can approach this project "mobile first"
    9. 2:25Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches
    10. 1:39How our footer will react to differences in browser size
    11. 0:49How we will code our footer CSS desktop-first and then compare with a mobile-first approach
    12. 2:05How to group elements with wrapper div tags for layout styling
    13. 1:35Reorganizing our CSS to work with wrapper elements
    14. 3:03How to use "float" to align elements to the right and left of the browser in a flexible way
    15. 0:43How moving around markup for layout can be an accessibility issue
    16. 1:57Using negative margin to align our footer elements
    17. 3:33Adjusting styles to collapse the footer into a single column
    18. 4:06Adding breakpoints to collapse our footer into a single column using "max-width"
    19. 1:41Adding a breakpoint to collapse our footer navigation
    20. 4:53How to convert desktop-first CSS to mobile-first CSS by switching to "min-width"
    21. 1:11Discussing how the "qualities" section should react responsively
    22. 2:01Adjusting the padding in our stacked hero sections
    23. 3:55How to bump an element out of the container box and center it above the content
    24. 1:53Adjusting the text position and layout in our "qualities" boxes
    25. 2:41When it makes sense to use relative units for width, and moving our CSS to our SASS files
    26. 3:37Making the relationships of our SASS values explicit with variables and equations
    27. 2:45Adjusting the margins within and around our icon box
    28. 4:33Aligning the icon boxes to the center and adding margin between them
    29. 0:37What we want our icon boxes to look like as the browser gets smaller
    30. 3:43How to figure out how the site's padding and overall layout should work from a mockup
    31. 1:25Adding the overall layout CSS to our "qualities" section
    32. 1:19Options for applying site layout styles to multiple elements
    33. 4:17 Setting up a SASS placeholder for full-browser layout styling with breakpoints
    34. 2:01Adjusting spacing so all icon boxes fit, and figuring out where our icon box breakpoint should be
    35. 3:17Adding a breakpoint to our "qualities" section to go from 4 boxes across to 2
    36. 1:03Fixing the margin between the "qualities" title and the icon boxes
    37. 1:57How the "max-width" CSS property works
    38. 0:41Adjusting our icon box margin one last time
    39. 0:41How you can use these layout strategies for any grid of elements
    40. 3:38How to adjust a Flexslider carousel to work at different breakpoints
    41. 5:05Making our responsive carousel CSS permanent
    42. 2:39Adding a breakpoint to change the position of our carousel navigation on small screens
    43. 2:13How to generate CSS source maps in Compass, and reconnecting the source files in Chrome
    44. 1:29Adding a breakpoint to hide superfluous snippet content on smaller screens
    45. 2:31How to fix unexplained white space that forces horizontal scrolling
    46. 1:01How to remove the white border around the Flexslider slideshow
    47. 1:23Fixing horizontal scrolling issue created by our "snippet" carousel
    48. 2:17Adjusting our carousel to stretch across smaller browser windows
    49. 1:15Converting our carousel's "max-width" breakpoints to "min-width"
    50. 1:21How to hide Flexslider navigation in smaller browser windows
    51. 2:15Adjusting the styles of our alt hero section title to be responsive
    52. 1:35Adjusting the contact form CSS to be responsive
    53. 1:46How to use the CSS "whitespace" property to prevent text from wrapping to another line
    54. 1:51Re-ordering the content in our template to match the mockup
    55. 3:37Discussion of how we plan to adjust the header for different viewport sizes
    56. 3:09Adding the HTML and CSS scaffolding for our top header section
    57. 3:23Positioning our top header elements in the browser
    58. 3:51Moving our top header CSS from the browser into our stylesheets
    59. 0:49How we want our top header to behave as the browser gets smaller
    60. 3:53Adjusting our header bottom to stretch across the entire browser and center its content
    61. 2:15Aligning the elements in the header bottom and adding a border
  17. 57:51How to Work With Responsive Layouts, Part 2
    1. 0:55Removing extra padding from the header bottom section
    2. 3:55Adding responsiveness to our top header by adjusting CSS in the browser
    3. 1:17Moving our responsive header CSS from the browser to our SASS files
    4. 0:43Adding a breakpoint to stretch the logo the full browser width on small screens
    5. 0:55Why it's important to add extra padding for touch screens
    6. 0:45Making the menu in our header bottom responsive
    7. 1:07How to simulate mobile and desktop devices with Chrome DevTools
    8. 3:03How to use the "viewport" meta tag to tell the browser a site supports mobile devices
    9. 1:19How to test a site at different download speeds with Chrome DevTools
    10. 1:49How to see how media queries affect a site with the Chrome device simulator
    11. 2:39Styling our header bottom to be responsive
    12. 4:57When it makes sense to use "max-width" and converting header breakpoints to "min-width"
    13. 3:37Adjusting our slideshow CSS for smaller viewports
    14. 1:15Converting our slideshow breakpoints to "min-width"
    15. 1:38Evening out the vertical padding in our slideshow
    16. 5:03Reviewing our template at different browser sizes for possible touch-ups
    17. 2:51How the "z-index" property works and how layers are positioned by default
    18. 1:53Why z-index poses issues as templates get more complex, and how to solve those issues
    19. 1:11How to test if z-index will solve a layer ordering issue
    20. 1:23Fixing the layering issue with our selectize dropdown
    21. 1:41Talking through how to create a rounded drop-shadow under a rectangular element
    22. 4:27How to add a curved drop shadow to an element with CSS
    23. 0:45Moving our curved drop shadow CSS to SASS to make the changes permanent
    24. 0:55Basic approaches to testing a template in multiple browsers
    25. 2:29Reviewing our template in the Firefox browser for Mac
    26. 1:03Reviewing our template in Chrome for Windows
    27. 1:01Reviewing our template in Firefox for Windows
    28. 0:55Overview of strategies for testing a site on multiple versions of Internet Explorer
    29. 1:43Reviewing our template in Internet Explorer
    30. 0:37 How cross-browser reviews typically work with completed sites
  18. 94:20Optimizing Front End Performance and Adding Automation
    1. 1:33What we've covered in terms of front end performance, and what we'll cover now
    2. 0:57How to open the network dialog in DevTools and disable local caching
    3. 1:13Why front end performance (i.e. speed) is important
    4. 1:41How to view the number of downloaded files and their sizes in the Chrome DevTools network tab
    5. 1:05Why the site loading speed on your machine might not reflect an average experience
    6. 1:01How download size is often not the biggest factor in site loading speed
    7. 0:40How the "DNS Lookup" bar works in the DevTools network tab
    8. 0:44How the "Initial connection" bar works in the DevTools network tab
    9. 0:35What "Round Trip Time" (RTT) and "handshake" mean in the context of downloading files
    10. 1:33How the "Request sent" and "Waiting (TTFB)" - Time To First Byte - bars work in DevTools
    11. 0:31What we can and can't do to optimize the loading time of our index.html file
    12. 0:33How to sort files in the DevTools network tab to reflect actual download order
    13. 1:01Reviewing the loading time for our jquery.js file
    14. 3:19How the browser opens multiple connections to download files in tandem and sequentially
    15. 1:53Summary of where load time comes from for downloaded files
    16. 1:23How we can reduce the size and number of files through minification and concatenation
    17. 1:43What the DOM is and what "DOMContentLoaded" time means
    18. 0:43What an empty bar might mean in the Chrome DevTools network tab
    19. 1:55How and why to research internet speeds in other parts of the world
    20. 3:57How to determine Round Trip Time (RTT) to a site from other parts of the world
    21. 1:17Why we're going to concatenate and minify our files, and why we'll use automation to do it
    22. 1:55How to concatenate multiple JavaScript files manually and why it's a bad idea
    23. 2:45How to minifiy code by hand, what minification does and why it's tough to debug
    24. 1:57Why we would swap out concatenated, minified code for separate files while testing
    25. 1:17How automation can save time, reduce error and get a team on the same page
    26. 0:37Why we're using the Grunt automation tool for this project
    27. 2:14How to install Grunt
    28. 2:57How to install a project-specific version of Grunt
    29. 1:31How to install a Grunt extension for concatenating files
    30. 2:31How the different parts of a Gruntfile.js file work
    31. 3:09How to configure grunt-contrib-concat in our Gruntfile.js
    32. 0:51How to run the default Grunt configuration on the command line
    33. 1:11How to create Grunt task variations and run specific ones when our task runs
    34. 1:19Adding our JavaScript files to our Grunt concatenation configuration
    35. 1:43The advantages of putting JavaScript at the end of the body tag instead of the beginning
    36. 1:41Why to move custom JavaScript to a separate file, and why JavaScript file load order matters
    37. 1:07Wrapping up the configuration of our JavaScript concatenation and generating a concatenated file
    38. 1:27Setting up the Grunt configuration to concatenate our CSS files
    39. 0:51Reviewing the performance effect of concatenating our JavaScript and CSS
    40. 0:31How minifying CSS works
    41. 3:03How to minifiy JavaScript with Grunt and Uglify
    42. 3:07How to minify CSS with Grunt and the grunt-contrib-cssmin plugin
    43. 0:27Reviewing our performance gains from concatenating and minifying both JavaScript and CSS
    44. 6:43How to use grunt-injector to add JavaScript and CSS file references in your template on demand
    45. 1:57How to add a second configuration to a Grunt plugin
    46. 1:12How to add separate dev and production tasks in our Gruntfile.js
    47. 3:27How to fix our concatenated CSS by removing our concatenation separator setting
    48. 3:35Comparing the performance of our optimized site with our pre-optimized version
    49. 1:31How and why to make our paths relative by configuring the grunt-injector plugin
    50. 2:03Why browser prefixing CSS manually or with Compass is problematic
    51. 2:39How to use the Grunt Autoprefixer plugin to add and update browser prefixes in our CSS
    52. 3:26How to configure grunt-autoprefixer, and comparing our CSS before and after prefixing
    53. 0:19Switching back to development mode by running Grunt
  19. 58:22Improving Web Accessibility
    1. 3:33How to resume from this point (part 1, step 45)
    2. 1:59What "accessibility" means in terms of the web
    3. 2:49Section 508 versus WCAG and how to justify spending resources on accessibility
    4. 3:51How to use the WCAG Quick Reference to improve your understanding of accessibility
    5. 0:43How web accessibility is a continuum
    6. 2:39How to test support of keyboard navigation on your site
    7. 1:45How to make custom radio buttons accessible with the keyboard
    8. 4:24How to allow users to skip to the main content of a page with the keyboard
    9. 2:25How to use Chrome's Accessibility Developer Tools to audit a site for accessibility
    10. 1:59Adding labels to our search form for accessibility and hiding them
    11. 4:01Adding labels to our contact form and hiding them with a SMACSS state
    12. 0:41Adding an "alt" attribute to our logo
    13. 0:53About using meaningful images as CSS backgrounds and accessibility
    14. 2:45How contrast ratios and WCAG ratings work
    15. 1:13Reviewing links with unclear link text
    16. 1:27How to run an accessibility audit with Firefox's AInspector Sidebar add-on
    17. 2:13What ARIA is, how "landmarks" work and adding a "main" landmark
    18. 3:15How and why to use the "navigation" role on HTML "nav" elements
    19. 1:49Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles
    20. 2:01How and why to add ARIA landmark labels
    21. 1:01How to add a language code to your web page
    22. 1:17Reviewing our other "Styles / Content" accessibility audit checks
    23. 0:47Reviewing our AInspector Sidebar "Links" accessibility violations
    24. 2:35How to add text in a link for accessibility but hide it from view
    25. 1:27Fixing an accessibility issue with our hidden labels
    26. 2:29How to use the "fieldset" and "legend" HTML tags for input groups
    27. 2:21Wrapping up our accessibility audit review
  20. 5:16Congratulations and Bonus
    1. 1:51Congratulations on completing "Front End Development!"
    2. 3:25Bonus: How to add a favicon to your site

Videos

Add to playlist

Add to , or

Add to new playlist:

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

Add to cart:


Loading...
Add to playlist

Add to , or

Add to new playlist:

Add to playlist
Contact us

Below are the supported keyboard shortcuts for our video player.

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