Quantcast

Start with 7 free days of training.

Gain instant access to our entire IT training library, free for your first week.
Train anytime on your desktop, tablet, or mobile devices.

Programming in HTML5 with JavaScript and CSS3

This Microsoft Visual Studio 2012 70-480 course from trainer Garth Schulte provides you with a core foundation of web technologies. Learn how to use many of the HTML5 features for creating semantically rich page structures, dynamic interaction of structure, and content using JavaScript and related technologies such as jQuery, AJAX and JSON, all while making it look snazzy using CSS3 for presentation....
This Microsoft Visual Studio 2012 70-480 course from trainer Garth Schulte provides you with a core foundation of web technologies. Learn how to use many of the HTML5 features for creating semantically rich page structures, dynamic interaction of structure, and content using JavaScript and related technologies such as jQuery, AJAX and JSON, all while making it look snazzy using CSS3 for presentation.

HTML5, JavaScript and CSS3 are dominating forces in web development. And they will be for the foreseeable future, so it's a perfect time to become a web developer!

Exam 70-480 is the beginning of the road for both the MCSD: Web Applications and MCSD: Windows Store Apps certifications. This course helps prepare you for the 70-480 exam and beyond, using realistic examples and providing interactive training!

Related Certifications:
  • MCSA: Web Applications
Garth Schulte has been a CBT Nuggets trainer since 2001 and holds a variety of Microsoft and Google certifications spanning system administration, development, databases, cloud, and big data.
 show less
1. Introduction to 70-480: Programming in HTML5 with JavaScript and CSS3 (12 min)
2. Creating the Document Structure with HTML5 (19 min)
3. Interacting with HTML5 Elements Programmatically (30 min)
4. Styling HTML5 Programmatically (20 min)
5. Implementing HTML5 APIs (33 min)
6. Working with Variables, Objects & Methods in JavaScript (25 min)
7. Implementing Program Flow (25 min)
8. Implementing Event Handling (25 min)
9. Implementing Exception Handling (25 min)
10. Implementing Callbacks (29 min)
11. Creating Web Workers (17 min)
12. Validating User Input with HTML5 and JavaScript (23 min)
13. Consuming Data (23 min)
14. Serializing, Deserializing and Transmitting Data (19 min)
15. Styling HTML5 Pages using CSS3 (24 min)
16. Creating Flexible Layouts with CSS3 (25 min)
17. Creating Animated and Adaptive UIs with CSS3 (16 min)
18. Finding Elements using CSS and jQuery (26 min)
19. Structuring CSS Files using Selectors (14 min)

Introduction to 70-480: Programming in HTML5 with JavaScript and CSS3

00:00:00

Introduction to 70-480, Programming in HTML5 with JavaScript and CSS3. Hey, everyone. Garth Schulte here. I'll be your guide through the wonderful world of web development, where we're going to learn these latest and greatest web technologies, really, these technologies that are the core of front-end web development.

00:00:18

Our goals for this introductory Nugget are to get you familiar with what we're going to be talking about in this series. All of the wonderful technologies, HTML5, JavaScript, CSS3, jQuery, AJAX, JSON, we've got them all. So we'll take just a brief overview of what these technologies' roles are within web development and how they work together to build an awesome site.

00:00:38

Then we'll get familiar with the 70-480 exam. We'll head over to Microsoft's website. We'll get familiar with what they're going to expect from us and look at the objectives and talk a little bit about everything that's covered in this year's. At the same time, we'll talk about the Nugget series overview and how it relates to the objectives in the 70-480 exam.

00:00:56

And at the end of this Nugget, we're going to take a look at the Nugget Doodler, a sample website I threw together really just to show how all of these technologies can come together to make something fun and cool and fresh. And the goal with this sample website wasn't to take you through all the code and build it up throughout the series, because that would end up one, big, spaghetti-coded mess worse than it already is.

00:01:14

We'll do plenty of coding. Your brain will be all coded out by the end of this series. But the goal with the Nugget Doodler was more from a design standpoint. At the end of every Nugget, we're just going to take a minute to talk about where that concept or that technology fits within a complete website.

00:01:30

Let's talk a little bit about the technologies that make up the 70-480 exam this series and most of web development today. And if I had to describe all three of these technologies in one word, I would consider HTML5 structure, JavaScript interaction with that structure and content, and CSS3 presentation.

00:01:51

What each one of them actually is, HTML5 is considered a markup language. What is a markup language? It's a tag-based language that describes the structure and contains the content within a page. And I remember when HTML5 came out. There was an awesome tweet from this lady.

00:02:08

She said, HTML5 is not a markup language, it's a mashup language. And that was one of the coolest tweets I saw about HTML5 because she's dead on. It's a mash up of many, many, many different technologies. We've got things like audio and video now natively supported, which means we no longer have to rely on plug-ins-- I'm looking at you, Flash-- for multimedia content.

00:02:29

