dailyUI eleftheria batsou

Objective: Create 25 projects based on a particular theme. 

Technologies: HTML, CSS, JavaScript, AngularJS, MaterialUI

Duration: 25 Days (+ the weekends)


► This article includes days 26-54. (For days 1-25 please click here)

► For each day you'll find the theme, the pen, a video tutorial, and some additional information.



“Daily UI is a series of daily design challenges design inspiration and neat surprise rewards.” — https://www.dailyui.co



Days 26 to 31: Subscribe form

  • ⇒ Themes: Day 26 - Subscribe | Day27- dropdown | Day28 - Contact Us | Day 29 - Maps | Day30 - Pricing | Day31- Upload file
  • ⇒ Design Hint: Day 26 - Design a subscribe form, button, widget, etc. What type of information are you looking to capture from the user? Their name and email? Their zip code? Something else? Day 27 - Design a dropdown element. Is it a menu dropdown? Or a tip that’s dropped down during a tutorial? Day 28 — Design a Contact Us page or form. Is it for customer support? A purchase inquiry? To schedule an appointment? Think about a scenario and the most important feature it would require. Day 29 — Design a map. Not one of those old school paper ones though. Ok, that might actually be kinda neat too. ;) What type of features should it have? Should its color scheme compliment the brand the map is designed for? Day 30 — Design something related to pricing. Is it a pricing table? A restaurant menu with pricing? Day 31 - Design a file upload element. Is it the loading screen and icon? A progress element? Are folders being uploaded by flying across the screen like Ghostbusters?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Helpfull Project | Image used
  • Codepen | Github


Day 32: Crowdfunding Campaign

  • ⇒ Theme: Crowdfunding Campaign
  • ⇒ Design Hint: Design a crowdfunding campaign. Keep in mind the purpose… raising funds. It’s important to make it compelling if you’re seeking money.
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Inspiration Image used
  • Codepen | Github


Day36: EMI Calculator

Days 37 to 38: Local Weather and Date

  • ⇒ Themes:Day 37 —Weather| Day38 - Calendar
  • ⇒ Design Hint: Day 37 — Design something related to weather. It could be a UI for a mobile app a web app, or something completely different such as a weather alert widget. Consider its elements: city, temperature, forecasts, colors, weather icons/graphics, etc.. Day 38 — Design a Calendar focused element. Is it for scheduling an appointment? A reservation, flight, hotel, or concert calendar? Is it a calendar reminder feature? For email or something else entirely?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Helpfull Project
  • Codepen | Github

Days 39 to 40: Cookies

Days 41 to 54: Workout Tracker

  • ⇒ Themes: Day 41— Workout Tracker | Day42 — ToDo List | Day43 -Food/Drink Menu | Day44 — Favorites | Day45 — Info Card | Day46 - Invoice| Day47 — Activity Feed | Day48 - Coming Soon | Day49 -Notifications| Day50 — Job Listing| Day51- Press Page| Day52- Daily UI logo| Day53 — Header Navigation| Day54 — Confirm Reservation
  • ⇒ Design Hint: Day 41 — Create a UI related to monitoring health or tracking various workout/training routines. It could be for a personal workout, for a team, or even gym equipment tracking someone’s workouts. Day 51 — Create a Press Page. Think about who you are representing and what important information you should convey. Is it for a new startup? A huge global brand? A nonprofit organization? Or a small local business? Or is it actually for a person such as a celebrity, athlete, politician, etc.?
  • ⇒ Technologies: AngularJs, AngularJS Material
  • Design the logo | Basic AngularJS templateHelpfull Project
  • Codepen | Github


Thank you.