You're welcome to Heroic Academy

Select your country of residence below to continue

Complete UI/UX Design, Web, Mobile, Figma, more

Become a Designer, Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS

Created by Andrei & Daniel

Click PREVIEW COURSE to watch a short video that will tell you more about the course.

Close

Course Contents

Introduction

Course Outline

Join Our Online Classroom!

Exercise: Meet Your Classmates & Instructor

Meeting The Client

The 2 Paths

Exercise: Building Your Logo

Design Resources

Designer vs Developer

Skills To Be A Top Designer

ZTM Resources

Monthly Coding Challenges, Free Resources and Guides

Sketching

Resources For This Section

Introduction To Sketching

The Sketching Process

Sketching User Flows

Sketching User Flows 2

Sketching User Flows 3

Sketching User Flows 4

How To Stay Inspired

How To Find Inspiration

Sketching Tips

The Basics of Figma

Resources For This Section

Intro to Figma: Education Plans and Signup

Intro to Figma: Introduction

Intro to Figma: Where to Use Figma

Figma UI: File Browser

Figma UI: Files

Figma UI: Toolbar

Figma UI: File Left Sidebar

Figma UI: Right Sidebar

Shapes and Tools: Working with Containers

Shapes and Tools: Basic Shapes and Boolean Operations

Designing in Figma: Images

Designing in Figma: Getting Started with Text

Designing in Figma: Constraints

Designing in Figma: Using Auto Layout

Resources and Collaboration: Community Files

Resources and Collaboration: Community Plugins

Resources and Collaboration: Sharing and Comments

What We Are Going to Learn

Exercise: Create a Quick Logo Using Shapes

Exercise: Autolayout Buttons

Exercise: Responsive Navigation

Exercise: Responsive Text

Exercise: Imagery and Gradients

Exercise: Layout and Responsiveness

Assignment: Create Complex Interactive Components

User Flows

Resources For This Section

User Flows Explained

The DOs and DON'Ts

What We Are Going To Build

Reusable User Flow Assets

User Flows in Figma — Onboarding

User Flows in Figma — Search

Sitemaps

Resources For This Section

Introduction To Sitemaps

Creating A Basic Sitemap

What We Will Learn

Reusable Sitemap Assets

Figma Check In — Basic Components and Variants

Sitemaps in Figma — The Top Layer

Sitemaps in Figma — Digging Deeper

Sitemaps in Figma — Digging Deeper Cont.

Tips for Creating Great Sitemaps

Wireframes

Resources For This Section

What Is A Wireframe?

How To Create A Wireframe

What We Will Learn

Figma Check In — Basic Button Component

Figma Check In — Variants

How to Use Our Wireframe Components

Wireframes — Home

Wireframes — Cart

Wireframes — Profile

Prototyping

Resources For This Section

What We Will Learn

Figma Check In — Prototyping in Figma

Prototyping in Figma — Flows and Starting Points

Prototyping in Figma — Connections

Prototyping in Figma — Interactions

Prototyping in Figma — Animations

Prototyping in Figma — Prototype Settings

Prototyping in Figma — Prototype Presentation

Project — Navigation

Project — Removing an Item from Your Wishlist

Project — Finding a Product

Exercise: Imposter Syndrome

Feedback

Resources For This Section

Feedback Drives Better Design

Constructive Feedback

Recap: What Did We Learn?

Spacing and Grids

Resources For This Section

What Is A Grid?

Grid Basics

What We Will Learn

Figma Check In — Fixed and Fluid Grids

Figma Check In — Breakpoints

Figma Check In — Grid Style

Project — Mobile Layout Grid

Project — Desktop Layout Grids

Simple Rules to Follow

Typography

Resources For This Section

Serifs

Sans Serifs

Display & Mono

Picking Typefaces

What We Will Learn

Figma Check In — Text Properties

Exercise — Elevating a Brand

Exercise — Typeface Scenarios

Exercise — Google Fonts

Project — Typeface Exploration

Project — Pairing Font Families

Project — Headings, Body and Labels

Project — Typeface System

Figma Check In — Text Styles

