The Front End Of The Web – HTML – What's on the page

View Github Repository Open presentation in a new window

mermop

See all presentation from mermop

The Front End Of The Web – HTML – What's on the page

0 0

rubys-tea-party-frontend-talk

On Github mermop / rubys-tea-party-frontend-talk

The Front End Of The Web

Merrin Macleod and Matt Hartley

Ruby's Tea Party, January 18 2014

Please ask questions

HTML

What's on the page

Syntactic structure 

<!doctype html>
<html>
</html>

<!doctype html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

<div />
<article />
<section />
<header />
<aside />
<a href="http://thenicestplaceontheinter.net/" />
<p class="beautiful classy" id="main-text" />
<style />

CSS

How it looks

Styling

example.html

<link rel="stylesheet" href="styles.css">
...
<p class="beautiful classy" id="example">
  Hello world!
</p>

styles.css

p {
  font-size: 12px;
}
.beautiful {
  font-family: 'Comic Sans MS', sans-serif;
}
.classy {
  color: #BADA55;
}
#example {
  background-color: #EEE;
}

Hello world

Specificity!

Element < Class < ID < inline < !important

Javascript

Interactivity, how things behave

Manipulating CSS and HTML

Alerts

☃ Don't click this ☃

var alertLink = document.getElementById('alert-link');
alertLink.addEventListener('click', function (event) {
  alert('Trust you to listen...');
}, false);

Alerts (with jQuery)

☃ Don't click this ☃

var alertLink = $('#jq-alert-link');
            alertLink.on('click', function (event) {
              $(this).hide();
              alert('Trust you to listen...');
            });

Other Ideas

Bootstrap has a whole bunch of javascript widgets to look at, and their code is quite easy to read.

http://getbootstrap.com

Libraries

Bringing in CSS and Javascript other people wrote

Bootstrap, Foundation, JQuery, PureCSS, HTML5 Boilerplate, etc etc etc

Frameworks

You call library. Framework calls you.