Build A Responsive Website From A Figma Design

Name: Build A Responsive Website From A Figma Design
Rating: 4.1 (20 reviews)

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

Created byGodson Thomas

Last updated 5/2021

English

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

4 sections • 12 lectures • 1h 41m total length

Introduction To The Course1:16
This is the introduction to the course. We will take a look at the website (the end result) that we will be designing in this course.
Setting Up7:45
In this video, we will set up our project for getting started with the code. Download the Figma file and open it in your Figma application.

The HTML (Markup)9:54
In this lecture, we will write the HTML for the website. We will be writing the code in VS Code.
CSS For The Navigation Menu10:35
In this video, we will write the CSS for the navigation menu of the desktop version of our website. We will create an unordered list (ul) for the navigation menu in the <nav> element.
CSS For The Hero Section11:07
In this lecture, we will write the CSS for the hero section of our webpage. We will be using Flexbox in CSS for placing the items correctly on the screen.
CSS For The Footer5:16
In this lecture, we will add CSS to the social media icons and the background shapes of the desktop version of our website. This will conclude the design of the desktop version.
CSS Animations For The Website14:32
In this lecture, we will write the CSS for the animations for the desktop version of our website. This will make our site look modern.

CSS Media Queries For Mobile Version13:01
In this lecture, we will add CSS media queries to our design which will help us make our website responsive.
Navigation Menu For Mobile10:33
In this lecture, we will create the navigation menu for the mobile version of our website. We will have two icons: one for displaying the menu and one for hiding it.
JavaScript To Make The Navigation Menu Work13:29
In this lecture, we will add JavaScript to our website to make the mobile navigation menu work. We will also improve the animation using JavaScript.

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)

Description

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!

Who this course is for:

Beginner web developers
Designers curious to learn how to convert their design to a real website

Build A Responsive Website From A Figma Design

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 9min

The Desktop Version5 lectures • 51min

The Mobile Version3 lectures • 37min

Conclusion2 lectures • 4min

Requirements

Description

Who this course is for: