This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Table of Contents
Introduction
Tools
Nina Zakharenko begins the course by discussing some of the tools she and Brian Holt will be using. She talks about how to choose a good text editor and how to use the Web Developer tools inside Google Chrome. - Slides: http://bit.ly/1jXij63
Client & Server
When a link is clicked, a request is sent to the server. The request is processed and the resulting web page is sent back to the client to be displayed to the user. Nina describes this process and as well as the different status codes included in client/server communication.
HTML
Hypertext Markup Language
HTML is the content of a webpage. It is composed of many nested tags that are rendered by the browser. Brian explains how these tags work and demonstrate how to create them.
My First Web Page
Brian introduces the audience to Codepen which is a web app that will instantly render HTML code. In this exercise, he creates a simple website and demonstrates adding different types of tags to a website. - http:/codepen.io/btholt/pen/hadGL
HTML Tags - Meta, Content
Brian describes HTML Meta tags like the title and body tags. He also goes into some of the content-specific tags like paragraphs, ordered & unordered lists, logical divides, etc.
Exercise 1: Creating a New Page
In this exercise, you will create a new web page. The web page will have an unordered list of things to look for in a car. It will also have an ordered list of your favorite cars. Finally, you will give titles to each list.
Exercise 1: Solution
Brian walk through the solution for the Exercise 1: Creating a New Web Page.
HTML Audience Questions
Brian answers a number of questions by the audience and demonstrates the differences between span and div tags. He also talks a little more in-depth about using ordered and unordered lists.
Review
Before moving on, Brian summarizes the first exercise and introduces a few other tags like strong and em.
HTML Tags - Void Tags
Void tags are HTML tags that do not need a closing tag. An example of a void tag would be the <input /> tag. Void tags are also referred to as self-closing tags. Brian demonstrates void tags by introducing the <img /> tag which is used to display images.
HTML Tags - Grouping
Grouping HTML tags is a good practice to keep the code organized and easy to style. For example, if you were creating a blog, you’d want each individual blog post to be grouped.
HTML Classes
Classes are like labels in HTML. They allow developers to add context to grouped items. Later, Brian will demonstrate how classes can be used to apply styling to object in HTML.
HTML ID’s
Like classes, ID’s are another way of labeling object in HTML. The difference is that classes can be used over and over again. ID’s are unique and can only be used once.
HTML Tags - Naming
Brian talks a little about how to pick names for you ID’s and Classes. He stresses not to pick “presentational names” which describe what something looks like because if you decide to redesign the object, you’d have to update the ID or Class too.
Exercise 2 - Giving Classes
In this exercise, you are tasked with giving appropriate names to all the h1, p, and div tags. You’ll also give the blog posts appropriate ID’s.
Exercise 2 - Solution
Brian walks through the solution for Exercise 2: Giving Classes.
Cascading Style Sheets (CSS)
What is CSS?
While HTML is the content of a web page, CSS is the style. CSS defines a set of rules to be applied to the HTML. If the HTML meets one or more of these rules, it will take on that style. Brian spends a few minutes demonstrating how to apply CSS to a web page.
CSS Better Practices
While styling individual tags works, you can’t differentiate between two tags. For example, if you want one paragraph tag to be a different color from the others. Brian demonstrates how using classes allows you to apply specific styling rules to individual tags.
CSS Text Properties and Measurements
CSS has many properties for styling text. These include font-size, font-weight, and color. There are also a wide range of measurements. While many legacy measurements are still supported, the most common are pixels (px) and ems (em).
CSS Boxes
The box model is a very important concept to understand in CSS. Boxes have height, width, borders, and backgrounds. CSS boxes also have properties like margin and padding which control spacing both inside and outside of the box.
CSS Box Questions
Brian fields a couple questions from an audience member related to scrollable boxes and box sizing strategies in with CSS.
CSS Positioning
While answering an audience questions, Brian goes into a demonstration about CSS positioning. Using the position property, you can change how and where an object is displayed in the browser window. Brian also gives his opinions about CSS frameworks like Twitter Bootstrap.
CSS Shortcuts
Brian demonstrates how some CSS properties like margin and padding can be specified with shortcuts. Instead of typing each property like margin-left and margin-right, you can specify a margin property and give it multiple values.
CSS Order & Specificity
When you have multiple CSS rules modifying the same properties, the more specific rule will apply. Brian goes into a demonstration showing how specificity can be used to override generic styling.
CSS Specificity Best Practices
Brian mentions there is a way to trump all specificity in CSS by using the !important keyword. This, however, is a bad practice and can cause issues. Instead, well structured classes should be used. Brian walks through a few examples of best practices with CSS classes.
CSS Resets and the Developer Tools
CSS Resets are libraries that attempt to unify the default look of a web page in all browsers. From there, developers have an easier time styling since they have a common baseline. Brian discusses the use of resets and also give the audience some tips when using the chrome developer tools.
CSS Audience Questions
Before moving on, Brian fields a few additional questions from the audience related to centering layouts and the use of CSS preprocessors like SASS and LESS.
CSS Document Flow
When you ask HTML elements to float, you are asking the browser to fit as many of those elements next to each other until there isn’t any more room. Additional elements will then wrap to the next line. Brian demonstrates how floats can be used in page layout and some of the odd behavior they can bring.
CSS Float Tips
Brian answers a number of audience questions about issues that arise with CSS float. He also demonstrates a few work arounds like clearfix which triggers a CSS reset and can address collapsed div tags.
Exercise 3: Styling a Page
In this exercise you are tasked with recreating a layout without modifying the provided HTML. All layout must be done with CSS. Brian also provides a few hints and answer some initial questions about the exercise from the audience.
Exercise 3: Solution
Brian walks through the solution for Exercise 3: Styling a Page.
Exercise 3: Final Questions
Before moving on, Brian answers some additional questions about Exercise 3. He also demonstrates a few alternative ways the solution could have been reached.
CSS Conclusion
Brian concludes the CSS section of this course with a few resources like MDN, CSS-Tricks, and Stack Overflow. Brian also performs one additional demonstration on positioning with CSS.
JavaScript
An Introduction to Programming
Nina is back to talk about JavaScript. Unlike HTML which is static and never changes, JavaScript is interpreted by your browser and can behave dynamically. Nina outlines some basic JavaScript topics like statements, comments, and how to see things happening in the code.
Exercise 4: Seeing Results
Nina walks through a short exercise demonstrating ways to see output from JavaScript in the browser. She also discusses how to handle users who do not have JavaScript enabled.
JavaScript Variables, Variable Types, & Reserved Words
If you need to store a value or some information, you can use JavaScript variables. Nina discusses the syntax and naming of JavaScript variables. She also outlines reserved words in JavaScript that should not be used when naming variables.
Exercise 5: Writing JavaScript
In this exercise, you will write your first JavaScript program. It’s a simple program that declares a variable and pops up a message with that variables value.
JavaScript Operators, Expressions, & Comparisons
Operators like the plus or minus signs are used to manipulate data. They can also be used to create expressions. Nina demonstrates the use of operators on different types of data and also discusses how to compare values with JavaScript.
JavaScript Logical Operators and Arrays
Logical operators or often used to create complex logical expressions. For example, “If a equals b and x equals y”. JavaScript has many logical operators include && (and), || (or), and !(not). Nina demonstrate a few logic expressions and also introduces JavaScript Arrays.
Exercise 6: Arrays
In this exercise, you will work with an array by accessing an item within it.
Exercise 7: Manipulating Arrays
Arrays can be modified in a lot of different ways. Items can be added at the beginning or end of an array. Items can also be edited individually. In this exercise, you will use a number of these methods to alter an array.
JavaScript If Statements
If statements allow developers to add conditions in their JavaScript code. This allows the program to make decisions and execute different lines of code given a specific condition. For more complex conditions, “else if” statements can be appended.
JavaScript For Statements
Loops are a way to execute a piece of code over and over again. A “for” statement is one way to create a loop. Nina walks through the complex syntax of a for statement and then applies it to iterating over an array.
JavaScript Functions
When you have a piece of code you’d like to reuse, you create a JavaScript function. When you call a JavaScript function, any code inside that function is executed. Nina demonstrates how to create a function that will print an array. Then she calls the function multiple times with different arrays. She also demonstrates how one function call call another function.
JavaScript Scope
When you declare a variable in JavaScript, the scope of that variable refers to where it was declared. This is important because a variable is only accessible inside its scope. For example, if you declare a variable inside a function, it can only be used inside that function. Nina demonstrates how this works and why it’s important to always use the var keyword when declaring variables.
JavaScript Objects & Context
Objects are a collection of related properties. For example, a “car” object may have properties “make”, “model”, and “color”. Brian walks through an explanation of object syntax and also explores the “this” keyword.
Javascript Objects & Context Questions
Brian answers a number of questions from audience members about JavaScript objects. He talks a little about constructor functions and other advanced JavaScript techniques. Many of these advanced techniques are covered in the Frontend Masters Advanced JavaScript course.
Anonymous Functions
Functions declared without a name are referred to as anonymous functions. They are often used with event handlers or with libraries like jQuery. Since anonymous functions do not have a name or variable saving them, the memory they use is freed up once they have finished execution. - codepen.io/btholt/pen/iFodm
Additional JavaScript Topics
Brian concludes the JavaScript section of this course by outlining a few advanced JavaScript topics that aren’t covered in this course.
jQuery
What is jQuery?
jQuery is one of the most popular a JavaScript libraries and used on over 80% of the top websites. jQuery attempts to make common JavaScript tasks easier and shorter to implement. Brian discusses this and provides a simple example of jQuery usage.
jQuery Chaining
jQuery allows developers to use chaining. Chaining is a way to executed multiple functions sequentially within a single line of JavaScript. A dot separates each link in the chain.
Responding to Users
Using anonymous functions, Brian demonstrates how to capture input from the user. He creates a simple click event which shows an alert box in the browser. The click event is passed the function that should be called when the event fires.
Retrieving Text from an Input
Expanding on the jQuery button-click code, Brian adds an input field so the text from the field can be included in the alert box. He demonstrates how to both get and set text in the input field and fields a few general questions about HTML form elements.
Exercise 8: Set Text
In this exercise, you must use jQuery to make text from an input field appear in a paragraph tag when a button is clicked. You will not need to modify the HTML in the exercise to complete it.
Exercise 8: Solution
Brian explains the solution to Exercise 8: Set Text. He also answer a few audience questions about a some of the jQuery methods used in this exercise.
Other DOM Functions
There are many useful DOM-related function in jQuery. Brian talks about a few of the most popular functions including css, html, show/hide, addClass/removeClass, and append. He mentions a few resources including the jQuery Documentation and sites like Stack Overflow.
jQuery and DOM Audience Questions
Before moving on, Brian answers a number of audience questions related to jQuery and the DOM.
AJAX
AJAX Introduction
While AJAX stands for “Asynchronous JavaScript and XML”, it’s really used to represent any process of making request to the server without refreshing the browser window. Brian demonstrates the first AJAX call using the Meetup API.
Displaying Data
Brian expands on his first AJAX example by displaying the data in a more readable format. Rather than showing the raw JSON data returned from the server, Brian parses the data and shows the city and state.
Exercise 9: Displaying Data from Reddit
In this exercise, you will use the Reddit API to search the “aww” subreddit for pictures of puppies and display them in your web application.
Exercise 9: Solution
Brian steps through the solution to Exercise 9: Displaying Data from Reddit.
Troubleshooting
Brian pulls up a few example from audience members that were having difficulties. He demonstrates how to troubleshoot JavaScript errors and debug the AJAX calls made in this application.
Command Line
Introduction to the Command Line
Despite it being a 30 year old technology, the command line is still widely used today. It make repetitive tasks easier, allows for automation, and can be parameterized for dynamic script execution. Nina introduces the command line interface and discusses a few common commands.
Navigating with the Command Line
Nina opens up the command line and begins demonstrating commands for navigating the file system and listing directory contents. She also discusses absolute vs. relative paths in the file system.
Git and Github
Git is an open source version control system that can maintain a history of changes. Github.com is a website built on top of Git where you can host both public and private projects. After a brief introduction to Github, Nina walks the audience through forking their first project.
Git Status
The git status command will give you a summary of any new files in your project that are untracked and any files that need to be committed. You will be using this command frequently to check the status of your project.
Git Add, Commit, & Push
Untracked files must be added to the repository so they can be version controlled. The add command will inform Git about they new file(s). When you are ready to save a version of the file, you will use commit. These changes are only on your computer, though. The push command will push your current version back up to the Github server.
Cloning Review
Nina takes a few minutes and reviews the entire process of cloning and repository, adding a file and pushing the commit back up to Github. In this example, she uses a Windows environment.
Navigating Github.com
Nina walk through Github.com and explains some of of the different areas. These include looking at the latest commit, viewing changes to files, and navigating branches. She also talks a little about viewing different versions and using multiple branches.
Pull Requests
Pull requests are at the heart of Github collaboration. Pull requests happen when you’ve forked someone’s code, modified it, and want to submit it back to the original owner. That owner has the option to accept your pull request or ignore it.
Initializing a New Repository
The previous repository was forked from Brian’s Github account. In this example, Nina demonstrates how to initialize a new repository. She creates the repository on Github.com, then uses the command line to synchronize a local directory with that repository. Nina also talks briefly about using feature branches.
Node.js
Node.js Introduction
Node.js is a platform for running JavaScript on the server. Rather than use server-side languages like PHP or Python, you can use JavaScript. After introducing Node.js, Brian walks through a “Hello World” exercise.
Node Package Manager
The Node Package Manager helps manage third-party libraries in Node.js. With a simple command line statement, a Node module will be downloaded and saved in your project. Brian demonstrates this by adding nodemon: A module that automatically restarts the Node.js server when a change is detected.
Express
Like jQuery, Express makes writing JavaScript much easier. However, Express is specific for creating Node.js server applications. Brian installs the Express framework and uses it to recreate the Hello World application.
Exercise 10: Cheer and Jeer
In this exercise, you will create an application that has two routes: cheer.txt and jeer.txt. Cheer.txt will return something positive while jeer.txt will return something negative.
Static Assets
Static assets are object you send to the user that the server does not change. Images are an example of static assets. Rather that create a route for each image or static asset, folders can be declared “static” or “public” in Express and routes will automatically be configured.
Receiving Parameters
Developers may create a single page the needs to responde differently based on the parameters passed to the page. Express makes it easy to configure pages to receive parameters. Brian demonstrates how to create an Express application that displays the parameters passed to it.
Package.json
It was annoying to install Express in each of the previous examples. It’s even more annoying when a developer uses many dependencies and these dependencies have to be installed each time a new application is created. The file package.json can be used to record these dependencies and automatically install them when needed.
POSTing
Form data is often sent to the server via POST. This data may include a large number of fields like first name, last name, address, etc. Brian demonstrates how to handle POST data in an express application.
Final Project - Client Side
Now that you’ve learned all the pieced needed for building a modern web application, Brian introduces the final project. This project will be a simple Twitter-style application that will send out message. Brian begins building the client side of the application. Then he’ll be turning it over to Nina for the server side.
Final Project - Server Side
Nina takes over the final project to implement the server-side component. She walks through the initial Express application that outputs three static tweets. She then demonstrates how new tweets are handled by the server and output to the page.