Skip to content

GDILV/gdi-learning-js

Repository files navigation

#Group TODO:

  • Add content at the start about the learning approach and how to handle the JS noise
  • Keep the content of only the first 2 classes
  • More???

Forked from https://github.com/girldevelopit/gdi-featured-js-intro/commit/6549c6925fd4e7debee043f55ed9539fb5a06832

#Girl Develop It - Intro to JavaScript

This is the Girl Develop It Intro JavaScript course. Material based on original material by Sara Chipps, Pamela Fox, Alexis Goldstein, Izzy Johnston, Leo Newball, and Sylvia Richardson.

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.

Classes

Class 1

Introduction to JavaScript and Basic Programming Concepts

An overview of the history of JavaScript, what it is, and how it interacts with the browser. Covers basic JavaScript concepts including variables, data types, and functions.

Class 2

Control Flow

Introduces boolean variable, if/then statements, loops, and arrays.

Class 3

Introduction to the DOM

Introduces the Document Object Model (DOM) and how to use JavaScript to interact with it. Includes finding and modifying nodes.

Class 4

Events and Animations

Introduces events, listening functions, user inputs, and basic animations.

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