Make Your Own Website From Scratch

The advantages of building your website from scratch

The advantages of building your website from scratch are discussed by Owen Far Full Stack Engineer. Starting the process from scratch makes you think at a higher level to reach a particular design with a minimal minimal minimal effort. Each piece of code is there because it is intended to be there. It has a meaning, its own objective. I hate to see unnecessary data in places that would only just take space. I want to be in control of each part of the process cycle. It may not be perfect, maybe even off the web guidelines, but this is how you learn!

Owen Far Hacker Noon profile picture

Most of the people I talk with regarding the product or website that I am developing, tend to ask if I'm using any frameworks or libraries. When I say none, they usually look very surprised and ask, "Why!? It's far easier to use a library, and it saves a lot of development time". They make me question myself again and again, but every time I confirm that I made the right decision. Each and every single line of code that makes my product alive is written by me, by my own way of thinking, and my own creative ideas. It may not be perfect, maybe even off the web guidelines, but this is how you learn!

I must admit that this did not only make my coding more efficient and manageable, but each piece of code is there because it is intended to be there. It has a meaning, its own objective. I hate to see unnecessary data in places that would only just take space. I want to be in control of each part of the process cycle. When I think about the web, I don't just think about being efficient, but also about the load time and the weight of each request from your machine, back and forth to the server. How can we improve this? How can we make it better for the user?

Today I will discuss the main advantages of creating a website from scratch. I will mostly look at the theoretical aspects and share my thoughts from my web development experience.

You own the code, you control it!

Right click — new file. Blank page — blinking cursor. The moment when your creative ideas await to be written and excitement kicks in for a new project. It is such a great feeling to start developing line-by-line, and turn your ideas and imaginations into a real working digital product. You are constantly concentrated on making your website as clean and efficient as possible. Even if it's the beginning, and some of your code may not be perfect, you still feel great about the work you are doing. You become proud of it. You see the development files piling up, and realise how much you did before you even knew it. The product or website starts to take shape. You are beginning to be in control of your code.

On the contrary, imagine now, opening a new Bootstrap template, you look at the code, you start modifying it, and find hacks to make it work as you envisioned it. Files start to get messy, a lot of the code is actually being written to replace the frameworks' defaults. If you ask me, this is the worst web development technique one could undertake, but unfortunately many early developers end up following this path. By doing this you are not learning, this is just manipulating ready-made code. How can you expect to learn new skills and advance in this way? How will you learn about new web technologies, if all you do is upgrade to the latest framework version?

Trust me, seeing the final product ready to be shipped, knowing that everything is your own doing is an irreplaceable feeling. Only you know what it took to get there. It is definitely worth the effort. You learn from your mistakes, you continue improving your skills. You know everything about the structure of the website, you can easily maintain it. You are now in control.

Be unique and creative with your design thinking process

You're building the website based on your own inspirations and taste. Every part of the design is there because you thought about it, and it meets your own level of expectations. Don't be afraid to think outside the box and experiment with different techniques. Feel free and go ahead with finding your own approach to achieve particular functions. Most of the time you will realise that this is how it's actually done anyways. Brain storming is highly recommended before you give up and search online. After all, you can always double check your work with others if you have any doubts about compatibility or support. Starting the process from scratch makes you think at a higher level to reach a particular design with a minimal effort. This is what makes your code unique and what teaches you how to become a professional. You are now getting familiar with the web development environment.

Easily find bugs, performance hick-ups, and design issues

When you are writing all the code of your website or product, you imminently become familiar with the whole structure. This makes it far easier to find what is creating an error, causing a bug, or a design glitch. No time is being wasted to look for a needle in the haystack. There is no excess code that you have to go through, or include hacks to fix an error caused by the framework or library.

Something I found helpful is to leave line comments and write documentation throughout the development. Make this a habit! You'd be surprised at how easily it can get confusing when you come back to your code, to adjust or implement a new function. The comments will improve your productivity and significantly reduce the expected development time to maintain your product on future updates.

Strongly improve your coding and design skills

As we already mentioned above, building your website from the very first line of code, forces you to seek and continue learning to achieve what you envision. You push yourself to research how the required functions could be implemented natively without the use of libraries (this is usually more common for JavaScript coding, for example, to create a custom modal-box that shows a welcome message to a new user). This is what keeps you going forward, that you continually search for new ways and techniques to write and improve your code.

Optimize your website performance

My previous article was all about how to radically improve your website performance. The following are two main advantages of how building the website from scratch can effect your website performance:

There is no unnecessary code in your development files. Extra code means extra time for the site to be downloaded. All the lines of code written for the website are only there because they are required. Libraries or frameworks adds all this clutter and unnecessary code for hundreds of tricks and features that 90% of your website will not use.
Optimized for your specific requirements. If you already know what you want to develop, you are building a structure that is optimized specifically for that site. This makes your website highly efficient!

Don't let performance fall behind. Keep yourself motivated to optimize your website performance by aiming to get the best scores on google page speed insights.

Experimenting with new technologies

Owning the code of your personal website or product means that this can also be your playground. Keep practising how to apply new technologies and advancements on your own site. It is much easier to implement a new technology or function with your existing code, because now you know how it all works, you are already familiar with the website structure. This is crucial for keeping your site adoptable, future proof, and progressive. It keeps you motivated to learn, while improving and keeping your website up to date with the latest web technologies.

Closing thoughts

How would I keep my website up to date?

Refactoring your code. If you are afraid of refactoring or to continuously updating your code, then you should reconsider becoming a developer at all. This is something that you should know from the very beginning before diving into web development. Which ever language you're using, you can easily keep yourself up to date by subscribing to weekly newsletters and updates, from authoritative blogs on your language of choice. This way, you would know if a feature is getting deprecated soon, and prepare your code for future releases. It also forces you not to become lazy and leave your website become outdated. A lot of websites out there are still using libraries or frameworks that are years old, and it becomes more frustrating to upgrade from one version to the other. Pure coding techniques (if used appropriately) can last for decades or more, since these are written as was proposed in the initial preparation for the website or product. Don't let this be the reason for migrating or starting with building a new website from scratch. Refactoring your code will become the main ingredient that gets you to a higher level and stay ahead of your competitors!

Don't be afraid of badly written code, all professional web developers today have written messy code before. If you don't start by learning the basics of web development, you will get used to the ease of finding ready made templates or pieces of code. This will reduce the amount of effort you otherwise would put into gaining new knowledge. The only way to keep improving and getting better is to start messing with code now. This will make you comfortable with the language, and help you not be afraid to take on new challenges!

Thank you for reading!

You can also have a look at my eBook here — Mastering Web Development

Until next time,

Owen Far

P.S. Follow me here or join my newsletter if you want to keep learning the crucial secrets of web development.