Color

Resources For This Section

Color Schemes

Important Questions To Ask

Creating Color Palettes

What We Will Learn

Figma Check In — Paints

Exercise — Expanding Upon a Strict Color Palette

Exercise — Creating a Color Palette

Figma Check In — Color Styles

Exercise — Using Color Styles

Project — Primary and Neutrals

Project — Accents

Imagery and Iconography

Resources For This Section

Visual Assets Introduction

What We Will Learn

Figma Check In — Image Plugins

Figma Check In — Image Styles

Figma Check In — Masks

Exercise — Image Exploration

Exercise — Text and Imagery Working Together

Figma Check In — Illustration Plugins

Exercise — Adding illustrations to your designs

Figma Check In — Icon Plugins

Figma Check In — Pen Tool

Exercise — Custom Icons with the Pen Tool

Forms and UI Elements

Resources For This Section

What Are Forms + UI Elements?

What We Will Learn

Best Practices — Forms

Best Practices — Basic and Advanced Inputs

Best Practices — Inputs

Best Practices — Buttons

Figma Check In — Component Properties

Properties vs. Variants

Figma Check In — Button Component Properties

Figma Check In — Button Variants

Figma Check In — Combining Components

Figma Check In — Form Component Possibilities

Project — Registration Flow Part 1

Project — Registration Flow Part 2

Project — Registration Flow Part 3

Accessibility

Resources For This Section

What Is Accessibility?

Assistive Technologies

Visual Patterns For Accessibility

Tools To Make Your Design Accessible

Visual Patterns For Accessibility Part 2

Design Patterns

Resources For This Section

What Are Design Patterns?

Why Are Design Patterns Valuable?

How To Apply Design Patterns

Analyzing Design Patterns

Dissecting And Choosing Design Patterns

Mobile Design

Resources For This Section

Mobile Design Best Practices Part 1

Mobile Design Best Practices Part 2

Visual Style and Exploration

Resources For This Section

What We Will Learn

Design Fidelity

Visual Exploration — Navigation

Visual Exploration — Buttons

Figma Check In — Effect Styles

Visual Exploration — Product Cards

Visual Exploration — Text Cards

Screen Design — Home

Screen Design — Product Page

Motion in UX Design

Resources For This Section

Misconceptions of Motion Design

Motion Supports Usability

Narrative and Mental Models

What is a Microinteraction?

The Structure of a Microinteraction

Not Every Element is a Microinteraction!

How Microinteractions Impact User Experiences

What We Will Learn

Figma Check In — Intro to Smart Animate

Figma Check In — Smart Animate Properties

Exercise — Parallax

Exercise — New Message

Exercise — Overlays

Figma Check In — Interactive Components

Exercise — Interactive Buttons

Project — Parallax Welcome Screen

Project — Drag Onboarding

Project — Cart Overlay

Project — Button Microinteraction

Design Systems

Resources For This Section

What We Will Learn

Foundational Styles and Components vs. Product Specific Components

Building Fidelity and Organizing Potential Components and Styles

Foundational Styles and Components

Components — Buttons

Components — Cards

Components — Headers

Components — Inputs

Components — List Items

Components — Navigation

Components — Misc. Elements

Execution

Resources For This Section

What We Will Learn

Working Towards Our Final Designs

Execution — Introduction Screen

Execution — Onboarding Screens

Execution — Registration Screens

Execution — Home Screen

Execution — Wishlist Screens

Execution — Profile Screen

Execution — Cart and Checkout

Prototypes — Registration

Prototypes — Adding to Cart

Prototypes — Checkout

Prototypes — Lottie Files Plugin

Prototypes — Search and Filters

Working With A client Revisited

Resources For This Section

The Product Alignment Canvas

Project Goals

Target Users

User Journey Map

Risky Assumptions

What is a User Story Map?

Creating a User Story Map

Where To Go From Here?

Is Bruno Happy?

Project Handoff

Next Step: Project Handoff

Thank You!

Learning Guideline

Become An Alumni

LinkedIn Endorsements

Course Review

The Final Challenge

Web Portfolio

