Video
Back to collection listing
Home
574 videos, 21h 51m

How to adjust a Flexslider carousel to work at different breakpoints

Description

Collection: Front End Development
Chapter: How to Work With Responsive Layouts

In this video we move on to adjust our carousel slideshow that displays our article snippets so that it functions well in smaller browser windows. We adjust the CSS and demonstrate how we can sometimes get what we need by hiding superfluous content with "display:none."

Transcript

So we now see that the written by our team section has some issues with it. One, the grey background doesn't stretch to the right and to the left. Second, our previous next navigation doesn't display because we're moving it to the right and to the left, and right now that content is invisible.

Also it appears like we're cutting off the content on this right part of the snippet. So what should we do about this? Well let's play in our browser a bit to see what we can do. So I'm going to inspect the container element, so that's going to be our stacked heroes section, and what I'll do first is set the width on this to 100 percent.

So the goal here is to stretch that background color all the way across regardless of the size of the browser. Okay, so this is overriding a style that we just set to fix the width to 960 pixels, but we can think about this as a sub component of the stacked heroes section. So in this style of the component we want it to stretch across the entire screen.

Okay, so that fixes the background color stretching across but our slideshow now stretches all the way across as well. So let's set it to a fixed width. So I'll inspect an element in this slideshow and down here in the dev tools I'll scroll up until I get to the container.

So here we are. The Flexslider snippet slideshow container, and let's set a fixed width on this. Let's set it to 960 pixels to be consistent.

So now we have our fixed width here and we can see our next icon, but it's being left aligned. So let's center it using our margin left margin right auto trick. Alright, when we do that we can now see the next and previous icons.

So this should work for larger screens but as we make the browser smaller there will be a point where we can no longer see the next and previous buttons, right here at about the 1000 pixel wide mark, ...

Read the last half of the transcript

You are 0% complete

When you have an active membership, you will be able to see your progress here.

Skill focus: Theming, Site Building
Skill level: Beginner - Advanced

The world of front end development has come a long way in the last several years with the addition of responsive design, CSS preprocessors like SASS, and the ever widening range of devices and environments we use to navigate the web. At the same time, many of us are able to generate fully functioning web sites using CMS's like Drupal without ever touching HTML or CSS - the basic building blocks of the web. Because of that, many of us end up floundering when we need to make even minor adjustments to the markup or presentation of a project, since we don't have the experience needed to break down what our CMS is actually doing for us.

If you've found yourself either at a loss to make adjustments to HTML, CSS or JavaScript of a project, or are looking to upgrade outdated front-end skills, this collection is for you.

This collection walks through the process of converting a web page mockup into a fully functioning web page using CSS, HTML and JavaScript, as well as some of the most powerful and commonly used tools and techniques that layer on top of these three technologies.

Here are some of the key points we'll be covering:

  1. How to use basic HTML tags and CSS properties
  2. How to create semantic HTML
  3. How to write more meaningful and sustainable CSS with SASS and SMACSS
  4. How to create a responsive design with media queries
  5. How to work with responsive images
  6. How to improve collaboration and future-proof projects with package managers like Bower and Bundler
  7. How to address accessibility concerns and use tools to audit the accessibility of your site
  8. How to measure and improve front-end performance
  9. How to use automation tools like Grunt

Who this collection is for

If you are seeking to learn modern front end development practices and tools in order to increase your value in the workplace or become more independent with your own projects, this collection was created with you in mind. Front end development is a highly sought-after skill set and is highly portable since it can be coupled with virtually any kind of back-end. Tools like Jekyll allow you to build content-rich sites without the need for a specific backend, and the focus in Drupal 8 on a 'headless Drupal' is allowing developers to leverage Drupal as a back end while still choosing the right tools to generate the HTML and CSS of the front end.

Prerequisites

We don't assume anything about your previous experience with HTML, CSS or JavaScript. We start from the very basics, but that doesn't stop us from exploring more advanced topics that are the staples for any modern front end developer. You should be able to come to the table with only the knowledge you've gained as a user of the web and still understand the steps we take and the rationale behind them.

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:

$291 month $1566 months $2761 year

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.