I have been working as a front-end developer for roughly half a year. To prove myself that I have learned a lot and that I can successfully learn even more I have decided to pursue the brand new “MCSD: Web Applications” certificate from Microsoft. The certificate has three prerequisite exams:

• Programming in HTML5 with JavaScript and CSS3 (70-480)
• Developing ASP.NET MVC 4 Web Applications (70-486)
• Developing Windows Azure and Web Services (70-487)

To be honest I have absolutely zero experience with the later two technologies: MVC4 and Azure. So this is going to be quite a challenge. As far as HTML5 goes, I have some experience with that and I am hoping to prepare for this exam in about a month or so. In order to better remember what I have learned I will be writing everything I study in this blog. I hope that this will be helpful not only for me, but for others who decide to take 70-480 exam. Also I have not seen the exam or any “brain dumps” of that exam so I will be preparing according to the description at the MS exam page.

According to the exam page all of the questions are divided into 4 groups:

• Implement and Manipulate Document Structures and Objects (24%)
• Implement Program Flow (25%)
• Access and Secure Data (26%)
• Use CSS3 in Applications (25%)

However, if you take a closer look at the questions inside those 4 groups you will notice that JavaScript takes up about 70% of the actual questions, CSS3 about 20% and HTML about 10%. I think that is so because in reality there have not been many changes or additions to the actual HTML markup. All the new and hyped HTML5 features are actually JavaScript API’s, like web workers, Geo location etc.

So in order to better separate the material that I am going to review I will not follow the structure of those 4 question groups. Instead, I am planning to write 4 or more blog posts in the following order: HTML, CCS3, JavaScript. This should help to concentrate better on the new things that have to be learned. I will also be adding a lot of links for further reading. This should help you to broaden your understanding of the topic even more. Furthermore, I should probably point out again that I have not seen the actual exam questions and thus I do not know what questions might come up. So it is much smarter and safer to learn a little more than it is described in the exam page.

So without further ado, let’s look at HTML related questions and topics.

• Create the document structure.
• Structure the UI by using semantic markup, including for search engines and screen readers (Section, Article, Nav, Header, Footer, and Aside)
• Create a layout container in HTML
• Implement media controls
• Choose the appropriate controls based on requirements
• Implement HTML5 canvas and SVG graphics
• Validate user input by using HTML5 elements
• Implement HTML input types
• Content attributes (for example, required) to collect user input

So in reality this is not very much. As I have already said my prediction is that HTML is going to account for about 10% of the overall number of questions. Let’s look at those topics in more detail.

First three topics/questions a highly related to one another, they are all based on the same premise that a good HTML5 developer should be able to write semantic, valid and concise HTML markup. There are quite a few of these new semantic elements, check out the list here. Most common ones are very obvious <header><footer><article>. I imagine that in the exam there should be several questions about which tag to use or maybe which tags are placed incorrectly so I think it is wise to learn them all. I will not write any examples of semantic HTML here because this blog post is getting rather lengthy already. I will post some links at the bottom of this page which include code examples.

There is a part about markup for search engines. I think that these questions will be related to microdata. Microdata is not exactly HTML but search engines use it and HTML5 supports it. You can read more about it here. To be honest, this is a rather deep topic which I have little knowledge of. So personally I will read a lot about this.

Screen reader markup should be about WAI-ARIA. I do not know much about this topic so I will be reading some additional materials too. What I suspect is that there will be questions about “role=” attributes, because Windows 8 Metro app examples use a lot of this markup. So it is logical that this exam will also test and encourage such markup.

So the other topic is media controls. There are only two of them <audio><video> and they can be as simple as this:  <video src=”http://example.com/movie.mp4″ controls></video>. The thing that bothers me about this question is the part “Choose the appropriate controls based on requirements”, maybe there is something that I am missing, because it does not make any sense to say that, when there are only two media tags. I mean if you can’t choose the appropriate tag for video or audio, it is safe to say you shouldn’t be allowed to develop software at all. You can read more about audio and video controls here. There is also the JavaScript side of these controls, but we will talk about it later.

OK, now let’s look at Canvas vs. SVG. I do not have a lot of working experience with either of these, but form HTML perspective there is nothing special about these tags. To make a <canvas> element is as simple as <canvas id=”newCanvas” width=”200″ height=”200″></canvas>. SVG is basically the same. However, drawing on these elements is fundamentally different. I will have too read a lot about these and probably make several example projects just to check if I understand them properly.

The final HTML topic is forms and user input. This topic is rather wide, because there have been several additions to the form and input field markup. <tel><color><number><range><date> are all new input types. There are several more that I have not mentioned. Almost every one of these also have some additional markup. For example <input type=”date” min=”2010-08-14″ max=”2011-08-14″ value=”2010-08-14″/> Example taken from here. Also there are tags which specify if the field is required or not. All in all, this is one of the major areas where I will have to learn actual new markup. For further reading about HTML5 form markup I suggest this page.

To sum up, we have just looked at what types of questions might be present in the MS 70-480 exam. We have identified the major areas of reading about markup – HTML part of the exam. Now what remains, is to go ahead and learn these things. It will probably take me up to a week to go through all of the markup. Later I will probably update this post with some more links and maybe code snippets. Also I would like to again remind that I do not know if these questions will actually come up in the exam, I am simply following the guidelines in the exam description.

Further reading on HTML questions:

Best site about HTML5 – http://www.html5rocks.com

Semantic markup, semantic markup 2

Microdata, Schema.org, Google on Rich Snippets

ARIA in the real world