Introduction

Introduction to sketching

The sketching process

Sketching user flows

Sketching user flows 2

Sketching user flows 3

Sketching user flows 4

Sketching tips

How to stay inspired

How to find inspiration

INTRODUCING FIGMA

figma dashboard

figma tools

layers and pages

the top bar

design properties

prototyping in figma

Exercise creating a responsive layout

The Do's and Dont's

Speedup workflow with components

Creating own user flows.

Creating own user flows 2

Creating own userflows 3

Creating a basic sitemap

Before you start

Creating a sitemap 1

Creating a sitemap 2

Before getting started with wireframes

What is a wireframe

How to create wireframes

Wireframes in figma

Creating our homepage

Creating product page

Creating the Cart page

Prototyping basics in figma

Prototyping basics in figma 2

Prototyping basics in figma 3

Prototyping basics in figma 4

Linking a quick user flow

Working on small interactions

Why is feedback important and how to work on them

Grid

Grid Basics

Responsive Grids and Breakpoints

Creating own grid in figma

Grid Guidelines

Serif

Sans Serif

Display and mono

choosing a typeface

Creating our own type system

Color schemes

Impotant questions to ask

Creating Color Palletes

Creating a monochromatic color pallete

Applying our Color pallete

Expanding a strict color pallete

Creating our own colour pallete

What are forms and UI elements

Best practices for forms

Best practices for inputs

Best practices for inputs_2

Best practices for inputs_3

Best practices for inputs_4

Best practices for buttons

Cretaing components in figma

Using Atomic elements

Using instances in figma

Editing instances

Responsive components

Creating a registration form

Visual Assets introduction

Photos in Figma

Photos in figma 2

Working with developers

Figma plugins and icons

custom icons

Visual patterns for accessibilty

Tools to make design accessible

Visual patterns for accessibilty

What are design patterns

Why are design patterns so valuable

How to apply design patterns

Analyzing design atterens

Analyzing,Dissecting and choosing design patterns

Mobile design best practices

best practice part 2

Design fidelity

Style Exploartion

Style Exploration 2

Style Exploration 3

Style exploration 4

Importance of motion

The purpose of motion

Intro to smart animate

The power of smart animate

What is a microinteraction

Why are microinteractions important

Creating our own microinteraction

Creating our own microinteraction part2

Figmotion

Using Figmotion 2

Components Cards

Vertical Cards

Recipes Search

Recipes Order List

Using our design system

Using our design system system 2 part 1

Using our design system 2 part 2

Using our design systems 3

Final prototypes

Final prototypes 2

Final prototypes 3

Final prototypes 4

Where to host your web portfolio

How to place and export designs

Initial setup figma handoff

Build UI_Adding image assets

Build UI_Styling Image Assets

Build your first website

Developer fundamentals

HTML Tags

HTML Tags2

Self closing tags

Anchor tag

index.html

Relative vs absolute path

Html forms

Html forms 2

Submitting a form

HTML tags3

HTML vs HTML5

Copy a website

CSS INTRO

Your first css part 2

part 3

part 2 selectors

CSS properties

Selectors in css

Text and font

Images in CSS

Box model

px vs em vs rem

Critical render path

Flexbpx

CSS3

Respinsive UI

Bootsrap Introduction

Bootstrap

Boostrap Grid

Exercise: Building our startup landing page part 1+part2

Exercise: Startup landing page part3

Exercise: Startup landing page part 4

Exercise: Startup landing page part 5

Adding email subscribe form with mailchimp

Developer fundamentals

Workinfg with templates

Overview

Grid vs Flexbox Vs Bootstrap

CSS Grid1

CSS Grid2

CSS Grid3

CSS Grid4

CSS Grid5

Solution_Navigation bar

Solution_Navigation bar 2

Solution Cover

Project grid+footer

Solution prettify

Conclusion