Frontend 101

101 Web Standards URL, HTTP, HTML, CSS, JavaScript

URL uniform resource locator Purpose: Make data addressable

http://www.google.com /search?q=flowers#foot

http:// protocol scheme http, https, file, mailto, ...

http:// root double slash

bob:s3cr3t@www. example.com:8080

bob:s3cr3t@www. example.com:8080 domain required

bob:s3cr3t@www. example.com:8080 port optional default is 80 range: 1-65,535

bob:s3cr3t@www. example.com:8080 authentication credentials optional rarely used, legacy not how
modern web apps handle logins

reddit.com/r/IAmA/top path convention to omit “index.html” slashes “/” denote hierarchy
leading slash is the root directory reference current level with single dot “.” can be relative by using double dot “..”

Current page: reddit.com/r/IAmA/top Link: ./new Result: reddit.com/r/IAmA/new

Current page: reddit.com/r/IAmA/top Link: new Result: reddit.com/r/IAmA/new

Current page: reddit.com/r/IAmA/top Link: ../pics/new Result: reddit.com/r/pics/new

Current page: reddit.com/r/IAmA/top Link: / Result: reddit.com/

http://www.google.com /search?q=flowers#foot query string after the question mark “?” key=value
pairs used to pass information to the web server

http://www.google.com /search?q=flowers#foot fragment identifier after the hash sign points to
specific content in the page

HTTP hyper-text transfer protocol Purpose: Transfer content from a web
server to a web browser

Demo https://gist.github.com/cbas/5378704 Syntax request/response method, URI, version headers body

hyper-text markup language Purpose: Structures content of the document semantically
User agent: Browsers, crawlers, screen scrapers, file converters HTML

Demo https://gist.github.com/cbas/5379047 Syntax doctype elements attributes text comments

doctype describes HTML version the document uses HTML5 simplified it
to “<!DOCTYPE html>”

elements opening and closing tags: <p>some text</p> self closing tags:
<img /> equals <img>

must wrap values in double or single quotes if they
contains spaces, so just always do it <img src='house.jpg' alt="Seb's House"> attributes

attributes white space separated <img src="logo.png" alt="My Logo">

attributes names case insensitive, but lowercase looks better <img SRC="logo.png">
equals <img src="logo.png">

text escape special characters < “<” or > “>” &
or “&” white space collapses into single space “Hi there!” becomes “Hi there!”

comments begin with “” useful to
hide a section, or describe it to other developers (ie. future self) contains any HTML except comments

CSS cascading style sheets Purpose: Presentation of the data, typically
through visual layout and design Targets: Screen, print, or assistive technology (eg. screen readers)

Demo https://gist.github.com/cbas/5379150 Syntax selectors blocks properties values

selectors universal selector asterisk “*”

selectors type element name

selectors class space separated list re-usable on any elements

selectors id single value unique in the page

selectors attributes element has attribute “img[title]” attribute value equals “input[type=’password’]”

selectors pseudo classes :first-child, :last-child, :nth-child() :hover, :active, :focus :visited
:not()

selectors pseudo elements ::first-line, ::first-letter ::before, ::after

selectors combinators child of “>” preceded by “~“ immediately preceded
by “+”

blocks wrapped in curly braces “{ }”

blocks required: one block per selector h1 { } optional:
multiple selectors per block h1, h2, h3, h4, h5, h6 { }

properties examples: font-family, color, background, padding, ... vendor prefixes -webkit-*,
-moz-*, -ms-*, -o-*

values amount + unit

amount integer 5, number 4.5

units percentage 5%, length 5px, time 5ms, colour #5030bf, string
"Arial", url url(me.jpg), angle 90deg, ...

JavaScript Purpose: Interactive behaviour on a web page Examples: Popup
dialogs, visual effects, in- place data loading, ...

JavaScript is a programming language outside the scope of this
course. We can however use code snippets to achieve many useful behaviours.

Demo https://gist.github.com/cbas/5379212 Syntax Embedded: <script>... source code ...</script> Linked: <script
src=”... link to code file...”></script>

Frontend 101

Frontend 101

More Decks by Sebastiaan Deckers

Other Decks in Programming

Featured

Transcript