Slide 1

Slide 1 text

< html > + css how can I craft webpages

Slide 2

Slide 2 text

Who am I Dimitris Tsironis Founder at Geembo Ingredients: 50% code / 50% design Javascript Developer at Bugsense

Slide 3

Slide 3 text

First, a story from ood old days

Slide 4

Slide 4 text

What is HTML Hyper Text Markup Lan ua e It’s just text with superpowers! It’s what your browser is made for.

Slide 5

Slide 5 text

Basic elements HTML consists of elements Heading, paragraphs, articles, anchor links Images, video, audio Metadata, scripts and stylesheets

Slide 6

Slide 6 text

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...

Slide 7

Slide 7 text

HTML elements Heading 1 -

This is a title

Paragraph -

This is a paragraph

Anchor link - This is a link div -

This is a general element

img -

input -

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Basic example HTML is as simple as ABC

Slide 10

Slide 10 text

Basic example …which actually is

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Box model Here’s the previous example. See the boxes?

Slide 13

Slide 13 text

Box model Here’s the previous example. See the boxes?

Slide 14

Slide 14 text

disappointed. this pa e looks bad.

Slide 15

Slide 15 text

What is CSS Cascadin Style Seets It’s what makes your HTML beautiful.

Slide 16

Slide 16 text

Basic CSS rules CSS consists of rules, like this one h1 {color: black; text-align:center;} selector declaration #1 declaration #2

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CSS selectors CSS selectors are used to tar et speciﬁc HTML elements with rules h1 {...}

This is a title

p {...}

This is a paragraph

.active{...}

.active{...} #signup{...}

Slide 19

Slide 19 text

IT’S A TRAP!

Slide 20

Slide 20 text

Never, ever, ever, ever use IDs in your CSS! Seriously, don’t do this. It’s messy. You’ll end with super stron selectors that you can’t override.

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Tools you’ll need Wamp Server Very basic web server for your PC Goo le search Remember, Google has the answer to your problem

Slide 23

Slide 23 text

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/

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Thank you! @tsironakos @geembohq [email protected]