Vanilla JavaScript, HTML, and CSS | Beginner Tutorial 2023 | Code with Beto

In this video, I teach you how to build a To Do List app using only JavaScript, HTML, and CSS, with no frameworks or external libraries. It is built for beginners who want to understand DOM manipulation, events, and responsive styling from scratch.

You will see how to create the basic files, structure HTML with semantic tags, add inputs and buttons, and use JavaScript to create, display, and delete tasks dynamically. I also cover enabling and disabling the button based on input and making the app look good on mobile.

What's inside

Introduction and setting up Visual Studio Code
Creating and structuring the HTML file
Semantic tags and app containers
Adding input and button with attributes and initial styles
DOM manipulation to create and delete tasks dynamically
Event handling to enable/disable the button based on input
BrowserSync for automatic reload during development
Responsive CSS and simple animations

Introduction and setting up Visual Studio Code

I start by preparing your dev environment. We create a folder on the desktop and open it in Visual Studio Code with . If you do not have VS Code, I recommend installing it.

I also show creating files from the terminal or manually and navigating folders with and . Good folder structure matters before you write code.

Creating and structuring the HTML file

We create with the basics: , , with UTF-8 charset and title, and for visible content.

The matters for SEO and the browser tab title. This foundation applies to any web project.

Semantic tags and app containers

In , we add a main container . A has no semantic meaning, so IDs or classes are important for CSS and JavaScript.

Semantic tags improve accessibility and SEO, but a simple works as the main wrapper for this app.

Adding input and button with attributes and initial styles

We add a text with placeholder "Enter your to do" and a "Save" button. Both get IDs for JavaScript.

The input is self-closing and the placeholder shows when empty. CSS makes the input wider for better UX.

DOM manipulation to create and delete tasks dynamically

JavaScript listens for button and input events. When the user types and clicks Save, we create a new inside an ordered list .

Each task gets a delete button. Clicking delete removes that element from the DOM with event listeners attached dynamically.

Event handling to enable/disable the button based on input

The Save button stays disabled when the input is empty and enables when the user types. That prevents empty tasks and improves usability.

A simple animation on the button makes active and disabled states clearer visually.

BrowserSync for automatic reload during development

BrowserSync reloads the browser when you save files, so you do not refresh manually. The start command is long but you run it once.

Changes show up instantly, which speeds up iteration.

Responsive CSS and simple animations

CSS makes the app look good on phones and tablets: full-width container and elements that adapt to screen size.

Simple animations on the button and tasks make the app feel more polished. That is HTML, CSS, and JavaScript working together.

Resources

CourseReact (web) course

Learn React from scratch and level up your web development skills.

Premium resourcePro membership

Access exclusive tutorials and advanced projects for web developers.

Let's connect!