Brian Holt
Snowflake
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
CloseLearn 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
Table of Contents
Introduction
Section Duration: 24 minutes
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
Brian walks through one possible example of a completed HTML project.
CSS
Section Duration: 2 hours, 35 minutes
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.
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.
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.
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.
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.
Brian briefly discusses the ::before and ::after pseudo-elements which can insert content onto a page without needing to be in the HTML.
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.
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.
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.
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.
Brian walks through an example of the HTML and CSS code for a newspaper-style front page layout.
Students are instructed to replicate the provided checkout page using the previously demonstrated CSS and HTML skills.
Brian walks through a possible solution to the HTML portion of the CSS project.
Brian walks through a possible solution to the CSS portion of the CSS project.
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
Section Duration: 2 hours, 45 minutes
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.
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.
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.
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.
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.
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.
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.
Brian walks through the solution to the loop exercise.
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.
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.
Brian walks through an in-depth example of what is in and out of a variable's scope.
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.
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.
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.
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.
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
Brian discusses the typical steps from writing code in an editor to having a functional website.
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.
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.
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.
Brian walks through a possible HTML, CSS, and event handling setup solution for the calculator exercise.
Brian walks through a possible solution to implement the UI behavior for the calculator exercise.
Brian walks through a possible solution to implement the math operators for the calculator exercise.
Talking to Servers
Section Duration: 2 hours, 45 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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.
Brian walks through creating the base structure of the event listener of the word project.
Brian walks through a possible solution for adding letters, verifying the inputs are letters, verifying guess length, and implementing backspace.
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.
Brian walks through a possible solution for keeping track of the current number of correct, out-of-place, and incorrect letters in a guess.
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.
Brian walks through a possible solution for checking for and marking invalid word inputs.
Brian walks through a possible solution for implementing the rainbow-colored winning indicator.
Other Stuff You Should Know
Section Duration: 33 minutes
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.
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.
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.
Wrapping Up
Section Duration: 11 minutes
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