
In this JavaScript Project you will create an I am not a robot teste by creating a JavaScript color randomizer. In this JS project you will also learn about the following JavaScript technologies:
DOM Document Object Model
getElementById
querySelector
querySelectorAll
addEventListener
Array
selecting from a array
array method (forEach loop)
Conditionals
if else
Math Object
.floor()
.random()
Booleans
true
false
Strings & Numbers
loop (for loop)
Function
regular function
Variables
let
const
classList
add()
remove()
Learn to build interactive web pages by using modern JavaScript, DOM selection, color generation, and form controls with event handling and dynamic styling.
Create a stopwatch using setInterval and clearInterval with start, stop, and reset controls. Manipulate the DOM by creating and updating laps, inserting elements, and applying css effects.
Create a stopwatch UI using HTML, CSS, and JavaScript. Build skeleton, link styles, import a Google font, and wire start, stop, reset with minutes, seconds, and milliseconds.
Learn to build an expandable search bar for navigation, manipulate the DOM with class toggling, and set up click event listeners using Font Awesome icons.
Build the project UI navigation with a dynamic search bar using HTML, CSS, and JavaScript, featuring resets, styling, and transitions that reveal the input on click.
Create a digital clock user interface using HTML, CSS, and JavaScript, style with Google fonts Poppins, center the clock, display time, and add a user focus input.
Build a dynamic clock in JavaScript using the Date object, format and update hours, minutes, and seconds with am/pm, display in the page, and customize greetings and background by time.
Learn to build animated navigation page using JavaScript and DOM manipulation, with event listeners and classList toggling for a hamburger menu that morphs to X, and explore conditionals and loops.
Learn to build an animated navigation menu with JavaScript by toggling active classes, blurring the page background, and adding staggered transition effects to the menu items.
Create a responsive user interface by importing Google fonts, applying font families, and styling a background image. Implement a typewriter effect with JavaScript and tune a container for responsive sizing.
Build a JavaScript typewriter effect by splitting text into an array and revealing characters. Use randomized delays, update the h2, and loop with setTimeout.
Build a simple login form with client-side validation using JavaScript, validating username and password, adding a forgot password email flow, and providing real-time visual feedback by DOM manipulation.
Learn to validate a login form by selecting the login container, username, password, and form, preventing default submit, and enforcing non-empty fields and minimum password length.
Create a tip calculator UI using Materialize, building a skeleton with a container, form groups, labels, inputs, and a service rating select, with dynamic tip and total results via JavaScript.
What is going on everybody!
Welcome to the 30 projects in 30 Days Course!
This is a Beginner friendly Project based Course with all modern features of HTML5, CSS3 and JavaScript!
If you are a intermediate web developer who wants to refresh his memory on some basic and also wants to cement his knowledge in the modern ways of HTML5 CSS3 and JS then this is the course for your. Also just having a different project per day for 30 days is a pretty nice challenge that I would strongly recommend.
All of the projects are created from Scratch, this means that we will write out all of the HTML CSS and JS complete from start to finish and I will explain each step I take as we move forward.
Although I did include a Couple of Front end CSS frameworks like Bootstrap and Materialize CSS, this are not overused and a purely meant to ease some parts of the project for you and simultaneously make you comfortable with their existence. I know as fact, that sooner or later you will encounter them, and they are actually pretty helpful and easy to use in some cases, so why not learn about them now.
As far as what kind of knowledge should you bring to this course before getting started, I would suggest some basic HTML CSS and some fundamental JavaScript knowledge.
Regarding the projects themselves, I do wish to menschen that some of them are short and simple and some of them are longer and more complex but still remaining within that Beginner to Intermediate Level. Also, most importantly all of them are useful in real life situations.
With this being said if this sounds interesting for you then I`ll be seeing you in the course!
------ For all Web Developers ------
This projects are a must for all Beginner Front End Web Developers and also perfect for a Portfolio !
------ Course Structure ------
So what are we building? 30 Projects as following :
I am NOT a Robot (Beginner project)
Stopwatch-Lap timer
Expandable Search
Digital Clock with interchangeable background img and focus section
Animated Navigation
Simple Typewriter Text Effect
Tabs Menu using data Attributes
Login Form Validation
Tip Calculator
Drag and Drop Cup Game - Find the Pea
Upload Progress bar
Text formatter
Simple Task List with Animations
Collapsible Accordion Tabs
Vertical Timeline
Test your Might- JavaScript Quiz Application
Background image gallery carousel
Simple Image carousel
Quote of the day-Random generator
Units Convertor
eCommerce sales Promotion countdown timer
Job Scout Website with Animated show hide buttons and text
Simple Project Manager
Create a Form using only the DOM
Random API Generator
Website with Dark Mode switch
Registry Form Validation using Regular Expression
Gaming Website with Expandable Cards
Storyteller with Autocomplete Text
Interchangeable Website Background Color
JavaScript is one of the top in demand programming languages and it is climbing to the very top!
Why Learn JavaScript ?
This is a simple to answer, go to google and type in the search bar "Top 10 programming languages" if JavaScript is in the top 5 then take the Course. Not convinced, then go to google and type in the search bar "The 10 most in-demand programming languages for developers at top companies" if JavaScript is in the top 5 then take the Course.
Who this course is for:
Learning JavaScript for the first time? Already using JavaScript and want to master the language? This course is for you!
This course if for anyone who wants to use JavaScript to launch an application, switch careers, or freelance as a JavaScript developer.
What is JavaScript ?
JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. .