Build A Responsive Website From A Figma Design

Learn web development by converting a Figma design to a real website using HTML, CSS and JavaScript

Hi, welcome to this course. In this course, you will learn how to convert a Figma (UI Design Application) design to a real website using HTML, CSS, and JavaScript. It will be responsive which means we will have a mobile version of our website as well.

What you’ll learn

  • How to convert a design to a real website.
  • How to host your website online for free.
  • How to add CSS animations to your website.

Course Content

  • Introduction –> 2 lectures • 9min.
  • The Desktop Version –> 5 lectures • 51min.
  • The Mobile Version –> 3 lectures • 37min.
  • Conclusion –> 2 lectures • 4min.

Auto Draft

Requirements

  • A Computer which can run Figma and VS Code.
  • An active internet connection.
  • Basic knowledge of HTML, CSS and JavaScript (not necessary but will make it easier to follow).

Hi, welcome to this course. In this course, you will learn how to convert a Figma (UI Design Application) design to a real website using HTML, CSS, and JavaScript. It will be responsive which means we will have a mobile version of our website as well.

I created this course in such a way that I will write all the code on-screen. We will not copy any code from anywhere. So, you will be able to follow along easily even if you are a beginner programmer.

Why should you take this course?

You will learn how to

  • create responsive websites
  • add animations using CSS to make your website look modern
  • host your website online

Figma is a UI/UX design tool that is popular among a lot of developers. It has gained popularity recently because of some amazing features it has and also because it has a free version. So, I have already designed a Figma design which I will provide to you as a downloadable resource. We will convert that design to a real website.

Learning how to write HTML, CSS, and JavaScript is absolutely necessary to create any kind of website. They are the building blocks of all the libraries that we have today. So, learning them will make your foundation strong and you will be able to get started with web design.

This course will give you a complete guide on creating a responsive homepage from scratch referring to a Figma design. So, this will definitely help you in your web developer journey.

I hope you find this course useful.

Happy coding!