Тёмный

Account Creation with Basic Validation Part 1 | Figma UI Design to HTML CSS JS Tutorial 

Angela Design
Подписаться 46 тыс.
Просмотров 5 тыс.
50% 1

Watch Part 2 here: • Account Creation with ...
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this two part series I go over how to create this Account Creation Form with Basic Validation using HTML, CSS and Vanilla JavaScript. In this first part tutorial show you how I used the Figma design to define the structure of the elements in HTML and then I write all of the styling and effects with CSS. I use a combination of CSS Grid and Flexbox for the layout. Stay tuned for the part 2 tutorial where I will take the current design and add Vanilla JavaScript to complete basic validation.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
Codepen: codepen.io/angeladelise/pen/m...
In this video I show you:
0:00 - Intro
0:43 - Starting Code
1:23 - UI Design Review
2:41 - HTML Code
5:43 - CSS Code
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Наука

Опубликовано:

 

13 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 47   
@harishst202
@harishst202 3 года назад
Hi Angela, Thank you for sharing this tutorial! Especially, from UI Design to UI Development, that will help lot of beginners like me. Thanks again for your nice tuts...
@angeladesign737
@angeladesign737 3 года назад
Glad it was helpful!
@david_ramoraswi1711
@david_ramoraswi1711 3 года назад
this is by far the video that made a lot of sense to me compared to the many more i have seen,i just became a subscriber, lol.thank you for taking your time to inform us
@angeladesign737
@angeladesign737 3 года назад
Thank you! I'm glad it was helpful!
@angladephil
@angladephil 3 года назад
This has be done many, many times, but not with a such lovely voice ! Thank you !
@angeladesign737
@angeladesign737 3 года назад
Thanks!
@dripiece6510
@dripiece6510 3 года назад
Hi Angela, I love your designs, I am learning and understanding many things that were not very clear to me before. You are amazing! Thank you and keep it up!
@angeladesign737
@angeladesign737 3 года назад
Thank you so much!
@pratikwadekar4981
@pratikwadekar4981 3 года назад
I always wondered how design handoffs are done to developers and how developers incorporate those designs in code 🥺 and your channel explains this very well. And I think I've found the correct channel to understand design to development.✌🏻
@angeladesign737
@angeladesign737 3 года назад
Thank you so much Pratik!
@emmanuels.emokor3783
@emmanuels.emokor3783 3 года назад
You are a great designer, Angela!
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@mzbzhui1903
@mzbzhui1903 3 года назад
Thanks,your voice sounds so sweet~
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@geryardmon7523
@geryardmon7523 3 года назад
Beautiful and interesting, Thank you Angela
@angeladesign737
@angeladesign737 3 года назад
Glad you enjoyed it!
@abhijitbarman4401
@abhijitbarman4401 3 года назад
Thanks RU-vid for bring to me this video ❤️❤️❤️
@angeladesign737
@angeladesign737 3 года назад
🎉
@monumohan7473
@monumohan7473 3 года назад
You're amazing 👍💐💐 , i will give support on your all videos .
@angeladesign737
@angeladesign737 3 года назад
Thank you so much 😀
@ben-cb5er
@ben-cb5er 3 года назад
Another great content!! nothing beats a good tutorial while having morning coffee! :D could you please do some html/css to build a full website pleaseeeeeeee haha you probably thinking ohh not this guy again lol have a good day
@angeladesign737
@angeladesign737 3 года назад
Thanks Ben! It is on my to do list!
@romainchristophe1796
@romainchristophe1796 3 года назад
Hi, perfect tuto, thanks.
@angeladesign737
@angeladesign737 3 года назад
Glad it was helpful!
@israelmedinagalicia
@israelmedinagalicia 3 года назад
Excelent video Thks !!!! more about svg
@angeladesign737
@angeladesign737 3 года назад
Thank you!
@95tbf
@95tbf 3 года назад
Very helpful
@angeladesign737
@angeladesign737 3 года назад
Glad it helped!
@johncooter6483
@johncooter6483 3 года назад
Thanks ❤️
@angeladesign737
@angeladesign737 3 года назад
Thanks for the comment John!
@kirillpopov6401
@kirillpopov6401 3 года назад
Thank you)
@angeladesign737
@angeladesign737 3 года назад
Glad it was helpful!
@joelcampos8004
@joelcampos8004 3 года назад
Thanks Ángela
@angeladesign737
@angeladesign737 3 года назад
Thanks for the comment Joel! Happy it was helpful
@sencerdurdu3814
@sencerdurdu3814 3 года назад
Hello, thanks for sharing. It makes the work of color choices look very beautiful. How should we create the color palette in general? can you make a video about it?
@angeladesign737
@angeladesign737 3 года назад
Great topic for a future video, thanks!
@kvncnls
@kvncnls 3 года назад
Hey Angela, do you have a Twitter/IG with your designs? Also, which do you like more? Sketch or Figma? :P Great video!
@angeladesign737
@angeladesign737 3 года назад
I have a Dribbble account: dribbble.com/angeladelise/shots I like both of them! I've been using Sketch for years so that's been my go-to; although Figma is great! I really like their animating and prototyping features.
@DavidAshby1
@DavidAshby1 3 года назад
Hi Angela, you ask for suggestions for future tutorials, how about whilst using grid a panel, say left side panel, navigation, on toggle goes off screen
@angeladesign737
@angeladesign737 3 года назад
That's a great suggestion! In this video I go over how to create a side navigation bar but I did not use grid for the layout: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-85IwYbHCkBM.html
@DavidAshby1
@DavidAshby1 3 года назад
@@angeladesign737 I find your tutorials easy to follow and so thought if this and my previous suggestion interested you I would have more chance of getting to grips with both. Thanks for the tutorials by the way.
@ibrahimyahyaoui6124
@ibrahimyahyaoui6124 3 года назад
Thanks but we need a tutor for CSS position
@angeladesign737
@angeladesign737 3 года назад
Great video topic!
@johncooter6483
@johncooter6483 3 года назад
Is javascript and vanilla javascript different ?
@kvncnls
@kvncnls 3 года назад
No, "Vanilla" JavaScript is basically a way of saying "plain" or "normal". It's just normal JavaScript with no frameworks/libraries on top.
@jizan8344
@jizan8344 3 года назад
I'm here with my first comment
@jizan8344
@jizan8344 3 года назад
I will happie, if you accept my connection request in LinkedIn 🤟🏼😇
Далее
Nobody Can Do it🚗❓
00:15
Просмотров 6 млн
Responsive Profile Card | Figma to HTML & CSS
15:44
Просмотров 15 тыс.
Dropdown Navigation Menu with Flexbox
13:33
Просмотров 40 тыс.
Are you using the right CSS units?
6:30
Просмотров 446 тыс.
JavaScript Client-side Form Validation
29:07
Просмотров 710 тыс.
This Simple Trick Makes Your Website 83% Better Looking
10:57
The secret to mastering CSS layouts
17:11
Просмотров 270 тыс.
Игровой Комп с Авито за 4500р
1:00
Собери ПК и Получи 10,000₽
1:00
Просмотров 2,5 млн