To really understand something is to be liberated from it

– Ross Ashcroft (The Four Horsemen)

You don’t have to be a professional programmer to build your website with your own code from scratch. Just the right amount of "Knowledge" about the topic, "Practice" and a little bit of inherent "Talent" are all you need. That's all.

SPARK

WHY?

Why are you doing it? What does it even mean to you? There could be several reasons like, you want to start a blog to share your ideas, or you are setting up your online business, but also, it could be that you are just being creative, using your imagination - trying to learn how to code. Albert Einstein said - ``Imagination is everything, it is a preview of life's coming attractions``. You have to find your own motivation to do something by imagining what it would look like after you've done all the hard work. Without commitment, you can't start, but without consistency, you won't finish. If you are not creative enough to think for yourself, then look for inspiration from other people's works and learn from them. So for this project, I was inspired by an article in the ``Web Designer Magazine`` that explained how you can write code to add a parallax effect to a website. That was my spark! I imagined building a website with this parallax feature because, why not? It would be awesome. But if the reason why you started in the first place is not strong enough, you will not finish. Your reason why, will always push you and create consistency that you need to see you through. So I suggested to Candy that if she helped me record my videos, I would build her a bright, bold, and colorful website for her juice business. And if you are doing it to simply break convention, you might discover that something that was initially meant for only the special ones amongst us, the smart people like geeks and nerds, has turned out to be an extraordinary tool for human creativity. Being able to understand something, do it and stand back and say to yourself with a sense of joy, satisfaction and fulfilment, ``I did that!``.

Define

Who is your audience

If you don't design your website with your audience in mind, then you are simply doing it for yourself - it becomes a hobby, which will mean everything to you but nothing to the audience you are trying to reach. So define your project goals with the audience in mind. My client is someone who wants to develop & share their ideas in a unique way by producing good content that people can relate with or look at and say oh that is interesting, for example someone who wants to bring their juice-making business onto the Internet, however, I build my client's website with her audience in mind. Am constantly thinking; What would her audience want to see on the website? How do I get them to interact and buy her juice through the website? Should I link it to social media? And all these questions make you to think of ways you can provide effective solutions using the code you write.

PLAN

Plan out everything

Visualize your text, images, icons and layout (of course with your audience in mind). Imagine how you want your website to look like. Define the navigation or site structure (links). Think of the different pages that you would like your website to have. For example, HOME, BLOG, CONTACT US. The idea here is to have some of content or replicas because, once you change your layout, images or colors, the website will look different, therefore you need to plan with images, fonts, and icons that look like the final content that you will use.

IMAGES

Style

FONT

Family

ICONS

Summary

SKETCH
Sketch your ideas

Put your ideas onto a paper or use software like Photoshop and Illustrator. This is not meant to be perfect, it's just a sketchy idea of what you want your website to look like. It is this idea that you will convert into the real website using code in the next stage.

DESIGN
Design & Develop Website

Here, we use our understanding of code and tell a computer to reproduce what we want as we have planned and sketched. Using the code (HTML / CSS / JavaScript . . .) we design the looks and functionality of the website. Sometimes we use simple programs like notepad, TextEdit, or Brackets. However, in complex and bigger websites, we may need to use an IDE (Integrated Development Environment) such as Visual Studio, Docker, Wamp, Xamp or Eclipse to provide more tools to manage the complexity. For those who are not writing their own code, this is the stage where they use templates and frameworks like WordPress, Bootstrap, React, and Flask. My only advice to first time programmers is that, do not set deadlines, simply let the learning happen naturally over time, because regardless how how talented you are, somethings just take time.

Optimize, Launch & Maintain

Optimize for site performance or speed and for search engines (Search Engine Optimization – SEO) because you don’t want a slow website or one that no one can find.
Launch requires you have a domain name (Namecheap, GoDaddy, Google Domains, Namesilo, Domains.com) and a webserver that will host your website on the Internet (A2Hosting, Bluehost, SiteGround, HostGator, Dreamhost). For security, you can have an SSL certificate to give your website integrity and secure communications with your website visitors. It appears as a padlock icon next to your domain name. Maintenance also means that you can change your website content like blogs whenever necessary, manage email lists if any, update plugins as well as perform general updates of the code itself. This is a way of showing your users that your website is not just an online notice board – it is alive!