In this complete website design project you will learn how to design and build a website from scratch using Figma, HTML, and CSS.
✏️ LESSONS ✏️
1: Easy Web Design Tutorial With Figma – https://www.youtube.com/watch?v=88-XCq0Tezg
2: How to Design a Website Using HTML – https://www.youtube.com/watch?v=SFpF8fCymys
3: CSS Project for Beginners: Modern Website Design Tutorial – https://www.youtube.com/watch?v=rl90OmoSPZ0
⏰ TIMESTAMPS ⏰
Layout Columns: 0:56
Color Styles Overview: 3:17
Logo: 6:12
Navbar: 8:08
Info Section: 11:53
Icon Section: 13:06
Feature Section: 18:49
Export Images and SVGs: 25:21
👀 LIVE DEMO 👀
🗂 DOWNLOADS 🗂
🔗 HELPFUL RESOURCES 🔗
Figma: https://www.figma.com/
Unsplash: https://unsplash.com/
👋 FOLLOW US 👋
Instagram: https://instagram.com/skillthrive/
Facebook: https://facebook.com/skillthrive/
#Design #WebDesign #UI
source
Figma?
Figma balls
Hell yeah, brother. Very useful as a quick introduction to main features. Thanks!
Thank you!
I learned a lot about the different features and shortcuts of Figma. I'll work way better on it now. Many thanks ! 🙂
maybe I'm missing it, but where is that Dribbble Icon library linked in the description? Thanks!
thank you for the tutorial. Super helpful! 🙂
Super helpful — thanks so much!
Thank You very helpfull!
Where are files?
Thank you for the tutorial – I learned so much ~
Is it just a layout, without clickable buttons or anything?
Great content. This was really useful. It was a bit tricky to follow where you were clicking and buttons you were pressing, for future videos if you can highlight the mouse cursor and pause for 1-2 seconds that would be helpful, but great content, commentary and explanations for what you are doing.
Am unable to find the icons can you please share me the link of it
could you put the link where you got the icons from?
Thank you so much! It was my very first design with Figma. I really enjoyed the process and discovered lots of useful features. You are a gifted tutor, everything is absolutely clear and easy. I am absolutely inspired 🙂
Why are we exporting the images at 2x? If it's to keep the resolution of the original images so they don't blur if a screen is bigger, why 2x, not something even bigger or just the original dimensions?
I don’t get it… why not just code the site and make pictures.. why is it needed to spend time on a preview..? Just draw it out..
Any idea how would you make a Seamless Repeating Background Pattern in Figma?
My SVG exports always end up having seams between patterns.
01:01 I can only see mobile devices in my list.. how do you show desktop options?
WOW The background picture is from my country : love from
Bhutan <3
hello sir, how to add icons inside the figma application
Thanks for the great tutorial! Really appreciate.
why we need to exporting to image and svg in the end?
Thank you for creating this video! I learned a lot of helpful tips and tricks in such a short video!!!
Also how do you get the numbers on the orange margin to show?
Where is the link for the dribbble icons to download?
thanks…
Thanks for not having a long ass intro. Also, super thorough and helpful. Thank you!!
please use adobe xd for design.