NMD 345 Web Applications

Not your Daddy's HTML/CSS/JavaScript

Make your own website!

Updated HTML ☠️

💩 Deprecated tags

❌


	http://

✅


	https://

❌


	<bold>
	<italic>
	<font>

✅


	font-weight: bold ;
	font-style: italic ;

❌


	<center>

✅


	text-align: center

❌


	< width=50px height=30px >

✅


	width: 50px ;
	height: 30px ;

🙁 Discouraged tags

🙁


	<table>

✅


	<div>

🙁


	<br />

✅

<p>

🙂 Simplified tags

😵‍💫


	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"...

✅


	<!DOCTYPE html>

😵‍💫


	<style  type="text/css" ...

✅


	<style>

😵‍💫


	<script language="JavaScript" ...

✅


	<script>

Updated CSS 👕

🙂 Simplified color functions

👴


a {
	color: hsla( 180, 100%, 50%, 1 ) ;
}

👩‍🎨


a {
	color: hsl( 180 100% 50% / 1 ) ;
}

🙂 Simplified nesting

👴

An older way of nesting selectors just separates them by a space.


					#news {
						width: 100% 
					}
					#news .headline {
						font-size: 4em ;
					}

👩‍🎨

Nest one style rule inside another to enforce it only only when the inner tag appears inside the outer tag.


					#news {
						width: 100%;
						.headline {
							font-size: 4em ;
						}
					}

Updated JavaScript 💪

👩‍🎨 Chic JavaScript

👴


	document.getElementById( "grumpy" )
	document.getElementsByTagName( "cat" )
	document.getElementsByClassName( "img" )

✅


	document.querySelector( "#grumpy" )
	document.querySelectorAll( ".cat" )
	document.querySelectorAll( "img" )

👴


	"string " + variable + " string"

✅


	`string ${variable} string`

👴


	for ( let counter = 0; counter < pets.length ; counter++ ) {
		alert( pets[counter] ) ;
	}

✅


	pets.forEach(
		pet => alert( pet ) ;
	)

👴


	function closePanel() = {...} ;
	closePanel = function() = {...} ;

✅


	const closePanel = () => {...} ;

Arrow functions look cool 🧑‍🎨

✅ They simplify anonymous functions.

✅ They simplify iterators (like `forEach`).

⚠️ You cannot use an arrow function for a constructor.

⚠️ You must declare an arrow function before using it.

⚠️ You must use `event.target` instead of `this` in an arrow function.

⚠️ Braces are not brackets

⚠️ CSS will fail if you omit semicolons

⚠️ Beware of Googling code

🍀 Stack Overflow when you're lucky

☹️ Stack Overflow when you're not so lucky