Starting from scratch to build a todo app using Vite, HTML, CSS, & Zeplin

In this episode of Building with Ben, we will be taking on the TodoMVC app, but with a twist of using our own custom design while also using Vite and Zeplin to speed up our development process.

🏷 Bookmarks
0:00 - Intro
0:35 - Background
1:48 - Setting Up the Project with Vite
5:48 - Building the Header and New Task Input
19:38 - Applying the Design
30:13 - Building the Navigation Filters
42:05 - Building the Task Items
1:08:44 - Outro

🔗 Links:

[elenakout]

Really cool to watch your thought process and making all the small decisions, also the git commits. Every tutorial should include those little but imortant things. Excellent content. Thank you so much really usefull tutorial!!

[codingwithmartin]

And it's not even Wednesday! Yay! Can't wait for part 2 and see how you use Vue3 to hook up the functionality. Also looking forward to how Vite is going to work in a real application. Will you also be live streaming on Wednesday?

[hackwithharsha]

Thank You, Awesome video for taking through everything from design to implementation..

1) 00:51:09 - How you are getting that clipboard history.. is it Alfred App ?, Yes, This is an Alfred Application..

2) 00:52:04 - I have seen people building components without registering local components through Vite.. If you use <script setup> where your whole script essentially acts as the setup method, and everything is auto exported. I have got this suggestion from Learnvue.co YouTuber.

3) 00:57:19 - Will there be any plugin or extension in vs-code to sort these imports alphabetical wise ? Yes, we do have an option in vs code called 'sort lines ascending` in vs code.. select the imports and go to command palette and choose `sort lines ascending` option..

I have some questions like above and then answered by myself after some googling. share your thoughts, if you have any suggestions..