This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Table of Contents
Introduction
Introducing Web Development
Brian Holt reviews "Introduction to Web Development" course agenda.
Tips for Coding Success
Brian discusses tips that allow students to succeed with the course.
Teacher Introduction
Brian talks about his background and answers student questions.
Course Overview
Brian discusses the different languages and technologies that will be needed to create a website and how these elements relate to each other. Brian answers questions from students.
Web Development Tools
Brian reviews software tools that are commonly used to code and build websites as well as additional educational resources for continued development.
Learning HTML
Basic HTML
Brian introduces HTML (HyperText Markup Language), which is composed of tags. These tags are used to identify or "mark up" the different parts of a document like headlines, paragraphs, lists, and more. Brian takes questions from students.
HTML Elements
Brian continues discussing HTML by reviewing more HTML elements for marking up content. Brian answers questions from students.
HTML Image, Form, and Table Elements
Brian introduces HTML elements for displaying images, forms, and tables. Brian takes questions from students.
HTML Comments
Brian reviews HTML comments, which allow for adding notes in the code for other developers that the browser will not display in the viewport.
HTML Playground
Brian reviews coding area where students can experiment with marking up content with common HTML tags. Brian answers questions from students.
HTML Attributes
Brian introduces attributes, which are additional pieces of information that are attached to HTML tags. Brian takes questions from students.
HTML Class Attributes
A special HTML attribute, Brian reviews the class attribute that can be placed on any HTML tag. Through Cascading Styles Sheets (CSS), we can use specific CSS selector called "class selector" to associate design rules to modify how those HTML elements look in the browser.
HTML ID Attributes
HTML ID attributes are used for a specific and unique portion of an HTML document. Brian takes questions from students.
Naming and Semantics
Brian reviews the benefits of semantic HTML, which refers to the quality of marking up a document with logical and meaningful naming conventions. Brian takes questions from students.
Meta HTML
After illustrating a basic framework or boilerplate HTML tags for writing a web page, Brian reviews DOCTYPE (document type declaration), lang attribute, and head and body element. Then Brian discusses the script, style, and link tags.
Learning CSS
Introducing CSS
Brian introduces Cascading Style Sheets (CSS), which are rules for how a browser should design or render content. CSS rules may contain information such as colors, sizes, order, positioning, animation, and much more.
CSS Rules
Brian breaks down an example of a CSS rule into its three main components: selector, property, and value.
Parents and Children
Brian reviews CSS inheritance, which is when an HTML element transmits its CSS rules to a child element.
CSS Playground
Brian illustrates a sandbox coding area for experimenting with CSS rules to modify the look of a web page while the HTML markup stays the same. Brian takes questions from students.
CSS Selectors and The Cascade
Brian discusses the Cascade, which is used to settle potential conflicting CSS rules. Brian discusses class selectors, which utilize HTML class attributes in order to associate CSS rules.
IDs and !important
Brian reviews the impact of IDs and !important on CSS specificity. Brian takes questions from students.
Pseudo-classes
Brian introduces pseudo-classes, which associates CSS rules based on certain special events that happen within the markup or user action.
Pseudo-elements and Wildcard Selector
After briefly mentioning pseudo-elements, which allows you to insert content into a page from CSS, Brian discusses the wildcard selector. Brian takes questions from students.
CSS Specificity Guide
Brian reviews a guide to better understand CSS specificity.
CSS Box Model
After a simple float demonstration, Brian reviews the Box Model. The box model is a set of rules a browser's rendering engine uses for each element to handle as a rectangular box when laying out a document.
CSS Floats and Flexbox
After reviewing basic layout with CSS floats, Brian illustrates how to use CSS flexbox, which is a layout model for easily rendering HTML elements in a row or column.
Effective Patterns for Coding CSS
After showing how to associate CSS rules written in a separate file to an HTML document with the link tag, Brian shows when to effectively use CSS cascade. Brian answers questions from students.
HTML & CSS Project Exercise, Part 1
In this exercise, students create a website using HTML and CSS by working off a pre-made design. Brian reviews tips to help the process.
HTML & CSS Project Exercise, Part 2
Brian continues to walks through a solution to HTML & CSS Project Exercise by expanding on the project’s layout and modify unordered lists.
HTML & CSS Project Solution
Brian walks through a solution to HTML & CSS Project Exercise and takes questions from students.
CSS Flexbox Resources
Brian reviews online games and tutorials for learning CSS Flexbox.
Learning JavaScript
Programming Fundamentals
After discussing the importance of code when working with computers, Brian shows how to start understanding JavaScript by coding simple mathematical operations.
Numbers, Strings, and Booleans
Brian introduces strings, which are words or characters stored in a variable, and the merging of different strings together with concatenation. Booleans are a special type of setting a true or false value.
Control Flow
Brian shows how to modify the flow of how a program placing conditions in the JavaScript with "if statements." Brian takes questions from students.
Loops
Brian demonstrates how to perform an action multiple times through loops.
Learning JavaScript Exercise
In this exercise, students demonstrate variables and loops.
Functions
Brian introduces functions, which is a bit of re-usable code similar to how class selectors are used in CSS.
Scope
Brian reviews scope, which is when a variable defined exclusively within the function cannot be accessed from outside the function or within other functions.
Scope Exercise
After noting where the variable is declared, students work through code example to find where there are problems with scope in this exercise.
Scope Solution
Brian walks through the solution to Scope Exercise.
Builtins
Brian introduces commonly-used functions that are available from the browser, which he refers to as "builtins."
Objects
Brian reviews objects and arrays, which are collections of numbers, strings, booleans, and other objects and arrays.
Context
Brian discusses the "this" keyword. As a program progresses through JavaScript code there exists a context of its location that can be referenced through the "this" keyword.
Arrays
Brian introduces how to store and retrieve information from arrays, which are ordered collections of data.
Document Object Model (DOM)
Brian demonstrates the way that JavaScript, HTML, and CSS interact with each other through the document object model (DOM).
Events and Listeners
Brian shows how to modify a web page based on user interactions with the page, which are called events. Event listeners are coded to tell the browser to be alert for specific user interaction such as a mouse click or keyboard button press.
Event Delegation
Brian reviews event delegation, which refers to the process of using event propagation or bubbling to handle events at a higher level in the DOM than the element on which the event originated.
JavaScript, HTML, and CSS Exercise
In this exercise, students code a calculator with HTML, CSS, JavaScript, and the DOM.
JavaScript, HTML, and CSS Solution, Part 1
Brian begins the walk through the solution to the JavaScript, HTML, and CSS Exercise by building out the look and feel of the calculator with HTML and CSS. Brian takes questions from students.
JavaScript, HTML, and CSS Solution, Part 2
Brian continues the walk through the solution to the JavaScript, HTML, and CSS Exercise by coding the programming functionality to the calculator.
Using Ajax and Node.js
Ajax
Brian introduces Ajax, which represents a website request for more information from a server after the page has already loaded, by using an API to pull in an image with JSON.
Integrating with Other People's Libraries
Brian shows how to incorporate a third-party library into a web page. Brian takes a question about the relevance of jQuery.
Building Your Code with Node.js
After installing Node.js, which is a program that allows you to run JavaScript from the terminal, Brian uses npm to install things from npm registry. Using npm allows for utilizing and managing JavaScript packages in websites.
Learning Git
Git and Bash
Brian introduces git, which is a distributed source control management tool. To use git, Brian demonstrates how to work on the command line with bash.
Working with Git
Brian shows how to use basic git commands to commit and share code to a project.
Using GitHub
Brian shows GitHub, which is a centralized repository for git projects that allows developers across the world to collaborate on code.
Using Node.js
Node.js Server
Brian shows how to setup Node.js server.
Server Routing with Express
Brian illustrates how to set up Express, a web application framework in Node.js, to create a simple API. Brian answers questions from students.
Deploying and Final Thoughts
Brian reviews deploying a server application and wraps up the course with final thoughts.