Skip to main content

For the Smashingmagazine newsletter:

For the SmashingConf newsletter:

Design Patterns For AI Interfaces

Vitaly Friedman
5 sessions Feb 16 – Mar 2
ux
Vitaly Friedman

Designing For Complex UI Masterclass

Vitaly Friedman
5 sessions March 3–17
ux
Vitaly Friedman

Building Interactive, Accessible Components with Modern CSS & JS

Stephanie Eckles
4 sessions March 5–13
dev
Stephanie Eckles

Figma Workflow Masterclass

Christine Vallaure
5 sessions March 18–24
design
Christine Vallaure

UX Design Leadership Masterclass

Paul Boag
4 sessions March 18–26
ux
Paul Boag

Designing Better Products Masterclass

Stéphanie Walter
5 sessions Mar 23 – Apr 6
ux
Stéphanie Walter

Live UX Training — Smart Interface Design Patterns

Vitaly Friedman
8 sessions Apr 3 – May 11
ux
Vitaly Friedman

Naming Design Systems

Samantha Gordashko
5 sessions Apr 20–May 4
design-systems
Samantha Gordashko

How To Measure UX and Design Impact

Vitaly Friedman
4 sessions Apr 21–May 1
ux
Vitaly Friedman

UX Leadership and Influence

Joe Natoli
5 sessions Apr 23 – May 7
ux
Joe Natoli

Cascading Style Systems: Resilient & Maintainable CSS

Miriam Suzanne
5 sessions Jun 2–10
dev
Miriam Suzanne

Accessibility for Designers

Stéphanie Walter
4 sessions Sept 21–29
ux
Stéphanie Walter

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