6.12 Chrome DevTools | Coder Vox

Autoplay
Autocomplete

Previous Lesson Complete and Continue

The Front End Developer Bootcamp

Section 1 - Intro

1.1 Welcome to the class (4:48)

Section 2 - What is programming?

2.1 A brief intro on what programming is and why it matters (2:16)
2.2 Why focus on web development? (2:51)

Section 3 - Setting up your work environment

3.1 Mac or Windows: what computer do I need? (4:10)
3.2 A quick tutorial on how to use a Mac (8:14)
3.3 What web browser to use (4:42)
3.4 Installing the text editor, the place where we write our code (5:25)
3.5 Tips for using Sublime Text (5:30)
3.6 Changing themes for Sublime Text (6:47)
3.7 Tech sites you should follow (3:09)
3.8 Blogging: why you should write about your coding journey (3:33)
3.9 Alternate text editor: Visual Studio Code (1:48)

Section 4 - Welcome to the Front End

4.1 How the internet works (5:23)
4.2 The power of HTML, CSS and JavaScript (5:06)

Section 5 - HTML

5.1 What is HTML and why does it matter? (1:56)
5.2 Resources for HTML (2:16)
5.3 A closer look at tags (2:53)
5.4 Overview of an HTML Document (11:06)
5.5 Formatting Text: Paragraphs and headings (7:48)
5.6 Formatting Text: Bold and Italic (6:47)
5.7 Line breaks and horizontal rules (5:06)
5.8 Ordered lists (5:24)
5.9 Unordered lists (5:47)
5.10 White space and comments (9:49)
5.11 Sublime shortcuts (3:25)
5.12 Attributes (3:19)
5.13 Images (10:16)
5.14 Hyperlinks (8:32)
5.15 Project intro: About Chewy (0:58)
5.16 Project solution: About Chewy (7:38)
5.17 What to do if you are stuck with an error (4:32)
5.18 Classes and IDs (2:56)
5.19 Divs and Spans (4:54)
5.20 Tables (5:46)
5.21 Forms Part 1 (14:50)
5.22 Forms Part 2 (20:23)
5.23 Practice exercise: The tech jobs table (10:01)
5.24 Project: The Brunch Cafe website (28:34)

Section 6 - CSS

6.1 What is CSS and why does it matter? (4:29)
6.2 CSS syntax (2:47)
6.3 Inline, Internal, and external CSS (11:51)
6.4 Colors (13:48)
6.5 Text part 1 (11:15)
6.6 Text part 2 (10:20)
6.7 Text part 3 (7:07)
6.8 Font Awesome (15:38)
6.9 Backgrounds (9:02)
6.10 Borders (9:36)
6.11 The Box Model (9:58)
6.12 Chrome DevTools (9:53)
6.13 Margin (6:46)
6.14 Padding (6:27)
6.15 Hover (5:43)
6.16 Practice exercise: The Buttons (20:09)
6.17 Practice exercise: The Nav Bar (16:06)
6.18 Selectors part 1 (12:03)
6.19 Selectors part 2 (6:30)
6.20 Specificity (8:35)

Section 7 - Bootstrap

A Note about the Bootstrap lectures
7.1 What is Bootstrap? (12:49)
7.2 A note about Bootstrap 3 and 4 (3:35)
7.3 Installing Bootstrap (7:15)
7.4 Colors (4:53)
7.5 Containers (3:37)
7.6 Borders (7:17)
7.7 Alerts and buttons (14:41)
7.8 Nav bars (7:56)
7.9 Cards part 1 (11:50)
7.10 Cards part 2 (6:53)
7.11 Carousel (8:54)
7.12 Grid System part 1 (17:46)
7.13 Grid System part 2 (9:44)
7.14 Intro to project: Coffeeplex (6:25)
7.15 Coffeeplex part 1 (32:37)
7.16 Coffeeplex part 2 (18:42)
7.17 Coffeeplex part 3 (24:22)

Section 8 - JavaScript Basics

8.1 What is JavaScript and what does it do? (9:23)
8.2 A few thoughts before we start (3:12)
8.3 Chrome DevTools Console (4:27)
8.4 Comments (1:09)
8.5 Data Types and Variables (20:11)
8.6 Variables part 2 (11:14)
8.7 Output (8:10)
8.8 Semicolons (5:44)
8.9 JavaScript in an HTML file (6:04)
8.10 Prompt method (4:35)
8.11 Comparison operators (8:00)
8.12 Logical operators (5:41)
8.13 Exercise (6:51)
8.14 Conditions (12:00)
8.15 Exercise (5:00)

Section 9 - JavaScript Loops

9.1 What are loops? (3:29)
9.2 While loops (5:41)
9.3 Exercise (5:52)
9.4 Do while loops (6:41)
9.5 For loops (5:29)
9.6 Exercise (4:16)

Section 10 - JavaScript Functions

10.1 Intro to functions (5:11)
10.2 How to define functions (5:39)
10.3 Parameters and arguments (6:37)
10.4 Multiple parameters (4:36)
10.5 Exercise (4:09)
10.6 Returning values (10:18)
10.7 Returning values part 2 (7:37)
10.8 Local and global variables (9:47)
10.9 Exercise (7:55)
10.10 Callback functions (4:32)
10.11 Anonymous functions (4:16)

Section 11 - JavaScript Arrays

11.1 What are arrays? (5:11)
11.2 Index and length (7:10)
11.3 Array methods part 1 (10:58)
11.4 Array methods part 2 (9:24)
11.5 Array methods part 3 (6:52)
11.6 Iterating over arrays part 1 (8:42)
11.7 Iterating over arrays part 2 (7:18)

Section 12 - JavaScript Objects

12.1 What are objects? (4:29)
12.2 Accessing and updating objects (5:27)
12.3 Methods (4:24)
12.4 Objects in arrays (6:27)
12.5 Arrays in objects (4:35)

Section 13 - Document Object Model

13.1 What is the DOM? (4:39)
13.2 Nodes (4:03)
13.3 The window object (6:13)
13.4 Selecting elements part 1 (7:49)
13.5 Selecting elements part 2 (6:47)
13.6 Text (8:04)
13.7 Style (9:13)
13.8 Attributes (7:39)

Section 14 - Events

14.1 What are events? (4:20)
14.2 A list of events (5:14)
14.3 Event handlers part 1 (7:46)
14.4 Event handlers part 2 (4:14)
14.5 Event handlers part 3 (4:18)
14.6 Mouse events part 1 (9:39)
14.7 Mouse events part 2 (4:47)
14.8 Keyboard events (13:43)
14.9 Form events (11:41)

Section 15 - DOM Projects

15.1 Rotating images Part 1 (8:17)
15.1 Rotating images Part 2 (8:14)
15.1 Rotating images Part 3 (8:46)
15.1 Rotating images Part 4 (8:14)

Teach online with

6.12 Chrome DevTools

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock