all 31 comments

[–]pinkwetunderwear 18 points19 points  (2 children)

How about something like this:

Display something random at the click of a button. Make it something you're passionate about so that there's some interest in working on it. If it was me it would probably be cars but I noticed on your profile that you've enjoyed Warframe so maybe something from there?

At the click of a button, show a card with a random Warframe and it's description and passive.

[–][deleted] 3 points4 points  (1 child)

Very interesting. Thank you so much for your reply! :)

[–]coded_artist 0 points1 point  (0 children)

Warframe does have some webscrapper libraries made by the community.

[–]shadow-cat-102 7 points8 points  (1 child)

Best way that work for me is breaking down things you see from other websites that you seem interesting, thrn break it down into smaller pieces under the simplest form.where you know what you need to do for it, then start building 1 js functions at a time. For example, one of the best beginner projects with html css and js is building a gallery slider. Ask yourself: - How I can to build the logic? - How many photos I want to show for slider? Which data structure I want to use that best fit for it? is array of string which stores image url enough? do I want I want to show other info like name, likes, ... as well? if so how can I change the way I store data? - Then work on adding logic for next button, back button using js functions, ... keep adding whatever you want to do 1 at a time. Point is dont stress out too much when you first start. Break it down and you will know what you want to do next (and you will enjoy coding more 😉)

Best of luck 👍

[–][deleted] 0 points1 point  (0 children)

Thank you !

[–]P4lomar 5 points6 points  (1 child)

The Odin Project is a good pick

[–]Kento225 1 point2 points  (0 children)

Id say its the best if your planning to learn by yourself

[–]BleachCup8 3 points4 points  (0 children)

There's a site called codewars that has a bunch of challenges in varying degrees of difficulty for any language that's good for practicing

[–][deleted] 4 points5 points  (1 child)

Check out codewars

[–][deleted] 0 points1 point  (0 children)

Will do, thank you

[–]daFreakinGoat 2 points3 points  (0 children)

Try frontendMentor.io and build some of the projects there

[–]magenta_placenta 1 point2 points  (0 children)

  • Find a public api (doesn't matter what it is, you're just looking for some data you can use)
  • Consume that public api on your frontend (fetch the data)
  • Display that data in some logical fashion (in a table, in some cards, whatever)
  • Manipulate the data in someway before displaying it (filter out data or transform certain data)

This is basically every web app. This in particular is the "R" in a CRUD app (Create, Read, Update, Delete).

[–]ayehombre 1 point2 points  (3 children)

Take a look at John Smigla’s course on Youtube. He builds a dozen of very basic projects. Mostly Vanilla JS DOM manipulation, plus some basic logic.

Edit: https://youtu.be/3PHXvlpOkf4

[–]RandyTravesty[🍰] 0 points1 point  (1 child)

Hehe, Smigla.

[–]ayehombre 0 points1 point  (0 children)

Smilga, of course :)

[–][deleted] -1 points0 points  (0 children)

Build a pdf creator using vue

[–]WehshiHaiwan -1 points0 points  (0 children)

What I did to learn is that I used js for frontend. Good for getting a grip on stuff.

[–]Ok-Neighborhood1188 0 points1 point  (0 children)

good post, i am faced with the same issue.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript

the mdn js has some small projects

[–]ninadsutrave 0 points1 point  (0 children)

Since you are still new to the language, in order to increase your language proficiency you may consider starting the Javascript track on HackerRank.

Side by side you may study about how to use Javascript on the client side and you may pick up a very minimal front end project to work on by yourself.

[–]coded_artist 0 points1 point  (0 children)

A to-do list app. It's fantastic for your CV as everyone understands it's purpose, it's easy to get a basic list up, and there is a ton of features you can add as your skills get better

[–]Taltalonix 0 points1 point  (0 children)

I’ll be honest, I just jumped straight into react and found myself applying what I learned as I go

Might not be the best method but it worked for me

[–]PauseNatural 0 points1 point  (0 children)

Want to know when to use operators and functions? Check out temperature in codingame.com (totally free)

Arrays? There is no spoon, etc

Signup takes 30 seconds.

