Roadmap to Become a Canva Graphic Designer with Web Skills

Official Canva Resources

Canva Design School

https://www.canva.com/learn/

Free courses and tutorials on graphic design principles and Canva-specific features

Canva Design Courses

https://www.canva.com/design-school/courses/

Structured learning paths for different design specialties

Canva Developers

https://www.canva.com/developers/

API documentation if you want to integrate Canva with web apps

Web Development Roadmap

Learn HTML, CSS and Vanilla JavaScript to complement your Canva design skills

Phase 1: Foundations

HTML5

MDN HTML Basics

Complete beginner's guide to HTML

HTML5 Specification

Official HTML5 documentation

CSS3

MDN CSS Basics

Complete beginner's guide to CSS

CSS Tricks

Excellent resource for CSS techniques and tips

JavaScript Fundamentals

MDN JavaScript

Comprehensive JavaScript documentation

JavaScript.info

Modern JavaScript tutorial

Phase 2: Design Implementation

Responsive Design

MDN Responsive Design

Learn to create designs that work on all devices

Flexbox Froggy

Fun game to learn CSS Flexbox

Grid Garden

Interactive game to learn CSS Grid

CSS Animations

MDN CSS Animations

Guide to creating animations with CSS

DOM Manipulation

MDN DOM Manipulation

Learn how to manipulate web pages with JavaScript

Phase 3: Advanced Projects

Build Canva-like Features

Drag and Drop API

Learn to implement drag and drop functionality

Canvas API

Create and manipulate graphics with JavaScript

Project Ideas

Simple image editor
Template generator
Social media post creator

EOD (End of Day) Checklist

Track your daily progress as a Canva Graphic Designer and Web Developer:

Design Skills

Created at least 1 Canva design (social post, presentation, etc.)

Studied 1 design principle (color theory, typography, etc.)

Explored 1 new Canva feature

Development Skills

Coded for at least 1 hour (HTML/CSS/JS)

Implemented 1 new CSS property/technique

Solved 1 JavaScript problem/challenge

Portfolio Building

Added to your design portfolio (Canva or web-based)

Pushed code to GitHub repository

Documented something learned

Additional Resources

Design Inspiration

Behance

Showcase and discover creative work

Dribbble

Discover the world's top designers and creative professionals

Coding Practice

Frontend Mentor

Real-world frontend challenges

Codepen

Social development environment for frontend designers and developers

Free Design Assets

Unsplash

Beautiful free images

Freepik

Free vectors, photos and PSD