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
});