Website development is commonly known as building a website from scratch. It also involves the maintenance of websites and publishing web pages. This guide helps you understand the basics of web development, we hope it helps you take your first step to become a skillful web developer!

The internet isn’t going anywhere. It’s still going to be the first place you use to research the latest shoe brands, scroll through cat memes and watch YouTube videos. The demand for digital talent has grown year on year, with data science and web development consistently showing a 30% increase in demand since 2020.

What Are Websites?

Websites are files that are stored on servers, which are powerful computers capable of storing data, uploading them, and downloading them. These servers form a giant network called the internet.

Browsers are mainly used to load websites using the Internet. You’re probably familiar with browsers such as Google Chrome or Internet Explorer, the computers that are enabled to access these sites are called “clients”.

What Is An IP Address?

To access a website, you need to know its Internet Protocol (IP) addresses. Your IP address works like your house address, it helps the server locate your website on the internet among the billions of other websites.

A popular way for searching for your IP address is to type “what’s my IP address” into your search engine. Most internet users prefer using domain names (e.g. google.com) to locate a website rather than typing the IP address into their browsers.

What Does HTTP Mean?

HyperText Transfer Protocol (HTTP) connects your website requests (for texts, images, videos, etc) to the server that holds all your website data. The reason it’s called a protocol is that HTTP is a set of rules for how messages are sent across the internet. These protocols allow you to navigate between site pages and websites.

When you search for your website on your internet, HTTP allows your computer and the server to communicate with each other and speak the same “language” when they make requests and responses to each other over the Internet. It acts as a translator between you and the Internet, after receiving a request from your website it collects data from the server and translates it back to you in the form of a website.

What Is Coding?

Coding is basically how servers communicate with computers, or websites using programming languages. They’re called languages because they include vocab and grammatical rules for communicating with computers.

They also include commands and abbreviations that need to be read by devices and programs. All software is written in at least one coding language (e.g Ruby, Python, HTML5, etc). These languages may vary based on the platform you want your website to be on.

What Is CMS?

A content management system is a web application or a series of programs used to manage all the content on your website. You’ll typically use them to publish your website content and revise them when needed.

You won’t need a CMS to build a website but having a CMS makes things much easier to manage. It also provides simple plugins and drag-and-drop blocks to give your website a beautiful interface. Generally, CMS is great for bloggers and e-commerce sites.

What Is CyberSecurity?

There’s always someone out there looking to find vulnerabilities in websites to expose private information, steal data, and crash servers. Cybersecurity is all about making sure your data is secure, and your networks or computers are protected fully from threats.

The methods used by hackers are constantly evolving, as are the security measures are taken to defend against them. Globally, cyber threats have evolved at a fast pace, with a rising number of data breaches each year. According to a RiskBased Security report, almost 7.9 billion records have been leaked through data breaches in 2019 alone. That’s almost twice the number of security breaches recorded in 2018! As a result, you’re going to need a basic understanding of cybersecurity to be effective in web development. Security audits are also critical to ensure your website is completely protected.

Types of Website Development

There are generally two types of web developers, those who focus on front-end web development and others who focus on back-end development. Those who have mastered both types of web development are called “full-stack developers”. Web developers who work on front-end coding work on client-side development.

Front-end development is the process of building the interface of the website. Front-end code allows users to interact with your website, watch videos, expand or minimize images, select texts, and more.

There are a few programming languages you’ll need to master to develop your frontend.

• HTML (HyperText Markup Language) – Used to give websites a structure.
• CSS (Cascading Style Sheets) – Styles and simplifies the design of sites.
• Javascript – Used to provide dynamic behavior on your website.
• Bootstrap – Often used to create responsive and mobile-friendly websites

If you’re looking for a frontend developer, Upwork provides freelance services for Malaysian companies to create beautifully designed pages.

Back-end development is about building the server and digital infrastructure which the clients and users don’t often see. Developing the back-end of your website will typically require a different set of languages such as:

• PHP – A language used specifically for web development
• Javascript – One of the most popular languages in the industry
• Python – Allows you to quickly integrate systems efficiently

Other Types of Web Development?

Desktop Development

Desktop developers focus on building software applications that run on your PC or laptop devices, rather than apps that run on your web browser. However, modern apps like WhatsApp have both desktop and browser functions, and programmers often learn how to create apps that run locally and on browsers.

Mobile Development

Mobile developers create applications for smartphones and tablets. They require a very different set of development skills and knowledge compared to building apps for websites. Examples of Malaysian mobile developers are companies like Upstack Studio that have created e-commerce apps for BookXcess online and news apps for The Malaysian Insider.

Game Development

