Topics:
- About the Author
- About the Website
- How It All Began: HTML and FrontPage
- A Look Behind the Scenes in WordPress
- Server
- Translation
About the Author:
My name is Marco van Wijk, 36 years old and living in the Rotterdam area. I have been passionate about everything related to cars my whole life. At 16, I was already working in the garage as an apprentice mechanic. In the ten years I worked as a mechanic in the VAG and BMW garages, I completed the technical specialist training up to level 4. Since 2015, I have been working as a lecturer in automotive technology. In 2018, I obtained the Bachelor of Science degree at HTS Autotechniek in Arnhem after completing the part-time course in HBO-automotive engineering.
I cherish fond memories of this education with a lasting sense of satisfaction. After HTS, I obtained my teaching qualification by completing a post-HBO course at the Rotterdam University of Applied Sciences.
Besides my work as a lecturer and author of this website, I enjoy writing articles for AMT and you can find me presenting knowledge sessions at AMT-live.
About the Website:
In 2005, I started creating websites. The current website dates back to 2009 and had the domain name “marcovw.nl”. To improve recognizability, professionalism, and SEO, I decided to include the context in the domain name, along with my initials “MVW” (Marco van Wijk). This led to the current domain name “mvwautotechniek.nl”. Over the years, there have been many changes in design and content. The website now has over 350 pages and averages 100,000 unique page views per month. I have developed and manage the site entirely myself, including design and images, and the site runs on a self-configured VPS.
The aim of the website is to provide insights into automotive technology, with a lot of information not easily found elsewhere on Google, often without images and usually not in Dutch. The site targets vocational education levels 2 through 4, with teaching materials and exam preparations, and is also suitable for HAVO/VWO students transitioning to HBO mechanical or automotive engineering.
I intentionally do not display ads to keep the website clean. There are also no trackers or cookies, so no cookie notification is needed.
The website is freely accessible to everyone, without payment or login systems. This makes it easier to obtain permission from car manufacturers to use their images, as I have no financial interests, and many manufacturers support education.
If you discover spelling or grammatical errors, please use the contact form to report them. This also applies to additions to specific topics.
How It All Began: HTML and FrontPage:
From the very first concepts to the website that was replaced in March 2019 by the current version, I used the program Microsoft FrontPage 2003. With the help of FrontPage, the HTML pages were created at the time. In FrontPage’s design window, the result of the HTML codes could be viewed, and it was easy to place texts and images. a0
The website consisted of four frames:
- Top (header)
- Left (menu)
- Right (dictionary)
- Middle (the site content)
To open the site, four separate HTML pages were loaded in the frames (index.htm). When a visitor did not land on the index.htm page with the four frames via a search engine but directly on the sought page, only the middle frame with the blue background was displayed.
The surrounding menus were not shown. In such cases, it was not possible to navigate from the opened page through the menus with buttons to other parts of the website.
The search function to find the desired page through search terms also ran through a complex (integrated) method via Google, and there was no mobile support, leading to the creation of a second index page that automatically switched when visiting the site with a phone or tablet. This often worked well, but not always. “In the past,” an HTML site with frames was popular. Websites built in PHP were complex to set up and maintain as screen resolutions increased, more mobile support emerged, and the browsers were updated, causing functions to fail or the site’s proportions to be incorrect. Nowadays, you almost don’t see websites made in HTML like the site once was. The knowledge I gained with the self-compiled HTML codes still helps me today in updating the current website.
A Look Behind the Scenes in WordPress:
The HTML-based website was completely rebuilt in the popular WordPress CMS in March 2019. Some visitors initially had to get used to the new navigation structure, but overall, I received positive feedback.
Over time, I have implemented more changes based on visitor feedback that make navigation easier and more organized.
With the site in the modern WordPress CMS, the site has improved significantly in several areas:
- Interface is sleek and presents a representative appearance;
- Easier to update articles;
- Tablet and mobile friendly (automatically adapts to screen size) so no separate mobile website;
- A change in the menu and/or interface of a page is automatically applied to all pages;
- SEO (search engine) friendly;
- Plugins allow for many useful functions: interactive buttons, search function, backup and security, autoscroll, etc.
The following image shows the page overview in WordPress as I can open the site as an administrator. From this screen, all pages can be searched and changed without opening the web interface.
All pages on the website are created in Elementor. Web designers often criticize Elementor for loading a large amount of code that can cause some delay, and perhaps certain styling preferences cannot be realized. When you’re designing a website from scratch, and the site’s goal is to load super fast, I can understand that. However, I am not a web designer, and I use Elementor to style the website in a way that I like. The impact on site speed is negligible because I have invested a lot of time in optimizing plugins, CSS, JavaScript, and caching both in WordPress and at the server level. More on this later.
The following image shows the Elementor editor screen. On the left is the text editor, and on the right, the live preview. After clicking “Update” at the bottom, the changes appear online immediately. There is also an option to save the page first as a draft or private before publishing it online.
Besides the text editor, Elementor also offers various interactive possibilities. One of them is the so-called “Call to Action”. This function creates an interactive button that we know from the home page and in the categories that can be opened from the menus. a0
In 2021, I increasingly encountered compatibility issues with my then-purchased WordPress theme. The theme was not popular and stopped being supported after a few years. Since the theme determines the appearance of the website, switching to another theme was not easy. In January 2022, I experimented with Elementor’s page builder and the “Hello Elementor” theme. This combination offers regular updates and more customization options than standard WordPress themes. a0After a day of experimenting, I decided to replace my old theme with a self-made theme using Elementor. Within a few hours, the new theme was online, and I improved it in the days after based on feedback.
Elementor’s theme builder allows customization of every aspect of a theme, from corners and buttons to colors and animations. The configuration options are endless and provide optimal display for desktop, tablet, and mobile devices. The image below shows the configuration options for the main menu color.
What bothers me about other sites are pop-ups, newsletters, notification requests, and flashy advertisements. Therefore, I use an ad blocker and keep my website free of such distractions. I choose a simple design with gray shades and minimalistic embellishments. The white pages with gray backgrounds and a readable font ensure a pleasant readable text. My site is optimized for 17-inch desktop computer screens and 14-inch laptops without the menu bar shifting. This design is the result of experiments and visitor feedback. The informative nature and user-friendly navigation are appreciated by visitors.
Server:
For over four years, my website ran almost flawlessly on my home server. In 2020, I used CentOS 8 with cPanel, later replaced by Almalinux. I had to reinstall twice due to configuration errors that caused the server to crash. This taught me a lot about Linux and cPanel installations without a graphical interface. However, these crashes caused me sleepless nights. After two days of configuring, the server was running well again, but I decided to host the website externally. These were my considerations:
- Costs: For a home server, you must purchase the most expensive cPanel license for 100 accounts, which is just as expensive as an external VPS with a cPanel license for a single user.
- Backups: cPanel makes nightly backups of all accounts, but not of the server software. With a VPS, the partition can be restored, including all configurations.
- Network: At home, I could only link my domain to a dynamic IPv4 address. IPv6 changed every hour. The external server has both IPv4 and IPv6 addresses and remains stable, even if my home IP changes.
- Hardware reliability: Although I used enterprise hardware, there was always a chance of defects. With an external server, this responsibility is no longer mine.
a0A website can be hosted in two ways:
- Shared hosting: Multiple customers share one server and have no control over the server settings. Pre-installed tools, such as PHP versions and caching options, can be activated, but the web host decides which are available and how often they are updated. Suitable for static websites with few visitors. Drawbacks include potential delays and problems if another customer on the same server has issues.
- VPS (Virtual Private Server): The customer gets an allocated part of the server with reserved resources (CPU, RAM, storage). This provides full control and prevents delays caused by other users. Suitable for demanding users.
My website runs on a VPS with Almalinux 9 and cPanel, similar to my home server but now external. The VPS has two dedicated CPU cores, 4 GB RAM, and 200 GB NVME storage. For my single WordPress website, this configuration is sufficient. Here, you can see the server load graphs over 24 hours.
Almalinux is installed as “minimal,” without graphical elements. After installation, a black screen appears with a login possibility. After logging in, software installations and adjustments can be made via commands. For the web server software, cPanel is used. In the WHM control panel, all server and WordPress settings are managed. Installed software includes PHP 8.3, Memcached, Redis Object Cache, Nginx, and CSF (firewall). The website is cached in various ways, with WordPress pages with images being loaded as HTML from the cache, and certain parts stored in the working memory for faster access. This – perfectly aligned – software and settings make it possible for the site to be super fast, regardless of the number of visitors accessing the site simultaneously.
The website is optimized by locally loading fonts and preloading them, optimizing images in modern file formats, optimizing cache settings, disabling unnecessary plugin functions to prevent them from consuming resources, etc.
Hosting and optimizing both the server and the website pays off. The site not only responds quickly while navigating but also shows excellent test results. Below is the score from Google PageSpeed Insights. A score of 100 is exceptional to achieve and certainly not self-evident for a website like this one.
Your Contribution:
Do you have photos or practical examples from your own field you would like to share on this website, such as disassembled parts (without third-party copyrights), your own teaching materials, or experiences gained in the workshop? I welcome your input on the site, naturally with credit to your name and/or the organization you work for. Contributions from professionals help in the knowledge sharing that this website has grown with.
Translation:
Currently, work is underway on an English translation of the website.