Microsoft 70-480 Programming in HTML5 with JavaScript & CSS3

Explore the basics of markup language and HTML, learn about editors, IDEs, and browsers, and watch a demonstration of building your first web page.

Explore available browsers (Internet Explorer, Chrome, Safari, Opera, Mozilla Firefox) and editors (Notepad++, Comodo Edit) and IDEs (Dreamweaver, Visual Studio 2012) for HTML5 development and testing.

Install and organize browsers such as Safari, Firefox, and Opera with editors on Windows; restart as needed, then preview a simple html5 markup across browsers to compare rendering.

Install and compare common browsers and editors, including Chrome, Opera, Safari, Firefox, and Internet Explorer, and locate Notepad++ and Visual Studio to explore how markup works.

Create your first web page by writing hello world in a text editor and saving with a web page extension, then explore headings, links, images, and media to understand markup.

Create a web page by adding HTML markup to a text, defining the header, title, and h1, building the body, and inserting an image, with browsers following W3C standards.

Build a basic web page that displays an ocean image with the img tag and src attribute, then adjust size, add headings and italics to see browser rendering.

Create and test hyperlinks with anchors and href attributes, including a self-referencing # link, and build ordered and unordered lists with properly closed anchor tags.

Add a footer with bold text and a mailto link for contact, using anchor tags and semantic HTML to illustrate a simple page's structure.

Learn how markup and css styles control page layout by adjusting body margins, heading positions, and floats, while the browser renders links and other elements.

Master HTML editing by comparing plain Notepad to advanced editors such as Notepad++, Komodo. Learn tag basics (head, title, body), end tags, in-editor highlighting, regions, comments, and browser preview.

Open and fix HTML markup by examining tags, margins, and body styling; confirm the source using view source and Notepad to spot errors.

Diagnose missing or broken images by examining file paths, learn to place images in an assets folder, and organize assets into images, video, audio, and fonts with proper relative paths.

Explore the web page design process, from a browser request to a web server delivering a page over the internet, and understand how the Hypertext Transfer Protocol governs these interactions.

Explore the tcp/ip protocol suite: tcp, ip, dns, dhcp, arp, and udp, and how ip config and dns resolve hosts to reach servers on port 80, like IIS and Apache.

Explore how a web page from Microsoft.com is served by a web server on port 80, and how DNS and trace route reveal the path across the internet.

Explore ftp basics, port 21, anonymous login, and using ftp clients to access servers; show that browsers and http aren't the only ways to reach the internet.

Demonstrates basic ftp operations, including connecting to a server, listing directories, and creating folders, while outlining development cycle steps and design considerations.

Prioritize the design process (about 40%), then development (30%), troubleshooting (20%), and deployment (10%) to guide efficient web page creation.

Demonstrate using Notepad++ to create and save an HTML file, explore tags like html, head, and title, and identify start and end tags, with a contrast to Visual Studio.

Set up Visual Studio IDE for web development, create a new JavaScript project using templates, sign in for a developer license, and explore sample pages and doctype basics.

Explore how the Visual Studio integrated development environment assists HTML5 projects, from editing tags and paths to assets/images, to adding pages, dragging images, and running the project.

discover how to use the visual studio ide to create, save, and manage web projects, add pages and images, preview in browser, and compare ide benefits with plain editors.

Take a behind-the-scenes look at HTML5 and markup, exploring design tools, browsers, and surrounding web technologies while staying focused on what matters in this module.

Explore the origins of HTML5 with the W3C team of five and features like semantic tags, the selector API, input controls, accessibility for audio and video, and cross-browser behavior.

Create and format a basic HTML5 web page by coding doctype, head with title, headers, a main content div, navigation, and links, then save and preview in a simple editor.

Learn how to structure a web page using HTML5 semantic elements such as section, header, article, figure and figcaption, link a stylesheet, and manage images to create a well-formatted page.

Create and format a web page using HTML5 semantic elements such as header, article, aside, and footer. Include an unordered list with canvas, SVG graphics, geo location, server sent events.

