Turning a Figma Design into a Real Website using HTML and CSS
Developers often have to convert designs in Figma to pure HTML and CSS code. Try Hostinger at https://www.hostinger.com/adriantwarog
In this video I take you through the process of converting UI graphics design into a website using tailwindcss inside vscode.
This is also part of my bigger series around how I created Enhance AI, a really cool SaaS around using the latest from OpenAI to help developers write code, understand code, write content and blogs and more.
Hostinger: https://www.hostinger.com/adriantwarog
Coupon: ADRIANTWAROG
#figma #html #css
The design for this tutorial can be found below
Figma Design
https://www.figma.com/file/hcF21IJvr0GWaaKSOkawHv/Enhance-AI?node-id=0%3A1
Enhance AI tools
A series of tools to help solve coding problems, write content and more
👨💻 Enhance AI: https://app.enhanceai.ai/
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: https://discord.gg/6gmmFvxkD7
💸 Patreon: https://www.patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: https://webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: https://elementor.com/adrian/?ref=23140
✖ Editor X: https://www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: https://amzn.to/3f9DOQI
⌨ Keyboard: https://amzn.to/3eA5UFD
🐁 Mouse: https://amzn.to/3xVJO8l
🎤 Mic: https://amzn.to/3hgCfms
📱 Tablet: https://amzn.to/3ewt7sa
💡 Lighting: https://amzn.to/3vOZeZY
💡 Key Lighting: https://amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: https://amzn.to/3uCv4J9
📸 Primary Lens: https://amzn.to/3vT6wMm
📸 Secondary Lens: https://amzn.to/3tyqWIX
🎥 Secondary Camera: https://amzn.to/3o2zCGi
🎙 Camera Mic: https://amzn.to/33tCz9l
🎞 USB to HDMI: https://amzn.to/33yW9RE
Видео Turning a Figma Design into a Real Website using HTML and CSS канала Adrian Twarog
In this video I take you through the process of converting UI graphics design into a website using tailwindcss inside vscode.
This is also part of my bigger series around how I created Enhance AI, a really cool SaaS around using the latest from OpenAI to help developers write code, understand code, write content and blogs and more.
Hostinger: https://www.hostinger.com/adriantwarog
Coupon: ADRIANTWAROG
#figma #html #css
The design for this tutorial can be found below
Figma Design
https://www.figma.com/file/hcF21IJvr0GWaaKSOkawHv/Enhance-AI?node-id=0%3A1
Enhance AI tools
A series of tools to help solve coding problems, write content and more
👨💻 Enhance AI: https://app.enhanceai.ai/
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: https://www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: https://twitter.com/intent/follow?screen_name=adrian_twarog
💬 Discord: https://discord.gg/6gmmFvxkD7
💸 Patreon: https://www.patreon.com/adriantwarog
Software & Discounts:
🚾 Webflow: https://webflow.grsm.io/adrian
🌿 Envato: https://1.envato.market/yRZjz2
🌿 Envato Elements: https://1.envato.market/LP0OJZ
🔴 Elementor: https://elementor.com/adrian/?ref=23140
✖ Editor X: https://www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: https://amzn.to/3f9DOQI
⌨ Keyboard: https://amzn.to/3eA5UFD
🐁 Mouse: https://amzn.to/3xVJO8l
🎤 Mic: https://amzn.to/3hgCfms
📱 Tablet: https://amzn.to/3ewt7sa
💡 Lighting: https://amzn.to/3vOZeZY
💡 Key Lighting: https://amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: https://amzn.to/3uCv4J9
📸 Primary Lens: https://amzn.to/3vT6wMm
📸 Secondary Lens: https://amzn.to/3tyqWIX
🎥 Secondary Camera: https://amzn.to/3o2zCGi
🎙 Camera Mic: https://amzn.to/33tCz9l
🎞 USB to HDMI: https://amzn.to/33yW9RE
Видео Turning a Figma Design into a Real Website using HTML and CSS канала Adrian Twarog
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Make an Entire Layout Responsive in Figma - In 10 MinutesFrom Figma to CODE with Anima - Crash CourseFrom design to code - HTML & CSS tutorial [ part one ]Figma to HTML and CSS export | Create a responsive website from Figma to codeHTML and CSS Tutorial for 2021 - COMPLETE Crash Course!Figma To HTML Website AutomaticallyConvert Website Designs to Code Fast Using Anima App & Figma25 Cool Web Design Trends in 2021Web Developer Reacts to Beautiful Portfolio WebsitesFigma Crash Course 2021From Prototype UI Design to HTML, CSS & JS Tutorial5 simple tips to making responsive layouts the easy wayBest Tools to Convert UI to Code Instantly! | Design Essentials[FULL COURSE] How To Design A One Page Website From Scratch | Figma To Real WebsiteUltimate Tailwind CSS Tutorial // Build a Discord-inspired Animated NavbarFigma to Real App Quickly — This is Amazing! | Design WeeklyUI / UX Design Tutorial – Wireframe, Mockup & Design in FigmaFrom Figma to (Near) Pixel Perfect Frontends7 Design Portfolios that I MIGHT Rate a 10!