Complete Intro to Web Development, v3
Table of Contents
IntroductionBrian 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.
TagsBrian 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 TagsBrian 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 TagsBrian 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 ReturnsBrian 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, & IDsBrian 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 HTMLBrian 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 TagsBrian 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 ProjectBrian 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 RunthroughBrian walks through one possible example of a completed HTML project.
CSS Overview & RulesBrian 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 PlaygroundBrian 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 CascadeBrian 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 & !importantBrian 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-classesBrian 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-elementsBrian briefly discusses the ::before and ::after pseudo-elements which can insert content onto a page without needing to be in the HTML.
CSS Box ModelBrian 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.
FlexboxBrian 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 GridBrian 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 AnimationsBrian 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 LayoutBrian walks through an example of the HTML and CSS code for a newspaper-style front page layout.
CSS ProjectStudents are instructed to replicate the provided checkout page using the previously demonstrated CSS and HTML skills.
CSS Project Solution: HTMLBrian walks through a possible solution to the HTML portion of the CSS project.
CSS Project Solution: CSSBrian walks through a possible solution to the CSS portion of the CSS project.
CSS Project Q&ABrian 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.
Control FlowBrian 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.
LoopsBrian 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 ExerciseStudents 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 SolutionBrian walks through the solution to the loop exercise.
Scope ExampleBrian walks through an in-depth example of what is in and out of a variable's scope.
BuiltinsBrian 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.
ArraysBrian 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 ArrayBrian 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 OverviewBrian discusses the typical steps from writing code in an editor to having a functional website.
Events and ListenersBrian 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.
Talking to Servers
JSON APIs OverviewBrian 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 RequestBrian 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 AwaitBrian 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 DemoBrian 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 DataBrian 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 FunctionBrian 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 OverviewBrian 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.
Other Stuff You Should Know
Building a Project with ParcelBrian 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 OverviewBrian 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.