Resources For This Section

How To Export And Place Designs

Content For Your Portfolio

Where To Host Your Web Portfolio

From Figma To Website: Building our Landing Page

Quick Note: Upcoming Videos

Initial Setup - Figma Handoff

Build UI - Adding Image Assets

Build UI - Styling Image Assets

Extra: How The Internet Works

Quick Note: Upcoming Videos

Browsing the Web

Breaking Google

Exercise: Break Google Yourself

The Internet Backbone

Traceroute

Exercise: Running traceroute

DEVELOPER FUNDAMENTALS: I

What Does A Developer Do?

Web Developer Monthly

Extra: History Of The Web

WWW vs Internet

HTML, CSS, Javascript

DEVELOPER FUNDAMENTALS: II

Developer History

Exercise: Adding CSS and JavaScript to Tim's website

Optional Resource: More About the History of the Web

Extra: HTML 5

Build Your First Website

Resources: Your Text Editor

DEVELOPER FUNDAMENTALS: III

Quick Note About w3schools

How To Ask Questions

HTML Tags

HTML Tags 2

Self Closing HTML Tags

Anchor Tag

Q&A: index.html

Q&A: Relative vs Absolute Path

HTML Forms

HTML Forms 2

Submitting A Form

HTML Tags 3

HTML vs HTML 5

Copy A Website

HTML Challenge

HTML Lesson Files

Exercise: HTML Quiz

Optional Exercise: More HTML

Extra: CSS 3

Exercise Files: Code-Along

Your First CSS

CSS Properties

CSS Selectors

Optional Exercise: CSS Selectors

Text and Font

Images In CSS

Box Model

px vs em vs rem

Optional: PX, EM, REM, %, VW, and VH

Exercise: CSS Quiz

Critical Render Path

Exercise File: Code-Along Images

Flexbox

Optional Exercise: Flexbox Froggy

CSS 3

Optional Exercise: Mastering Transitions and Transforms

Responsive UI

Image Gallery Files

Exercise: Robot Animation

Exercise: Robot Animation Starter Files

Solution: Robot Animation

Optional Exercise: CSS

Extra: CSS Grid + CSS Layout

Section Overview

CSS Grid vs Flexbox vs Bootstrap

Quick Note: grid-gap to gap

CSS Grid 1

CSS Grid 2

CSS Grid 3

CSS Grid 4

CSS Grid 5

Exercise: CSS Layout

Solution: Navigation Bar

Solution: Navigation Bar 2

Solution: Cover

Solution: Project Grid + Footer

Quick Note: Upcoming Video

Solution: Prettify

The Truth About CSS

BONUS SECTION

Special Bonus Lecture

What you will learn and gain

  • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2023.
  • Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
  • Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
  • Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
  • Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
  • Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
  • Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
  • Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
  • Learn best practices that takes years to learn in the design industry
  • Learn to make professional logos and design choices for all branding needs
  • Learn UI/UX best practices using the latest trends in the industry
  • Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!

Just updated with all modern Design tools and best practices for 2023! Join a live online community of over 900,000+ students and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto for top companies.

A great Designer is becoming harder and harder to find and it isn't rare to find designers make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!

Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish.

Graduates of Andrei's courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!

The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.

What our students are saying

Just updated with all modern Design tools and best practices for 2023! Join a live online community of over 900,000+ students and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto for top companies.

A great Designer is becoming harder and harder to find and it isn't rare to find designers make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish.

Graduates of Andrei's courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!

The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.

Requirements

No requirements. We teach you and show you everything from scratch! From Zero to Mastery

Get ready to fall in love with Design and making everything you touch into beautiful projects for the rest of your life!

Who this course is for:

This course is for you if:

- You are a complete beginner looking to become a designer and freelance

- You are a designer who is looking to charge more for your work

- You are a developer who is looking to improve their design skills

Frequently Asked Questions

What is Heroic Universal Concept All About?

Heroic Universal Concept International is an ICT firm and a vision-driven movement aimed at harnessing the ingenuity of young people with the use of motivational and ICT tools, thereby helping them achieve their ultimate goal.

