<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML & CSS basics</title> <!-- from https://fonts.google.com , Averia & Lato --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&family=Lato&display=swap" > <link rel="stylesheet" href="html-css-basics-v1.css"> </head> <body> <h1>HTML & CSS basics</h1> <a href="screenshot.png"><img id="screenshot" src="screenshot.png" alt="firefox developer screenshot"></a> <p>This is an example of a static web page with a <a href="html-css-basics-v1.css">stylesheet</a> and an <a href="screenshot.png">image</a> (a screenshot of one early version of this website, with <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> enabled.</p> <p>The topic at hand is "HTML & CSS basics" ... so that's what this page is about, eh? 🤨</p> <p>Topics to discuss in class include:</p> <ul> <li>Editing .html and .css files.</li> <li>Uploading your files to your own subfolder of the cs.bennington "share" folder.</li> <li>RBG colors: how to specify a color, tools to help pick them</li> <li>size units : pixels, em (relative to font) percentage (of enclosing box), ...</li> <li>the CSS "display" property : flow (block, inline), flex, grid </li> <li>the CSS box model : borders, margins, padding around tag elements</li> <li>using the firefox developer tools</li> </ul> <p>Related web developer topics ... depending on time & interest:</p> <ul> <li>accessibility : making your site available for everyone (img tags, legibility, ...)</li> <li><a href="https://validator.w3.org/">W3C validator</a></li> <li>being a good web citizen: explicit contact, date, and licenses (and respecting copyright) <li>multiple pages: navigation, theme, oswd.org and similar templates</li> <li>mobile "responsive" design : getbootstrap.com and similar</li> <li>front-end sandboxes: <a href="https://jsfiddle.net/">jsfiddle</a>, <a href="https://codepen.io/">codepen.io</a> <li>deploying a real website: registering a URL, name server, hosting, staging vs production</li> <li>design & color palettes</li> <li>Krug's "Don't Make Me Think"</li> <li>avoid mistakes from "web pages that suck"</li> <li>ads, SEO, monetizing sites : the economics of the 'net</li> </ul> <p>Coming soon: javascript ...</p> <h2>resources</h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">MDN: HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">MDN: CSS</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model">MDN: the box model</a></li> <li>tags (google "MDN tag name"): p (paragraph) | h (heading) | a (anchor i.e. link) | ul | li | img (image) | ... </li> <li>properties (google "MDN css name): font-size | float | padding | margin | border | color | ... <li><a href="https://en.wikipedia.org/wiki/RGB_color_model">wikipedia: RGB color model</a></li> <li>interactive <a href=" https://htmlcolorcodes.com/color-picker/">color picker</a></li> </ul> <footer> <p>Jim Mahoney | <a href="https://cs.bennington.college">cs.bennington.college</a> | <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a> from <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">MDN</a> | September 2021</p> </footer> </body> </html>