Brook  Hudson

Brook Hudson

1625464740

Quiz App with Vue, Tailwind and Open Trivia API Part 1(A): Quiz UI Design with Tailwind

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue

You would learn

Setting up Vue with tailwind
Design the Quiz app UI
Dynamically change classes based on conditions
Fetch data from API
  1. Create and Style the User Interface. Part 1(A)
    In this video I would cover the design part of the quiz app, using tailwind. Starting with the tailwind set up.

Source Code: https://github.com/somteacodes/quizappvue
Timestamps
0:00-0:52 What we are building
0:52-2:25 Install Vue Cli and Create Project
2:25-7:52 Install and set up Tailwind CSS
7:52-12:37 Question section
12:37-23:28 Options section
23:28-24:45 Progress section
24:45-27:02 Timer section
27:02-27:40 Score section
27:40-33:49 Top image section
33:49-34:07 Next video introduction

Twitter: https://twitter.com/somteacodes
Remember to install VueDev tools, its a browser extension, so just google it

#quiz #vue #tailwind #trivia api

What is GEEK

Buddha Community

Quiz App with Vue, Tailwind and Open Trivia API Part 1(A): Quiz UI Design with Tailwind
Brook  Hudson

Brook Hudson

1625464740

Quiz App with Vue, Tailwind and Open Trivia API Part 1(A): Quiz UI Design with Tailwind

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue

You would learn

Setting up Vue with tailwind
Design the Quiz app UI
Dynamically change classes based on conditions
Fetch data from API
  1. Create and Style the User Interface. Part 1(A)
    In this video I would cover the design part of the quiz app, using tailwind. Starting with the tailwind set up.

Source Code: https://github.com/somteacodes/quizappvue
Timestamps
0:00-0:52 What we are building
0:52-2:25 Install Vue Cli and Create Project
2:25-7:52 Install and set up Tailwind CSS
7:52-12:37 Question section
12:37-23:28 Options section
23:28-24:45 Progress section
24:45-27:02 Timer section
27:02-27:40 Score section
27:40-33:49 Top image section
33:49-34:07 Next video introduction

Twitter: https://twitter.com/somteacodes
Remember to install VueDev tools, its a browser extension, so just google it

#quiz #vue #tailwind #trivia api

Juned Ghanchi

1621315250

Designing Mobile Apps using the latest UI Design Principles

The mobile technology world is growing at the speed of light, and the apps have become an integral part of our daily life. We can now see an influx of technology with tools that can help create mobile apps. All of them are becoming more accessible and hence people are getting on their first app making journeys. Since the mobile app industry is getting bigger and better than ever, businesses from all corners of the world are trying to develop mobile apps for their operations and marketing. Designing a mobile app for businesses is the first step, though. Company owners are in charge of the basic look and feel of the designed product. With a brilliant mobile app design, one can establish a relationship between app and user very well.

Read Blog Here: https://www.indianappdevelopers.com/blog/designing-mobile-apps-using-latest-ui-design-principles/

#designing mobile apps #ui design principles #mobile ui design #mobile app design #ui design #app design

UI/UX Design Principles: Guide to Perfect App Designing Process - TopDevelopers.co

Following the app design process and UI/UX design principles rightly guide UI/UX designers to purvey app designs that help in developing efficient mobile apps.
In this article, we will discuss a perfect app designing process that will help you build a mobile app with a great design that attracts the targeted audience and increases user engagement, hence boosting the conversion rate for an app.

#role of ui & ux design in app development #app design tips to follow #ui/ux design strategies #app designing process #ui/ux designers #ui design

UI/UX App Design Company

AppClues Infotech is one of the leading UI/UX mobile app design company in the USA. We create dynamic, creative & professional UI/UX mobile app design for your business.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#ui/ux app design company #mobile app design company #hire ui/ux mobile app designer #hire mobile app designer #best mobile app design company #top ui/ux design company

Brook  Hudson

Brook Hudson

1625461080

Quiz App with Vue, Tailwind and Open Trivia API Part 1(B):Custom Tailwind CSS Classes

Build a Quiz App with Vue and Tailwind. An intermediate level project for learning vue

You would learn

Simplify your design
To group classes /styles in Tailwind
Plan ahead for API

  1. Create and Style the User Interface. Part 1(B)
    In this video I would cover how to group styles and make the options look different by just changing one (1) class name

Source Code: https://github.com/somteacodes/quizappvue
Timestamps
0:00-0:34 What we are building
0:34-3:12 Add custom css and group class
3:12-6:39 Group classes for default option
6:39-8:55 Group classes for wrong option
8:55-10:22 Group classes for correct option
10:22-11:17 Class name cleanup
11:17-14:00 Use same option for different option state
14:00-14:15 Outro

Remember to install VueDev tools, its a browser extension, so just google it

=======Reach me=======
Twitter: https://twitter.com/somteacodes
Email: somteacodes@gmail.com

#quiz #vue #tailwind #trivia api