Introductory HTML & CSS

HTML & CSS TartanHacks 2012

@ryhanhassan

HTML CSS JS

HTML CSS JS Structure Presentation Behavior

JS Javascript/jQuery Tomorrow at 6pm

HTML Syntax

<foo> STUFF </foo> Tag

<foo> STUFF </foo> Tag Closing Tag

<p> <a> <strong> <em> paragraph link bold italicized

<p> <em> </em></p> This is italicized

<p> <em> </em></p> This is italicized Outer Tag Inner Tag

Let’s Build a Page

<html> Start with the tag. Let’s create index.html

<html> </html> <!DOCTYPE html> Use HTML5 Doctype

<html> </html> <!DOCTYPE html> <body> </body> <p> Hello world! </p>
Add content

<title> My Site Name </title> <head> </head> <style> body{ background-color: red; } </style>

<title> My Site Name </title> <head> </head> <style> body{ background-color: red; } </style> Btw, this is CSS

CSS Syntax

p { color: green; font-size: 16px; }

p { color: green; font-size: 16px; } selector

p { color: green; font-size: 16px; } selector property

p { color: green; font-size: 16px; } selector property value

p { color: green font-size: 1 Fun with Selectors

p.myClass{ font-color: blue; } <p class=“myClass”>hai</p> Select a group of
paragraphs by class

p#myID{ font-color: blue; } <p id=“myID”> bleh </p> Select a
particular paragraph by ID

p strong { font-color: blue; } Select only bold text
in paragraphs

p + a { font-color: blue; } Select only links
after paragraphs

p:nth-child(odd) { font-color: blue; } Select every other paragraph

The Box Model

The Box Model Everything in HTML/CSS is actually a box.

Everything in HTML/CSS is actually a box. <p> Height Width

<p> margins borders

<p> margins herp derp blerg derp moar fishsticks derp Glenn
Beck voodoo borders padding

<p> p{ border: 1px solid black; padding:10px; margin:10px; }

Boxes can act like blocks <p> <p> <p>

Boxes can also be inline <p> <p> <p>

<p> <p> <p> Default values display: block; display: inline-block;

Use appropriate tags! <article> <p> <p> <aside> <nav> <header> <footer>

CSS JS Presentation Behavior CSS Animations

CSS Awesome effects, without JavaScript!

a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color:
red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black

<a> <a> <a> a:hover{ animation: pulse 5s; } @keyframes pulse
{ 0% {background-color: red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black

a:hover{ animation: pulse 5s; } @keyframes pulse { 0% {background-color:
red;} 50% {background-color: black;} 100% {background-color: red;} } Pulse between Red and Black

ANIMATE ALL THE PROPERTIES

Things to Google

Things to Google * CSS Transforms * CSS Transitions *
HTML5 Canvas

Check out some awesome 3D effects http://www.ryancollins.me/?p=404

Media Queries Let your page adapt

Lots of devices

Responsive Design Automagically reflow content to fit any screen.

<title> My Site Name </title> <head> </head> <style> body{ width: 800px; } </style>

<title> My Site Name </title> <head> </head> </style> <style> body{ width: 800px; }

</style> @media (max-width:500px;){ Targets mobiles <style> body{ width: 800px; }
body{ width:320px; } }

a{ /* touch friendly link */ padding: 10px; background-color:#EEE; }
@media (max-width:500px;){ body{ width:320px; } }

Mobile Web Snazzy mobile views

Viewport Mobile browsers render pages in virtual “windows” wider than
their actual screen.

Viewport * Set page width * Disable zooming * Set
zoom level

Viewport * Set page width * Disable zooming * Set
zoom level <meta name=“viewport” content = “ width = device-width, user-scalable = no, initial-sale = 1.0” />

Hacking Tips How to build fast.

You only have 24 HOURS

HTML CSS JS You only have 24 HOURS

Frameworks The boring stuff is already coded.

* Spend less time coding * Spend more time prototyping
* Avoid browser and device issues

Mobile jQuery Mobile Sencha iWebKit

Mobile jQuery Mobile Sencha iWebKit Responsive Bootstrap Skeleton Foundation

Build a mobile app All you need is HTML, CSS,
& JS

Go Experiment! Check out Bootstrap (twitter.github.com/bootstrap) and Skeleton (getSkeleton.com)

I don’t bite. @ryhanhassan

Introductory HTML & CSS

Introductory HTML & CSS

More Decks by Ryhan Hassan

Other Decks in Programming

Featured

Transcript