Skip to main content

For the SmashingConf newsletter:

Figma Workflow Masterclass

Christine Vallaure
5 sessions July 23–29
design
Christine Vallaure

Building Interactive, Accessible Components with Modern CSS & JS

Stephanie Eckles
4 sessions August 18–27
dev
Stephanie Eckles

UX Strategy Masterclass

Vitaly Friedman
5 sessions August 20–29
ux
Vitaly Friedman

Accessible Typography for Web & UI Design Masterclass

Oliver Schöndorfer
4 sessions Sep 11–19
design
Oliver Schöndorfer

Dataviz Accessibility Workshop

Sarah L. Fossheim
5 sessions Sep 22 – Oct 6
dev
Sarah L. Fossheim

Behavioral Design Workshop

Susan Weinschenk
5 sessions Sep 18 – Oct 3
ux
Susan Weinschenk

Designing Websites That Convert

Paul Boag
4 sessions Sep 30 — Oct 9
ux
Paul Boag

Advanced Design Systems

Brad Frost
5 sessions Oct 1–10
workflow
Brad Frost

Smart Interface Design Patterns — UX Training

Vitaly Friedman
8 sessions Oct 17 – Nov 17
ux
Vitaly Friedman

Designing Better Products Masterclass

Stéphanie Walter
5 sessions Oct 21 – Nov 4 2025
ux
Stéphanie Walter

UX Strategy in Action

Susan Weinschenk
5 sessions Nov 6–20
ux
Susan Weinschenk

How To Measure UX and Design Impact

Vitaly Friedman
4 sessions Dec 1–12
ux
Vitaly Friedman

The New CSS Toolkit

Kevin Powell
5 sessions Dec 3–17
dev
Kevin Powell

For the Smashingmagazine newsletter:

HTML for the newsletters:

How to use:

  • Open dev tools
  • Copy this entire table from this page
  • Paste the table in the newsletter
  • Add table rows to make rows of two workshos by adding </tr><tr> after every two blocks
  • Test newsletter and send out!
  • Make sure the CSS from below is in the style tag of the newsletter

This is the CSS for the event newsletter: 

.workshop-row {
  width: 50% !important;
}



@media screen and (max-width:640px) {
  .workshop-row {
    display: block !important;
    width: 100% !important;
  }
}



.ws {
  display: block;
  border: 1px solid #eeeeee !important;
  border-radius: 11px;
  padding: .5em .6em !important;
  line-height: 1.2;
  transition: all .2s ease-in-out !important;
  height: 96%;
  margin: 0 20px 30px 0;
}



.wsduration,
.wstime {
  margin-right: 2px;
}



.ws__time {
  display: inline-block;
  font-size: 16px;
}



.ws__duration {
  display: block;
}



.ws–dev {
  background: linear-gradient(41deg, rgba(255, 0, 132, .2), rgba(255, 255, 255, 0));
}



.ws–dev:hover {
  border-color: #aa1994 !important;
}



.ws–dev .ws__tag {
  background: #aa1994;
}



.ws–dev .wsduration,
.ws–dev .wstitle {
  color: #aa1994;
}



.ws–design {
  background: linear-gradient(41deg, rgba(255, 0, 43, .2), rgba(255, 255, 255, 0));
}



.ws–design .ws__tag {
  background: #df1134;
}



.ws–design .wsduration,
.ws–design .wstitle {
  color: #df1134;
}



.ws–design:hover {
  border-color: #df1134 !important;
}



.ws–css {
  background: linear-gradient(41deg, rgba(0, 126, 255, .2), rgba(255, 255, 255, 0));
}



.ws–css .ws__tag {
  background: #0168b8;
}



.ws–css:hover {
  border-color: #0168b8 !important;
}



.ws–css .wsduration,
.ws–css .wstitle {
  color: #0168b8;
}



.ws–ux {
  background: linear-gradient(41deg, rgba(0, 255, 197, .25), rgba(255, 255, 255, 0));
}



.ws–ux .ws__tag {
  background: #148771;
}



.ws–ux:hover {
  border-color: #148771 !important;
}



.ws–ux .wsduration,
.ws–ux .wstitle {
  color: #148771;
}



.ws–free {
  background: linear-gradient(41deg, rgba(255, 87, 0, .2), rgba(255, 255, 255, 0));
}



.ws–free .ws__tag {
  background: #bd4300;
}



.ws–free:hover {
  border-color: #f55700 !important;
}



.ws–free .wsduration,
.ws–free .wstitle {
  color: #f55700;
}



.ws–workflow .wsduration,
.ws–workflow .wstitle {
  color: #5a5ec8
}



.ws–workflow .ws__tag {
  background: #5a5ec8;
}



.ws–workflow {
  background: linear-gradient(41deg, rgba(0, 8, 255, .2), rgba(255, 255, 255, 0));
}



.ws–workflow:hover {
  border-color: #5a5ec8 !important;
}



.ws__title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 .5em 0 !important;
}



.ws__img img {
  border-radius: 50%;
  border: 5px solid #fff;
  width: 70px;
  min-width: 70px;
  display: inline-block;
  margin: 0;
}



.ws__cover table {
  width: 100%;
}



div.ws__speaker {
  font-size: 16px;
  font-weight: 700;
}



div.ws__meta-data {
  font-size: 16px;
}



.ws__tag {
  color: #fff;
  text-transform: uppercase;
  border-radius: 11px;
  letter-spacing: 1px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
  padding: 5px 7px;
}



.l-workshops {
  margin: 10px 0 30px;
}