And just to name a few more of these features, we've got semantics. Semantics are a better way of describing the structure and content of our site. Browsers understand them better. We can understand them better because they're more readable. So that's a big, big part of HTML5.

00:02:45

And that's actually the first video that we'll get into is really understanding how to structure a website by using the semantic features of HTML5. We've also got offline storage, which is essentially now, rather than just cookies to rely on for offline storage, we have an entire database in the browser.

00:03:03

So we've got a much more efficient way of storing and working with data locally in the browser. We've got new ways of communicating with the server through web workers and background processes. We've also got device access. We've got a much easier way to interact with input and output devices.

00:03:20

We've got 2D and 3D graphics with SVG and Canvas. And the list goes on and on. So we're going to cover many of these throughout the series. But you can see why it's a mashup language rather than just a markup language. It's not just for creating structure and describing content anymore.

00:03:35

It's a lot more than that because we can do so much more with all of these native features. So HTML5 is awesome. It's here to stay. It's the future standard of the web. So it's a great time to learn it and get involved. We also have JavaScript, our scripting language of choice.

00:03:50

This is our browser-based language, wildly popular, been around for a very long time. Most commonly used to do things such as dynamically update the structure and the content of a web page without having to go back to the server and refresh the entire page.

00:04:05

We've got a lot of technologies pop up over the years that improve JavaScript, or at least improve the experience for both the developer and the end user, things like jQuery. jQuery is the biggest JavaScript library out there, the most popular as well, because it simplifies JavaScript.

00:04:23

It promotes rapid development for a web developer because it really does just simplify developing and writing JavaScript code. Another one is AJAX, Asynchronous JavaScript And XML. This is a technology that enhances the user experience. In the past, if we needed to update the entire page or maybe just a little portion of the page's content, we had to submit the entire page anyway.

00:04:48

AJAX allows us to simply submit just the content that we need. So if we need to go to the server to get just a little bit of information, we can do that, and then update just that little bit of information in the web page without updating the entire page.

00:05:01

So it dramatically improves the experience for the user, which improves the quality of our website. Finally, we have CSS3, which is our stylesheet language, to help us separate presentation from content. So that's the beauty. CSS, when it came out, it was just the coolest thing because now instead of having this one, big, spaghetti-coded page that contained all of our content and all of the styling information, now we separate it.

00:05:29

We've got that nice level of separation. And CSS3 adds many new features that make things prettier, but also easier to do. Things like animations and transitions, which, prior to CSS3, were usually done in JavaScript and took a lot of time, coding experience, testing, and tweaking to get them right, are now easily accomplished using CSS3.

00:05:50

So we're going to take a good look at how all of these technologies work individually and collectively together to build a website, and we'll have a lot of fun doing so. But for now, let's head into a browser and get familiar with the requirements, per Microsoft, for 70-480.

00:06:05

So here I have a browser open. Open up your favorite browser. Just do a Google search here for 70-480. And the very first link here should take us right to the exam requirements on Microsoft's website. The first thing I want to point out is we're going to be using Visual Studio 2012 for our development environment.

00:06:23

We're going to be using the Express Edition, which is free, and we're going to be using the Web version of the Express Edition. In fact, let me just show you where you can download it. If you just fire open another Google search here, let's just type in Visual Studio 2012 Express.

00:06:38

There we go. And click on the very first link here, and it'll take you right to the home page. So if the initial page changes here, then you can find it in Products, Express 2012 Products. And here they are. There's four different versions of Express, Web, Windows 8, Desktop, and Phone.

00:06:56

So we're interested in the Web edition. Here it is. Once you're there, just hit the Download link. It'll take us here where you can choose your language, and then you can just hit Install Now, and it'll download it and install it over the web. The one thing I do want to point out is it's free for 30 days unless you register.

00:07:13

Registration is free. So register, you'll get a key, pop it in. Here, the Visual Studio Express 2012 for Web. And you'll have it forever. So this is what we'll be using. Feel free to download it. Hit pause, and try these things out as we go. Now, as far as the exam objectives, let's scroll down a little bit.

00:07:28

Expand Skills Measured, and you can see it's broken out into four categories. We have Implementing and Manipulating the Document Structure and Objects. We have Implementing Program Flow, Accessing and Securing Data, and then CSS3. And these are all pretty evenly split at 25% each.

00:07:47

So each one of these makes up 25% of the exam. We're going to start here. In fact, how you can relate this to the series is each one of these bullet points is a Nugget in the series. So that should give you a nice way to relate the Nuggets to the objectives in the exam and find your way around much easier.

00:08:05

So the first 25%, it's going to be just working with the document object model and a little bit of everything. So we'll first get familiar with the new semantic features of HTML5 and how to structure a document. We'll work with programmatically working with elements and then programmatically working with style.

00:08:20

