Start the Journey
CHANGE
Dynamic Slider
Grab a Seat

Website From Figma
Website From Figma

Website From Figma
Website From Figma

Keep in Touch Start the journey

From Figma to Web

The final guide to building your website from scratch.

With this comprehensive course you'll learn the fundamental languages of the web: HTML, CSS, and JavaScript. Also you will discover how to bring your creative visions to life using a design built in Figma.

Duration: 20 Hours
Level: Beginner
  • Source Code
  • Downloadable Material
  • Real Project
  • 100% Pratical Lessons
Course Foundation
New Skillset
Interative Website
Figma Design
CMS Integration

Goals Achieved

In this course you will undoubtedly achieve your goals learning how to merge the main tools to create a Figma website from 0 to done.

Grid Layouts Flexbox Figma Complex Layout Clean Design CSS Grid Layouts Flexbox Figma Complex Layout Clean Design CSS Grid Layouts Flexbox Figma Complex Layout Clean Design CSS Grid Layouts Flexbox Figma Complex Layout Clean Design CSS
Hover Interactions JavaScript Advanced Animations HTML Hover Interactions JavaScript Advanced Animations HTML Hover Interactions JavaScript Advanced Animations HTML Hover Interactions JavaScript Advanced Animations HTML
Dynamic Components CMS Flexible Customization API Dynamic Components CMS Flexible Customization API Dynamic Components CMS Flexible Customization API Dynamic Components CMS Flexible Customization API

Course Syllabus
Course Syllabus

Course Syllabus
Course Syllabus

1. First Day

1

Project Structure

Deep dive into the website structure, addressing practical and theoretical topics of creating a functional and sellable portfolio.

  • 01 - Project Introduction
    • Understanding the Project and Goals ( Figma File )

  • 02 - Workflow & Tooling
    • Project Installation
    • Installing Node Package Manager
    • Introduction to Bundler

  • 03 - Project Set Up
    • Cleaning up Vite.js
    • Reset CSS
    • Installing Font
    • CSS Variable
    • Plug in main.js

  • 04 - Building Structure
    • From Design to Code - Figma to HTML

  • 05 - Styling the Project
    • From Design to Code - Figma to CSS
      (Mobile, Table and Desktop Design)

2. Second Day

2

Project Behaviour

Immerse in creating interactions and functionalities to the website and implementing CMS tool to give a more dynamic and flexible result.

  • 06 - Website Behaviour
    • Open and Close Modal
    • Complex hover interactions (Hero)
    • Mode Switch
    • Preloader
    • Menu Full Screen
    • Cursor Interaction
    • Text Marquee

  • 07 - CMS Integration
    • Introduction to CMS
    • Setting Up Prismic
    • Creating our Data Base API
    • Integrating CMS to the Website

  • 08 - Project Deployment
    • Preparing website to deploy
    • HTML Head tags for SEO
    • Quick introduction of Deployment Tool
    • Website Deployment

  • 09 - Going Further

    • Creating a boilerplate
    • Customizing the project
    • Taking the project to the Next Level
    • Course Wrap up

  • 10 - Course Wrap Up

    • Creating a boilerplate
    • Customizing the project
    • Taking the project to the Next Level
    • Course Wrap up

Web Interactions
Web Interactions

Web Interactions
Web Interactions

  • Hover Interaction

    Complex Hover

    Learn how to create an interactive hover animation.

  • Animations

    Intro Animation

    You will learn how to create a seamless preloader, integrating it with your hero section.

  • Page Interaction

    Mode Switch

    Learn how to CSS variable's power to create a seamless color transition and toggle your website light to dark.

  • Hover Interaction

    Mouse Interactions

    Learn how to create a following cursor to highlight parts of your website.

New Expertises
New Expertises

New Expertises
New Expertises

  • 1

    Development

    Web development is the process of creating and maintaining websites and web applications using programming languages, HTML, CSS, and JavaScript.

  • 2

    CMS Integration

    A Content Management System (CMS) is a software that allows users to create, edit, and manage digital content on websites easily.

  • 3

    Web Interaction

    Web animations are dynamic visual elements added to websites, enhancing user experience through movement, transitions, and interactive effects.

  • 4

    JavaScript

    JavaScript is a versatile, high-level scripting language primarily used for web development to add interactivity, behavior, and functionality to websites.

  • 5

    Figma Integration

    Figma is a collaborative cloud-based design tool used for creating user interfaces, prototypes, and design systems, facilitating teamwork and version control.

  • 6

    CSS Manipulation

    We will usee CSS to control the design and layout of our project, enhancing their visual appeal and presentation.

Unlock the power of web development with our comprehensive course.
On creating interactive websites from scratch using Figma as template

Don't miss this opportunity to kickstart your web development journey and open doors to a world of possibilities. Enroll today and embark on a rewarding path to becoming a proficient web developer!