Topics:
- About the author
- About the website
- How it all started: HTML and FrontPage
- A look behind the scenes in WordPress
- Server
- Translation
About the author:
My name is Marco van Wijk, I am 36 years old and live in the Rotterdam area. All my life I have been crazy about everything related to cars. At 16, I was already working in a garage as an apprentice mechanic. During the ten years I worked as a mechanic in VAG and BMW garages, I completed the mechanic training programs up to level 4 Technical Specialist. Since 2015, I have been working as an automotive engineering teacher. In 2018, I earned the title Bachelor of Science at the HTS Automotive Engineering program in Arnhem after completing the part-time HBO automotive program.
I have warm memories of this program, with a lasting sense of satisfaction. Following HTS, I obtained my teaching qualification after completing a post-HBO program at Rotterdam University of Applied Sciences.
In addition to my work as a teacher and author of this website, I also enjoy writing articles for AMT, and you can find me as a presenter of knowledge sessions at AMT-live.
About the website:
In 2005 I started building websites. The current website dates from 2009 and had the domain name “marcovw.nl”. To improve recognizability, professionalism, and SEO, I decided to include the context in the domain name, including my initials “MVW” (Marco van Wijk). That is how the current domain name “mvwautotechniek.nl” came to be. Over the years, there have been many changes in design and content. The website now has more than 350 pages and attracts an average of 100,000 unique pageviews per month. I developed the website myself and manage it completely, including the design and images, and the site runs on a self-configured VPS.
The goal of the website is to give people insight into automotive technology, with a lot of information that cannot be found elsewhere on Google, often without images and usually not in Dutch. The site is aimed at VET levels 2 through 4, with teaching materials and exam preparation, and is also suitable for HAVO/VWO students progressing to HBO mechanical engineering or automotive engineering.
I deliberately do not show ads to keep the website clean. There are also no trackers or cookies, so a cookie notice is not necessary. The website is freely accessible to everyone, without payment or login systems. This makes it easier to get permission from automakers to use their images, because 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 on specific topics.
How it all started: HTML and FrontPage:
From the very first concepts up to the website that was replaced by the current version in March 2019, I used the program Microsoft FrontPage 2003. Using FrontPage, I created the HTML pages that were loaded in frames. In FrontPage’s design view, the result of the HTML code could be viewed and it was easy to place text and images.
The website consisted of four frames:
- Top (header)
- Left (menu)
- Right (glossary)
- Center (the site content)
So to open the site, four separate HTML pages were loaded into 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 requested page, only the middle frame with the blue background was displayed.
The surrounding menus were not shown. In that case, it was not possible to navigate from the opened page to other parts of the website via the menu buttons.
The search function to find the desired page using search terms also worked via a complex (integrated) method through Google, and there was no mobile support, which is why a second index page was created that would automatically be switched to when someone visited the site with a phone or tablet. This often worked well, but not always. “Back then,” 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 was added, and browsers were updated, causing functions to drop out or the site proportions to no longer be correct. Nowadays you hardly ever see websites made in HTML, like the site used to be. The knowledge I gained with the self-assembled HTML code still helps me to this day when updating the current website.
A look behind the scenes in WordPress:
The HTML-based website was completely rebuilt in March 2019 in the popular WordPress CMS. Some visitors had to get used to the new navigation structure at first, but overall I received positive responses.
Over time, based on visitor feedback, I implemented more and more changes that make navigation easier and clearer.
With the site in the modern WordPress CMS, the site has improved in many ways:
- The interface is clean and has a professional look;
- Easier to update articles;
- Tablet- and mobile-friendly (automatically adapts to screen size);
- A change in the menu and/or interface of a page is automatically applied on all pages;
- SEO (search engine) friendly;
- Plugins enable many useful functions: interactive buttons, search, backup and security, autoscroll, etc.
- The website can easily be translated into other languages via AI.
The following image shows the page overview in WordPress as I can open it as an administrator. From this screen, all pages can be found and edited without opening the web interface.
All pages on the website are built in Elementor. Web designers often criticize Elementor because a large amount of code is loaded, which can cause some delay, and because certain styling wishes may not be possible. When, as a web designer, you design a website from scratch and the goal is for the site to load super fast, I can understand that. However, I am not a web designer, and I use Elementor to style the website the way I like. The impact on the site’s speed is negligible, because I invested a lot of time optimizing plugins, css, javascript, and caching in both WordPress and at the server level. More on that later.
The following image shows the Elementor editor screen. On the left you see the text editor and on the right the live view. After clicking “Update” at the bottom, the changes appear online immediately. You can also choose to first save the page as a draft or private before publishing it online.
In addition to the text editor, Elementor also offers various interactive options. One of them is the so-called “Call to Action.” With this function, an interactive button is created, like the one we know from the homepage and in the categories that can be opened from the menus.
In 2021, I ran into more and more compatibility issues with the WordPress theme I had purchased at the time. The theme was not popular and after a few years it was no longer supported. Because 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 provides regular updates and more customization options than standard WordPress themes. After a day of experimenting, I decided to replace my old theme with a custom-made theme using Elementor. Within a few hours, the new theme was online, and in the days after that I improved it based on feedback.
Elementor’s theme builder makes it possible to customize every aspect of a theme, from corners and buttons to colors and animations. The settings options are endless and provide optimal display for desktop, tablet, and mobile devices. The image below shows the setting options for the color of the main menu.
What bothers me on other sites are pop-ups, newsletters, notification prompts, and flashy ads. That is why I use an ad blocker and keep my website free of these distractions. I choose a simple design with shades of gray and minimalist decorations. The white pages with gray backgrounds and a readable font provide pleasantly readable text. My site is optimized for desktop computer screens from 17 inches and 14-inch laptops without the menu bar shifting into tablet mode. The informative nature and user-friendly navigation are appreciated by visitors.
Server:
For more than four years, my website ran almost trouble-free on my home server. In 2020, I used CentOS 8 with cPanel, later replaced by Almalinux. Twice I had to reinstall due to configuration errors, causing the server to crash. This taught me a lot about Linux and cPanel installations without a graphical interface. Still, 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, the most expensive cPanel license for 100 accounts must be purchased, as expensive as a VPS in a data center with a cPanel license for one 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 day. 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.
A website can be hosted in two ways:
- Shared hosting: Multiple customers share one server and have no control over server settings. Preinstalled tools, such as PHP versions and caching options, can be enabled, but the web host determines which are available and how often they are updated. Suitable for static websites with few visitors. Downsides are possible slowdowns 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 slowdowns 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 more than sufficient. Next to this, 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 option. After logging in, software installations and changes can be done via commands. cPanel is used for the web server software. In the WHM control panel, all server and WordPress settings are managed. Installed software includes, among other things, PHP 8.5 and Redis Object Cache. The website is cached in different ways, where WordPress pages with images are loaded as HTML from the cache, and certain parts are stored in memory for faster access. This software and these settings—tuned to each other—make it possible for the site to be super fast, regardless of the number of visitors opening the site at the same time.
The website has been optimized by loading fonts locally and preloading them, optimizing images in modern file formats, optimizing cache settings, disabling unnecessary plugin functions so they do not consume resources, etc.
Hosting and optimizing both the server and the website pays off. The site not only responds quickly while navigating, but the test results also show excellent scores. Below is the score from Google PageSpeed Insights. A score of 100 is remarkable to achieve and certainly not a given for a website like this.
Your contribution:
Do you have photos or (hands-on) examples from your own field that you would like to share on this website, such as a disassembled component (that is not subject to third-party copyright), your own teaching materials, or experiences you have gained in the workshop? I am happy to publish your input on the site, of course with attribution to your name and/or the organization you work for. Contributions from professionals help with the knowledge sharing that this website has grown on.