Javascript for Designers

1 Welcome to Javascript for Designers!
2 How do we hold data in Javascript
3 What are let and const
4 Javascript functions
5 Using Javascript in the browser
6 Introduction to Rose Culver project
7 What is the SuperHi Editor
8 Setting up our HTML
9 Adding CSS typography
10 How to add the background gradient
11 Fixing our section layout
12 Adding our footer
13 How to add Javascript to our page
14 The Javascript console
15 Adding event listeners
16 Monitoring the page number
17 Cleaning up our code with functions
18 If statements
19 Adding previous functionality to our site
20 Adding in Javascript comments
21 Putting our data in an array
22 Data in an array of objects
23 Adding our background color change
24 What is randomness?
25 Adding a random function
26 The keyup event
27 Looking for arrow left and arrow right
28 Final tweaks to our project!
29 Introduct to Plant Life
30 How to structure our site in HTML
31 Adding in our CSS
32 Placing things in a main tag
33 What is classList in Javascript
34 Adding preparation for our menu
35 Toggling our class for slide out
36 Changing our text from Menu to Close
37 Variation #1
38 Variation #2
39 Variation #3
40 Additional styling for our menu
41 Adding our slideshow HTML
42 Styling up our slideshow
43 How to add layering in HTML and CSS
44 Looping around with Javascript
45 Adding CSS animation with Javascript
46 The forEach function and shortcut functions
47 Applying forEach to our project
48 Adding the mouseover event
49 Adding a mouseout event
50 Snapping our randomness to a grid
51 Applying grid snapping
52 Adding a box shadow on hover
53 Introduction to Type Checker
54 Setting up our project
55 Adding project layout
56 Setting up our options
57 Events
58 Adding the keyup event
59 What is this?
60 Adding fallback text
61 Two way typing with Javascript
62 Adding a range tag
63 Hooking Javascript up with our range tag
64 Changing the line-height
65 How to work with checkboxes
66 Adding Google Fonts to our project
67 Changing the typeface with a select box
68 Changing the font weight
69 How to think about changing the colors
70 Adding Javascript events to multiple things
71 Highlighting the selected color
72 Styling inputs
73 Introduction to Jenna Buchholz
74 Adding our header
75 How to structure our sections
76 Adding additional sections
77 document vs window
78 Keeping track of pixels scrolled
79 Adding a progress bar, part 1
80 Adding a progress bar, part 2
81 What is offsetTop
82 Scroll vs offset
83 What are data attributes
84 Changing text color on thresholds
85 Introduction to parallax
86 Setting up parallax
87 Adding movement to our square tags
88 Adding in parallax speeds
89 Adding data attributes to control speeds
90 Introduction to Brux
91 Setting up our HTML
92 Header styles for Brux
93 Adding in CSS generic styles
94 Adding in CSS layout styles
95 Header scroll threshold
96 Adding a box shadow on scroll
97 Animation setup
98 Looking at tag bounding rectangles
99 Applying animations
100 Adding animation on upwards scroll
101 Adding movement with the mousemove effect
102 How to use trigonometry with Javascript
103 Moving our face’s eyes
104 Accounting for scroll for our animation
105 Timeouts and intervals in Javascript
106 Adding intervals for randomness
107 Introduction to Words of Womxn
108 Adding HTML for our project
109 CSS general page styles
110 Adding layout
111 Adding header scrolling
112 Setting up parallax
113 Applying rotation on scroll
114 Finalizing parallax
115 Adding in page backgrounds on scroll
116 Setting up stamps
117 Adding a stamp on click events
118 Adding a CSS rotation to our stamps
119 Basing our stamps from the middle of the page
120 Adding audio to our click events
121 Thank you!