D. Independent Learning - risdesignet/wd-winter2020 GitHub Wiki

Note: The completion of the Independent Learning assignments will not be checked nor count towards your final grade. However, the tutorials that we have selected will be extremely valuable in your growth as a web programmer, and will cover many foundational skills and concepts that we might not have time to go over in class. Many of the lessons provide exercises/challenges, quizzes, and downloadable code to help students practice the concepts that are being taught. You are welcome to complete these challenges and quizzes if you have the time and would find it helpful in your learning, but you are NOT required to do so. You will only be assessed on the Projects and Exercises we provide you.

Complete Sections 1-6. You are not required to watch Sections 7 & 8, as these concepts will be covered later on in the course. However, if you have the time and would like a peak at what's to come, feel free to watch them.

1. Introducing HTML

• 1.1 The Importance of HTML 3:20
• 1.2 Basic HTML syntax 8:42
• 1.3 The current state of HTML 5:54
• 1.4 HTML Resources 5:28
• 1.5 Choosing a code editor 5:41

2. Basic Page Structure

• 2.1 Exploring an HTML document 5:27
• 2.2 Doctype Declarations 4:00
• 2.3 The document head 6:11
• 2.4 The document body 3:58
• 2.5 Understanding content models 6:39

3. Formatting Page Content

• 3.1 Formatting content with HTML 6:58
• 3.2 Using headings 7:50
• 3.3 Formatting paragraphs 5:35
• 3.4 Controlling line breaks 3:46
• 3.5 Emphasizing text 6:53
• 3.6 Displaying special characters 5:40
• 3.7 Controlling whitespace 3:37
• 3.8 Displaying images 7:08

4. Structuring Content

• 4.1 The value of structure 2:48
• 4.2 Controlling document outlines 10:40
• 4.3 The nav element 5:32
• 4.4 The article element 5:19
• 4.5 The section element 5:12
• 4.6 The aside element 4:56
• 4.7 The div element 6:04
• 4.8 Other semantic elements 9:39
• 4.9 Using WAI-ARIA roles 6:35

5. Creating Links

• 5.1 Exploring the anchor element 2:58
• 5.2 Linking to pages within your site 10:21
• 5.3 Linking to external pages 4:18
• 5.4 Linking to downloadable resources 5:19
• 5.5 Linking to page regions 9:46

6. Creating Lists

• 6.1 Unordered lists 6:05
• 6.2 Ordered lists 4:00
• 6.3 Definition lists 7:49

1. Getting Started

• 1.1 HTML overview/review 5:38
• 1.2 Default browser styles 3:17
• 1.3 Browser support and inconsistencies 2:18
• 1.4 Text editors 1:57
• 1.5 Project overview and setup exercise 8:04
• 1.6 Inline, internal, and external CSS 2:56
• 1.7 Creating a CSS file 3:07
• 1.8 Naming conventions 6:56

2. CSS Core

• 2.1 Syntax, terminology, and naming conventions 2:35
• 2.2 Type, class, and id selectors 2:29
• 2.3 Practicing with simple selectors 3:56
• 2.4 Pseudo-class selectors 8:07
• 2.5 Selectors: Best practices 2:35
• 2.6 CSS comments 2:10
• 2.7 RGB, hex, and keyword color values 1:49
• 2.8 Practicing with simple selectors and colors 6:36
• 2.9 Cascading, inheritance, and specificity 5:57

3. Typography

• 3.1 Web-safe fonts and the font-family property 2:53
• 3.2 Web fonts and Google fonts 4:47
• 3.3 The font-size property 4:57
• 3.4 Practicing with web fonts and font-size 4:27
• 3.5 The font-style and font-weight properties 1:57
• 3.6 The color, line-height, and text properties 4:03
• 3.7 Adjusting the font-weight property 1:53

4. Layouts

• 4.1 Block vs. inline display 4:16
• 4.2 The box model 6:35
• 4.3 Margin and page layouts 3:57
• 4.4 Practicing layouts 5:11
• 4.5 Practicing with padding and spacing 9:42
• 4.6 Floats 6:47
• 4.7 Practicing with floats 8:10
• 4.8 The box model fix 4:16
• 4.9 Practicing with columns 10:12

1. CSS Selectors

• 1.1 CSS syntax review 2:26
• 1.2 Basic and attribute selectors 2:45
• 1.3 Combinator selectors 8:00
• 1.4 Pseudo-class selectors 5:30
• 1.5 Pseudo-element selectors 6:51
• 1.6 Practicing with advanced selectors 9:58

2. Layouts

• 2.1 Box model review 2:38
• 2.2 Float and display review 3:07
• 2.3 Horizontal navs with the display property 4:26
• 2.4 Horizontal navs with the float property 3:05
• 2.5 Practicing with the nav element 6:29
• 2.6 Positioning 5:14
• 2.7 Practicing with fixed navigation 3:07
• 2.8 Practicing with positioning elements 5:16
• 2.9 Float, display, and positioning 1:55
• 2.10 Layers and the z-index property 4:50

3. Tips and Tools

• 3.1 Browser and development tools 3:36
• 3.2 Debugging CSS 2:39
• 3.3 Resetting stylesheets 2:06
• 3.4 Icon fonts 5:03
• 3.5 The background property 4:31
• 3.6 Background shorthand syntax 1:13
• 3.7 Alpha transparency and gradients 5:33
• 3.8 Practicing with backgrounds and gradients 4:15

4. Responsive and Mobile