Learn to link a style sheet and style a page with css basics, including body background colors using rgb hex, font family, margins, max width, borders, and image sizing.

Apply CSS to structure and style a web page, including headers, footers, navigation, and main content, by setting colors, alignment, font sizes, margins, padding, and borders.

Explore creating and applying a style sheet for HTML5 layouts, including hover effects, section and article styling, aside positioning, figure captions, and semantic tag usage.

Explore the query selector concepts by building a demo page that displays a 3x3 table of flag images and dynamic hover and autofocus interactions.

Use document.querySelector to target a hovered table cell, capture its content with innerHTML, and display it via an onclick event and a simple stylesheet.

Explore cross-browser behavior of querySelector driven hover effects, showing images as you hover over elements, and wire up a flag button to update a div with JavaScript.

Explore a query selector demo that uses hover to reveal images, showing case sensitivity in JavaScript and how hovering a cell displays the image.

Demonstrate input control tags in HTML5 with JavaScript and CSS3 by building a styled form that alerts date, time, month, and week values.

Implement an on-submit handler for a multi-input form that reads values by id, alerts numeric and range fields, uses placeholders for date and time, and returns false.

Explore input control tags for date, time, month, and week, and compare how Chrome, Firefox, Opera, Safari render the same HTML5 inputs differently.

Explore how different browsers render HTML5 input controls in a sample form using number, range, tel, email, url, color, and search inputs, with min, max, value, and placeholder attributes.

Compare how input controls render and validate across browsers, including range inputs and color pickers. Test cross-browser accessibility and behavior, noting min/max, alerts, and how Chrome, Opera, and Firefox differ.

Present accessible forms by building a demo form with labeled inputs and required fields, styled in a 600px wide, light blue container with yellow required inputs.

Demonstrates accessible forms using labels, for attributes, and text with area and range relationships. The demo shows from and arriving in fields with range and a save button in Chrome.

Explore accessible forms by implementing required attributes on name and email fields, using proper labels and input IDs, and observing cross-browser visual cues for required fields.

Compare how the same HTML5 markup renders across Opera, Safari, Google Chrome, and IE to illustrate cross-browser differences. Emphasize testing with mobile browsers as you develop robust web code.

Explore HTML5 forms, including new attributes, methods, and form elements, through practical demonstrations and code examples that show how these features format fields and transform pages.

Explore HTML5 forms and their input types, enabling built-in validation, placeholders, autofocus, and autocomplete. Understand how these features work across modern browsers and why older browsers may ignore HTML5.

Demonstrate HTML5 form attributes by building a sample form that shows valid, invalid, and required field styling. Highlight autofocus on the first name input and a post method form.

Demonstrate implementing last name and email fields with labels, using the required attribute and email input type, and reveal how valid and invalid states update styling with placeholders.

Explore valid and invalid form field attributes through hands-on examples of text, number, date inputs, data lists, radio and checkbox options, and browser behavior across Chrome and Firefox.

Explains how the autofocus attribute behaves across browsers, showing that only one element can have autofocus per page and how to move focus to different fields.

Explore how auto complete and auto focus work by enabling forms autocomplete in internet options and testing email address memory. Enable autocomplete per element to control if suggestions appear.

Explore the no validate attribute to bypass browser form validation using form no validate and control no validate, and compare submit versus save actions with required fields.

Explains how to use the pattern attribute with regular expressions to validate inputs, showing a five-digit zip code example using ^[0-9]{5}$ and related form elements.

Learn to create a web form in Visual Studio and implement the datalist element to display input suggestions, including setup, doctype tweaks, and markup structure.

Demonstrate the data list element by creating a suggestions list with options such as HR, sales, and marketing, linked to an input via list='suggestions' in a form.

Apply a stylesheet in Visual Studio to style an article and section with a salmon background, using drag-and-drop to attach it, and explore adding items and modernizer for feature detection.

Explore the HTML5 meter element for showing current space usage relative to a max, with low, high, and optimum thresholds, and how it renders across browsers.

