wk  1        2          3          4          5           6          7       ☀       8          9          10         11         12         13         14   

 22 24 26 | 29 31 02 | 05 07 09 | 12 14 16 | 19 21 23 | 26 28 02 | 05 07 09 | * | 19 21 23 | 26 28 30 | 02 04 06 | 09 11 13 | 16 18 20 | 23 25 27 | 30 02 04 

 01 02 03   04 05 06   07 08 09   10 11 12   13 14 15   16 17 18   19 20 21       22 23 24   25 26 27   28 29 30   31 32 33   34 35 36   37 38 39   40 41 42 

- MDN: Getting Started with the Web - Download and Install these tools!! - Web Browser Requests pages from a server Server responds with markup and supporting files Browser builds DOM and RENDERS the pages Poorly structured pages revert to quirks mode - may be rendered in unpredictable ways Mozilla Firefox Quantum Google Chrome - VS Code VS code - NOT Visual Studio IDE VSC documentation VSC extensions 'open in browser' by techER 'ftp-simple' by humy2833 'HTMLHint' by Mike Kaufman 'HTML CSS Support' by ecmel 'CSS Peek' by Pranay Prakash 'jshint' by Dirk Baeumer 'VSCode Great Icons' by Emmanuel Beziat 'Guides' by spywhere 'Beautify' by HookyQR 'Default Dark+ Contrast' by K3A - Emmet (built in to VS Code) Time-saving shortcuts - R O I Emmet in VS Code Emmet Documentation Emmet tricks - Thimble Mozilla Thimble is an online code editor that makes it easy to experiment with HTML, CSS & JavaScript. Mozilla Thimble - create a free account Wyatt's minimal Thimble starting point - Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. NPM is package mgr - reusable code You must install node.js on your machine! Download Node.js USE 8.94 LTS => long term support node documentation NPM: node package manager - reusable code to include node.js in vs code - FTP: File Transfer Protocol: As its name suggests, the File Transfer Protocol (FTP) is a standardized network protocol used to transfer files between a client and a server over the internet or any other TCP/IP network. FileZilla - Image Editor paint.net Paint.NET is image and photo editing software for PCs. - Version Control System (VCS) Video: What is version Control? git git documentation

About the Web and Internet - mdn: How the Internet works "Network of networks" TCP/IP IP address space packets 1960s: US governement ARPANET, fault-tolerant, cold war & nukes ISP Late 1980s - commercial access to Internet "Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure." Visualization of the Internet - mdn: How the Web works "The Web is a collection of interconnected documents (web pages) and other web resources, linked by hyperlinks and URLs." -- wikipedia Client vs. Server Early 1990s http DNS html only at first - then css and javascript later

Client-side Web Programming Basics - Web developers have THREE masters 1. browser - adhere to standards so page is rendered correctly and predictably - no quirks 2. user - come for the style and pizzazz, stay for the content (content is king) 3. search engines: SEO & search engine bots (web crawlers or spiders or robots) - Modern web development assigns: 1. structure to HTML 2. style and layout to CSS 3. behavior to JavaScript. - Web development prototype tool - see first assignment!! Wyatt's Thimble START - mdn: Web Technology - HTML, CSS, JavaScript, DOM Hello Page / the code CLIENT! Web programming integrates three different technologies: HTML, CSS & JavaScript When people say web programming is easy, they often think it is simply HTML. Not even close. - mdn: HTML basics NOT a programming language markup language element = opening tag + content + closing tag tags scaffolding container for content attributes provide extra / essential information to the tag - mdn: CSS basics NOT a programming language style sheet language - apply styles to selected elements from HTML rules selector* declaration block declaration property: value styles applied to html layout: hardest to control - mobile first box model: MBPC grid colors text, font, size - mdn: JavaScript basics IS a programming language variables comments operators loops branch on conditions functions events - DOM API document object model (wikimedia) DOM is how JS interacts with html and css DOM built when page is loaded JavaScript uses the ID of an element to get access to that element (usually) var ref = document.getElementById( IdOfElement ); ref.innerHTML = "<h1>The new element to insert into document!</h1>" #META: how does the 'h1' tag above NOT behave like an 'h1' tag?

