HTML 5 and CSS 3.0 day course, London

If you want to learn SEO, then you need to understand the fundamentals of creating a website, because of this, I focused heavily on keeping up to date in terms of website front-end coding such as with HTML 5, Javascript, jQuery, AMP and so on. This article is a summary of a 3-day workshop I had in London focused on HTML 5.

References / tools for HTML5 and CSS 3.0

  • whatwg.org –
  • caniuse.com – to check what html 5 elements work
  • glyphish.com / flaticon.com
  • viewport resizer – view pages on many different resolutions
  • raphaeljs.com / snapswg.io
  • gs.statcounter.com – Check comparability
  • quirksmode.org
  • html-ipsum.com – Good for example of html
  • unsplash.com
  • ghostlab.xom – test responsive sites on many devices
  • sass-lang.com – css with variables
  • vanamco.com – test responsive design on many platforms
  • polymer-project.org / webcomponents.org – The webcomponent.js polyfills enable Web Components in (evergreen) browsers that lack native support.
  • html5boilerplate.com – Good examples of HTML5
  • css-tricks.com – Very good examples of things you can do with css 3.0
  • CSS 3.0 slides by Google – //code.google.com/p/html5slides/
  • impress.js – great way to visualize content
  • Kinlan Oresentation about HTML5
  • //simpl.info/ – list of great HTML + Javascript add-ons
  • tympanus.net
  • //tympanus.net/codrops/

HTML, Javascript, CSS Good editor:

Brackets

Full short-codes: //github.com/adobe/brackets/wiki/Brackets-Shortcuts

E Ctrl-E navigate .toggleQuickEdit Quick Edit Brackets

Add-ons

  • Code folding
  • Brackets icons
  • New project creator
  • Emmet
  • HTML skeleton
  • tabs – custom
  • W3cValidatior
  • Todo – Commenting
  • lorem-ipsum
    • use things like lorem_html_p10 – this would then create 10 paragraphs of random text

CSS 3.0

(reference //www.w3schools.com/cssref/css_selectors.asp)

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.