Javascript, Css, Html: Learn By Doing Small Projects (2025)

Fundamentals of JavaScript, CSS and HTML: Learn by doing small projects (2025)

What you'll learn

Understand core concepts of JavaScript explained in an accessible way

Create few basic JavaScript applications that will help you to create your own projects

Learn how to improve planning your next steps when creating an application

Find out where to find answers to your questions during coding and how to use documentation

Learn how to use MDN documentation

Requirements

Basic knowledge of any IDE (Visual Studio Code / WebStorm preferred)

Very basic knowledge about using computers

You don't need to have any programming knowledge. You will understand what is going on.

Description

I created this course for everyone who wants to start programming but feels overwhelmed by tutorials that last for hours on end. When there's too much material it's so hard to know where to begin, what’s important, and what to focus on. However, mastering the basics of a programming language is often enough to make every subsequent coding session much easier. At the beginning, we’ll quickly go through the basics of HTML, CSS, and JavaScript together, mainly to help you understand how to connect these technologies. Later, by building applications like a Drum Kit, Stopwatch, Task Checklist or Quiz you’ll learn programming through practice—arguably the best and most effective path to becoming a software engineer. You will also create an application that uses an external API to fetch and process data.This course is designed to teach you how to work with documentation and how to write your own applications step by step.You won't find advanced topics for senior developers here—there will be time for that later. Instead, you can expect well-explained fundamentals.I’m so happy to see you here! Don’t give up, and if you run into any issues, feel free to message me on Udemy. I’ll do my best to help you understand what’s going on more clearly.I believe in you and know you’ll achieve all your learning goals!

Overview

Section 1: HTML

Lecture 1 Introduction to course!

Lecture 2 HTML definition

Lecture 3 HTML template explanation

Lecture 4 Introduction to HTML elements

Section 2: CSS

Lecture 5 CSS- why do we need it?

Lecture 6 Box Model - why it's so important to understand

Lecture 7 Work with CSS classes and HTML elements

Section 3: JavaScript

Lecture 8 How to start with JavaScript; Intro to console.log() and alert()

Lecture 9 Introduction to variables: Const, Let, Var

Lecture 10 Introduction to events and addEventListener()

Section 4: Project 1: Drum Kit

Lecture 11 HTML template with element introduction

Lecture 12 HTML: introduction to "data-*" and elements

Lecture 13 JavaScript: passing keyPress event

Lecture 14 JavaScript: using play() from HTMLMediaElement API

Lecture 15 JavaScript: eliminating possible bugs, using currentTime()

Lecture 16 CSS: styling elements, using rem and vh

Lecture 17 CSS: add background and single buttons style

Lecture 18 CSS: add padding and set rgb color for keys

Lecture 19 CSS: using transform() property

Lecture 20 CSS: favicon

Lecture 21 CSS: add transition property

Lecture 22 CSS: work with transform & transition, use transitionend event

Lecture 23 Summarize and refactor

Section 5: Project 2: Stop Watch

Lecture 24 HTML: create HTML template

Lecture 25 JavaScript: create a functions placeholders, use timeInterval()

Lecture 26 JavaScript: implement startTime() and debug in the console

Lecture 27 JavaScript: use padStart() to update UI

Lecture 28 JavaScript: implement Stop and Reset for the clock; fix bugs

Lecture 29 CSS: add basic CSS to the project

Section 6: Project 3: Task Checklist (coming JANUARY 2025)

Lecture 30 Todo Application with LocalStorage data saving

Section 7: Project 4: API fetch (coming JANUARY/FEBRUARY 2025)

Lecture 31 Weather check Application with external API and Array() methods

Section 8: Project 5: Quiz! (coming FEBRUARY 2025)

Lecture 32 Introduction to Quiz! app and create an HTML Structure

Lecture 33 Work with CSS part_1

Lecture 34 Add JavaScript Logic

Lecture 35 Work with CSS part_2

Lecture 36 Work with CSS part_3

Lecture 37 Bug Fix

Lecture 38 Deploying and Wrapping Up

Beginner software engineers and application developers,Anyone who wants to learn by doing how JavaScript works,Anyone who wants to learn how to create first, small applications