• 4.1 Introduction to responsive design 4:40
• 4.2 Mobile friendly and mobile first 3:22
• 4.3 Creating flexible and fluid layouts 3:58
• 4.4 Introducing media queries 2:46
• 4.5 Using media queries 4:53
• 4.6 Testing responsive layouts 7:25
• 4.7 Device emulation 4:25
• 4.8 Revisiting your CSS 2:46

1. Layout

• 1.1 Review CSS layout 5:06
• 1.2 Design with a grid 4:06
• 1.3 Intro to CSS Grid 1:37
• 1.4 CSS Grid example 4:56
• 1.5 Intro to flexbox 3:34

2. Retina Display and Images

• 2.1 Retina and high-density displays 2:49
• 2.2 Raster and vector graphics 4:22
• 2.3 Intro to SVG 2:48
• 2.4 SVG exercise 4:11
• 2.5 Retina and images 3:31
• 2.6 Retina and background images 4:17

3. Animation and Shapes

• 3.1 CSS3 transition property 4:14
• 3.2 CSS3 keyframes and animation 4:31
• 3.3 CSS shapes 2:21
• 3.4 CSS shape functions 3:25

4. Tools and Tips

• 4.1 Responsive typography 6:00
• 4.2 Fluid Typography 4:25
• 4.3 Advanced attribute selectors 5:16
• 4.4 Accessibility 4:40
• 4.5 Accessibility and ARIA 1:50
• 4.6 CSS style guides 5:05
• 4.7 Refactor 4:52

1. Overview of CSS Transitions

• 1.1 CSS transform basics 4:15
• 1.2 Simple 3D transforms 4:06
• 1.3 CSS transitions 4:15

2. Understanding CSS Animations

• 2.1 Animation basics 5:35
• 2.2 Use animation-delay and animation-fill-mode 5:07
• 2.3 Use animation-direction 4:00
• 2.4 Timing functions and easing 7:53

3. CSS Animation Building Blocks

• 3.1 Infintely looping animation 5:05
• 3.3 Animate an element into place 5:52
• 3.4 Pause and play with animation-play-state 4:06
• 3.5 Animate 3D transforms 5:46
• 3.6 Prepare an image to use as sprite 4:14
• 3.7 Animate sprite images with steps 4:03
• 3.8 Chain multiple animations 5:44

4. Applying CSS Animations to SVG

• 4.1 Prepare an SVG for animation 4:02
• 4.2 Export SVG from Illustrator 5:37
• 4.3 Animate SVG with CSS 7:25

5. Performance, Browser Support, and Fallbacks

• 5.1 When to use CSS animations 5:28
• 5.2 High-performance animations 4:48
• 5.3 Code organization and fallbacks 3:19

6. Tools for Creating CSS Animations

• 6.1 Helpful online tools for animations 2:38
• 6.2 Using browsers' animation inspection tools 4:22

1. Getting Started

• 1.1 Installing Git on a Mac 3:19
• 1.2 Installing Git on a PC 1:01
• 1.3 Initializing, adding, committing, and status 7:00
• 1.4 Working with the staging environment 7:46
• 1.5 Deleting files 7:31
• 1.6 Managing you log 8:49
• 1.7 Controlling state with branches 7:14

2. Working with Github Projects

• 2.1 Analyzing a GitHub project structure 8:31
• 2.2 Closing a GitHub repo 7:09
• 2.3 Cloning individual branches 12:54
• 2.4 Using a GitHub branch as a template 5:42

1. JavaScript: An Introduction

• 1.1 What is JavaScript? 2:38
• 1.2 How does JavaScript relate to Java? 2:00
• 1.3 Navigating the JavaScript landscape 3:49

2. The Basics

• 2.1 Tools for JavaScript development 2:23
• 2.2 Introducing the browser console 10:31
• 2.3 Add inline JavaScript to a HTML document 4:47
• 2.4 Add JavaScript in an external file 4:57
• 2.5 How to write JavaScript: A crash course 4:24

3. Working with data

• 3.1 Variables: The catch-all containers of JavaScript 6:11
• 3.2 Data types in JavaScript 4:02
• 3.3 Arithmetic operators and math 4:13
• 3.4 Working with strings and numbers 2:37
• 3.5 Conditional statements and logic 5:42
• 3.6 Advanced conditions and logic 3:27
• 3.7 Arrays 2:20
• 3.8 Properties and methods in arrays 7:56

4. Functions and Objects

• 4.1 Functions in JavaScript 3:28
• 4.2 Build a basic function 3:29
• 4.3 Add arguments to the function 2:30
• 4.4 Return values from a function 3:54
• 4.5 Anonymous functions 5:11
• 4.6 Immediately invoked functional expressions 4:14
• 4.7 Variable scope 3:17
• 4.8 ES2015: let and const 6:12
• 4.9 Make sense of objects 3:19
• 4.10 Object constructors 6:16
• 4.11 Sidebar: Dot and bracket notation 2:44
• 4.12 Closures 8:11

5. JavaScript and the DOM, Part 1: Changing DOM Elements

• 5.1 DOM: The document object model 4:00
• 5.2 Target elements in the DOM with querySelector methods 5:52
• 5.3 Access and change elements 4:33
• 5.4 Access and change classes 3:45
• 5.5 Access and change attributes 4:53
• 5.6 Add DOM elements 6:56
• 5.7 Apply inline CSS to an element 6:32

7. JavaScript and the DOM, Part 2: Events

• 7.1 What are DOM events? 1:31
• 7.2 Some typical DOM events 1:59
• 7.3 Trigger functions with event handlers 5:15
• 7.4 Add and use event listeners 6:51
• 7.5 Pass arguments via event listeners 4:30

9. Loops

• 9.1 Loops 3:37
• 9.2 Looping through arrays 4:07
• 9.3 Break and continue loops 7:09