50 Project in 50 Days | HTML, CSS & JAVA SCRIPT

Discover a project showcase overview featuring 50 days of HTML, CSS, and JavaScript projects from the course.

Install VSCode using the Microsoft Store on Windows or by downloading from the VSCode website. Then add HTML and CSS extensions, the JavaScript extension, and optionally the live preview plugin.

Create a hidden search widget in an HTML5 document, include doctype and viewport meta, link Font Awesome and a custom style.css, then wire input, button, and script.js for interactivity.

Build a hidden search widget with css and js, import Roboto, center content, and use an active class to expand the input, shift the button, and focus the field.

Create an unlimited jokes generator by building an HTML page with a container and joke display area, and a button that fetches new jokes via JavaScript using script.js.

Create script.js to fetch jokes from an API and display them on the page. Use element selection, a joke area, and a button to fetch a new joke via JSON.

Learn to build and style a jokes web page with a dedicated style.css, Roboto font, responsive container, dark green theme, typography tweaks, and an interactive get jokes button.

Build three CSS loaders in a single project by creating an HTML file with a spinner (two inner divs), a bouncer (four inner divs), and a square (two inner divs).

Create a style.css and apply universal selector with box-sizing border-box, then center a full-screen loader using flexbox. Build a spinner, a bouncer, and a square 3D flip loader with keyframes.

Create a blurry loading screen using HTML, CSS, and JavaScript by building the page structure, styling a blur background, and rendering a dynamic loading percentage.

Create and wire a JavaScript file to drive a loading animation by selecting the loading text and background, updating the percentage, and applying opacity and blur as the load progresses.

Create a css file, import ubuntu from Google Fonts, apply border-box sizing to all elements, center content with flex, and implement a blurry loading background with a cover image.

Create three types of ripple button effects in a beginner-friendly html, css, and javascript session, including setting up the project folder, index.html, and linking style.css and script.js.

Create a ripple effect by wiring Script.js to select .repl buttons, calculate click coordinates inside the button, inject a circle element at that position, and remove it after 500 ms.

Learn to build a css-driven demo by creating style.css, importing a Google font, defining css variables, and implementing a button ripple effect with a growing circle animation and hover interactions.

Build expanding cards in html using a container of panels with titles and content, styled by css and powered by script.js, and structure index.html with doctype, head, and meta tags.

Create a script.js to control expanding cards by selecting all panels, removing the active class from each, and toggling the active class on the clicked panel.

Import Google fonts and define color variables in root to establish a purple, white, and accent theme; style a responsive expanding cards interface with clickable panels, transitions, and content reveal.