Code Essentials for Product Design is an HTML and CSS masterclass aimed at product and UX designers who want to work better with developers and unlock the power of prototyping in code. The workshop is hosted by Cennydd Bowles (digital product designer, former design manager at Twitter) and Anna Debenham (front-end developer and author of Front-End Style Guides: A Pocket Guide).

50% of the day will be spent on your own guided code exercises, with expert support throughout.

You'll learn and practice

  1. Web code basics · The skeleton: HTML. Layout and styling: CSS. Behaviour: JavaScript. Prototype code vs production code. Progressive enhancement.
  2. Page foundations · Basic markup. Images: <img> and responsive images. Semantic HTML section tags. Inputs, forms, buttons, controls · Exercise: Mockup to markup part 1: deconstruction, plus collaborative code review.
  3. Simple styling · Referencing CSS. Typography controls. Box model basics. Backgrounds, colours, width, padding, margins, border radius. Layout with floats · Exercise: Mockup to markup part 2: simple styling, plus collaborative code review
  4. Deeper into CSS · Good HTML & CSS practice. Choosing units: px, ems, rems, %. Web fonts and good practice. Layout with flexbox · Exercise: Iteration and refactoring, plus code review.
  5. Responsive techniques · Responsive syntax. Breakpoints. Mobile first. Selective content. Responsiveness beyond layout · Exercise: Responsive layout and testing, plus code review.
  6. States and motion · Adding states to a page. CSS animation. Keyframes. Good practice: what properties to animate. · Exercise: Multiple states and transitions, plus code review.
  7. Behaviour · Deeper into the DOM. JavaScript principles. Libraries, jQuery, and Velocity.js. Exercise: Validation and advanced animation.

Sign up for updates

Dates and venues for this new workshop will be announced shortly. Sign up below and be the first to hear when it’s coming to a city near you.

Name *

Interested in me running this workshop for your team? Contact me for private group rates.