Before You Start

Things that help a person be a front end web developer:

 Learn as you go
 Resourcefulness
 Attention to details
 The willingness to change
 Put yourself in the mindset of the end user
 Always learn new things – update your skill set

Curriculum Overview

The Front-End Web Developer Microsoft Professional Program curriculum is designed

to provide the student with the skills necessary to create and maintain the client-side, or
front-end portion of web-based applications. The technologies available for client-side
development are varied but most follow industry standards and commonly used tools.

The courses that make up this curriculum are covered in the next topic but this topic
provides a quick overview of what you will learn in this program.

Front-end development on the web platform involves working with various languages
and technologies and taking into consideration aspects such as browser compatibility,
user interactivity, good design principles, and state management. At the very basic level,
you will be working with HTML (HTML5 for this series), Cascading Style Sheets (CSS),
and JavaScript.

In 1989, Tim Berners-Lee worked in a particle physics lab named CERN. While there, he
found that there was a need to share large amounts of documents. Because of the text at
the time, researchers were already using markup languages so that they can write
documents using a text-only format that can be quickly shared with other labs. This format
that many researchers used was named Standard Generalized Markup Language (SGML).
SGML included annotations that allowed researchers to apply formatting to their
document. HTML, the language of the Web, was derived from SGML. The next section
discusses the languages of the Web.

HTML Markup

HTML is a true extension of SGML. HTML does a few things differently:

 HTML restricts which SGML tags are allowed to be used on a web page
 HTML creates a dedicated tag (<a>) known as the anchor tag to reference other
documents

HTML's ability to cross-reference documents helped it gain rapid popularity amongst

researchers and scientists. Research documents can easily link to or reference other
documents to create a web of information. In 1990, Tim Berners-Lee published a formal
proposal titled WorldWideWeb that described a system of hypertext documents viewed
by software named browsers in a client-server architecture. World Wide Web Consortium
Not long after the first two HTML proposals (HTML 1.0 and HTML 2.0 respectively),
Tim Berners-Lee founded and led the World Wide Web Consortium (W3C). The group
of member organizations and staff worked together to develop new standards for the
World Wide Web on a regular basis. The W3C has created specifications for HTML,
XML, CSS and even XHTML.

CSS

Cascading Style Sheets (CSS) is a language that controls and allows one to define the
look of an HTML document. It permits the separation between the content of the HTML
document from the style of the HTML file. CSS enables one to specify things such as the
font you want on your page, the size of your text, the columns of the page, whether the
text on a page is to be in bold or italics, background, link colors, margins, and placement
of objects on a page and so on. by way of explanation, it is the part that controls the looks
of a web page. With CSS, it is much easier to manage the appearance of multiple web
pages since it separates the HTML element from display information. CSS also enables
faster downloading of web pages, which is works best with older computers and modems.
It provides a method for retaining a common style.

The coding of CSS style rules can be done in three places, namely:

 Inline - done in the HTML tag.

 Internal Style Sheet - coded at the beginning of a HTML document i.e. inside the
tags, and closed by the tags.
 External Style Sheet - this is a separate file with a .css extension which serves as
a reference for multiple HTML pages with a path/link in the HTML pages pointing
to browsers where to look for the styles.

JavaScript

JavaScript is a programming language or an object-based programming written into an

HTML page to make it more interactive.

JavaScript can be used to:

 Add multimedia elements such as showing, hiding, changing, creating image role
overs, scrolling text across the status bar, etc.
 JavaScript makes it possible to create tailored dynamic page contents, date and
time, or other external data.
 Form processing such as user input validation during the form submission, modify
the contents of the form.

JavaScript can also be used with CSS to make Dynamic HyperText Markup Language
(DHTML) which enables the appearance and disappearance of webpages. JavaScript
executes only on the web page that is in the window of the browser at any set time. This
means that the scripts running on a page are immediately stopped the moment the user
stops viewing the page. The only exemption to this is various client-side storage APIs and
cookies which can be utilized by multiple pages to accumulate and pass information
between them. This can happen even after the closure of the pages.
JavaScript statements are written with a script tag <SCRIPT> which informs the browser
that the JavaScript code follows. The script is embedded in HTML to be interpreted and
executed by the client’s browser.

JavaScript relies on the browser to run, although it can also be utilized in other contexts
other than a Web browser. JavaScript is a client side, interpreted, object-oriented, high-
level scripting language.

Courses in the Curriculum

In the Front-End Web Developer program, you will take the following courses:

HTML5 and CSS Fundamentals. Learn the basics of Web design and style to give
your Web sites a professional look and feel. The Microsoft team and experts from
the World Wide Web Consortium (W3C) will guide you step-by-step in how to use
the latest Web standards to create a site to be proud of.

CSS Basics. This course will introduce you to the basics of Web design and teach you
how to style your Web site for a professional look and feel. The Microsoft team and
experts from the World Wide Web Consortium (W3C) will guide you step-by-step in
using the latest Web standards to structure your content and presentation like a
professional. In this course, you will explore numerous CSS features to help you control
the look and feel of your site such as colors, fonts and layout. By the end of the course,
you should understand all the fundamental elements of CSS and how to use them
effectively.

Advanced CSS Concepts. In this course you'll apply more advanced CSS concepts such
as building responsive UI layouts, dealing with CSS modules and high-fidelity designs.
Next, you'll learn about Sass/Less processing, and finally look at some Web app testing.

JavaScript Introduction. This computer science course is an initiation to JavaScript

