Microsoft 70-480: Programming in HTML5 with JavaScript and CSS3

This webpage shows all the lessons created during this course. I did style this using Bootstrap, unlike the other two webpages I made for the KO Tech Academy courses. Even though these are sites just to showcase the lessons that are learnt in this course, I felt that they did not look the best, and wanted to change that with this one.

Module 1: Introduction to Web Development Technologies

Introduction to HTML5

The first webpages for this course. Very basic, just setting up the webpage using HTML.

HTML is the defacto language for publishing hypertext on the World Wide Web
Define tags <html>, <body>, <head>, etc.
ALlow to embed other scripting languages to manipulate design, layout, text, and graphics.
Platform independent.

Hello World Intro to HTML5

Introduction to CSS3

Using CSS3 to style the webpage from boring plain text by changing styling elements such as font-family, font-size, color, and text-alignment. Used embedded, inline, and external styling for different elements on the page.

Intro to CSS3 More CSS

The Structure of an HTML Page

All HTML pages have the same Structure
- DOCTYPE declaration
- HTML section containing:
  - Head
  - Body
Each version of HTML has its own DOCTYPE
- The browser uses the DOCTYPE declaration to determine how to interpret the HTML markup
- For HTML5 pages, specify a DOCTYPE of html

Tags, Elements, Attributes, and Content

HTML elements define the structure and semantics of content on a web page.
Elements identify their content by surrounding it with a start and an end tag
Elements can be nested
Use attributes to provide additional information about the content of an element.

Nested

Attaching Scripts to an HTML Page

HTML is static, but pages can use JavaScript to add dynamic behavior
Use the <script> element to specify the location of the JavaScript code
- The order of <script> elements is important
- Make sure objects and functions are in scope before they are used
Use the <noscript> element to alert users with browsers that have scripting disabled.

Overview of CSS Syntax

All CSS rules have the same syntax
Comments are enclosed in /* ... */ delimiters
There are three basic CSS selectors
- The element selector: h2 {}
- The class selector: .myClass {}
- The id selector: #thisId {}
CSS selectors can be combined to create more specific rules
The wildcard * selector returns the set of all elements
Use [...] to refine selectors based on attribute values

How HTML Inheritance and Cascading Styles Affect Styling

HTML inheritance and the CSS cascade mechanism govern how browsers apply style rules
HTML inheritance determines which style properties an element inherits from its parent
The cascade mechanism determines how style properties are applied when conflicting rules apply to the same element

Adding Styles to An HTML Page

Use an element's style attribute to define styles specific to that element
Use the <style> element in the <head> to include styles specific to a page
Use the <link> element to reference an external style sheet

What's New in HTML5?

HTML5 provides many extensions over previous versions, including:
- Rules for browser vendors
- New elements that reflect modern web application development
- JavaScript APIs that support desktop and mobile application capabilities

Document Structure in HTML5

HTML provides new elements to define the structure of a web page:
- <section> to divide up main content
- <header> and <footer> for page headers and footers
- <nav> for navigation links
- <article> for stand-alone content
- <aside> for quotes and sidebar content

Text and Images in HTML5

HTML5 defines new text elements, including:
- <hgroup>
- <time>
- <mark>
- <small>
- <figure> and <figcaption>

Understanding CSS Text Styles

CSS Text Styling supports:
- Fonts
  - font-family
  - font-size
  - font-style
  - font-weight
- Colors
  - color
  - opacity
- Typography
  - letter-spacing
  - line-height
  - text-align
  - text-decoration
  - text-transform

The CSS Box Model

The CSS box model treats each element as a collection of four concentric boxes
CSS defines properties that:
- Control how a box is laid out on a page
- Alter the height and width, and the style of the border

Styling Backgrounds in CSS

Set the background for an element by using the CSS background properties:"
- background-image
- background-size
- background-color
- background-position
- background-origin
- background-repeat
- background-attachment

What is JavaScript?

JavaScript is a programming language that supports:
- Variables
- Operators
- Functions
- Conditional Statements and Loops
- Objects
Use JavaScript with the Document Object Model (DOM) and Browser Object Model to make web pages dynamic
Use the AJAX API to make asynchronous requests to a web server.

JavaScript Syntax

A JavaScript statement represents a line of code to run
Terminate statements with a semicolon
Use comments to add notes to your scripts

Variables, Data Types, and Operators

Use var to declare variables
JavaScript has three simple Types
- String, Number, and Boolean
- Variables can also be undefined or null
JavaScript supports many Operators
- Arithmetic, assignment, comparison, Boolean, conditional, and string

Functions

