30 HTML CSS & JavaScript Projects A Beginner’s Guide to JS
Last Verified on September 5th, 2024
Course Name : 30 HTML CSS & JavaScript Projects A Beginner’s Guide to JS
Short description : 15K+
Duration : 16 hrs
Avg Rating : 4.7
Original Price : $119.99
Discouont Price : 100%OFF
Instructor / Provider : Udemy
Course Type : Self Paced Online Course. Lifetime Access
Course Structure:
So what are we building? 30 Projects as follows:
Day 1: Speech-to-Text Project: Create a project where users can speak into their device’s microphone and have their speech converted into text.
Day 2: Piano Application: Develop a virtual piano application where users can play musical notes and chords using their keyboard or mouse.
Day 3: Text-to-Voice Application: Build an application that converts written text into spoken words, allowing users to listen to the text they input.
Day 4: Robot Joke Generator: Craft a project that generates random jokes delivered in a robotic voice or text format.
Day 5: HSL Color Generator: Develop a tool that generates colors using the HSL (Hue, Saturation, Lightness) color model, allowing users to customize and preview colors.
Day 6: Modal Application: Create a modal popup window that displays content or messages over the main application interface.
Day 7: Digital Clock: Design a digital clock that displays the current time and updates in real-time.
Day 8: Color Flipper: Build a project that randomly selects and displays colors, providing users with a fun and interactive way to explore different color combinations.
Day 9: Percentage Calculator: Develop a calculator application capable of calculating percentages for various mathematical operations.
Day 10: Calculator Application: Create a fully functional calculator application with support for basic arithmetic operations.
Day 11: Read More Less: Implement a feature that truncates long blocks of text and provides a “Read More” button to expand and collapse the text content.
Day 12: Star Rating: Design a star rating component that allows users to rate service by selecting a certain number of stars.
Day 13: Animated Counter: Develop a counter that animates when the webpage loads.
Day 14: Hex to Binary Converter: Build a tool that converts hexadecimal numbers to binary numbers.
Day 15: Awesome Cursor: Customize the cursor on a webpage with creative and interactive effects to enhance the user experience.
Day 16: Quick URL Application: Create a project that saves URLs for quick access to the website content.
Day 17: Typing Text Effect: Implement a typing effect where text is gradually revealed as if it were being typed in real time.
Day 18: Image Comparison Slider: Design an image slider that allows users to compare two images side by side using a draggable slider.
Day 19: Search Functionality: Develop a search feature that allows users to input queries and retrieve relevant results from a dataset.
Day 20: Words Counter: Build a tool that counts the number of words, characters, and sentences in a given text input.
Day 21: Dynamic Color Changer: Create a feature that dynamically changes the background color of a webpage based on user interaction or predefined triggers.
Day 22: Box Shadow Generator: Design a tool that generates CSS box shadow effects with customizable parameters.
Day 23: Image Carousel Project: Develop an image carousel or slideshow component that displays a series of images in a transition fashion.
Day 24: Browse Image File Upload: Implement a feature that allows users to upload images from their device’s file system.
Day 25: Fun with String: Create a project that performs various string manipulation tasks such as reversing and counting strings.
Day 26: Money/Cash Calculator: Build a calculator application specifically designed for performing financial calculations involving currency or cash amounts.
Day 27: Age Calculator: Develop a tool that calculates a person’s age based on their date of birth and the current date.
Day 28: Awesome Finance Deposit Calculator: Design a calculator for calculating compound interest.
Day 29: Body Mass Index Calculator: Create a calculator application that calculates a person’s body mass index (BMI) based on their height and weight.
Day 30: A Loveable Love Calculator Application: Craft a fun and lighthearted application that calculates the compatibility or “love score” between two individuals based on their names or other inputs.
Who this course is for:
- Beginner developers who want to create a solid portfolio
- Beginner front-end developers who want to create a solid portfolio
- Beginner HTML CSS and JavaScript developers
- Beginner web developers
- Beginner JavaScript developers
- JavaScript developers looking for portfolio projects
- Learning JavaScript for the first time? Already using JavaScript and want to master the language? This course is for you!
- This course is for anyone who wants to use JavaScript to launch an application, switch careers, or freelance as a JavaScript developer.
