This is the Girl Develop It Responsive Web Design course. Materials by Catherine Farman, based on material by Sophie Shepherd.

The course is meant to be taught in 4 two-hour sections. Each of the slides and practice files are customizable according to the needs of a given class or audience.

Goal for this class: create a page that changes when you resize the browser viewport, and that fits on a mobile device screen.

We look at the basic build blocks of a responsive design, including fluid grids, media queries and flexible images. We'll set up a device lab for testing our projects on real-world devices as we build them.

Using a design mockup as guidance, students will create a basic HTML5 template with the proper viewport meta tag to make our site responsive. We'll create the styles to match our design and begin to mold them into a mobile-first stylesheet using CSS3 media queries to alter our design at different screen sizes.

Goal for this class: learn best practices in responsive design and how to build a responsive navigation menu.

We'll go over some tips for designing a responsive website, such as how to design with a content-first approach, building common layout patterns, and optimizing for touch screen interfaces.

Students will work on building out a responsive navigation menu using HTML, CSS and Javascript for improved usability across different screen sizes. We'll continue to refine our design by testing on a variety of mobile devices.

Goal for this class: learn how to build common responsive design elements like tables and forms.

Goal for this class: optimize your site for performance and a mobile-first experience.

You can change theme colors by changing the theme css to any of the following options:

  <link rel="stylesheet" href="css/theme/gdidefault.css" id="theme">
  <link rel="stylesheet" href="css/theme/gdilight.css" id="theme">
  <link rel="stylesheet" href="css/theme/gdisunny.css" id="theme">
  <link rel="stylesheet" href="css/theme/gdicool.css" id="theme">

You can change the text editor theme by changing the highlight.js css to the following options:

  <link rel="stylesheet" href="lib/css/dark.css">
  <link rel="stylesheet" href="lib/css/light.css">

You can change transition by changing the reveal transition property in Reveal.initialize

  Reveal.initialize({
  				transition:  'default', // default/cube/page/concave/zoom/linear/none
  			});