Egghead Instructor Simon Vrachliotis

Simon Vrachliotis

Swiss front-end designer and developer based on Sydney's Northern Beaches. Proud father of two. Surf, basketball, ukulele. Love learning, love teaching.



Unlock all of Simon's PRO Lessons
click for instant access!

Browse Simon Vrachliotis's lessons.

showing 8 lessons...

Create component variations in React with styled-components and "extend"

Animate your user interface in React with styled-components and "keyframes"

Theme your application with styled-components and "ThemeProvider"

Style the body element with styled-components and "injectGlobal"

Style a React component with styled-components

Generate multiple HTML components from an array with the "for loop" in TwigJS

P

Make your HTML components dynamic with the "with" keyword in TwigJS

P

Create reusable HTML components with the "include" tag in TwigJS

P
react tutorial about Create component variations in React with styled-components and "extend"

Create component variations in React with styled-components and "extend"

1:09 react

In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.

react tutorial about Animate your user interface in React with styled-components and "keyframes"

Animate your user interface in React with styled-components and "keyframes"

1:15 react

In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.

react tutorial about Theme your application with styled-components and "ThemeProvider"

Theme your application with styled-components and "ThemeProvider"

1:17 react

In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .

react tutorial about Style the body element with styled-components and "injectGlobal"

Style the body element with styled-components and "injectGlobal"

0:52 react

In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrapped in a styled-component.

react tutorial about Style a React component with styled-components

Style a React component with styled-components

3:04 react

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript.

html5 tutorial about Generate multiple HTML components from an array with the "for loop" in TwigJS

Generate multiple HTML components from an array with the "for loop" in TwigJS

1:19 html5 PRO

In this lesson, we transform a series of TwigJS "includes" into a clean "for loop". We store our content into an array and let the loop generate one HTML component for each entry.

html5 tutorial about Make your HTML components dynamic with the "with" keyword in TwigJS

Make your HTML components dynamic with the "with" keyword in TwigJS

1:29 html5 PRO

In this lesson, we make TwigJS components output custom content via the "with" keyword of the "include" tag. We also set up fallback values to make our component work in a variety of scenarios.

html5 tutorial about Create reusable HTML components with the "include" tag in TwigJS

Create reusable HTML components with the "include" tag in TwigJS

1:09 html5 PRO

In this lesson, we take a repeating block of HTML and turn it into a dynamic, reusable TwigJS component. The "include" tag allows us to generate multiple instances of the component, each with their own custom content.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?