Dec 22, 2021
How a website was created?
Being proactive on learning those little things that will help you to become a professional web developer.
Continuing with the idea of helping new programmers and web developers, or if you are actually thinking in starting a career as web designer, I want to write today about the situation you surely will find yourself at some point: How an existing website was created?
To be honest, I’m writing this article because I created a website once for a client in NextJS, and a custom CMS created with the MERN Stack (MongoDB, Express, React and NodeJS), it was a very nice website, my team loved it. The client hired a “webmaster” to manage the website, it was someone that introduce him/herself as a “web consultant”, this person obviously didn’t have a good experience, and told the client that we created their website in Wix, that we should provide the login information, long story short, because in the contract we promised a WordPress website, we have to re-create it. The client thought we were giving them something less than what they pay for, but we really gave them a BMW for a price of a Corolla.
What a shame, it really bothered me knowing there is some people they call themselves webmasters, but they haven’t really mastered the web, at least to know enough to really be competitive and not just belittle the work of others. Again, as my last article, if you are really serious about becoming a web developer, I want to help you to become a pro.
BuiltWith Technology Lookup
The easiest and faster way to learn what is under the hood of a website is with builtwith.com, a free tool that will scan your site and tell you all you need about it, you can have a clear picture of the things you need to know.
I always use this tool when I need it, mostly if a client wants to migrate to our servers but they don’t really know how the website was created and the person or agency that created is unresponsive.
Browser Inspector Tool
Again, I highly recommend you use BuiltWith, but I want to give you tips of how to find hints using the Inspector Tool of your web browser. I’m using Chrome because is the most commonly used, but all browsers have this option.
Sample of a WordPress website
I picked randomly one of the website I created recently to show you some hints I marked when you are inspecting a website.
All the images, and mostly all resources, even if you are using a CDN, we show a “wp-” in the resources it used, is the way that WordPress core has been structured to serve the resources needed.
Another thing can be the classes in the body tag, they are very similar no matter the builder you are using, on this case I used Divi by Elegant Themes, but you can see that most of the times there is a page and a page-id-{X} class.
Using WordPress only as backend.
Now, you might get a little confused about this one, the images have the “wp-” we talked about, and if you see in the rest of the site, all the images are served from WordPress.
On this case, I only used WordPress as backend and developed the frontend in React, because the client needed an easy way to update their website, but my CMS wasn’t done yet at that time.
You see how the stylesheets have a “/static/css/XXXX.chunk.css”, this how React is rendered when you build for production. If you see the rest of the site even the classes are more clean because they are developed manually and not added automatically by WordPress.
Conclusion
Well, I hope this info is useful, but knowing this small things shouldn't be taken for granted. I could give you more examples from different technologies out there, but I’m pretty sure that this will give you an idea of what hints too look when you need to know.
