Follow These Four (4) Steps Before Building a New Website

Today I'd be sharing with you the four (4) critical tips in which you should put into serious consideration so that your understanding of how the process of building a website professionally can be made simple by knowing the right approach to building a site from scratch.

When building a new website, it's very essential to understand and identify what the website will be used for, what the site is all about.

Is it an E-commerce site, or a Blog? Are you building for a private organization? What features do they need?

How can you implement these features without having to waste too much time and effort trying to develop the site?

You may want to consider other questions that I may have not mentioned here. You see, when you look at it from the perspective of these questions, then and only then would you realize the importance of following the four steps I'm about to mention. Meanwhile, if you've been part of the Google Africa Developers Scholarship #GADS2020, you should be familiar with these four steps that every developer should consider when building a new website.

So here goes the for steps or processes:

1. Build Mockup Pages first.

Yes, practice working with mock-ups. An initial set of files that constitute your website or its pages can be referred to as a mock-up, or as scaffolding, if they only exist to display an initial visual design. This means that a mock-up page of your site can be regarded as a prototype that portrays visually how the components of the real website pages are arranged or placed, a graphical visual representation of how the actual website is expected to look.

See the example below:

Website Mock-up/Prototype

You need to build a prototype of the real website you intend to design or develop. This can be done in several ways but I am going talk of just one way which I use and consider the most convenient way on how to do this, but you may as well google for other means if you so desire.

Website Mock-up/Prototype

So, how do I set up my mock-up or prototype? I simply use a software called JUSTINMIND, it allows users to make a prototype for websites by either importing it from Sketch, Adobe XD, or Photoshop. I preferably start a new prototype.

NOTE: If you have any software other than this or a method aside this one that you use and feel might be better, please kindly share with us on the comment section below.

2. Build the skeleton of the entire pages

Just a quick heads-up!

Beware that it would be absolutely misleading or confusing to use the term "framework" as a substitute for the skeleton. Though it is not totally wrong, I'd advise you not to refer to the skeleton of a website as a framework because, the term "framework" usually refers to something like Flutter, ASP.NET, or Angular.

So what exactly is a skeleton of a website?

"The basic HTML skeleton is the set of tags required of every HTML web page you build.

You are to build your HTML skeleton using the prototype you've designed.

3. Add CSS 3 (Style)

In this section, we'd see reasons why we need to learn CSS3 and the packages or features that it comes out of the box.

Why CSS3?

The primary reason as to why most developers use CSS3 is basically because of its flexibility in handling. Take it from me, CSS3 is just so flexible and when you get the hang of it, it becomes even easier to recall and implement.

Merit of CSS3

CSS3 helps to achieve multiple column layouts with simple implementation method, for GADS participants, I'm sure you've all watched the "Practical HTML5" course on Pluralsight by Gill Cleeren. Also, CSS3 comes out of the box with "handling multiple background images" feature. If you've somehow missed this topic as a GADS student, or for the very fact that you're just a newbie developer looking for the best guide, click here to sign for the course on Pluralsight. Existing users can also use the link I just provided.

4. Add JavaScript (Functionality)

These days, a site without UX and well-structured UI is almost very annoying... But hey, there are static websites out there that tell very brief information and this is for one or more reasons depending on what the owners of the site desire to have placed therein. Meanwhile, such a site must have an appealing user interface (UI). JScript enables developers to add functionalities to their site. I'd personally recommend you learn JSscript no matter how hards you find it to be. The easy way out is to get engage with projects, get a mentor, yes! Find one, you must not meet physically with your mentor. Get serious! If you haven't decided what career you aspire to attain in life, you really need to do that first before spending time and effort investing in programming for the web or any other platform.

With the four (4) processes mentioned above, I hope you now have a better understanding of what you should focus more energy and time on. This article was intended to help you rate all four with equal priority so that you don't disregard any.

--

To your utmost growth, 

Maga Godwin.

If you find this very helpful, Inspire your friends by sharing with them. We encourage you to join our Facebook Group  

Leave us a comment on the comments section below

You may also SUBSCRIBE to SelfDev HUB's newsletters in order to get latest updates directly sent into your mail box. 

After subscribing make sure you check your email for a verification link and click on it to verify your subscription.