Functions are named blocks of reusable code:
- Arguments are only accessible inside the function
- A function can return a value
- A function can also declare local variables
- Global variables defined outside of a function are available to all functions in scripts referenced by a page

Using Object Types

JavaScript has a number of built-in object types:
- String, Date, Array, RegExp
JavaScript also provides singleton types providing useful functionality:
- Math, Global

Defining Arrays of Objects by Using JSON

JSON is a format for serializing objects
JavaScript provides APIs for serializing and parsing JSON data

The Document Object Model

The DOM provides a programmatic API for controlling a browser and accessing the contents of a web page:
- Finding and setting the values of elements on a page
- Handling events for controls on a page
- Modifying the styles associated with elements
- Serializing and deserializing a page as an XML document
- Validating and updating web pages

Adding, Removing, and Manipulating Objects in the DOM

To modify an element on a page:
1. Create a new object containing the new data
2. Find the parent element that should contain the new data
3. Append, insert, or replace the data in the element with the new data
To remove an element or attribute"
1. Find the parent element
2. Use removeChild or removeAttribute to remove the data

Handling Events in the DOM

The DOM defines events that can be triggered by the browser or by the user
Many HTML elements define callbacks that run when an event occurs
You can also define event listeners that run when an event fires

JS Demo

Using JavaScript to create behavior for the web page.
Demo 1 demonstrates using the onclick and onmouseover events.
Demo 2 shows the ability to change preexisting content.
Demo 3 changes the styling of elements.
Demo 4 validates user input.
Demo 5 moves the script to the head tag.
Demo 6 uses an external script file.

JS Demo 1 JS Demo 2 JS Demo 3 JS Demo 4 JS Demo 5 JS Demo 6

Module 2: HTML

HTML Formatting Elements

Using elements such as strong, em, i, bold, sub, sup, del, ins, small to change the way text is displayed.

Formatting

Quotations and Citations

Using the q tag, blockquote to modify text.

QuoteCite

More Formatting

Using more tags for different formatting with HTML5.

moreFormatting

Comments

Commenting is a crucial part in programming that is sometimes ignored. It is never read by the complier or interpreter, and provides notes for future reference, such as why this code is written the way it is, what it does, who wrote it, when it was written, and other valuable information that can be forgotten over time.

Comments

Layout 1

Using tables and different layouts to format.
rowspan, colspan, thead, th, tr, td, and the border property.

Layout 1

Tables 1

Expanding on styling tables using nth-child, and targeting specific elements of the table.

More Tables

Lists 1

Working with ordered, unordered, descriptive lists. Different styling, text-decoration, and layouts.

Lists

Block

Creating a blocked area using a div tag, and changing specific parts using the span element.

Block

Layout 2

Using CSS to style a layout. May take this idea further to make a newspaper looking webpage for news articles.

Layout 2

Responsive Web Design 1

Made some basic div tags and used Bootstrap for some responsive web design.

RWD

Frame 1

Using the iframe element to display webpages in a webpage. Possibly will use this to redo my portfolio sites to show all the web pages designed to show in one display.

Go somewhere

Colors

Just some of the preset colors with CSS to visual the different colors for future reference.

Colors

Forms 1

Using a form and different form elements

Forms

Input Types

Working with different input types with forms.

Input Types Input Types 3 Input Types 4

Module 3: CSS

CSS 1

Showing the basics of CSS with an internal sheet, just changing the color and text-alignment.

CSS 1

CSS 2

Continuing on and using different styles. text-indent, font-family, text-decoration, and font-size.

CSS 2

CSS 3

Using the pseudo classes for hyperlinks to change the colors based on the state of the link.

CSS 3

Border Styles

Showing different border properties.

Borders

Fonts

Using different font properties to change the way text is displayed

Fonts

List Style Type

Using CSS to change the list style type of ordered lists.

List

Table

Using CSS to format a nice looking table, including using caption-side to add a caption in the desired location.

Table 1

Float

Used the float property for left and right to display an image to the left and the right of the screen.

Float

CSS Homepage

Simple Homepage design using CSS.

Homepage

Selectors

Using different selector levels and relationships to change the CSS styling of different div/p pairs.

Selectors

Sections

Using the counter-reset, and counter-increment CSS properties to create essentially a custom list-style-type. There is code for it to have sub-sub-sections that appear as 1.1.1, but not displayed.

Sections

Quotes

Changing the quotation marks by specifying the desired characters by using CSS and using the quote tag.

Quotes

Pseudo Classes

Using Pseudo Classes with CSS to change the styling of specific tags and instances.

Pseudo Class

Styled Nav

Using CSS to create a nice styled nav bar. Added the border-left property to break up the solid green bar and the border-radius to the top to make the navbar look more like tabs.

Styled Nav