So we'll get a good feel for HTML5 and JavaScript and even a little bit here of CSS. And then we'll get into the HTML5 APIs, look at a lot of the new HTML5 features. And then we're going to take a big look at JavaScript starting with the end of the first 25%, objects, variables, objects, and methods.

00:08:40

And then we'll get into just all core foundational JavaScript stuff here with implementing the program flow. We'll start with the first three. Inside here are really just going to be all, again, core JavaScript programming. And then we'll get into some neat stuff, callbacks, and how to work with jQuery and AJAX, and then the web worker process to spawn off background threats.

00:09:00

Then we'll get into some of those advanced JavaScript technologies by accessing and securing data. The first couple here are just validating user input. You'll get to see how to do in both HTML5 and JavaScript. And then consuming data, which is going to focus on JSON, which I don't think I mentioned back in our slide, did I?

00:09:17

I must have forgot that one. JSON stands for JavaScript Object Notation. It's essentially a way that we can pass our objects between client and server. It's a great alternative to XML because XML, while great, and it's standardized, it's human readable, it's a little bit bloated.

00:09:36

It's not good for performance reasons. JSON is like a super-lightweight version of XML. So we'll take a look at how to work with both formats. And then we'll take a look at how to serialize, deserialize, and transmit data both JSON and XML, with a little bit of jQuery and the XMLHTTP Request object.

00:09:53

And the last section that is going to focus solely on CSS3-- how it can do everything from just basic styling to creating flexible content to creating animation. And this is where we'll look at transitions, transformations, animation. And then we'll look at how to use selectors with jQuery, and then also how to structure files using selectors.

00:10:15

So it pretty much breaks it down as, again, structure, interaction, and then the last part is presentation. Plus, we've got a section on data because what's a website without data and communicating between the client and the server? The last thing I want to show you is the Nugget Doodler.

00:10:32

Let's open up another tab. And I have it as a link here, a favorite here on the file system, so let's just open it up. And you can see right off the bat, we've got animations. And if we hold your mouse over the title, we've got more animations. So this demo is packed full of the new features of HTML5 and CSS3, and it even uses JSON and jQuery to pull this YouTube feed into our page here.

00:10:56

So the whole structure is HTML5. It's all semantic markup that contains the structure, and I even use this new, cool HTML5 feature called the Canvas. And the whole goal of the Doodler was to bring the whiteboard to you. So now you can have your own whiteboard while watching MicroNuggets.

00:11:15

So this is fun. It's cool. And more importantly, it takes all of the technologies that we're going to learn and brings them into a demo. So again, we're not going to go through all the code in here. We'll definitely supply it with the series. But we'll certainly talk about, at the end of every Nugget, where that concept and where that technology fits inside of a complete application such as the Doodler.

00:11:36

In this CBT Nugget, we took an introduction to 70-480, programming in HTML5 with JavaScript and CSS3. We started with a technology overview to get familiar with all of these technologies. We're going to be learning about HTML5, JavaScript, and CSS3 heavily.

00:11:51

We're also going to look at jQuery, AJAX, and JSON. From there, we got familiar with the 70-480 exam, the objectives, the structure, and also how the Nugget series relates to those objectives. And at the end, we took a look at the Nugget Doodler, the sample website we'll be referencing at the end of every Nugget.

00:12:08

I hope this has been informative for you, and I thank you for viewing.

Creating the Document Structure with HTML5

Interacting with HTML5 Elements Programmatically

Styling HTML5 Programmatically

Implementing HTML5 APIs

Working with Variables, Objects & Methods in JavaScript

Implementing Program Flow

Implementing Event Handling

Implementing Exception Handling

Implementing Callbacks

Creating Web Workers

Validating User Input with HTML5 and JavaScript

Consuming Data

Serializing, Deserializing and Transmitting Data

Styling HTML5 Pages using CSS3

Creating Flexible Layouts with CSS3

Creating Animated and Adaptive UIs with CSS3

Finding Elements using CSS and jQuery

Structuring CSS Files using Selectors

Please help us improve by sharing your feedback on training courses and videos. For customer service questions, please contact our support team. The views expressed in comments reflect those of the author and not of CBT Nuggets. We reserve the right to remove comments that do not adhere to our community standards.

comments powered by Disqus
Intermediate 7 hrs 19 videos

COURSE RATING

Training Features


Practice Exams
These practice tests help you review your knowledge and prepare you for exams.

Virtual Lab
Use a virtual environment to reinforce what you are learning and get hands-on experience.

Offline Training
Our iOS and Android mobile apps offer the ability to download videos and train anytime, anywhere offline.

Accountability Coaching
Develop and maintain a study plan with one-to-one assistance from coaches.

Supplemental Files
Files/materials that supplement the video training.

Speed Control
Play videos at a faster or slower pace.

Bookmarks
Included in this course
Pick up where you left off watching a video.

Notes
Included in this course
Jot down information to refer back to at a later time.

Closed Captions
Follow what the trainers are saying with ease.
Garth Schulte
Nugget trainer since 2002