Complete Intro to Web Development, v3
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
Brian Holt introduces the course by providing some personal background in web development and course prerequisites. Setup instructions for the course, including hardware requirements, applications needed, and Brian's setup, are also provided in this segment.
Tools
Brian discusses recommended tools, including editors, browsers, and extra resources for more technical information. Brief descriptions of HTML, CSS, and JavaScript's functions in code are also covered in this segment.
HTML
Tags
Brian discusses the base building block in HTML, a tag, and demonstrates its effect on an HTML document. An HTML document is a plaintext document structured with elements. Elements are surrounded by matching opening and closing tags.
Common HTML Tags
Brian demonstrates and discusses the function of some common HTML tags, including the paragraph, anchor, div, span, and three different list tags. Buttons and images are also covered in this segment.
Input & Form Tags
Brian demonstrates using input tags to gather information from the user, including text, color, file, number, date, and time. The textarea, select, and form tags are also covered in this segment.
Tables, Comments & Hard Returns
Brian walks through creating a table using HTML tags, comments to write notes in codes, and discusses creating hard returns in the middle of text. The table is the container for the whole table, tr represents a row, and td represents one cell in the table.
Attributes, Classes, & IDs
Brian demonstrates how to modify the behavior of an HTML tag by adding attributes and label types of tags using classes and IDs. A tag can have multiple reusable classes, while IDs are unique.
Organizing HTML
Brian discusses organizing HTML using divs and articles to encapsulate and separate similar subjects. A walk-through of creating a base for a navigation bar is also provided in this segment.
Head & Meta Tags
Brian walks through the initial setup of an HTML project, including defining the base meta tags and what needs to be placed in the head of the document. Defining the character set, viewport dimensions, title, and linking between HTML pages are also covered in this segment.
HTML Project
Brian discusses the requirements for both HTML pages: index.html and about.html. The index.html page should include a title, intro, and five blog posts with titles, author, date, and text (bonus points for images). The about.html page should contain the blog name, a few paragraphs about the student, and a list of recent jobs/schools/accomplishments.
HTML Project Runthrough
Brian walks through one possible example of a completed HTML project.
CSS
CSS Overview & Rules
Brian discusses an overview of the effect of CSS and CSS rules on a webpage. CSS rules communicate and dictate the styling of various HTML tags to the browser.
CSS Playground
Brian provides a CSS playground to apply various CSS stylings to tags and see their effect. Defining custom CSS classes that can be used to apply styling to multiple tags is also covered in this segment.
CSS Cascade
Brian demonstrates the function of the CSS cascade and discusses the order of selector specificity. Multiple examples of how the CSS cascade handles conflicting CSS rules are provided in this segment.
IDs & !important
Brian demonstrates using IDs and !important selectors to override other CSS styles is also provided in this segment. A student's question regarding how to override Bootstrap styles with custom CSS is also covered in this segment.
Pseudo-classes
Brian discusses using pseudo-classes to conditionally select which class to use for CSS styling. The pseudo-classes :hover and :first-child are demonstrated in this segment.
Pseudo-elements
Brian briefly discusses the ::before and ::after pseudo-elements which can insert content onto a page without needing to be in the HTML.
CSS Box Model
Brian demonstrates altering the layout of a webpage by defining values for CSS rules that affect the CSS Box Model. The CSS rules covered in this segment include display, height, width, padding, border, and margin.
Flexbox
Brian demonstrates using the flex display mode for CSS to alter the layout of the tag's children. Demonstrations of flex-direction, justify-content, align-item, and flex-grow CSS properties are provided in this segment.
CSS Grid
Brian discusses using the CSS display property grid to layout page contents grid-like fashion. This segment also walks through a more complicated example of using the property grid-area to name sections and grid-template-areas to layout those previously named sections.
CSS Animations
Brian briefly walks through how to create reusable animations using @keyframes. How to effect an animation curve by using various animation-timing-function properties, including ease, ease-in, ease-out, and ease-in-out is also covered in this segment.
Newspaper Layout
Brian walks through an example of the HTML and CSS code for a newspaper-style front page layout.
CSS Project
Students are instructed to replicate the provided checkout page using the previously demonstrated CSS and HTML skills.
CSS Project Solution: HTML
Brian walks through a possible solution to the HTML portion of the CSS project.
CSS Project Solution: CSS
Brian walks through a possible solution to the CSS portion of the CSS project.
CSS Project Q&A
Brian answers students' questions regarding the reasoning being using div tags and not paragraph tags and why a nav tag was used instead of a header tag. A brief discussion about linking external style sheets is also provided in this segment.
JavaScript
JavaScript Intro
Brian provides some encouraging words regarding the JavaScript portion of the course and discusses that "code is communication." Well thought out, documented, and laid out code will make it easier to understand and maintain in the future.
JavaScript Basics Overview
Brian walks through some basic JavaScript examples, including declaring constant and mutable variables, naming variables, and viewing the JavaScript console. A student's question regarding when JavaScript programmers switched from using var to using let is also covered in this segment.
Adding JavaScript to a Website
Brian discusses the recommended loading order of HTML CSS and JavaScript and demonstrates how to add JavaScript code to a website. A demonstration of how to attach an external JavaScript file to an HTML file is also provided in this segment.
Numbers, Strings & Booleans
Brian discusses the different data types in JavaScript and demonstrates defining numbers, strings, and booleans. Utilizing backticks, string concatenation, and the difference between whole numbers and floats are also covered in this segment.
Control Flow
Brian discusses creating branching logic in the order of control flow to run code if a defined condition is true. Conditional statements known as if statements and elseif statements are covered in this segment.
Loops
Brian walks through how to create a function that repeats itself based on defined parameters and demonstrates what happens when that function never ends. This segment demonstrates how to create "for" loops, "while" loops, and the meaning of the i variable.
Loop Exercise
Students are instructed to write code that declares two variables a character and timesToRepeat. Using a loop, repeat that character the defined number of times and then console.log it.
Loop Solution
Brian walks through the solution to the loop exercise.
Functions
Brian walks through the required initial components of a JavaScript function, demonstrates creating a reusable function, and discusses some commonly used JavaScript functions. How to call a function, different ways to write a function, and a student's question regarding using const to define functions are also covered in this segment.
Scope
Brian discusses the concept of a variable's scope as what area in code the variable is available for use. A function serves as a closure in JavaScript; a closure creates a scope, so a variable defined inside that function cannot be accessed outside of it.
Scope Example
Brian walks through an in-depth example of what is in and out of a variable's scope.
Builtins
Brian demonstrates some of the commonly used functions built into the browser. Built-in functions for strings, numbers, and a time-related function are covered in this segment.
Objects
Brian discusses grouping like data in a JavaScript object and walks through how to define and access that grouped data to use in functions. The structure of an object, object keys, and object values are also covered in this segment.
Context
Brian discusses the 'this' keyword and how to determine the value of 'this' with the concept of context. There is no constant value of 'this,' which is determined by how a function is called. A student's question regarding classes in JavaScript is also covered in this segment.
Arrays
Brian discusses arrays being ordered collections of data and objects being unordered collections and demonstrates how to access specific elements in the array. The primeNumbers, push, length, pop, shift, and unshift methods are also briefly shown in this segment.
Iterating Through an Array
Brian demonstrates two methods of accessing everything in an array: a for loop and an array function called forEach.
Putting It All Together
Code to Website Overview
Brian discusses the typical steps from writing code in an editor to having a functional website.
The DOM
Brian discusses the DOM (document object model) as where JavaScript, HTML, and CSS interact. The DOM represents the page so that programs can change the document structure, style, and content.
Events and Listeners
Brian demonstrates implementing website interactivity by adding event listeners that trigger and run a given function on a defined DOM event. A brief discussion regarding event bubbling is also covered in this segment.
JavaScript Calculator Project Setup
Students are instructed to build a simple calculator that looks similar to the provided example. Brian discusses the requirements for the course calculator project and provides some helpful hints and tips for the HTML, CSS, and JavaScript portions of the project.
JavaScript Project: Setup & Event Handling
Brian walks through a possible HTML, CSS, and event handling setup solution for the calculator exercise.
JavaScript Project: UI Behavior
Brian walks through a possible solution to implement the UI behavior for the calculator exercise.
JavaScript Project: Math Operators
Brian walks through a possible solution to implement the math operators for the calculator exercise.
Talking to Servers
JSON
Brian discusses how servers and frontends exchange information without refreshing the page using JavaScript Object Notation, also known as JSON. Escape characters, JSON.parse(), and JSON.stringify() are also covered in this segment.
JSON APIs Overview
Brian provides a brief overview of what an API is and the steps involved in making an API request. A demonstration of the returned JSON is also covered in this segment.
Making an API Request
Brian walks through how to make a request to the dog.ceo API and render the returned image. A brief walkthrough of fetch, promise, .then, response, and error handling are also provided in this segment.
Async Await
Brian demonstrates how to condense the code for an API request by using async and await. The async and await keywords enable asynchronous, promise-based behavior, avoiding the need to create promise chains.
Word Game Project Demo
Brian walks through a demo of this section's end project, discusses the necessary functionality, and provides the utilized APIs. This project is a clone of the game Wordle and will have similar functionality.
GET & POST API Data
Brian demonstrates how to use an API client to send data to an API with the POST method and retrieve data from an API using the GET method. A brief discussion regarding the types of information that can be sent with the global fetch() method is also covered in this segment.
isLetter Function
Brian provides some helpful suggestions on how to proceed with building the word game and the code for the isLetter function to check if the user is typing a letter or not. A partial walk-through of how to implement an input with the isLetter function is also covered in this segment.
Word Game Project Overview
Brian briefly discusses the word game project and provides an example of how large the code should be. A list of step-by-step instructions is also provided if some direction is needed.
Project HTML & CSS
Brian walks through a possible solution to the HTML and CSS portions of the word game project. A student's question regarding how to make switching between HTML, CSS, and JavaScript context easier is also covered in this segment.
Project JavaScript: Event Listener
Brian walks through creating the base structure of the event listener of the word project.
Project JavaScript: Handling Input
Brian walks through a possible solution for adding letters, verifying the inputs are letters, verifying guess length, and implementing backspace.
Project JavaScript: Loading State
Brian walks through a possible solution to requesting the current state of the word of the day and how to display a loading spinner based on the website's loading state. How to see request and response status in the dev tools are also covered in this segment.
Project JavaScript: Commit Word
Brian walks through a possible solution for keeping track of the current number of correct, out-of-place, and incorrect letters in a guess.
Project JavaScript: Game Loop, Win, & Lose
Brian walks through a possible solution for setting win and lose conditions, stopping the event listener when the game is complete, and ignoring inputs until the word of the day has loaded.
Project JavaScript: Validate Word
Brian walks through a possible solution for checking for and marking invalid word inputs.
Project JavaScript: Winning Indicator
Brian walks through a possible solution for implementing the rainbow-colored winning indicator.
Other Stuff You Should Know
Using JavaScript Libraries
Brian demonstrates how to utilize prebuilt tools by integrating a third-party code library called Popmotion. By including a script tag with the appropriate URL before the website's main script tag, the library can be accessed and interacted with within a project's code.
Building a Project with Parcel
Brian demonstrates using Node.js and a tool called Parcel to bundle a project's code and run it locally on a development server. Installing Node.js grants access to a tool called npm, which allows installing packages from the npm registry.
Git & GitHub Overview
Brian walks through using Git to store, version, and share code and how to interact with GitHub using Git. This demonstration uses VS Code's source control with integrated Git.