Learn to perform results calculation using the output element and a JavaScript function that parses two inputs and displays the result.

Create a button that on click performs a calculation with value 1 and value 2, producing a result data output that you save and run as a numeric result.

Explore the HTML5 progress element in a live example, set value and max, and display 50 percent progress. Learn how to connect controls to reflect progress in a form.

Explore practical uses of HTML5 input fields, including text, date, time, date time, and week inputs, with examples and labeling to improve form design.

Explore how input fields render differently across browsers, such as Chrome and Firefox, and learn simple html form setup, styling, and cross-browser adjustments for date and time types.

Explore the selector API in a practical form, using document.querySelector and document.querySelectorAll to manage required inputs and warning and styling classes.

Apply the selector API to target a form and set a warning class. Run the server, open Chrome, and observe the form not submitting without a get or put.

Explore the query selector API through a five-demo html project, copying code, organizing assets into an images folder, and setting a start page to demonstrate selectors in action.

Explore how to use query selector with checkboxes, hover effects, and on click events to list checked flags in an unordered list, demonstrating selection and dynamic list generation.

Explore a team of five forms by examining attributes, methods, formatting fields, and new form elements, using studio 2012 to demonstrate tasks and reinforce HTML5 concepts.

Explore the web development process by delving into the software development lifecycle, design, development, debugging, and troubleshooting, and examine the tools that support each stage.

Examine the software development lifecycle (SDLC) and measure complexity using lines of code, number of classes, modules, dependencies, and the responsibilities for design, implementation, and testing.

Explains the software development lifecycle stages—requirements, design, implementation, testing, maintenance—and contrasts ad hoc development with structured processes, noting quick results, higher risks, and its role as a necessary component.

Explore the software development lifecycle as phased processes from conception to end of life, comparing models like code and fix, waterfall, spiral, stage delivery, and evolutionary prototyping.

Explore the Spiral model in the software development lifecycle, focusing on the analysis phase, customer input, and the cycle of design, development, debugging, and deployment for web apps.

Explore the spiral model lifecycle for web projects, weighing security, databases, and user access between internal and public sites, and emphasize analysis, mockups, and customer input before development.

Refine fonts, colors, controls, logo, and navigation after the mockup to establish the look and feel through customer input. Approve moves the markup to staged testing and a controlled release.

Explore the V model of development, linking requirements to design specifications, system design, and validation with unit testing and user acceptance testing to ensure the application meets requirements.

Explore the software development lifecycle phases and their alignment with management control domains, from planning and organization through acquisition, implementation, delivery of support, and monitoring.

Learn debugging HTML5 apps with browser tools (F12), inspect network activity, CSS, and scripts, and fix issues like unmatched or self-closing tags within the software development lifecycle.

Explore the software development lifecycle, its advantages and disadvantages, and the role of documentation. Avoid jumping into coding; ensure production with backups, clustering, virtualization, rightsize, and security to prevent loopholes.

Focuses on staging, testing, and prototyping in development, stressing that customer approvals guide builds, changes require SDLC-informed assessment, and clear design analyses process supports multi-developer web app teams.

Explore javascript from scratch with a comprehensive introduction, covering variables, arrays, functions, and essential concepts through code examples.

Learn how HTML provides markup content, CSS governs presentation, and JavaScript adds behavior as a scripting language interpreted by the browser; contrast interpreted JavaScript with compiled C# examples.

Explore JavaScript essentials: understand why it needs an interpreter, runs as a client-side language in the browser, and cannot access local files, databases, or hardware. Contrast with server-side options.

Create your first JavaScript code in a Visual Studio web form, then learn core concepts like ECMAScript, interpreted versus compiled code, case sensitivity, semicolons, and the alert function.

Learn how JavaScript treats whitespace, implement single-line and multi-line comments with // and /* */, and how script placement affects the order of on-page output.

Place JavaScript in a separate file rather than inline to keep code organized, then create a scripts folder and reference the file from your page.

Learn how to declare and assign JavaScript variables, explore valid names and case sensitivity, and use multiple vars to store values like emails and dates.