HTML is not a programming language; it is a markup language that defines the structure of your content through the use of markup tags that look like this: <body> - w3schools.com w3schools.com - less detailed, but solid w3schools HTML Tutorial W3 Schools: Try It editor html tags by category - MDN: mozilla development network mdn: HTML Intro - more depth Markup Tags / Elements: - usage each tag pair (open/close), together with its contents, defines an element. use lower case for tags properly nest elements -attributes provde more information about element attached to the open tag of the element quote attribute values class, id, src, charset, href, type, title, style, alt, rel <a href="http://jbwyatt.com">wyatt</a> <img src="IMG/doggy.jpg"  alt="my doggy"> - categories inline: no new line, takes up only width it needs <span class="xyz">content</span> OR block: always starts on new line - takes up full width self-closing (empty - no content): <img> <br> <hr> <link> <input> OR opening & closing tag: <html> content </html> <div> content </div> <p> content </p> - page loaded and DOM built - WAIT for this to complete before applying JS! document object model (wikimedia) - mdn: head tag / meta <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html> - mdn: text structure tags div, p, h1-h6, header, footer list tags ol, ul, li emphasis tags em, strong, b, i, u group inline elements, no visual change , apply style or "hooks" span forms form inut - mdn: hyperlinks hyperlinks are the most important tag in html specify a URL on the web http://jbwyatt.com specify http protocol specify a local URL (file path) relative path files in same directory going down going up ../ email mailto <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a> - mdn: img tag show an image on your page <img src="doggy.jpg" alt="picture of my dog"> jpg, png, gif, bmp can use image as a link <a href="http://jbwyatt.com"><img src="doggy.jpg" alt="picture of my dog"></a> < - mdn: html tag reference html, head, meta, title, script, link body, h1-h6, div, p, header, footer br, hr comment ol, ul, li a, img - W3 Schools HTML Tag Reference - My HTML Examples

"Imagine an invisible box around every HTML element" CSS is not a programming language; it is a language that allows layout & styling of web pages. While HTML is used to define the structure and provide scaffolding for your content, CSS is used to style the page and control how it is laid out. Layout becomes complicated with different sized viewing windows (phones, tablets, desktops). -stylesheets external: <link href="xyz.css" rel="stylesheet"> internal: <style></style> inline: <tag style="property1:value; property2:value"> ... - DOM - styles are attached to DOM nodes document object model (wikimedia) - rules specify styles rule => selector + declaration block declaration block = 1+ declarations declaration = property:value pair - rules allow you to style a page's layout color text w3schools CSS Tutorial CSS Demo Page mdn: How CSS works - layout "Imagine an invisible box around every HTML element" box model M -> B -> P -> C use this declaration to make percentages include border & padding box-sizing : border-box; (content-box does not count) - responsive use percentages (not pixels) for width of block elements width : 80%; (not 400px) media queries can determine size of viewing window @media screen and (max-width: 1300px) { body { background: blue; } } -flex box flex box .flex-container { display: flex; justify-content: center; } <div class="flex-container"> <div>111</div> <div>222</div> <div>333</div> </div> - css-grid layout example using a grid:

"1" + "1" = "11" - 1 = 10 node.js node as a REPL - NOT in vs code terminal using node in vs code - integrated terminal debugging javascript IN vs code command window hacks Our JavaScript Rules

---

w3schools JavaScript Reference JavaScript Tutorial JavaScript Examples data types (6): "fun sob" type conversion variables if else and conditions for loops functions arrays objects

---

mdn: JavaScript Guide JavaScript Reference types and grammar control flow loops functions arrays

---

EJS: 2nd ed. Values and types(6) in JS: numbers, strings, Booleans, objects, functions, and undefined values. Variables, expressions and statements Functions Objects and arrays

my javascript examples JSBin variables, types and arrays: 2 functions manipulate types and arrays and report via DOM manipulations jsbin.com: html, css and javascript web sandbox template: basic html, css and js with event and output hooks into html via ids and getElementById() basic DOM output: event function showing basic innerHTML and style property DOM manipulations of html elements basic DOM output: event function loops and branches and then outputs via DOM manipulations variables, types and arrays: 2 functions manipulate types and arrays and report via DOM manipulations

forms: valid, invalid, validation w3schools: html forms css forms javascript forms

canvas: simple canvas with random colors using rgba and random rectangles canvas - new to html5 width height attributes must be specified, don't use css for sizing may style otherwise needs id as a hook for JS the rendering "context" provides a 2d object which as an api used to draw

---

simple canvas Canvas rectangles and ellipses // x,y,w,h ctx.fillRect(Math.floor(Math.random()*400), Math.floor(Math.random()*250), Math.floor(Math.random()*140), Math.floor(Math.random()*100)); .... // x, y, radius, startAngle, endAngle, anticlockwise ctx.arc( Math.floor(Math.random()*450), Math.floor(Math.random()*250), Math.floor(Math.random()*40), 0.0, (Math.PI * 2), true); ctx.fill();// actually draws here

See the Pen Template 3 - Canvas by Joseph (@wynottwynott) on CodePen.

---

trig boxes circles colors listeners callbacks!! Canvas: Boxes, Circles, Trig, Listeners, Call-backs

---

---

Diving Into HTML5: canvas text Mozilla canvas tutor JS: Spirals and Trig JS: Snow

---

@media screen and (max-width: 1100px) {
         body { background: yellow;}
      }