Complete Intro to Web Development, v3

Brian Holt

Brian Holt

Snowflake
12 hours, 25 minutes CC
Complete Intro to Web Development, v3

Course Description

More than an introduction, you'll build your first website and get a solid foundation for becoming a professional web developer with modern skills! By coding along in this course, you'll get experience writing HTML, styling your pages with CSS, and learning how to program JavaScript. By the end of this course, you will build a clone of Wordle, an app that sold to the New York Times for over a million dollars!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: September 5, 2022

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 24 minutes
  • 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

Section Duration: 1 hour, 39 minutes
  • 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

Section Duration: 2 hours, 35 minutes

JavaScript

Section Duration: 2 hours, 45 minutes
  • 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

Section Duration: 1 hour, 28 minutes

Talking to Servers

Section Duration: 2 hours, 45 minutes

Other Stuff You Should Know

Section Duration: 33 minutes

Wrapping Up

Section Duration: 11 minutes
  • Wrapping Up
    Brian wraps up the course by providing suggested courses to take next and answering some student questions. Student questions regarding opinions on working for startups or larger companies and how to advance from junior to senior development positions are covered in this segment.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now