to lookup the IP address of the website using its domain name • The browser downloads and interprets the HTML file returned by the server • The browser downloads external resources such as CSS and JavaScript files or images • The browser interprets the CSS files and renders the page • The browser interprets the JavaScript files and provides interaction with the web page
web documents (web pages). • HTML stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content
• Each tag defines an element, it’s default dehaviour and appearance • A tag can be paired to wrap some content, such as <h1>Header</h1>, or standalone - <br /> • Each tag has a certain set of attributes - <p id="my-text"></p>
with a <!Doctype> directive • The body of an HTML element usually starts with the <html> tag with <head> and <body> inside: <html> <head> // meta information goes here </head> <body> // actual context goes here </body> </html>
write <br> or <br />, <li> without a closing tag etc. • Browsers will try to do their best to display the broken syntax correctly. • Can doesn't mean should. Don't ever do this
There are specialized tags for particular UI elements: <nav> for navigation bars, <aside> for sidebars and <h1> for headers. • They should be used whenever possible instead of more generic elements like <div> or <span>.
class="content"> Lorem ipsum ... </div> <div class="footer"> Posted 2 days ago </div> </div> <article class="post"> <h3 class="header">Important post</h3> <section class="content"> Lorem ipsum ... </section> <footer class="footer"> Posted 2 days ago </footer> </article> Semantic HTML allows robots to better distingquish your content. Consider two examples:
– semantic HTML can help search engines better understand your content and achieve better ranking • Accessibility – semantic HTML used together with other ARIA features can help users with limited abilities to access your content
stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
define styles: 1. Inline, using the style attribute <div style="color: red"></div> 2. Using the <style> tag 3. Using a separate CSS file <link rel="stylesheet" type="text/css" href="styles.css">
sources thus forming a cascade. The sources are: 1. Browser default styles 2. User styles (browser settings) 3. Author's styles defined in the web page itself Additionally, each elements inherits styles from the parent elements, i.e. a <a> link can inherit the font size from the paragraph text.
sure to visit <a href=https://developer.mozilla.org>Mozilla Developer Network</a> for more information </p> <style> p { font-size: 2em; color: black; } a { color: red; } </style>
web design aimed at crafting sites to provide an optimal viewing and interaction experience across a wide range of devices (from desktop computer monitors to mobile phones)
factors you are willing to support • Keep the list short • Choose your primary platform • Choose a technique to implement responsiveness: media queries, CSS/JS libraries etc.
language with first-class functions. Most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js. JS is a flexible and multi-paradigm language.
specification standardized by Ecma International in ECMA-262 and ISO/IEC 16262. Each version of ECMAScript defines a certain list of features to be implemented by browsers or other platforms.
let or const keywords. const PI = 3.14; let names = ["Peter", "Winston"] • Variables defined using let of const are block-scoped • Variables defined using the var keyword are function-scoped
important pattern in JavaScript function getName() { return 'Carl'; } function greet(getNameCallback) { console.log('Hello ' + getNameCallback()); } greet(getName);
page in three ways: • In an event attribute: <button onclick="alert('Hey!')">Say hello</button> • By writing it inside of the <script> tag <script> alert('Hey!'); </script> • By loading an external file with the same <script> tag <script src="scripts.js"></script>
engines for parsing and interpreting HTML, CSS and JavaScript. • Each browser supports different features, meaning that your application can behave differently in different browsers.
scrolling etc. • DOM (HTML and CSS) manipulation • Location information • Access to camera and microphone • Mobile features, e.g. vibration • Drawing using canvas or SVG • Profiling: performance measurements and debugging
used for storing small amounts of data (e.g. a session ID) • Local storage - used for storing larger amounts of data, e.g. for offline applications. Available throw different tabs and persists when closing the browser. • Session storage - similar to local storage but limited to particular tab and perishes after a tab has been closed.
jelisejev
productmarketing
bkeepers
rasmusluckow
csswizardry
chriscoyier
tammyeverts
eileencodes
zakiyama
mza
destraynor
