Car Service E-book app

This is the very first project I created.
You can find it on GitHub - ivanf92/car-service-ebook: Car Service E-book 1.0
The most important thing for me
is the opinion of experienced developers. Please let me know about
beginner errors I made so I can work on them later.
The idea was to create single web page application I imagined.
App is called Car Service E-book and it’s made for keeping records about
services of your car.

I started to learn HTML, CSS, JavaScript, PHP and SQL about 6 months ago.
I thougt it would be better to learn through creating something, not only
theory. So I came up with the idea on creating this Car Service E-book.
When I started it I only knew the basics of HTML and very little about
CSS, JavaScript, PHP and SQL.

If someone find useful this app feel free to use it.
Also if someone think that it could be advanced please send
your suggestions.
All critics and suggestions are welcome…

You’re more likely to get feedback on here if you deploy the app so people on the forum can see it without having to set it up locally.

One small piece of feedback at a glance is that you need to set up prettier in your vscode to format the code when you save a file. Currently the indentation is inconsistent and messy, which makes the code less readable.

Approach to styling is inconsistent, e.g.

<button id="btn_ok" class="button_blue" style="width:100px;font-size:16px;" onclick="closeAlert();reloadPage()">OK</button>

I would recommend using classes alone for styling and a system like BEM for style variations in this case. Using BEM you also don’t need to use ids for styling purposes. You don’t have a styling system in place and it’s a hodge-podge of ids, classes and inline styles currently.

avoid class names like div-content. The div should represent a UI component of some sort. e.g. if you used a div to create a Card component, your class name should be card, so that it’s named after the UI component, not the HTML element. Naming like this makes the code much clearer.

Avoid inline javascript. Have all your javascript together in one place.

Thank you very much for your time and feedback.
The next learning project will be focused on clean CSS and javascript and RWD.
Yeah, it’s messed up a lot. I started from zero and later, as I was learning along the way, I realized the code is a total mess, understandable only to me :grinning:
In some cases I couldn’t find solution so I used inline CSS and javascript to make it work.

About BEM, does it have to be installed or is it just a typing methodology?
I see now how it would look like if I knew BEM at the start…

And where to deploy the code here?

BEM is class naming system. It’s a methodology so doesn’t require any installation.

It stands for block element modifier.

from google

A BEM class name includes up to three parts. Block: The outermost parent element of the component is defined as the block. Element: Inside of the component may be one or more children called elements. Modifier: Either a block or element may have a variation signified by a modifier.

So if you have a card, the outermost div would have the class card, if the card has a title, that element (e.g. h2) would have the class card__title. If there was a style variation on the card, e.g. you wanted a card with a red background as a variation on your card component, you would use the card class to apply the card styles, then card--red to apply the variation in styles, i.e. class="card card--red".

The project looks like it could be refactored to apply the above feedback. In fact I think it could be a valuable exercise in refactoring. Implementing feedback from code reviews is something we all do in a professional setting.

You’ve utilised various technologies here including HTML, CSS, JS, PHP, Git etc, and that’s definitely a good thing that you’re stretching yourself in this way and orchestrating multiple tools to work together, especially for a first project.

PHP isn’t my area of expertise so I can’t really comment on deployment. I would either use google to get the answer to that or try asking chatGPT for some pointers in the right direction.

You’re absolutely right, I’ll do refactoring on this app, it will really be a valuable exercise. I’ll practice BEM.

At the start I didn’t have the clear plan for this app. The main objective for me was learning and practicing. I added stuff along the way, so this is one of the reasons the code turned out this way.

Again, thanks a lot for the feedback, it really means a lot…

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.