Game developers code for video and console games like the Playstation, Wii, Switch, etc. Their skills often overlap with those in mobile development. Game development has boomed as an industry in Malaysia, with startups like Gameka and Game Taiko at the forefront of digital transformation.

Embedded Development

Embedded developers work with electronic devices that aren’t computers. These are devices with AI technology and electronic interfaces. Just think of touch-responsive billboards, self-parking systems or IoT devices.

Embedded development is growing more popular as the number of networked devices grows, as seen by smart appliances, Bluetooth technology, and virtual assistants (like google assistants!).

Security Development

Interested in hacking and cybersecurity? These types of programmers are often called security developers. Their job scops include ethical hacking and attempting to “break” websites to uncover security weaknesses (without causing harm). They also devise technology that can sweep, detect and remove all kinds of security threats.

Let’s get started on the web-building process.

Planning Your Web Development Project

Creating a website isn’t a simple process. It may take anything from a few weeks to a few months to build your first website, depending on the abilities of your team or your own experience. Each development path also requires different programming languages and resources.

This section gives you the basics of the web development process and whether you should use a CMS (content management system).

1. Plan Out Your Website and Required Resouces

Before you begin coding your first website. It’s better to plan the whole process out to avoid wasting resources and time later on.

If you’re working with an organization, make sure your whole dev team is on board with your website development process. Website development also requires financial support and marketing to funnel visitors to your site. Make these departments are well-informed of your decision before you start building the website.

Here are some things to consider before drafting your first website:

1. What is the goal of your website?
2. Who is your audience, and how do you want them to engage with your site?
3. What type of website are you building? (e.g e-commerce vs event registration)
4. What type of content do you want to publish and at what volume?
5. What’s the purpose of this content?
6. How will you structure your website to make it easy to navigate?
7. What’s your budget?

2. Create A Wireframe

All good websites should be visually planned out. Developers often call this a wireframe. It doesn’t have to show every single detail of your site but, it helps you and your developer have a shared idea of what you want your website to look like. You can draw out the whole wireframe on a whiteboard or visualize it with apps like Figma or Sketch.

Wireframes must show where all the text and images should go on your page. You can use blank boxes to represent images and “dummy text” to fill in the space where your content will go.

3. Plan Out Your Sitemap

After your wireframing is done, follow up with planning your sitemap. A sitemap helps you understand how your web pages are interconnected. At this point, it’s also vital that you bring in your SEO team and content strategists into the picture. They will help you determine how your pages will be interlinked and the best way to categorize your website content.

4. Write Your Website Code

Once you’re done planning, it’s time to start writing code!

Developers will use different coding languages for the front-end and back-end of websites, as well as for different functionalities of the site (e.g some code may be used for website design, while others will be used for building servers). These different languages work together to build and run your site.

Let’s start with the most commonly-used languages.

HTML

Created in the 1990s, HyperText Markup Language (HTML) is the foundation of all websites and is the bare minimum of what you’ll need to design a website. However, we wouldn’t recommend using only HTML because your site won’t look very attractive.

HTML is often paired with CSS and Javascript to enhance and modify the structure of a website that starts out as HTML codes. HTML5 is the most recent version and can be used on all kinds of platforms, making it very useful for mobile app development.

CSS

Cascading Style Sheets (CSS) was also created in the late 1990s. It adds colors, typographic treatments, and layouts to improve the overall look of websites.

CSS freed developers to transform their websites to look far more aesthetically pleasing, much like HTML5, CSS is compatible with a wide range of browsers.

JavaScript

JavaScript was custom made just for web development! Created in the mid-90s, JavaScript is used to add functionality to websites. Developers use it to add animations, automate tasks within certain pages, and add interactive features that enhance user experience.

JavaScript is rapidly evolving. It wasn’t considered a “real” programming language, but now JavaScript is now the most widely used coding language in the world. Since the development of Node. JavaScript now works as a back-end programming language. It’s among the first the languages to be understood by browsers and might even be used for AI machines too

HTML, CSS, JavaScript are the “big three” of web development. Almost every website uses them in some capacity. There are plenty of others, such as server-side languages like Java, C++, Python, and SQL, but understanding these three is foundational to your website development knowledge.

5. Build The Back-end of Your Website

The backend of your website will store and organize all the data and content you need to load onto your website. For example, sites like Instagram may store all your photos in the backend, so but the front-end can allow others to view them. Typically, your backend will be made of two components:

Databases: are responsible for storing, organizing, and processing data so that it’s retrievable by server requests.

Servers: Servers are responsible for sending, processing, and receiving data requests. They’re the “processing step before” your data ends up on the browser.
The browser will, in effect, tell the server “I need this information”, and the server will know how to get that information from the database and send it over.

