Skip to content

5-hour Responsive design workshop for Girl Develop It.

Notifications You must be signed in to change notification settings

imuchnik/gdi-rwd-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Responsive Web Design

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 1 five-hour workshop. Each of the slides and practice files are customizable according to the needs of a given class or audience.

Class Goals

Goal 1

Create a page that changes when you resize the browser viewport, and that fits on a mobile device screen.

Goal 2

Add media queries to optimize our layout for different screen sizes - making a mobile-first website!

Goal 3

Learn best practices in responsive design and how to optimize our site design for small screens and mobile devices.

Goal 4

Build a responsive navigation menu that toggles open on small screens, with CSS and jQuery.

Theme customization

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

About

5-hour Responsive design workshop for Girl Develop It.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published