Introduction to Web Development
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Table of Contents
ToolsNina 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 & ServerWhen 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.
Hypertext Markup LanguageHTML 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 PageBrian 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, ContentBrian 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 PageIn 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: SolutionBrian walk through the solution for the Exercise 1: Creating a New Web Page.
HTML Audience QuestionsBrian 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.
ReviewBefore moving on, Brian summarizes the first exercise and introduces a few other tags like strong and em.
HTML Tags - Void TagsVoid 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 - GroupingGrouping 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 ClassesClasses 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’sLike 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 - NamingBrian 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 ClassesIn 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 - SolutionBrian 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 PracticesWhile 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 MeasurementsCSS 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 BoxesThe 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 QuestionsBrian fields a couple questions from an audience member related to scrollable boxes and box sizing strategies in with CSS.
CSS PositioningWhile 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 ShortcutsBrian 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 & SpecificityWhen 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 PracticesBrian 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 ToolsCSS 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 QuestionsBefore 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 FlowWhen 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 TipsBrian 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 PageIn 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: SolutionBrian walks through the solution for Exercise 3: Styling a Page.
Exercise 3: Final QuestionsBefore moving on, Brian answers some additional questions about Exercise 3. He also demonstrates a few alternative ways the solution could have been reached.
CSS ConclusionBrian 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.
Exercise 6: ArraysIn this exercise, you will work with an array by accessing an item within it.
Exercise 7: Manipulating ArraysArrays 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.
Anonymous FunctionsFunctions 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
Responding to UsersUsing 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 InputExpanding 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 TextIn 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: SolutionBrian 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 FunctionsThere 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 QuestionsBefore moving on, Brian answers a number of audience questions related to jQuery and the DOM.
Displaying DataBrian 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 RedditIn 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: SolutionBrian steps through the solution to Exercise 9: Displaying Data from Reddit.
Introduction to the Command LineDespite 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 LineNina 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 GithubGit 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 StatusThe 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, & PushUntracked 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 ReviewNina 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.comNina 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 RequestsPull 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 RepositoryThe 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 Package ManagerThe 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.
Exercise 10: Cheer and JeerIn 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 AssetsStatic 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 ParametersDevelopers 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.jsonIt 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.
POSTingForm 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 SideNow 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 SideNina 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.