Skip to main content

For the SmashingConf newsletter:

Hybrid Apps with Web and Native Technologies

Átila Fassina
4 sessions Jan 9–17
dev
Átila Fassina

The Power of Storytelling

Chiara Aliotta
5 sessions Jan 20 – Feb 3
ux
Chiara Aliotta

Design Patterns For AI Interfaces

Vitaly Friedman
5 sessions Jan 22 – Feb 5
ux
Vitaly Friedman

New Front-End Adventures, 2025 Edition

Vitaly Friedman
5 sessions Jan 27 – Feb 10
dev
Vitaly Friedman

Accessible Typography for Web & UI Design Masterclass

Oliver Schöndorfer
4 sessions Feb 10–18
design
Oliver Schöndorfer

UX Design Leadership Masterclass

Paul Boag
4 sessions Feb 11–20
ux
Paul Boag

Fixing Frustrating Design Patterns For 2025

Vitaly Friedman
1 sessions February 12
free
Vitaly Friedman

Design Token and UI Component Architecture

Nathan Curtis
4 sessions Feb 20–28
workflow
Nathan Curtis

Deep Dive On Accessibility Testing

Manuel Matuzović
5 sessions Feb 26 – Mar 13
dev
Manuel Matuzović

Building Modern HTML Emails

Rémi Parmentier
4 sessions Mar 3–11
dev
Rémi Parmentier

Figma Workflow Masterclass

Christine Vallaure
5 sessions Mar 4–13
design
Christine Vallaure

Interface Design Patterns UX Training (Spring 2025)

Vitaly Friedman
8 sessions Mar 7 – Apr 7
ux
Vitaly Friedman

The Secrets of Web Performance

Ryan Townsend
5 sessions May 7–21
dev
Ryan Townsend

Design System Planning and Process

Nathan Curtis
4 sessions Mar 20–28
workflow
Nathan Curtis

Enterprise UX Masterclass

Marko Dugonjić
5 sessions May 14–21
ux
Marko Dugonjić

How To Measure UX and Design Impact

Vitaly Friedman
4 sessions May 12–20
ux
Vitaly Friedman

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;
}