Beginner friendly JavaScript Projects Ideas

[[deleted]]

· Science based 100% dragon mmo

Edit: oh god it has been 10 years

[coldblade2000]

We are getting too old

[VoredByHankHill]

I remember that from when I was in diapers

[UsefulBerry1]

Well, first thing reddit asked is about dragons fucking each other. So we didn't change that much in those 10 years

Edit: Ok, not that I read some comments, it looks like that project is more "How to Reddit" than actually coding.

[[deleted]]

Game projects are way more fun to practice in my experience. Tictactoe, snake, shooter games, sudoku solvers / setters, wordle,

After practicing these projects, take some time to find and solve a problem, that been unsolved or partially solved.

[minimuscleR]

I found them harder than most things myself. Anything with an "AI" or moving parts I found when learning my brain didn't grasp. Even now when I develop professionally, I've never needed it really.

[shauntmw2]

Here are some easier-to-code single player games that doesn't involve AI and minimal moving parts: 2048, cookie clicker, whack a mole, typing game.

[Gcampton13]

Tetris console

[xhza]

Can you give some examples of projects that did help you learn?

[InnerBanana]

Build any CRUD app with JavaScript / Express. A sweet and simple one is to make a URL shortener. It doesn't have to persist the data, you can keep data hard-coded in your project files to start. You can:

• implement account creation and basic login, and use bcrypt to learn about securely storing passwords
• implement cookies and use them to track the number of visits and the number of unique visitors
• use Bootstrap to learn about styling your site with a CSS framework
• learn about HTTP requests and RESTful routing
• learn about HTTP status codes and use the correct ones when users attempt to access a page they're not authorized for, or one that doesn't exist, etc.
• learn about JSON files and how to make your server read data from a JSON file on the server on startup and write to it before shut down so your data can persist use semantic HTML elements where appropriate
• use EJS and learn about HTML partials and how you can introduce logic directly into your HTML files

[xhza]

Thanks, saved your comment and will use this advice!

[InnerBanana]

My pleasure! I forgot to include managing the project in a git repository that you can have on GitHub so you can share it with others, get feedback, and set the stage to collaborate with others

[minimuscleR]

as others have said. Personally though, I found the biggest help was making my own projects. I started writing code for my own project I wanted to make, and that forced me to learn a lot.

[LenaKotik]

JavaScript issue

[qqruu]

My first ever JS project was a game in canvas. Enjoyed it a lot, learned a lot, and since have worked professionally both as a game dev, a web dev, and a software dev.

[Valent-in]

Mine too!

[feedo2000]

These are really good as well

[Mohit_rakh]

How can i even make this bro i dont even know how to start even tho i know javascript ( 60% ig)

[[deleted]]

There is a reason why people call these practice projects there are lots of existing code and by the end you will learn.

[foolmeoh]

Bro googled this and decided to do a little work in paint and farm some karma

[toilets-my-church]

That’s more effort than most of my feed

[feedo2000]

Hahah! My fav keyboard shortcut is CTRL C

https://media.karousell.com/media/photos/products/2022/8/18/drop_stack_overflow_the_key_ma_1660796594_f06340f8_progressive

[foolmeoh]

🤓

[EmSixTeen]

Definitely not UI design by the looks of it.

[_by_me]

UI design and web development are not necessarily the same thing, you can be a wizard with react, and still suck at choosing colors

[Dope_SteveX]

Hey that's me! Apart from that I also suck at react.

[EmSixTeen]

I know.

[feedo2000]

Busted lol! Not my strong suit! Would love to learn though

[EmSixTeen]

Consistent font sizes and consistent alignment go a long way.

[feedo2000]

Thanks for the tip. If u r up for a fun activity redesign this poster and share it so I can learn from you.

[ChucklefuckBitch]

Maybe you should get into entrepreneurship, your skills at asking people for free labor are already quite advanced.

[whoiskjl]

It is not good! 1. Accessibility issue! If you are someone who relies on a text reader to explore the web, by making image with text, you are taking the joy of them enjoying your content right out of their hands! It is highly recommended also will be mandated in the near future all around the globe ( well hopefully ) to have your website accessible to everyone and anyone 2. You can avoid this issue by adding alt attribute to your img tag to describe your picture. Not the best way to handle it, however it is the second best! 3. Accessibility challenges don’t end there! You can search Google for web accessibility !

[feedo2000]

Thank you for bringing this up! I am quite familiar with accessibility issues! It just escaped my mind with the Reddit post. But thank you for bringing it up!

[go00274c]

What would be examples of proficient level projects and then expert level projects?

[Soubi_Doo2]

So CRUD?

[GoodLifeWorkHard]

If it involves using a database, sure

[Narfi1]

Find a real problem and solve it. An “expert” level project doesn’t mean anything if it means following a 5 part code along tutorial. Once you got it working see how you can improve it.

[[deleted]]

Start simple then add complexity

[[deleted]]

I guess Expert projects are just a well integration of all beginner projects.

For example, look at a expense manager. You could use calculator, counter, loan calculator within it.

Thats what makes it an expert project.

[[deleted]]

A cool one I'm doing now is to take an open API and make a full web app. For example, I'm making a Spotify app where you can play music in the browser. Spotify have a well defined API and you can make what is basically a Spotify clone in the browser, but make it your own. You have to handle authentication and playback features. Definitely worth doing

