Front End Web Development: Get Started

Learn all the basics of front end web development.
Course info
Rating
(1196)
Level
Beginner
Updated
Apr 24, 2014
Duration
3h 47m
Table of contents
Course Introduction
Learning and Solving Problems
HTML and CSS for Front End Developers
JavaScript
HTTP and Interacting with the Server
The Browser
JavaScript in the Browser
Basic Libraries & Tools
Performance
Description
Course info
Rating
(1196)
Level
Beginner
Updated
Apr 24, 2014
Duration
3h 47m
Description

Front end web development involves many different technologies, and the landscape is constantly changing. In this course you will learn the basics of all of the different aspects of front end web development, and how to hone and keep your skills up to date.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Unit Testing in Angular
Beginner
3h 20m
22 May 2018
Angular: The Big Picture
Beginner
1h 7m
13 Dec 2017
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Course Introduction
Hello, I'm Joe Eames, and welcome to Pluralsight's course: "Front End Web Development: Get Started. " The very first thing I want to do is discuss front end web development, what it is and what it isn't. Front end web development involves the browser and everything we send to it. This includes: HTML, CSS, JavaScript, Images and anything else sent to the browser to make our web application. What it doesn't include is any frameworks rendering on the server. It only includes the server so far as to specificy how those assets are transmitted, so long as it's something that matters to the browser. So, for example, making sure that the data transmitted is compressed is a concern of front end developers, but how to make the server compress that data is not a front end concern. That being said, rare is the job where the developer only has to deal with front end concerns and all server side matters are dealt with by other developers. There are jobs like this, I myself had such a job, but in general, the guy doing the front end is also working on the server side or what is sometimes referred to as the back end. So this course will only be dealing with the front end. That means that we won't discuss any server side items, we will only be discussing them from the viewpoint of the front end. Front end web development is an incredibly complex subject, just by the sheer number of different technologies involved when putting together a webpage. The list of technologies you may hear referenced can become extremely daunting. Here is just a small selection of common web technologies that are frequently used when delivering a typical webpage. Let's take a moment to soak that all in. All of these different technologies can make it feel like becoming competent in front end web development is something you have to dedicate years towards, but that is definitely not the case. Although mastering these technologies might require lots of time, mastering them is not a requirement for becoming a competent front end developer. Getting a basic understanding of these concepts is very accomplishable in a reasonable amount of time, and a little practice will go a long way to making you comfortable with all of these and more.

Learning and Solving Problems
Hello, I'm Joe Eames. In this module, we're going to look at different ways to learn about front-end technologies, try out solutions, and solve problems that you may have. We'll start this module by learning about the Mozilla Developer Network, a website that should be a go-to resource for any web developer. Then, we'll look at the browser console and how to use it to try out things. After that, we'll look at four different online coding utilities, JSFiddle, JSBin, CodePen and Plunker. These utilities will enable you to try out more complex problems than a console will but will also keep you from having to worry about dealing with files in your hard drive and eliminate the time it takes to set up a new project in your favorite code editor. Finally, we'll talk about staying up to date with front-end web technologies.

HTTP and Interacting with the Server
Hello, I'm Joe Eames. In this module we're going to take a look at HTTP and how we interact with the server. Front-end programming almost never relies solely on the client. Communication with the server, in one form or another is almost always a part of building a front-end solution. Our applications receive their initial data and display from the server, and operate based on that. At some point we will need to send data back to the server, either for persistence or as part of a request for more data or display information. This module will look at some important aspects of that communication. We will cover four areas that every front-end developer should have a reasonable understanding of regardless of the nature of their application and which third party libraries they use. First is the basics of the HTTP protocol itself. In this section we'll discuss some important concepts to understand about how HTTP works. After that we'll look at the XHR object which allows us to make AJAX calls and is a critical piece of the functionality that we have come to expect from modern web applications. Next we'll look at JSON. JSON is the de facto communication format for front-end development. Other formats can certainly be used, and occasionally have to be used, such as XML. But in general, JSON is the preferred format. We'll look at why that is and cover some commonly misunderstood points about it. And lastly, we'll look at the page request life cycle, to make sure that we understand how a browser processes a page. As this is important in many aspects of maintenance and performance in a web application.

The Browser
Hi, I'm Joe Eames. In this module, we will be looking at the browser which is the runtime environment of our applications. As the the track is to the race car driver, so is the browser to the front end developer. The browser is where our code executes and it is the rendering engine which determines how your HTML and CSS are displayed. Understanding this environment and how it enables or limits your development, maintenance and the features of your application can be critical. In this module, we will start by looking at browser capabilities and have different browsers limit what we can do and discuss this as not as a limitation to be considered but also a constantly moving target. Then we'll look at browser development tools and how to best take advantage of the browsers we are using in our development. Finally, we will look at multiple browser testing and how to leverage different tools to give us increased confidence in the applications we build.

JavaScript in the Browser
Hi, I'm Joe Eames. In this module we're going to learn about working with JavaScript in the browser. In this module we'll be looking at some specific items that apply to JavaScript as it runs inside the browser. The browser, as an execution environment, brings its own set of challenges for working with JavaScript. We will be looking at how to handle these challenges, and what aspects of working with the browser are particularly important to understand as we build increasingly complex applications with JavaScript. We'll start by looking at how scripts are loaded in the browser, then we'll talk about the global scope and which object represents the global scope in the browser. After that, we'll talk about working with the DOM, and look at the basic DOM operations that we should be familiar with. Lastly, we'll look at modules in JavaScript, or specifically, the lack of them, and how that affects the code we write and how we can work around that, and what is coming down the pike. JavaScript is our main vehicle for building complex apps, and understanding how it is affected by the browser is a core skill that we will need to develop.

Basic Libraries & Tools
Hi, I'm Joe Eames. In this module we're going to be learning about the basic libraries and tools used by front end developers today. There are many different libraries and tools out there, and obviously we aren't going to cover them all, but instead we'll be looking at a few that are so widely used and so important that everyone who does front end development should at least be aware of these tools, including their features and uses if not actually comfortable with using them. We'll start by looking at Bower, a Node utility for installing client side third party libraries into your application. Then we'll look at jQuery, everyone's favorite library. After that we'll look at Underscore and Lo-Dash, which are utility libraries that bring things to Javascript that it desperately needs. Next we'll look at Modernizr, a way to detect features in the browser. After that we'll look at JSLint and JSHint, which are code quality checkers. Then we'll talk about Grunt and Gulp, which are JavaScript task runners. And lastly, we'll look at a few of the more popular MVC Frameworks and make a small comparison of them. This module will be all about getting familiar with these tools and libraries and not about mastering them. Most of these topics have one or more courses in the Pluralsight library that you can check out for a more thorough examination.

Performance
Hi, I'm Joe Eames. In this module we're going to be learning about the basics of performance with web front ends. We'll start by looking at where to place our style and script tags in our HTML page and why it matters where they go. We'll also look at the use of content delivery networks and the benefits they have on performance. After that, we'll talk about minifying our code and how and why to do it. And lastly, we'll look at concatenation, what that is and why we should do it.