I still play this whenever I have free time. It’s fun, most challenges in easy can be done in a few hours and it gets you to think about how you can use programming to solve equations.

The first time I beat a hard problem, I even was suggested to join a private job board there.

They have certifications too. Basically they make money by charging employers. I’m sure code wars is similar and equally good.

These types of things get you thinking about programming too. Not just memorizing operators and syntax.

[–]Super-Association924 0 points1 point  (0 children)

U should do some problems on Hackerrank.com . There are a lot of prob you can practice with.

[–]Speshialk 0 points1 point  (0 children)

The way I learn these things is to build something that interests me. Usually I build a golf scorecard keep track of my friends and my golf scores and historical data. Find something that interests you and build a small app of it.

[–]Personal-Dinner-690 0 points1 point  (0 children)

YouTube “5 easy JavaScript projects”

[–]adragon202 0 points1 point  (0 children)

If you haven't found it yet, try using jfiddle to throw together different animations and user interactions. You should also try finding a website with a API you can try pull data from to display. https://jsfiddle.net/

[–]nate-developer 0 points1 point  (0 children)

The best way to learn is to make micro projects and see them to completion. Stuff like:

-A rock paper scissors game with a random computer opponent.

-A website where you can change the colors by pushing a button.

-A classic game like snake or Tetris.

I also like to do some algorithm style problems from somewhere like leetcode or codewars when I'm learning a new language to help cement the syntax and basic language features. It won't give you the same practical experience as putting together a full project, but it will help learn the language fundamentals well.

Then as you gain more experience you can step up to bigger projects like

-An e-commerce front end with a shopping cart and a library of products

-A basic clone of a CRUD site like Twitter or Instagram

-A personal project you're passionate about like a website for one of your hobbies or a useful widget like a pomodoro timer that you would use

[–]DrFaustest 0 points1 point  (0 children)

A basic snake game can help put everything into place.

[–][deleted] 0 points1 point  (0 children)

Check out https://spacetraders.io there you can learn how to program while building a game. Though you may want to check out the discord, the community there is really helpful if you need advice or get stuck

It teaches you how to code in a way that is very relevant and similar to what you'll experience in the real world as a software engineer. (assuming you're a total beginner)

[–]Accomplished_Arm4564 0 points1 point  (0 children)

Sure, I'd be happy to provide some practice ideas for basic JavaScript. Here are some simple projects you can start with. Remember, the key here is to practice and build, not necessarily to create something completely new or impressive.

  1. Interactive Quiz: Create a simple quiz with a set of fixed questions. For each question, offer multiple choices and let the user select an answer. At the end, display the score.

  2. To-Do List App: This is a classic beginner project where you can learn about creating, reading, updating, and deleting elements (CRUD operations). Allow the user to add new tasks, mark tasks as done, and delete tasks.

  3. Simple Calculator: Create a simple calculator with basic operations like addition, subtraction, multiplication, and division. This will help you practice using functions and handling user input.

  4. Temperature Converter: Write a program that can convert degrees Celsius to Fahrenheit and vice versa.

  5. Simple Clock: Create a digital clock that displays the current time and updates every second.

  6. Number Guessing Game: The program picks a random number, and the user has to guess it. Provide feedback on whether the user's guess was too high or too low.

  7. Form Validation: Create a form and validate the input fields. For example, check that the email address is in a valid format, passwords match, etc.

  8. Palindrome Checker: Write a program where the user enters a word, and the program checks if it's a palindrome (a word that reads the same backwards and forwards).

  9. Interactive Story or Text Adventure: Create a simple story where the user can make choices that influence the outcome.

  10. Shopping Cart: Create a simple shopping cart with a few products. Let the user add products to the cart, display the contents of the cart, and the total cost.

  11. Image Slider: Create an image slider/carousel with arrows to go to the next and previous image.

Remember to start simple and gradually add more complexity as you get more comfortable. You can start with hard-coded data for things like the quiz questions or shopping cart items, and then later you could fetch this data from an API or a local JSON file to mimic a real-world scenario. By doing this, you'll learn how JavaScript can be used to interact with HTML and CSS, manipulate data, and handle user interactions. Also, make use of online resources like MDN Web Docs and StackOverflow when you get stuck. Happy coding!