Turn Your Design Into A Web Product The Modern Way

Why this course?

It's important in this digital era, to understand how to create a web platform from design to development. If you want to quickly test out an idea in the market, you need one that has the functionality, but its also has to be designed well. We need to be able to do this as efficiently as possible, yet creating professional products that look good and do the job. We need to find better, time saving and less costly methods to create quality products. This is what this course is about.

I show you how to create minimum viable products quickly, test out front-end web technology that not only has your core features, but is also designed well and fit for the market. Even though we are designing a simple system, the concepts are the same as you scale it up, as I use a powerful technology ecosystem to build your components. As a Designer & Front-end Architect, I understand this ecosystem.

The main goal for this course is for you to understand the most efficient way to take a design into development. Taught in Bite-sizes to make it digestible. to be able to create reusable, branded, styled-components to use in different React environments such as a create-react-app, a Static generated website such as one built from Gatsby or Next, and as a React Native App.

We will build A fully branded login and registration page where our main component is the form that has our brand colours generated using Microsoft Theme designer, with a full background image behind it.

An understanding of the most common ES6 features such as:

Arrows

Template strings

Destructuring

Let + const

We will be using these mostly

Understanding of CSS at a basic level

You will be introduced to thinking about efficient ways to take a UI design and develop it using modern design and development principles, technology and concepts.

You will learn:

Style buttons with all there pseudo-elements

Inputs with all their pseudo-elements

Discover how we can import and use styled icons using abstraction so that we don't load the whole font library, we just load only the icons that we need.

We will learn how to work with imagery, optimising our images using one of the most powerful image optimisation systems on the internet right now.

Within our imagery, we will also explore using GraphQL to call our image from our file system to serve it on the client.

In this course, you will be introduced you to modern techniques of web development such as:

ReactJS

Static site generators ( Gatsby JS )

GraphQL

JAMStack

Styled Components

CSS Utilities

Flex box

Responsiveness

Template literals

As well as:

Branding,

Web colour palettes and accessibility

UI Principles

Color theory implementation