PHP + JS Difficulties with the choice of combat training project?

Question

IT education

I was faced with the task of mastering php + js at a basic level in the shortest possible time. I'm a complete noob on this topic. Because there is no better way to learn a language than to make a project in it. Help with the idea of ​​a project, the implementation of which will require a full-fledged basic development of the php + javascript bundle, and so that the complexity of the idea will allow the implemented project to be included in the portfolio later.

Answer 1

Because there is no better way to learn a language than to make a project in it.

Now crowds of haters from VK will trample)
It is best that the project includes a base for users to interact not only with the service, but also with each other. For example, it can be an amateur mini-bookmaker. Then your tasks will be:

• Parse matches from a remote source
  
• Organize the server side in PHP
  
• Organize a part on WebSockets to update data in real time (coefficients, for example)
  
• Build a good JavaScript frontend. Possibly using Vue/Angular/Rect..
  

Answer 2

Standard themes like "make a blog, make a chat, make a todo-list" work well, as long as you resist the temptation to copy-paste a ready-made example from the internet. If the goal is to "repeat the step-by-step instructions and put them in a portfolio," then you can do so.
If you want to learn something on your own, then ideally it would be to choose a task depending on your level.
It should be interesting, so that there is something to think about, and not so complicated that "oh, that's it, I give up."
Naval battle or tic-tac-toe with multiplayer, a keyboard simulator with statistics, a field of wonders without Yakubovich, a web muzzle for a smart home, search for the nearest pharmacies or gas stations with price comparison, search for the same products in other stores, and so on.
You can look through some list of ideas for sites, and choose something interesting from there.

Answer 3

Hey! A couple of leading questions:
1.

shortest time

Are we talking about hours, weeks or months? In a couple of hours with Google, it’s really possible to assemble a simple CRUD application, which will be proudly called the “100001th TODO-list”. In a couple of weeks - carefully read some textbook / reference book / manual like javascript.ru, which will tell you about the basic things, but will not tell you about the details and nuances. Again, just read. Maybe do some of the test tasks. If you have months at your disposal, you can read the Mozilla reference book in parallel, study some online courses and, with an understanding of the tool, start working on the project. Well, if the shortest time is a couple of years, then welcome to the world of frameworks, cross-browser nastiness and inaccurate calculations. So for starters, I advise you to decide on the time frame in which you want to put the project.
2.

I'm a complete noob on this topic.

In php/js or programming in general? this is, let's say, a rather important coefficient for calculating the prospects of any ongoing project)
3.

there is no better way

For a start - read manuals/reference books/standards. This will not give an understanding of the operation of all the mechanisms of the language, but will give information about the words that will be encountered in the process.
4.

will require a full basic development

So full or basic? The base one, as already mentioned above, is assembled in a company with Google in an hour or two, launched and deleted from the server, tk. remains a dull slag with thousands of repetitions in the open spaces.
An exception is a highly specialized task that must be solved in a couple of steps and has not yet been solved, because. it is necessary for a narrow circle of people. A full-fledged study can take years - languages ​​grow and develop, both php and js have long had their own ecosystems in the form of outgrowths from frameworks and libraries.
5.

include in portfolio

Well, it all depends on the degree of narcissism. There are those who show any page of 2 screens on every corner, and there are others who are not always found on github, but they create beautifully.
Well, so that the footcloth is not completely heapy and offtopic, here are a couple of examples of applications that can be washed down on the knee, I will try to scatter them according to the degree of complexity (I didn’t do any of this myself, so I might miss some super-important nuance)
0. At one time I worked in karaoke, I heard such a request - "I want an application with which it will be possible to lay out tablets on the tables and take songs from each table right on the spot." This is a direct task entirely from the world of the client - nothing fucking indicates the boundaries of implementation, the possibilities and requirements for the software. You look for a specification for a karaoke machine, draw up a technical specification for yourself, draw a design, think over and write down the logic, set up the service - and at least go and sell it) The task is simple, but you can do some digging.
Further typical:
1. TODO-list. Rare rubbish, of which there are plenty. Production time - a couple of hours on Google.
2. Test. A little more complicated than a sheet, if in a primitive version.
3. Blozek. In terms of difficulty - in the region of the previous ones, but there are much more nuances that will have to be thought through. The first step towards business logic)
4. Chatik. Welcome to the asynchronous world, a slight brain fracture is guaranteed (but still simple and full of manuals on the subject)
5. Chatbot a la "live site" with a link to a cart or other messenger. Adding business logic to work with external APIs.
6. Data processing service. Collect analytics that no one has collected, process and give beautifully.
7. Startup. Google trends and try again.

