Turn your Design into a Web Product the Modern Way

Features Includes:
  • Self-paced with Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App

Course Preview Video


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.

Basic knowledge

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

What will you learn

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
Course Curriculum
No of Lectures: 20 Total Duration: 02:06:12

No Review Yet