Complete Intro to Web Development, v2
Table of Contents
Introducing Web DevelopmentBrian Holt reviews "Introduction to Web Development" course agenda.
Tips for Coding SuccessBrian discusses tips that allow students to succeed with the course.
Teacher IntroductionBrian talks about his background and answers student questions.
Course OverviewBrian 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 ToolsBrian reviews software tools that are commonly used to code and build websites as well as additional educational resources for continued development.
Basic HTMLBrian 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 ElementsBrian continues discussing HTML by reviewing more HTML elements for marking up content. Brian answers questions from students.
HTML Image, Form, and Table ElementsBrian introduces HTML elements for displaying images, forms, and tables. Brian takes questions from students.
HTML CommentsBrian reviews HTML comments, which allow for adding notes in the code for other developers that the browser will not display in the viewport.
HTML PlaygroundBrian reviews coding area where students can experiment with marking up content with common HTML tags. Brian answers questions from students.
HTML AttributesBrian introduces attributes, which are additional pieces of information that are attached to HTML tags. Brian takes questions from students.
HTML Class AttributesA 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 AttributesHTML ID attributes are used for a specific and unique portion of an HTML document. Brian takes questions from students.
Naming and SemanticsBrian 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 HTMLAfter 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.
Introducing CSSBrian 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 RulesBrian breaks down an example of a CSS rule into its three main components: selector, property, and value.
Parents and ChildrenBrian reviews CSS inheritance, which is when an HTML element transmits its CSS rules to a child element.
CSS PlaygroundBrian 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 CascadeBrian 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 !importantBrian reviews the impact of IDs and !important on CSS specificity. Brian takes questions from students.
Pseudo-classesBrian introduces pseudo-classes, which associates CSS rules based on certain special events that happen within the markup or user action.
Pseudo-elements and Wildcard SelectorAfter 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 GuideBrian reviews a guide to better understand CSS specificity.
CSS Box ModelAfter 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 FlexboxAfter 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 CSSAfter 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 1In 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 2Brian 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 SolutionBrian walks through a solution to HTML & CSS Project Exercise and takes questions from students.
CSS Flexbox ResourcesBrian reviews online games and tutorials for learning CSS Flexbox.
Numbers, Strings, and BooleansBrian 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.
LoopsBrian demonstrates how to perform an action multiple times through loops.
FunctionsBrian introduces functions, which is a bit of re-usable code similar to how class selectors are used in CSS.
ScopeBrian reviews scope, which is when a variable defined exclusively within the function cannot be accessed from outside the function or within other functions.
Scope ExerciseAfter noting where the variable is declared, students work through code example to find where there are problems with scope in this exercise.
Scope SolutionBrian walks through the solution to Scope Exercise.
BuiltinsBrian introduces commonly-used functions that are available from the browser, which he refers to as "builtins."
ObjectsBrian reviews objects and arrays, which are collections of numbers, strings, booleans, and other objects and arrays.
ArraysBrian introduces how to store and retrieve information from arrays, which are ordered collections of data.
Events and ListenersBrian 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 DelegationBrian 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.
Using Ajax and Node.js
AjaxBrian 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 LibrariesBrian shows how to incorporate a third-party library into a web page. Brian takes a question about the relevance of jQuery.
Git and BashBrian 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 GitBrian shows how to use basic git commands to commit and share code to a project.
Using GitHubBrian shows GitHub, which is a centralized repository for git projects that allows developers across the world to collaborate on code.
Node.js ServerBrian shows how to setup Node.js server.
Server Routing with ExpressBrian 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 ThoughtsBrian reviews deploying a server application and wraps up the course with final thoughts.