6. Build The Front-End of Your Website

If you’ve ever used Wordpress or Google Sites, you’re already familiar with the front-end of websites and how they function.

Front-end (or client-side) development includes a combination of JavaScript, HTML, and CSS. It also includes choosing fonts, layouts, navigation and building a responsive web page. This is where your website begins to look the way you imagined it on your wireframe.

In a world where technology and consumer preferences are ever-changing, front-end coding becomes outdated much faster than back-end development. It’s good to keep yourself constantly updated on the latest coding resources.

7. Work With A Content Management System (CMS)

Rather than coding from scratch, you could save a lot of time and resources by using a Content Management System. You won’t be able to customize as much as you would like with CMS. However, CMS will save you from having to code part of the system. It also provides tools for hosting and storing user information, creating blog posts, and publishing content.

Many CMS include plugins that also help you better manage your back-end. For example, WordPress comes with an e-commerce plugin that gives your website the basic functions of an online store. Instead of spending hours coding a complicated back-end program to charge customers and manage their credit cards, you can just use an existing plugin and avoid the need to deal with databases and server-side code.

Wordpress is among the more popular (and free) content management systems. However, there are also agencies like JustSimple and Rev Malaysia that provide services to design a content management system for your business purposes.

8. Get A Domain Name

At this point, you’re likely to have an IP address already. It also needs a domain name. Give your website a name that’s easy to remember and search up. It’s critical to get your domain name just right, because it affects your branding, SEO and the first impression of your site.

Here are a few simple guidelines for choosing a domain name:

1. Make sure your domain ends with .com or .com.my. This makes your site easier to search up than an uncommon domain name like .pizza.

2. Make sure it stands out. Few people will remember Healthinsurance.net since it’s such a generic name. For branding purposes, give your website a distinct name that will stick in the mind of your consumers.

3. Make it easy to pronounce. Your visitors may share about your website by word of mouth, so you’ll have an advantage if you have an easy-to-pronounce site name.|

4. Make sure it’s easy to type. Stick to lower cased letters, no hyphens, dashes or anything that would take your consumer extra time to search up. You should also aim for a short name that’s under 12 characters.

5. Consider using niche keywords. Your site name affects your keyword ranking, so we’d recommend choosing a keyword that fits the niche you’re targeting. Generic keywords will have many competitors. Instead, aim for keywords in the middle of the range that have an average search volume.

Where to get a domain name:

There are websites like MYNIC that help you search for domain names that are already taken. Companies like ExaBytes can help you register your domain name once you’ve chosen one that’s to your liking. WordPress also allows you to register your domain name too! Shinjiru has a range of domain names for you to choose from starting from RM50 to RM80 if you’re looking for an affordable domain name.

9. Launch Your Website!

Once you’ve set up a domain name and linked it to your hosting provider, you’re almost ready for your first launch!

But wait – there are still a few things you should check before the official launch. These include testing for any glitches, notifying the rest of your team, optimizing for SEO, and making any other final checks before “flipping the switch”.

Website Development Resouces

Want to learn more about development and coding? Besides coding and networking with other developers, there are plenty of resources you can tap into to further your understanding of web development.

Whether you want to explore back-end, front-end or full stack development, there’s a huge number of online resources that can help you!

Web Development Courses and Classes

Khan Academy

Khan Academy is a popular (and free) educational resource. You can learn anything from physics to linear algebra from their website, it also covers a few basic topics on computing.

FreeCodeCamp

FreeCodeCamp is a non-profit organization that helps people learn to code for free. It has thousands of articles, videos, and interactive lessons, as well as worldwide study groups. FreeCodeCamp has helped thousands of developers and students learn about programming and land jobs.

StackOverflow and Reddit

Both StackOverflow and Reddit are online communities that work as a forum between developers all over the world. You can benefit from the questions asked in these communities as many developers often struggle with the same problems.

Web Development Communities

MDEC provides coding boot camps that help you start your career as a programmer. Their camps last 28-days and give you all the fundamentals of coding to complete a project. Their courses give you all the essential skills you would have learned as a computer science or IT graduate from university!

General Assembly Malaysia specializes in giving Malaysians the most in-demand skills in their industry. They have a front-end development course that teaches you how to use HTML5, CSS3, and Javascript (ES6) to build your website. Their classes have instructors that give you personalized feedback and you can get a head start on their classes by reading up on their resources beforehand.

Meetup.com has several coding groups that you can join for free (or with low entry fees). They have groups for WordPress development and Ruby which is used for developing apps. The advantage of joining these groups is the freedom to learn at your own pace and pick up a wider range of coding languages!