If you haven’t heard about vite already, it’s a new developer tool to build your JavaScript projects. We’re going to be using yarn but you’re free to use npm. Let’s start by opening a terminal and typing: yarn create @vitejs/app And you can start the development server with: yarn yarn dev The first line downloads all the JavaScript dependencies the second one starts it, but wasn’t that fast? If you’ve been using vue-cli or just plain old Webpack this is way faster.

Welcome to our fourth part of this tutorial. In part 1 we setup our environment and start building with just HTML and CSS. On part 2 we start using JavaScript and make our app functional. On part 3 we introduce CSS Transitions and Animation. On part 4 we’re going to introduce ParcelJS, but before we do that we’ll first put the CSS and JavaScript into separate files and reference them from our index.

On our previous post we worked on making our TODO App functional. On this part of the tutorial we’re working on adding some CSS Animations and Transitions to make our app a little more user friendly. Let’s start by adding transition rules to our CSS: ul#todos>li { overflow: hidden; height: 0; margin: 0; opacity: 0; transition: all 0.4s ease-out; } ul#todos>li.show { height: 2em; margin: 2px 3px; opacity: 1; } We modified the first set of rules ul#todos>li.

So on our previous post we started working on our TODO app that looks like: But it doesn’t do nothing just yet. And that’s what we’re going to work on now. The same goes for JavaScript as for CSS, we can inline it on the page but when it gets too big, is better to create an external file and reference it. We’re inlining it for now, so have your index.

This is a set of tutorials that I’m building to teach my son how to code (hope you like them Daniel). In this tutorial we’re going through the steps of creating a simple TODO app, but also of setting up our environment to help us make that app. Let’s start by setting up our IDE. We’re going to use Visual Studio Code (VS Code). Download it and install it. Open it Press Ctrl+Shift+P (Command+Shift+P on a Mac) to open the command palette Type shell in the command palette.