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