html+css: how to get started
DESCRIPTION
A presentation about pretty basic stuff of HTML & CSS.TRANSCRIPT
< 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