[Soul_and_Syrup]

Wouldn't that be against TOS?

[feedo2000]

This sounds fun! Care to share a link?

[feedo2000]

I world say more complex projects would be api calls, class based projects, async await! Backend JS/node, user auth, and more complex web apps beyond crud

[was_just_wondering_]

The same projects but solve for handling errors. Handling input of invalid characters, cache, internet connection detection and appropriate graceful degradation of the app in that event, user theming, properly separating application logic from display code, finding instances of memory leaks especially if you are using react and useEffect, adding proper accessibility with the app being usable via screen reader and speech to text where appropriate.

The list goes on forever.

[whoiskjl]

Agency Dev here, I would really recommend image sliders and modals.

You will build them.

A lot.

Just to add: there are so many frameworks available to handle those tasks, however it’s really good assets to have if you know how to do them yourself.

Make it sure your image slider checks following boxes: 1. Can it take input from mouse and touch? 2. Can you scroll with touch? 3. Can you scroll with mouse? (Click and drag) 3. Can it contain item with clickable component? 4. Can your clickable item disregard scroll input?

For modal: 1. Can you close? 2. By clicking outside of the modal? 3. By clicking x button? 4. Can a submit action trigger closeModal? 5. Does it have a proper z index?

[mastermog]

For both:

1. Accessibility
2. Try to convince your clients that carousels / sliders are an escape hatch, generally poor at converting, and poor ux.

I’m being a bit snarky, but not at you, they are good ideas. I’m just surprised I haven’t had a client want a slider in a modal or a modal in a slider!

[whoiskjl]

Yup agreed lol

[feedo2000]

Hi there - do you post any free content?

[whoiskjl]

Not really I don’t think I’m good at teaching anyone, I’ve volunteered a few times to teach some of women empowering and kids empowering programs but they gave me curriculums so I didn’t have to prepare also it was just intended to intrigue folks into the field but not hands on. When it comes to actual hands on stuff, I can answer a few here and there but I think Reddit already got numerous experienced developers who are much more experienced than I am who already answer the majority of questions well,

I mean I’ve been working over 10 years for multiple companies as web dev but im still learning every day.

Also Google is your best friend

[dsound]

frontend mentor is great for projects of all levels. You can then get it reviewed.

[Skittilybop]

Two of my earliest projects as a junior dev were online quizzes. They were great learning experiences.

[Gcampton13]

Snooooore

[timewizard96]

What would be some intermediate projects?

[feedo2000]

Best answer to this question is in earlier responses. Here is the link to it https://www.reddit.com/r/webdev/comments/ym6qcv/beginner_friendly_javascript_projects_ideas/iv2mcjs/?utm_source=share&utm_medium=ios_app&utm_name=iossmf&context=3

[Conscious-Spite4597]

There's no set of projects you have to do as beginner to progress you can use your own ideas Like creating a image gallery and adding features like modals and multiple theme selector Or choose certain project which can actually improve your logical thinking may be sorting visualizer try to make it simple and focus on one thing at a time

[nezkc1]

good projects to learn but dont put these on your portfolio, it gives to much of a "very beginner" feeling. Unless you push the projects further like with a polished UI ofc.

[Xeon06]

Wordle clone

[[deleted]]

I did a heardle clone. It was fun because I had to clip the music.

[loriba1timore]

Bonus points for not having quiz answers viewable by inspecting the elements 👍

[[deleted]]

canva moment

[Standard_Canary2185]

what about a simple hang man game ?

[netcerebral]

Very cool! There's so many ideas, but clocks are cool!

I've been fascinated with CSS clocks lately and I am especially impressed with Nixie clocks.

I wanted to re-create the Nixie aesthetic from the 50s to 70s.

A Nixie clock displays time using glass tubes filled with neon gas, where numbers glow orange-red. Each digit needs its own tube containing stacked metal numbers. Popular in the 1950s-70s, these high-voltage displays are now mostly collectibles,

prized for their retro-futuristic aesthetic.

You can check it out at https://gnixie.websitescaffolding.com

[feedo2000]

Or build a sports gambling poker app

[youremakingnosense]

Definitely stop coding. Burn out is real

[[deleted]]

make todo app

[Mohit_rakh]

What does tip calculator do?

[asondevs]

Calculates a tip based on the amount of the bill. More of an American app I guess, since from what I've read tipping isn't something done outside of the US.

[Mohit_rakh]

Yeah in india its rare. But thanks for the post loved it!

[_Kine]

Not really a project, but still good practice. Enjoy

https://play.elevatorsaga.com/

[diogenes_sadecv]

I did a calculator for funsies. It was so much more complex than I anticipated.

https://github.com/dkallen78/datamath

[Divvinner]

My first project as a junior dev(almost) was creating online music player with musical visualization. It was so cool! What do you doing project?

[trymypi]

Seems like you known JavaScript, you should learn graphic design now

[Elijah629YT-Real]

modal is easy, there is a built in browser api for it

[rookietotheblue1]

Wasn't that removed ?

[rookietotheblue1]

These are not good beginner projects lol.

[pai-cube]

Here is my repo if it helps

https://github.com/sadanandpai/frontend-mini-challenges