Explore how JavaScript uses data types like numbers, strings, and booleans, and implement conditional code with if statements, operators, parentheses, brackets, and braces to form code blocks.

Explore if-else conditional code in JavaScript by evaluating year and month values, using comparisons like less than, greater than, and alerting when conditions meet.

Learn to use the browser console to run console.log, time code with console.time, and diagnose errors with console.warn for effective debugging.

Explore how to use JavaScript loops to increment a counter from 1 to 10 using while, do-while, and for loops, and understand the effects of condition placement on execution.

Explore for loops with break and continue, using an if condition to exit at nine and skip multiples of five, and observe output in the browser.

Learn how to define and call JavaScript functions, pass parameters, and display results in the console, including computing a sum like 10 plus 20 equals 30.

Create and call JavaScript functions with two parameters, return the sum to the caller, store the result in a variable, and display it with alert.

Explore JavaScript scoping by comparing local and global variables, demonstrating how function parameters and global declarations affect values, memory use, and parameter handling.

Explore JavaScript arrays as powerful containers that hold multiple values, indexed from zero, and created both by literals and new Array, with console logs illustrating access.

Learn how arrays function as objects in JavaScript, inspect their length, and use reverse with proper method invocation and console.log to display reversed values.

Reverse arrays, join multiple values, and sort them into a sequence like A B C D F J; understand that elements retrieved by id or tag name act like arrays.

Explore how JavaScript uses 64-bit floating point numbers, how strings and numbers concatenate versus add, and how the Number function converts values and handles not a number cases.

Explore the math object in JavaScript. Learn to round numbers with Math.round, and find the maximum and minimum with Math.max and Math.min.

Explore string manipulations in JavaScript, including converting to uppercase, splitting by spaces to count and locate the last word, and understanding case sensitivity with zero-based indexing.

Learn how to extract substrings in JavaScript by starting at index six and taking the next five characters to yield 'other', demonstrating string slicing and segment indices.

Explore using timers in JavaScript to rotate a main image every five seconds. Build an image array and update the image source with a setInterval function.

Learn to implement a timer-driven image sequence in HTML5 with JavaScript, using getElementById, setAttribute, and a one-second interval while troubleshooting script placement and element references.

Learn how to use setInterval and clearInterval in JavaScript, store the interval handle, and stop an image's spinning with a click event.

Gain a clear, comprehensive view of JavaScript basics, learn to read and decipher code, and understand how JavaScript relates to HTML5.

Learn cascading style sheets (CSS3) to jazz up your page, including selectors, tags, and pseudo-classes, with hands-on demonstrations in Visual Studio that show how styles attach to the page.

Create a new empty web application in Visual Studio, add a web form page for a css3 sample, set utf-8 and English, and structure content with article and sections.

Explore styling a web page with HTML5 and CSS3 by adding an image, setting dimensions, and structuring content with sections, an aside, and a footer. Improve layout with these elements.

Learn to style a web page with CSS, using hex colors and fonts like Cambria, and apply styles to paragraphs, h1 and h2 headings, and the footer.

Style a web page by selecting a class and customizing the entry title's background and foreground colors, including hex values like #ef0000, with different backgrounds for separate entries.

Explore unordered lists and how to style them with CSS, applying blue color to list items, and compare unordered and ordered lists to understand styling applications.

Learn to style an HTML5 ordered list with a pseudo class, setting odd items to green and even items to blue, using internal and external style sheets.

Explore how to link and manage an external stylesheet by creating, importing, and dragging and dropping a stylesheet located elsewhere, then compare page appearance with and without styles.

Explore internal and external style sheets in css, showing how linking an external stylesheet via a link tag separates styling from content, enables branding, and standardizes organization-wide css standards.

Explore cascading style sheets by constructing them from scratch, understand definitions, distinguish internal and external style sheets, and learn to adjust fonts, sizes, weights, and styles to enhance your pages.

Learn the web development lifecycle with a five-person team, and explore HTML5, JavaScript, and CSS3 through practical demonstrations and guidance on the development process.