HTML+CSS: how to get started

< html > + csshow can I craft webpages

Who am I

Dimitris TsironisFounder at Geembo

Ingredients: 50% code / 50% design

Javascript Developer at Bugsense

First, a storyfrom !ood old days

What is HTML

HyperTextMarkupLan!ua!e

It’s just text with superpowers!

It’s what your browser is made for.

Basic elements

HTML consists of elements

Heading, paragraphs, articles, anchor links

Images, video, audio

Metadata, scripts and stylesheets

How it works

HTML needs this to work

a text-based file

doctype, html, head & body tags

some actual content

and you’re good to go...

HTML elements

Heading 1 - <h1>This is a title</h1>

Paragraph - <p>This is a paragraph</p>

Anchor link - <a href=”#”>This is a link</a>

div - <div>This is a general element</div>

img - <img src=”/path/to/logo.png” />

input - <input type=”text” name=”name” />

Classes & IDs

HTML has classes and IDs to make elements easier to distin!uish

Classes are more generic, like a box, button etc.

IDs are very specific and must be used with caution

Basic example

HTML is as simple as ABC

Basic example

…which actually is

Box model

HTML elements always behave like boxes

the most important thing about HTML

it will help you get to the next level

required to make a solid structure

required to debug HTML

Box model

Here’s the previous example. See the boxes?

Box model

Here’s the previous example. See the boxes?

disappointed.this pa!e looks bad.

What is CSS

Cascadin!StyleSeets

It’s what makes your HTML beautiful.

Basic CSS rules

CSS consists of rules, like this one

h1 {color: black; text-align:center;}selector declaration #1 declaration #2

Basic CSS rules

Some details about CSS rules

selector defines what HTML element to target

declarations in a block, defined by brackets{...}

declaration have a property and a value

CSS selectors

CSS selectors are used to tar!et specific HTML elements with rulesh1 {...} <h1>This is a title</h1>

p {...} <p>This is a paragraph</p>

.active{...} <div class=”active”></div>

.active{...} <img class=”active”></img>

#signup{...} <button id=”signup”></button>

IT’S ATRAP!

Never, ever, ever, everuse IDs in your CSS!

Seriously, don’t do this. It’s messy.

You’ll end with super stron! selectors that you can’t override.

Tools you’ll need

A competent text-editor

Sublime Text 2 - highly recommended text-editor

Developer’s tools

Firebug is recommended, for Firefox & Chrome

A crappy computer

Nothing fancy, you probably already have one

Tools you’ll need

Wamp Server

Very basic web server for your PC

Goo!le search

Remember, Google has the answer to your problem

Resources to read

Mozilla Developer Network

The best web library out there

http://developer.mozilla.org/en-US/

CSS Tricks

Your CSS buddy - you can find anything here

http://www.css-tricks.com/

Resources to read

Github

The biggest source code hosting site

http://github.com/edu

Codecademy

You can learn code by doing

http://www.codecademy.com

Thank you!@tsironakos

@geembohq

tsironis.dimitris@gmail.com