Answer 4

Make an application for optimizing and resizing images, like tinypng.com
The user can upload an image of any size, your application must "compress" this image without loss.
The user can also select a feature to reduce the size of the image, say, up to 50% of the original image. That is, an 800x600 image will be reduced to 400x300 and compressed without loss.
If we complicate the task, then allow the user to upload zip / rar archives with images, also indicates his mail where to drop the final archive with processed images.
That is, first we do registration with mail confirmation, then the feature of batch loading of pictures appears.
Therefore, a simple blog with an admin panel (on bootstrap).
Making it more complicated:
A blog has posts, categories, and tags. A post can be in multiple categories. Categories can have parent categories. Ajax comments and likes to posts and comments, comments must be nested (like on habré or vc.ru).
Let's make it even more complicated:
The post is added through the WYSIWYG editor, in the editor you can add pictures that will be saved on the server. It is desirable that images can be resized on the fly. It is better to use some kind of filemanager.
We complicate it further:
Registration / authorization of users through social networks. networks.
Let's complicate it further:
Do a full text search on the blog, including comments. Master Sphinx or Elasticsearch, learn how to install and configure it all on a framework (Laravel or Symfony).
Get acquainted with Redis, learn how to cache data from the database in redis. Refresh the cache when someone added a comment/like or you added a post.
Let's make it even more complicated:
Get to know Websockets, learn how to make it so that if someone likes a post or comment, then everyone who is online sees immediately that the number of likes for the post/comment has increased.
To play around with all this, master Docker.
Cover your application with simple unit tests.
And of course, commit it all to Github (Bitbucket).
If all this worked out, then you are already almost ready fullstack more towards the backend. For the middle backend, you still need to tighten up the Rest API so that you can cut api's (with authorization), and preferably another DBMS, better than PostgreSQL, as well as analysis of database queries (indexes, explain, etc.). For a full-fledged fullstack, you need to master better JS, layout (BEM) and frontend frameworks: Vue.js, React, Angular, in order to be able to file a SPA application alone, which pulls data from your own server via api.
Now they will throw tomatoes at me because I said middle, and someone will say that middle is more than n years of real development. But the described above solves most of all everyday tasks in commercial projects. If you have learned to do this, then you will learn to solve other problems, albeit a little (or a lot) of googling. Here on the toaster there are those who have 5 years of experience in development, but are still juniors, because all the time they were sawing landings or business card sites for 3-5 pages.
It should also be said that the grades (junior, middle, senior) are very different in different companies.
All this case is described in the best case, six months. In the worst case, it can drag on for years.
Most likely this will not happen that you will be engaged only in this blog all the time. During the training, you will have a desire to do something else, test this or that, play with some technology (Sphinx, Elasticsearch, Redis, RabbitMQ, etc.) separately, or study the layout, js, framework features separately. You will return to the project from time to time, gaining knowledge from intermediate test projects.

Answer 5

Blog. No page reloads.

Answer 6

you can make your own Internet key store https://zaka-zaka.com/
or agent plati.ru + digiseller.ru (They work together. There is api)
I just started with this and made a script for $ 15
even sold in 2009

Answer 7

If there is no experience of successfully and effectively solving Olympiad problems, then the situation is stalemate.