How to design a personal portfolio website in figma & then code it out using HTML & CSS & then HOST it up.

How to design a personal portfolio website in figma & then code it out using HTML & CSS & then HOST it up.

Prerequisites

  1. Desktop/Laptop
  2. Internet connection
  3. Creativity
  4. Time

What you will Learn in this Blog post !

You will Learn,

  1. To Design in Figma
  2. To code out your own Design using HTML and CSS
  3. To deploy/host your own created portfolio website on Github pages

So, without wasting your precious time let's get started with your blog.

1. To Design in Figma

(1.1) STEPS TO CREATE AN ACCOUNT

(a) Go to GOOGLE and search Figma

IMG_20220917_094247.jpg

(b) Click on the first Link

IMG_20220917_094330.jpg

(c) Then, on the top right corner click on the "Get Started" button

IMG_20220917_095014.jpg

(d) Next , If you already have an account click on "Login", else if you don't have. Then you " Sign Up" by providing your "Email" . After you give your email, a verification mail would be sent to the respected email which you have provided. Follow the simple instructions and you will eventually create your Figma Account.

IMG_20220917_095056.jpg

(1.2) KNOW ABOUT FIGMA

(a) Once your account is created . Now to start, click on "New Design File"

IMG_20220917_100745.jpg

(b) From here on unleash your creativity and start to work on your designs.

IMG_20220917_101353.jpg

(c) Figma provides a variety of tools to make your design . You just need to know how to use it.

Now, I will provide you with some useful links to start your designing in Figma.

(1.2.a) Figma Master class (Time: 32mins , Language: English) ==> %[youtu.be/II-6dDzc-80]

This is a short Tutorial video. Watch this after completion of watching the first one. (1.2.b) Figma in 10mins (Time: 12mins , Language: English) ==> %[youtu.be/nZ57MPVbHUg]

(1.2.c) Prototyping in Figma (Time: 5mins , Language: English) ==> %[youtu.be/-sAAa-CCOcg]

(1.2.d) How to add Font Awesome in Figma and then How to use it (Time: 2mins , Language: English) ==> %[youtu.be/GaLPmn_zdcY]

(1.2.e) How to create a portfolio design in figma (Time: 10mins , Language: English) ==> %[youtu.be/vO2eO_DSvYY]

After watching these Tutorials I am sure now you have made your Design in Figma.

2. To code out your own Design using HTML & CSS

To do this , First you have to be calm and discipline about your work. And you should completly focus only on it.

Here , I will provide you with some of the important tutorials about HTML & CSS. Also some projects links related to it . So that after watching these, you will be able to create your website.

(2.1.a) Code with harry complete designing of a website using html & css (Time: 2hrs 13mins, Language: Hindi) ==> %[youtu.be/eRTeF4MPnCg]

(2.1.b) Building up a portfolio website using only html and css (Time: 37mins, Language: (background music)) ==> %[youtu.be/lgeoAUvoRJU]

(2.1.c) Complete HTML tutorial for beginners in one video (Time: 3hrs 15mins, Language: Hindi) ==> %[youtu.be/BsDoLVMnmZs]

(2.1.d) Complete CSS tutorial for beginners in one video (Time: 1hrs 40mins, Language: Hindi) ==> %[youtu.be/u5-K_ua9sOw]

I hope after watching watching these Tutorials your website is ready .

3. To deploy/host your own created website in Github pages

(3.1.a) First create an Account on Github

(3.1.b) Create a Repo (Don't worry at the end I will provide you with some useful links.

(3.1.c) Upload your website code(files . Like:- .html, .css files)

(3.1.d) At the end go to settings then their go to "pages" then click on "main" branch . Save the changes by clicking on "Save" button. Wait for 2mins. After that it will provide you with a link.

That's it !! That's your website link. Share the link to anyone . Once they click on it they will be able to see your website.

(3.2.a) Host a website on Github pages (Time: 30seconds , Language: English) ==> %[youtube.com/shorts/WqOXxoGSpbs?feature=share]

My portfolio website design in Figma

IMG_20220917_110433.jpg

So, Guys if you have read this Article till the very end. Then Thanks a lot. If you have any doubt you can contact me in Instagram. I will be always ready to help you guys . At the end I am providing my Social media handles. If you are interested in such type of contents consider to Subscribe/Follow.

Instagram:

Youtube:
%[m.youtube.com/channel/UCDsB2R8zY6a1WgrBTENJ.. ]

Github: %[github.com/Badmashito-YT ]

Twitter: %[twitter.com/badmashitoyt ]

THANK YOU

created by :- ANIMESH DAS, INDIA(ASSAM)