Beginner UI and Angular Workshop
A workshop for UI and Angular beginners alike!
Join the Beginner UI & Angular Workshop with developer advocate, Alyssa Nicoll, as she brings you into the wonderful world of UI & shows you how to navigate it not only effectively but with style. 😏
You're going to pull down the Tour of Heroes app (written by John Papa and found throughout the Angular docs) and give it a UI upgrade! All you will need is a laptop and your favorite data set!
In the Beginner UI & Angular Workshop, Alyssa & co-host Kathryn will cover:
• Dive into the Tour of Heroes demo application like never before!
• Learn about integrating SASS into your Angular Project.
• Learn how to include a Component Library into your Project. (We will be using Kendo UI but the principles to implement a UI Library are pretty universal.)
• Play around with customizing styles and writing custom CSS from scratch.
• Go over UI/UX principles and implement them on the fly.
=========
Resources
=========
➡️ Agenda doc file: https://prgress.co/43SA5zp
➡️ Clone down the GitHub Repo: https://github.com/alyssamichelle/ang...
➡️ Or open in StackBlitz and Fork: https://stackblitz.com/github/alyssam...
➡️ Naming Font Size Variables: https://css-tricks.com/the-dilemma-of...
➡️ Kendo UI Docs: https://www.telerik.com/kendo-angular...
➡️ Basic TOH Final Repo: https://github.com/alyssamichelle/ang...
🎨 Color resources:
➡️ https://colorhunt.co/
➡️ https://color.hailpixel.com/
Slides:
➡️ https://prgress.co/3USB3rt
Demos & sample apps:
🦄 Alyssa's Kendo UI Tour of Heroes demo app:
➡️ https://github.com/alyssamichelle/kui...
🧡 Kendo UI for Angular sample apps:
➡️ https://www.telerik.com/kendo-angular...
==========
Timestamps
==========
00:00 - Intro
01:00 - Clone down the GitHub or Stackblitz Repo
03:00 - Angular Basics - Beginner Deeper Dive
10:00 - Angular definitions
15:00 - Mini tour of the app (Tour of Heroes)
27:50 - Custom CSS - Let's start customizing!
47:50 - Variable Files & Reusable Styles - Including SASS in your Angular app
56:45 - SASS vs CSS
01:29:07 - CSS Custom Properties
01:50:14 - Installing & Using a 3rd party library - Kendo UI
01:53:00 - Kendo UI for Angular Data Grid Overview
02:04:32 - Install Card component
02:16:47 - Kendo UI Tour of Heroes demo app
02:19:57 - Custom components
02:26:40 - Customizing the app in Stackblitz
02:40:50 - Mini promo time
02:41:47 - Outro
----
Follow us on social and say “Hi!”
🐦Twitter: @KendoUI / / kendoui
👥Facebook: / kendoui
🎙️Catch up with our streamers & guests on social media!
Follow Kathryn @kathryngrayson
Follow Alyssa @alyssanicoll
==========
SUBSCRIBE
==========
KendoUI on YouTube: / kendouichannel
#Angular #javascript #ui
