Master JavaScript, HTML, and CSS with 30 Projects in 30 Days

Develop the invalid input shape project, validate inputs, and display error messages on submit, then switch the input font color from white to black as the HTML portion begins.

Create a simple form in VS Code with index.html, style.css, and script.js, featuring a text input and a submit button that validates input and triggers the shake on invalid input.

Learn to build and style a centered form with a blue theme, reset styles, and error messaging, then implement an invalid input shake animation with css and javascript.

Create a validate input function that reads and trims the input, then shows a shake and error message when empty, with a 500 ms hide and a valid alert.

Build a box shadow generator app by adjusting horizontal and vertical shadows, blur, spread, color, and opacity with range sliders, plus copy and insert shadow property (z) features.

Set up the box shadow generator in html, link style.css and script.js, and build a container with sliders, color inputs, and a copyable code area.

Style the CSS project by updating the style.css, set the body and container colors, borders, and shadows; build a box shadow generator with sliders, grid layouts, and a styled button.

Learn to implement a javascript-driven box shadow generator: bind sliders to shadow parameters, convert hex to rgba with opacity, support inset shadows, and enable copy-to-clipboard of the generated css.

Preview course module builds a notes app with add and double-click delete, local storage persistence, keyboard shortcuts for adding notes, hover animations, and a shift toward HTML basics.

Create the notes app scaffold in index.html, link style.css and script.js, and preview with go live server in Chrome, then add a text area for notes.

Apply a gradient background, zero body margins, and a cursive font to style the notes app; implement a grid layout with a textarea and button, including hover and focus effects.

Build a JavaScript notes app by creating and rendering note elements, handling add, delete (double-click), and update (input) actions, and persisting notes in local storage with get/set items and JSON.

Build a real-time PhD calculator app with sliders for invested amount, rate of interest, and time period, and preview its HTML implementation in the next lecture.

Build a html calculator in vscode by wiring range sliders for total investment, rate of interest, and time period, and display invested amount and total value with a calculate button.

Master CSS techniques to build and style a responsive calculator interface, including gradient cards, animated backgrounds, styled inputs and range sliders, and button hover effects.

Learn to build an interactive fixed-deposit calculator with JavaScript by wiring three sliders (investment, interest rate, time), live-updating displays, and a formula-based FD calculation with rupee formatting.

Learn to build a dynamic gradient generator web app that changes gradient direction, copies gradient code, and updates background colors, using a card layout and Font Awesome icons via Cloudflare.

Build the HTML for a gradient generator by creating a container with color inputs, direction buttons, a generate button, and an output area with a copy function.

Learn css essentials to build a gradient generator: reset styles, center a white container, add a slide-in animation, style color inputs and buttons, and prepare the output area for interaction.

Build a functional gradient generator in JavaScript by wiring color inputs, direction controls, and a live code output to style the page background and copy the gradient code.

Build the BMI calculator app with age, gender, height in cm, and weight in kg inputs, sliders updating values live, a calculate BMI button, and comparisons to real-world results.

Build html for a BMI calculator inside a container with age input, gender radio options, height and weight inputs, a calculate BMI button, and outputs for BMI value and category.

Master CSS styling for the BMI calculator app with a gradient body background, centered layout, translucent container, and polished inputs, labels, and buttons; prepares for the JavaScript next.

Build a BMI calculator app in JavaScript that uses range sliders for height and weight, validates inputs, computes BMI, and shows the category (underweight, normal weight, overweight, obese).

Builds a tip calculator app that computes tip amount, total bill, and per person totals using a bill input and sliders, ideal for restaurant tipping.

Build a tip calculator UI in HTML by structuring a container with sections, wrappers, labels, inputs, and spans for bill, tip, and total per person.

Apply css styling to a tip calculator project, including a gradient container, centered layout, labeled inputs, range sliders, and slide-in and fade-in animations with color transitions.

Learn to build a JavaScript tip calculator by wiring two range sliders and a bill input, calculating total tip, total amount, and per-person values in real time.

Build the blob maker app in this module, featuring a purple background, card-like layout, and sliders to control the blob's appearance, with live code updates and copyable CSS.

Build a blob maker HTML interface with a wrapper, output area, and dimensions panel, then add four sliders, a read-only css code field, and a copy button.

Explore CSS basics by building the blob maker user interface: reset styles, center a white wrapper, style the output panel with gradients and shadows, and craft responsive sliders and inputs.

Create a blob maker with JavaScript by wiring sliders to update the border-radius, height, and width, display the generated code, and copy it to the clipboard.

Build a basic image editor with sliders to control blur, contrast, hue, and rotate, plus a sepia option, flip controls, and image download.

Build an HTML image editor interface with a wrapper, editor, and filter sections, featuring sliders for blur, contrast, hue-rotate, and sepia, plus flip options and upload and download controls.

Master creating a CSS part of an image editor UI by resetting browser styles, styling a centered wrapper with gradient background, custom sliders and radios, and a right-side result pane.

Learn to build a basic image editor using JavaScript, HTML, and CSS with four sliders for blur, contrast, hue-rotate, and another filter, plus flip controls and download via canvas.