In this article, I give you examples of practical exercises for all levels. The former is aimed at beginners and is therefore easy to perform. We quickly level up on the latest examples of mini-projects.
- To show concrete projects in your portfolio.
- To manipulate data in input (keyboard, mouse) as in output (screen).
- To build simple user interfaces on the web in HTML.
A TODO list is a great first mini-project to start learning about data entry and its display. By making a todo list, you will learn, for example:
- How to manage and display different elements according to their state
- How to go further with data permanence locally by exploring
A TODO list is a project that is often taken as an example when you learn frameworks or booksellers such as
angular.jsand others. Doing this project in JS Vanilla and HTML, therefore, makes a lot of sense and will facilitate your learning in the future.
Do you think creating a mini project that randomly gives quotes from your favorite rapper, author, or personality?
- First, you will need to collect the quotes you want, try to do this intelligently by scraping the data.
- Then you will need to put these quotes in a table so that you can use them.
- Eventually, you’ll build a UI to display the content randomly.
const IMC = Weight * height** 2
Weightin kg, and the
All you have to do is build the data entry form and an HTML user interface to display the result.
To go further, you can also display the Body Mass Index category your user is in.
You will need the current course, which you can hard drive into your code or grab with an API. Then, with the amount entered as input by the user, you will display the result of your calculation to obtain the conversion of the chosen currency.
Start with a few simple operators and basic buttons to manage:
- The bill
- The subtraction
- The multiplication
- The division
A word counter lets you know how many words there are in a text provided by the user. This feature comes in handy when you want to write an article with a minimum number of words, and sites even exist for the sole purpose of telling you how many words your text contains. This project will teach you how to manipulate strings and how to use a counter.
Basically, you want:
- a form so that the user can enter their text
- a button to validate the text
- the result of the number of words present in the text
To go further, you can also give the number of letters, the number of lines, the number of the same occurrence, and many other things.
Did you know that scissors are the best choice in the rock paper scissors game? No? This is normal, is it not?
To verify this, you can code your own game. The computer will play a random hand from the 3 combinations and your objective will be to beat it. Three HTML buttons and the use of
Math.random()will do the trick.
To go further, you can add a point counter, add intelligence to your artificial intelligence (rather than simple randomness) and make two computers play with each other.
It is very easy to embed a video on your HTML pages. But it is also possible to use the YouTube API to perform searches and present the results in HTML. This project can be a bit more complicated than the others, but it will be perfect for getting you to understand how APIs work and how to make requests.
The difference between having no projects in your portfolio at all and having a few small projects is huge. Practicing and posting projects in your spare time is proof that you have the right mindset to learn programming and that’s exactly what hiring companies want to see.Fuente
Xhlar es un entusiasta de las computadoras y la tecnología. Actualmente programador y creador de contenido en el sector digital.