We offer ICT services and champion talent development programmes for young people.

Is your training online or physical?

Our training is online. We have hundreds of downloadable tutorial videos on different ICT courses hosted in our website.

As soon as you pay and register, you will be given access to the tutorial videos. You can download them and commence training, offline.

While you're learning, I will be guiding you from here whenever you need my assistance.

Where is your location?

We're based in Kasoa, Ghana and Lagos, Nigeria but our training is online. So, you can access our courses from anywhere you are while we will be coaching you from here.

Do you have a physical class?

No, we don't.

Our training is 100% online.

What is your mode of teaching?

We teach with tutorial videos.

We have hundreds of downloadable tutorial videos on various ICT courses in our website.

You will have access to download them and learn with them as soon as you register for your desired course.

We made all the tutorials downloadable to help you save data and be free from challenges of poor internet connection.

Do you have online community where your students converge to exchange ideas?

We have Heroic Students WhatsApp group where our students converge and exchange ideas.

Information about Heroic Academy and other Heroic innovations are discussed in the group.

Do you mentor your students?

Sure, I do absolutely!

I'm always available Whenever my students need my attention.

I supervise their projects and tackle their challenges.

Can ICT courses be learnt online effectively?

Of course! The more convenient way to learn ICT skills these days is online.

There are some courses you may never have the opportunity of learning if you're waiting for opportunity to learn them physically.

Professionals are fast moving online. Very few of them will still have time to teach physically.

Programming is one of those skills you can easily learn online.

All you need is a good and experienced coach, and I'm here to help.

Is programming difficult?

It depends on who is coaching you and the time you dedicate to learning it.

If you're being coached by a very experienced and gifted coach, if you give it enough time, programming will be fun for you.

However, if you're struggling to learn by yourself or you're being coached by an inexperienced coach, you will find programming difficult.

Can I learn coding with my phone?

Yes, you can start learning with your phone if you don't have a laptop. Just buy a phone external keyboard, I will direct you on how to use it to start programming.

How do you mentor your students?

I mentor my students by; answering their questions and helping them solve some problems whenever they call my attention.

If my student need my attention, I usually ask them to send me a screenshot of the issue or a zip file of their work to enable me analyse their job and debug the error.

I usually make a new video to point out their errors if the situation is complex.

How can you convince me that you're genuine?

Chat me on Whatsapp via +2348037747461 and express your concern.

I will try my best to clear all your doubt.

I'm not used to online training, I'm afraid it won't work for me.

Online training is great when a gifted teacher is handling it. Look for a gifted teacher. You will be missing opportunity to acquire great skills if you ignore online training.

Some skills are not common. Online training make them accessible.

If you have tried online training before and it didn't work for you, try again, this time, concentrate on getting a good teacher.

I tried my best to simply my lectures. You can chat me to see my students testimonials. They're testifying that I made my courses very simple.

Don't you think that poor internet connection can disrupt online training?

I made all my tutorials downloadable to win against poor internet connection.

You can download all your tutorials when the internet connection is ok and learn offline without worrying about network fluctuations.

What if I insist on one-on-one training. What's your advice?

Online training would have made learning a lot easier for you but if you insist on physical training, you have to take the pain of looking for someone or centers where the skills are taught.

The centers might not be close to you, so be ready to spent heavily on transportation.

I wrote an article where I compared online and physical training. You can chat me on Whatsapp to request for it.

I'm interested, how do I get started?

Go ahead and order for the course. If you need assistance, chat me on Whatsapp via +2348037747461.

Will I get certificate after the training?

Of course. Our organization is registered. We give our students certificate on completion.

I'm interested in the courses but I don't have money

If you can't afford the expensive courses, there are some cheap courses you can start from.

Just pay for the ones you can afford and get started instead of waiting.

You will gradually raise money to pay for the rest.

Are all your tutorial videos downloadable?

All the tutorials the Admin of this platform, Uche Joe created by himself are downloadable but the tutorials created by other expert partners created might not be downloadable.

However, you will surely enjoy the learning process.

You may also like

See all coursesarrow_forward