100+ Project Ideas for JavaScript Beginners

With my busy schedule, I was looking for some quick updates about Web Dev, JavaScript, Python & ML.

My search ends with @DevBytesApp. It summarises complex Dev concepts in only 64 words!

It's FREE to use, No Login. Highly recommend it.

Download the app: bit.ly/3D15nHq
🚥 How to approach this thread?

⬘ Few projects require a UI. HTML & CSS skills are required for those

⬗ Try to proceed in the order I listed these projects. They range from Simple upto Complex.

⬙ Based on these, bring your own ideas. Practice & Share. Do not STOP

Let's Go.
➊ Unit Conversion

➀ Currency
➁ Weight
➂ Height
➃ Temperature
➄ Distance
➅ Area
➆ Volume
➇ Time
➈ Numbers (Binary, Octal, Hexadecimal)
➉ Color Code (RGB to HSL)
➋ Calculation

➀ Basic Calculator
➁ Scientific Calculator
➂ Loan EMI Calculator
➃ Fixed Deposit Returns Calculator
➄ Interest Calculator
➅ BMI Calculator
➆ Item Price (considering tax, discount, shipping)
➇ Tip Calculator
➈ Word Count
➌ Clock

➀ Analog Clock
➁ Digital Clock
➂ World Clock
➃ Localised Clock (based on Timezone)
➄ Stopwatch
➅ Timer
➆ Counter (specific seconds)
➇ Hello Message based on time of day
➈ Display Day of Week
➍ Random Generator

➀ Message
➁ Quote
➂ Joke
➃ Eminent Personality
➄ Twitter Profile
➅ Food
➆ Book
➇ Movie
➈ Song
➉ Color
➀➀ Shape
➀➁ Touring Spot
➀➂ Stock
➎ UI

➀ Generate Color
➁ Generate Gradient Color
➂ Accept a text, return a message
➃ Image Slider
➄ Image Carousel
➅ Flash Cards
➆ Square Cards
➇ Sticky Notes
➈ Typewriter style Writing
➉ Contact Form
➀➀ Form validation
➀➁ Modal Popup
➀➂ Sticky Navigation
➀➃ Accordion
➀➄ Tooltip
➀➅ Background Colour Switcher
➀➆ Dark Mode/Light Mode Theme
➀➇ Star Rating
➏ Game

➀ Tic Tac Toe
➁ Rock Paper Scissor
➂ Balloon Popping
Pop the Balloon by moving mouse over them
➃ Coin Toss
➄ Snake Ladder
➅ Dice Game
➆ Guess a Number
➇ Word Guessing
➈ Math Calculation
➉ Whack-a-mole!
➐ API

➀ Unsplash API
➁ Weather API
➂ IMDb API
➃ Wikipedia API
➄ Marvel API
➅ Github API
➆ Recipes
➇ Restaurants
➈ RSS News Feed
➉ Twitter API
➀➀ Words API
➀➁ Google Translate API
➀➂ Dictionary
➀➃ Text to Speech
➀➄ Any Stock API
➀➅ Crypto Price API
➀➆ Currency Exchange
➀➇ Covid-19 API
➑ App

➀ Quiz
➁ TODO List
➂ Notes List
➃ Grocery Tracker
➄ Monthly Budget
➅ Shopping Cart
➆ Digital Course App
➇ Music Player
➈ Video Player
➒ Clone

➀ YouTube
➁ Spotify
➂ Quora
➃ Twitter
➄ Reddit
➅ Flipkart
➆ Amazon
➇ Netflix
⚠️ Repost Notice ⚠️

⬘ Though this is my original work, many of these project ideas were previously posted by me in [CHIRPBIRDICON]

⬙ If you liked this content and do feel others might learn from it, please support.
💭 Feedbacks

✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?

Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.
End of 🧵

Hey 👋 I am a Tech Educator from India 🇮🇳

I am sharing Tutorials, Tips, Infographics, Cheat Sheets, Interview Questions, Project Ideas, and Roadmaps on Web Development, DSA and, Database.

Are you interested? I am sure, you are.

To never miss anything, Follow Me ✅

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Swapna Kumar Panda 

Swapna Kumar Panda  Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @swapnakpanda

Mar 27
JavaScript Interview Questions

Series: ➍
Level: Beginner
Topics:

➊ Variable Naming
➋ Variable Declaration
➌ Variable Scope
➍ Assignment Operators
➎ Bitwise Operators
🚥 Disclaimer

⬖ The questions covered here are mostly conceptual.
⬘ I never claim only these type of questions are/should be asked during interviews.
⬗ For interviews, you should have fundamentals strong. And you should be able to provide solutions to practical problems.
Read 14 tweets
Mar 25
Practice 50+ "Difference" Questions

❍ HTML
❍ CSS
❍ JavaScript

💭 Thoughts behind this Thread

✧ Comparison is one of the best technique to understand multiple concepts easily with less effort.

✧ Moreover, it also helps us understanding the use case for each.

Here, I have listed 50+ such questions from HTML, CSS & JavaScript.
➊ HTML

➀ "element" vs "tag"
➁ "head" vs "header"
➂ "link" vs "a"
➃ "div" vs "span"
➄ "ol" vs "ul" vs "dl"
➅ "th" vs "td"
➆ "radio" vs "checkbox"
➇ "q" vs "blockquote"
➈ "strong" vs "b"
➉ "em" vs "i"
➀➀ "strong" vs "em"
➀➁ "block" vs "inline"
Read 10 tweets
Mar 24
What <meta charset="utf-8"> does in HTML?

➊ What is it?

Let's break down.

✛ meta: It's a HTML tag that contains metadata about a web page.

✛ charset: An HTML attribute that defines the character encoding for your browser to use when displaying the website content.

✛ utf-8: It's a specific character encoding.
➋ Where should it be in HTML?

When we use this, it's recommended to place it inside "head" element near the top of the document which ensures to use the correct encoding.
Read 14 tweets
Mar 23
💎 60+ CSS Shorthand Properties : Cheat Sheet Here are 63 shorthand properties in CSS.  1 all 2 background
🌆 Direct Link for High Resolution Image

If you liked this one, give a ⭐️ to this GitHub repo to support my work.

✧ Direct Link:
github.com/swapnakpanda/I…
Do you want this entire list in text format?

Here are those.

➀ all
➁ background
➂ background-position
➃ font
➄ text-align
➅ text-decoration
➆ text-emphasis
➇ list-style
➈ offset
➉ overflow
Read 10 tweets
Mar 22
10 "important facts" about React Hooks

💭 Thoughts behind this Thread

⬖ Hooks are one of the most important features of React.

⬘ After the introduction of Hooks, the React development methodology has changed significantly.

⬗ Through this thread, I am attempting to make it easy to understand for you.


➹ It wasn't originally in React.js. It was introduced in React 16.8.
Read 14 tweets
Mar 21
15 Useful HTML Elements for Text Contents

📋 What shall we explore?

➊ abbr
➋ dfn
➌ em
➍ strong
➎ mark
➏ small
➐ q
➑ blockquote
➒ cite
➓ var
➊➊ code
➊➋ kbd
➊➌ samp
➊➍ data
➊➎ time
💭 Why is this Thread?

❑ In a typical web page, we render varieties of text contents. The context of few contents may vary from others.

❒ Sometimes we may have to highlight them semantically for SEO and Accessibility purposes.

❑ Let's explore 15 such HTML elements.
Read 21 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(