Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML+CSS: how to get started

HTML+CSS: how to get started

A presentation about pretty basic stuff of HTML & CSS.

Ca017edd68f0d216c4761445bf9f28e7?s=128

Dimitris Tsironis

March 18, 2013
Tweet

Transcript

  1. < html > + css how can I craft webpages

  2. Who am I Dimitris Tsironis Founder at Geembo Ingredients: 50%

    code / 50% design Javascript Developer at Bugsense
  3. First, a story from ood old days

  4. What is HTML Hyper Text Markup Lan ua e It’s

    just text with superpowers! It’s what your browser is made for.
  5. Basic elements HTML consists of elements Heading, paragraphs, articles, anchor

    links Images, video, audio Metadata, scripts and stylesheets
  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. 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. 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
  9. Basic example HTML is as simple as ABC

  10. Basic example …which actually is

  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. Box model Here’s the previous example. See the boxes?

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

  14. disappointed. this pa e looks bad.

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

    HTML beautiful.
  16. Basic CSS rules CSS consists of rules, like this one

    h1 {color: black; text-align:center;} selector declaration #1 declaration #2
  17. 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
  18. CSS selectors CSS selectors are used to tar et 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. IT’S A TRAP!

  20. 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.
  21. 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
  22. Tools you’ll need Wamp Server Very basic web server for

    your PC Goo le search Remember, Google has the answer to your problem
  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. 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. Thank you! @tsironakos @geembohq tsironis.dimitris@gmail.com