programming and has been designed to help Web developers have an understanding of
the basic concepts of the language. This course was developed in partnership between
W3C and University Côte d'Azur. JavaScript lets you add interactive features to your
Web sites, including dynamically updated content, controlled multimedia, animated
images, and much more. The main objective of this course is to master JavaScript best
practices by means of many interactive examples, some of which are demonstrated in live
coding videos.

Introduction to Typescript. Want to write organized code for your website that you can
easily manage and maintain? TypeScript is the answer to building scalable web
applications. TypeScript lets you write JavaScript the way you want to. TypeScript is a
typed superset of JavaScript that compiles to plain JavaScript. It works on Any browser.
Any host. Any OS. TypeScript is open source and has attracted the attention of a big
community of web developers who are continuously contributing to the wealth of the
language making it the language for web development.

Introduction to Bootstrap. This course is designed to be a primer on Bootstrap. By the end

of the three modules you will have gained the knowledge to create pages common to all
web applications, and implement the most frequently used components and classes
provided by Bootstrap. You will also see how to use the tooling provided by Visual Studio
to assist you in creating pages as quickly as possible.

Introduction to jQuery. jQuery offers the JavaScript developer more power and flexibility
while simplifying and reducing the amount of code required. Started as a way to simplify
object selection by John Resig back in 1995, jQuery has become an indispensible tool for
any JavaScript developer. jQuery is designed to offer cross browser support, allowing you
to write your code once and have it run properly on every browser. jQuery makes it much
easier to perform operations such as selecting individual or groups of items for
manipulation, changing elements or the entire DOM in an HTML page, or making calls
to the server to access remote resources.

AngularJS Fundamentals. This course will teach you the programming language using a
series of easy to understand AngularJS tutorials. The hands-on approach will teach you
how the AngularJS framework works, and enable you to use HTML as your template
language. You’ll also learn the basics of AngularJS’s module definition and how to
perform basic dependency injection between components.

AngularJS: Advanced Framework Techniques. In this advanced angularJS course, you’ll

learn how to implement a web framework as you work your way through a series of
tutorial-style labs that make learning easy. This course is best suited for those wanting to
build upon a basic understanding of Angular, and who have HTML, CSS, and JavaScript
training or knowledge.

Using Open Source Web Tooling to Improve Development Proficiency. This computer
science course focuses on some of the current open source tools and technologies
available today for Web developers. In the five modules of this course, you will learn
how to use Node.js and the NPM along with other tools like Chalk, Angular, Bootstrap
and Font Awesome.

Introduction to DevOps. DevOps is the union of people, process and products to enable
the continuous delivery of value to end users. It aims to create a culture and environment
where building, testing, and releasing software can happen rapidly, frequently, and more
reliably, so you can innovate like a startup and scale for the enterprise. By taking this
introductory DevOps course, you’ll be able to define DevOps, understand why you need
DevOps, and learn how you can get started with DevOps. You’ll learn the key ideas and
techniques to bring development and operations together to produce higher-quality
software and deliver it more quickly.

Building Your Azure Skills Toolkit. Want to give your apps the power of the cloud? Roll
up your sleeves for a fast-paced, hands-on tour of several cloud-powered features in
Azure, and learn how to integrate Azure services within a single web app.

As you work with the experts through an easy-to-follow scenario, start by creating a web
app using Angular and .NET Core. Then, integrate Bing Search to find and retrieve
images to display on your site. Ready for artificial intelligence (AI)? Use Azure Cognitive
Services Computer Vision to analyze and detect the objects within the images you found.
Plus, use SQL Azure to store your metadata in a scalable database, retrieve the data, and
display it using .NET Core Web API and Entity Framework Core.
Front-End Web Developer Capstone. This is final component of the MPP for Web Front-
End development. In this class you will apply all of your knowledge that you have
learned throughout this curriculum to create a single-page application implementing a
web project. This project will be manually graded to validate your knowledge and
understanding of the technologies used.

To Research Browser Compatibility with HTML5, CSS, and JavaScript

In this lab, you will visit various web sites to research browser compatibility in relation
to HTML5, CSS, and JavaScript. It's recommended that you install the major browsers
on your platform according to what browsers are available for that platform. In this way,
you can test each browser with some of the sites that you will visit.

In this task, you will check your browser's compatibility with HTML5.

1. Open the browser you want to test

2. Visit http://html5test.com
3. Scroll through the page and note the supported aspects of the browser
4. Try each browser on your system and compare the results. If you have only one
browser, try installing one or two more for this step. Optionally, if you don't want
to install different browsers, select the "other browsers" tab for a comparison of
the major browser platforms.
5. Visit quirksmode.org and investigate some the current compatibility tables which
list the major browsers and versions

In this task, you will research some information on HTML, CSS, and JavaScript and the
standards that support them. This task is just for informational purposes. You will
encounter tutorials and labs in the courses in this curriculum that will teach you how to
use these technologies.

Standards are important in this industry as they help to make compatibility a potential
reality across platforms and browsers. Knowing about them and how to research them is
an important skill.

1. Visit http://www.w3.org/standards/webdesign/. On this page, you will find links

to the standards set forth by the W3C, the organization tasked with managing the
standards for HTML and CSS.
2. Click the HTML & CSS link and review the material listed for these two web
technologies.
3. While you don't need to read the specification or be an expert on it,
visit http://www.ecma-international.org/publications/standards/Ecma-262.htm to
learn more about what ECMA is and how it relates to JavaScript and the
JavaScript standard.