< html > + css  how can I craft webpages
Who am I             Dimitris Tsironis                 Founder at Geembo           Javascript Developer at Bugsense       ...
First, a storyfrom good old days
What is HTML                      Hyper                      Text                      Markup                      Languag...
Basic elements   HTML consists of elements      Heading, paragraphs, articles, anchor links      Images, video, audio     ...
How it works   HTML needs this to work      a text-based file      doctype, html, head & body tags      some actual conten...
HTML elements  Heading 1 - <h1>This is a title</h1>  Paragraph - <p>This is a paragraph</p>  Anchor link - <a href=”#”>Thi...
Classes & IDs  HTML has classes and IDs to make elements  easier to distinguish      Classes are more generic, like a box,...
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 t...
Box model  Here’s the previous example. See the boxes?
Box model  Here’s the previous example. See the boxes?
disappointed.this page looks bad.
What is CSS                   Cascading                   Style                   Seets          It’s what makes your HTML...
Basic CSS rules   CSS consists of rules, like this one    h1       {color: black; text-align:center;}  selector     declar...
Basic CSS rules   Some details about CSS rules      selector defines what HTML element to target      declaration have a p...
CSS selectors  CSS selectors are used to target specific HTML  elements with rules   h1 {...}       <h1>This is a title</h1...
IT’S ATRAP!
Never, ever, ever, ever use IDs in your CSS!Seriously, don’t do this. It’s messy.You’ll end with super strong selectors th...
Tools you’ll need   A crappy computer      Nothing fancy, you probably already have one   A competent text-editor      Sub...
Tools you’ll need   Google search      Remember, Google has the answer to your problem   Wamp Server      Very basic web s...
Resources to read   Mozilla Developer Network      The best web library out there      http://developer.mozilla.org/en-US/...
Resources to read   Github      The biggest source code hosting site      http://github.com/edu   Codecademy      You can ...
Thank you!       @tsironakos       @geembohqtsironis.dimitris@gmail.com
Upcoming SlideShare
Loading in...5
×

HTML+CSS: how to get started

382

Published on

A presentation about pretty basic stuff of HTML & CSS.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
382
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML+CSS: how to get started

  1. 1. < html > + css how can I craft webpages
  2. 2. Who am I Dimitris Tsironis Founder at Geembo Javascript Developer at Bugsense Ingredients: 50% code / 50% design
  3. 3. First, a storyfrom good old days
  4. 4. What is HTML Hyper Text Markup Language It’s just text with superpowers! It’s what your browser is made for.
  5. 5. Basic elements HTML consists of elements Heading, paragraphs, articles, anchor links Images, video, audio Metadata, scripts and stylesheets
  6. 6. 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...
  7. 7. 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” />
  8. 8. Classes & IDs HTML has classes and IDs to make elements easier to distinguish Classes are more generic, like a box, button etc. IDs are very specific and must be used with caution
  9. 9. Basic example HTML is as simple as ABC
  10. 10. Basic example …which actually is
  11. 11. 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
  12. 12. Box model Here’s the previous example. See the boxes?
  13. 13. Box model Here’s the previous example. See the boxes?
  14. 14. disappointed.this page looks bad.
  15. 15. What is CSS Cascading Style Seets It’s what makes your HTML beautiful.
  16. 16. Basic CSS rules CSS consists of rules, like this one h1 {color: black; text-align:center;} selector declaration #1 declaration #2
  17. 17. Basic CSS rules Some details about CSS rules selector defines what HTML element to target declaration have a property and a value declarations in a block, defined by brackets{...}
  18. 18. CSS selectors CSS selectors are used to target specific HTML elements with rules h1 {...} <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>
  19. 19. IT’S ATRAP!
  20. 20. Never, ever, ever, ever use IDs in your CSS!Seriously, don’t do this. It’s messy.You’ll end with super strong selectors thatyou can’t override.
  21. 21. Tools you’ll need A crappy computer Nothing fancy, you probably already have one A competent text-editor Sublime Text 2 - highly recommended text-editor Developer’s tools Firebug is recommended, for Firefox & Chrome
  22. 22. Tools you’ll need Google search Remember, Google has the answer to your problem Wamp Server Very basic web server for your PC
  23. 23. 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/
  24. 24. 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
  25. 25. Thank you! @tsironakos @geembohqtsironis.dimitris@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×