Knowledgebase: Web Development Guide for Beginners
A step-by-step, easy to understand website setup guide

Building a website is no joke, but it’s certainly not impossible to accomplish. Anyone who’s looking for an opportunity to learn about web development can benefit from this guide. Having a little knowledge of basic HTML will help you a long way through this guide. If you’re interested in coding or setting up your own site, start shifting to a web developer career, or just want to familiarize yourself with coding, this is the guide for you.

If you’re interested in coding or setting up your own site, start shifting to a web developer career, or just want to familiarize yourself with coding, this is the guide for you.

Fundamentals of Web Development
Designing User Interface and User Experience
Hand Coded or CMS
Website Security
Following Web Standards

I - Web Development Fundamentals

Before you start coding HTMLs on a Notepad, it is important that you learn the fundamentals of web development. Understanding the basics of developing a website will make it easier for you to accomplish your goal. On the other hand, you won’t needlessly jump from one concept to another; building a website is a long process. You don’t want to miss out on any detail that can help you speed up the process.

Gathering Requirements for Your Website

No, you don’t need to file or submit anything to create a website. We’re talking about the necessary technical and non-technical things that will help you build and secure your website.

You need to plan out your website before anything else. Here’s a list of things you should ask yourself during the planning stage of your website:

  • Do you need a website?
  • What is your purpose of owning a website? Are you looking to increase your leads, showcase your talents, or generate revenue?
  • How can your website help you or your business?
  • Who is your target audience?

Owning a website takes a lot of commitment and investment. You will put a lot of time and money on this website. Once you define your objectives, either for personal or for business reasons, it’s time to move on to more technical questions on building your website:

  • Are you ready for mobile optimization?
  • Is your website subjected to accessibility compliance?
  • Have you planned out your site’s architecture? Do you know how the flow of your posts and pages should go?
  • What security measures can you implement on your site to protect it against online threats?
  • Have you considered how user interface and user experience interact in your site?

Most of your target audience will eventually shift to mobile to browse through your content. The use of mobile devices to browse the Internet has seen a steady rise in these past few years. You should be prepared to “accept” these type of visitors to your site.

Accessibility is another issue encompassing businesses that render their products or services for the federal government of the US. Making your website accessible helps the disabled understand your content through the help of assistive devices such as a screen reader. However, using website builders will not help you achieve accessibility due to its incompatibility with screen reading devices.

On the other hand, plan how your pages connect to each other. How can they contact you? Do you have a Team page? Are your products or services page accessible a few clicks away? It all boils down on how you handle your interface and how you consider user experience while building your website.

Last, but certainly not the least, security is something you shouldn’t skimp on when it comes to developing a website. We’ve heard a lot of data security breaches, perhaps the biggest as of late is Dropbox’s data breach. In 2012, Dropbox has helped a few of its of users to secure their account. But in August 2016, it was found out that 68 million Dropbox users were compromised during the 2012 breach. If you plan to build a website especially for business or eCommerce purposes, one of the things that you should consider is an SSL certificate, encryption or tokenization, and more security features present on your website.

Once you’ve decided and planned all the details thoroughly, let’s proceed on two primary concepts that will make up your website: its domain name and where it will be hosted.

Domain Name

After the planning stage, it’s time to think of your domain name. What is a domain name? A domain name is the address of your website. This is what you type in the address bar to visit a website. For instance, Comodo’s main website is https://www.comodo.com/.

Choosing a domain name should be decided on carefully. This is what the people will be reminded of when they visit your website, so it should embody your brand and/or services. It will be a lifelong commitment to stick with a domain name. Yes, you can always change your domain name but that wouldn’t be practical; you need to purchase your domain name from a trusted domain registrar.

Aside from using domain name generators, here are some tips that will help you choose a domain name fit for your website:

Think of branding. Whether you’re a personal blogger, a small-time business owner, or a large company, think of what you want to be remembered with. Your domain name will be your brand’s name online, so choose wisely.

Keep it simple. Sometimes people tend to get creative, hence the birth of long domain names. Social media websites have good domain names as they are kept simple and easy to remember. Make it easy to type - avoid numbers, hyphens, and underscores. Creating a long domain name makes it easier for people to mistype or misspell your address.

Target your audience. If you’re registering for a business website, you can try to target your audience by including keywords that represent your business – locationbusinessname.com

Website Hosting

After choosing your domain name, it’s time to select your hosting provider.

We could go technical crazy in defining what is website hosting, but here’s a scenario:

Think of the Internet as a big mall. A mall has a lot of stalls that offer different products or services. Each store has different names - domain names - but to offer or sell what they have, they need to rent a space in that mall. That’s how a web hosting provider works. They rent out server space in order for your website to run online.

Hosting services cost money; that’s why it’s important to select a hosting service that will fit and commit to your needs as a website. Choosing a bad web host not only will result in a slow website, but you also run the risk of losing your files either to server malfunctions or even through hackers. The good news is, unlike a domain name, you can opt to choose another web hosting provider as changing a web host doesn’t affect your website’s branding.

You will want to select a web host that does not only promise good website performance, but also a host that will keep your website safe from online threats. To help you select the best hosting provider, here are some things you need to consider:

Know what you need. There are several types of web hosting plans. If you’re starting a website for blogging purposes, a shared hosting account will suffice. There are different hosting plans that will suit your needs, albeit for an extra price as the plan increases. Consider your budget when selecting a web host, however, do not rely on free web hosting platforms or too-good-to-be-true cheap hosting providers.

Hosting features. Research on the server reliability and uptime of your potential hosting provider. A powerful server with a 99.5% uptime score is recommended. Also, look for features and add-ons that come with your option.

Prices. One of the common mistakes people make in selecting a web host is that they neglect to check the prices of their chosen plan. Hosting providers oftentimes have discount and promos for new subscribers. Because of the cheap price upon signup, many are fooled to believe that the cheap price will carry on to the next billing schedule. To avoid signing up for a host that you can’t afford in the future, try to check the total amount of your billing upon sign up and renewal. Renewal fees tend to be costlier than sign up fees, so if you’re on a tight budget, you might want to reconsider for a more economical option instead.

Read the Terms of Service. Some hosting providers do not host websites that violate their Terms of Service. To avoid suspension of your account, read the ToS and check if your website might not be suited for your chosen hosting provider.

Review other supporting features. We’re talking about add-ons such as site backup, customer support, and more. It’s easy to research what their additional services mean, but one of the most important things you should look for in a web host provider is how responsive their customer support is. You will encounter problems on your website and for web host concerns, their customer support can help you. Web sites that help in generating revenue can potentially lose a lot of money during downtime.

II - Designing User Interface and User Experience

User interface (UI) and user experience (UX) are both different terms of their own. To put it simply:

  • UI is what they see on your website
  • UX is what they feel about your website

It’s possible to have a good interface at the same time, a good experience on navigating through a website. It is important to have a blend of both flavors since this is how you retain your audience to your website. User interface enables your visitors to interact with your website, to find what they are looking for, to purchase something that they need. On the other hand, user experience is how easy it is to navigate through a website, how is it is to add a product to the cart, and how simple and quick it is to check out. To achieve optimum user experience, the user interface of a website must be good yet simple enough to understand and evoke intuitive responses for faster interaction.

UI and UX are mostly web design topics, but here are some simple tips on what you need to consider in designing with UI and UX:

Experience should be similar across all platforms. Expect that your audience will include mobile and desktop users. Provide the same if not the exact experience that they will encounter across all devices. This will help returning visitors who are already familiar with your site’s architecture.

Links and buttons should work the way it should. All things in your website should be working. Links that forward to a not found page and buttons that aren’t clickable should be dealt with.

Let the user control their browsing. Some designers want to wow their clients by introducing scrolljacking functions while browsing. Scrolljacking is a web design trend that controls the user’s browsing experience with targeted scrolling. It takes the users to an exact point when scrolling down. As much as possible, scrolljacking shouldn’t be implemented as users do have the tendency to scroll no matter what. Instead, let the users browse at their own pace.

Don’t obstruct the visitor’s view of the website. Pop-ups are a thing of the past; while some sites still implement pop-ups, there are nonintrusive ways to get a reminder out in the open.

Display only what they need and want to see. You have already decided on what your website will be in the planning stage. Only display things that are related to the content of your website.

Wireframing Websites

Most of the time, wireframing is overlooked by overexcited website owners and even designers who just want to get the job done. Again, if you’re designing and developing a website, it is important to properly plan out the structure of each page or templates of each page to properly devote resources to creating a website.

Wireframing is commonly done by the design and development team of a website project to properly lay out any functionality and content on a page. Wireframes are used in the early stages of website development to establish a page’s basic structure before any visual design or content is added.

Instead of coding and designing a website directly, a wireframe is a cost effective way to visualize what goes where. It’s faster to use and to get approved since you can see directly what needs to be changed without the hassle of recoding and redesigning everything from scratch. For web designers and developers, wireframes are effective during the planning stage of a website so they could let the client visualize how the website will turn out before they proceed in creating the design and developing the functionalities on every page.

This is an example of a wireframe:

Website Content

The purpose of a website is to get your message across people from around the globe, or perhaps your target location. Website content is important in developing a website because it helps you do just what you need it to do.

Content encompasses a lot of mediums, but for starters, content can be a simple blog post, an image, video clips, audio clips, and other multimedia forms.

It is important that you create high-quality, unique content for your audience. People are information-vores. They digest information quickly as long as it’s easy to understand and quick to read. Getting your message across your content forms can help in promoting your service or building up your brand on the Internet.

Web Design Rules

In web design, creativity works best if topped with great UI and bearing importance on the UX. Though it’s not easy to achieve, but not impossible to implement. Below is a list of basic rules you can follow in designing your website:

Make the main idea the focal point of a page. When designing a web page, make sure that the main topic of a website is the one being focused on the page. Avoid cluttering and giving it all on one web page. You can always segment your information into valuable pages from a parent page. Avoid creating too many distractions, and use the negative space wisely.

Stick to your color schemes and typography. Create a uniform identity across all pages within your website. Early on, you can select the colors that will go on your website that represents you or your brand. Stick with two font pairings that will go best with your website’s purpose.

Create visual cues that will help your users scroll through the website. Not only will it help in directing your users to focus on your content, but it can also help in driving conversions for your website through a call to action.

Be responsive. Responsive web designs are in, as it’s the best option nowadays if you want an all-in-one package deal. Make sure to study the elements of responsive web design.

Typography

Typography is basically what can make or break your game in designing a website. You can easily go away with familiar fonts like Calibri or Arial, but nowadays it’s easier to implement other cool fonts that you can use on your site.

As a beginner in web design, here are some tips you can use in designing a site:

  • In designing a page, you will need two types of fonts; one for the headings and another one for the paragraphs.
  • Free fonts are now available at Google Fonts; look for a font style that you really like and head over to Font Pair, a library that pre-paired Google fonts that look good together.
  • Voila! Now you can integrate these fonts on your website! If you need to know more about Google Fonts and how it affects your website, check out their FAQ.
Website User Goals

Have you kept your user goals in check?

A website should reflect on what the user needs. It should be the answer to their questions and the solution to their problems. Does your design answer or resolve a user’s inquiry? Do these nifty functions deliver any use to your visitor? If you think what you’ve done so far answers these questions positively, then it’s about time to start creating your website.

III - Hand Coded Website or CMS Website Platforms

Back in the day, creating a website was very difficult; you have to have the knowledge to be able to build a website from scratch by hand coding it. That’s why old websites were very simple in design.

Nowadays, anyone with little to no knowledge of coding websites can own their very own websites by just a simple click of a button! Websites are now convenient to setup and create; you can even choose different themes to go with your site! Amazing, isn’t it?

Hand Coded Websites

Hand coding websites take a lot of knowledge and skills to become successful. While this may be the hardest route in creating a website, some still prefer this method because of better customization opportunities over the site’s aesthetics and user experience.

If you’re interested in learning how to hand code websites, you need to learn a large array of programming languages aside from HTML, Javascript, and CSS. To be able to meet the demands of modern users, you should also need to learn other languages such as PHP, MySQL, etc.

While hand coding is recommended for those who want flexibility in their website, knowledge on using CMS will come in handy for other collaborators who don’t have enough skills or knowledge to add content to the website. A CMS can also serve as a framework for you to begin the development; there are open-source CMS that you can use and customize it from there.

HTML

Basically, anything that you can view or read on a website is HyperText Markup Language or HTML. HTML deals with the written content of the page, along with other multimedia items such as images and audio. HTML, CSS, and Javascript go hand in hand in building a simple website.

The latest version of HTML is HTML5. Now, HTML is capable of handling elements such as semantic elements, graphic elements, and multimedia elements.

HTML is fairly easy to learn and understand. To learn more about HTML and its different functionalities, you can visit these websites:

CSS

If HTML is what you view or read on a website, then Cascading Style Sheets dictate how these are shown on the website. Instead of manually editing each part of a content’s HTML one by one, CSS applies a uniform style for certain elements.

Like HTML, CSS is also updated to its latest version, CSS3. Now, new modules are added to its capabilities like backgrounds and borders, text effects, animations, and much more.

Interested in mastering CSS to easily apply formatting to your HTML content? Visit these websites to learn more about CSS:

Other Languages Related

Aside from HTML and CSS, there are other programming languages that you would want to take note of should you choose to learn how to hand code a website – PHP, JavaScript, ASP, Ruby etc.

CMS Website Platforms

If you’re not keen on learning how to hand code your website, but still want to have one, then a Content Management System (CMS) is the best option for you.

What is CMS? A CMS is a software application used to create and manage digital content. With a CMS, it’s easier to do a lot of things that is limited when you hand code a website. Now, it’s easier to search for anything on your website, it’s easier to index and sort through your posts and pages, and it’s easier to manage and maintain a website on CMS.

If you do not have any experience when it comes to coding websites or maybe you know your basic HTML and CSS, then you’re all set to build a website using a CMS. It’s like a plug and play game where you just need to know what and where to tinker; you will learn a lot during the process of creating your website. However, it is suggested that you familiarize yourself on the different functionalities of a CMS when building a website so that you won’t encounter difficulties that will require the help of an expert to fix your problem.

Free Website Platforms

There are different website platforms that are free to use. Note that even though these are free to use, its functionalities are limited to a certain extent. These are directly hosted on the website platform, thus its limited flexibility in implementing certain content.

Some of these free website platforms are WordPress.COM, Blogger, and Tumblr. These websites are popular with different publishers such as aspiring authors and bloggers. Using these free platforms makes it easier for people to publish their own content in just a matter of seconds. Using these free platforms allows you to have your own website as a subdomain, meaning you’re limited to their domain name, e.g., name.domain.com.

Take note that WordPress offers two kinds of platforms, the WordPress.COM and the WordPress.ORG. The .COM site is the free website platform, where you can have a website in a matter of minutes, without any penny to spend. WordPress.ORG is where you can download WordPress to use for your self-hosted site.

Self-Hosted Website Platforms

If you want to enjoy the benefits of having your own host and own domain name, then a self-hosted website platform is for you. Today’s top three self-hosted website platforms are WordPress, Joomla, and Drupal.

Again, WordPress has its own website platform, and they allow other people to use their CMS as a framework for their very own website. Nowadays it’ very easy to install WordPress with just one click of a button. Most website functions can be done with WordPress: blogging, eCommerce, portfolio gallery, rating website, and more.

Joomla is another type of open source CMS. It shares a lot of similarities with WordPress, although using Joomla will require a set of technical skills unlike WordPress, which is built for the newbie user. It’s great for e-commerce or social networking websites.

Drupal might be the most difficult one to use among the two, but it is also the most powerful CMS of them all. It requires an understanding of HTML, CSS, and PHP. It may be costly to maintain a Drupal website, but it is more secure and less vulnerable than WordPress.

Who is Winning the Website Setup Platform Battle?

By the looks of it, WordPress leads the competition if we’re talking about ease of use and number of website users it already has.

However, for new websites like you, you might want to reconsider your choice of a platform according to your website’s purpose. If you’re building a government website, then Drupal is the best way to go than the other two. On the other hand, if you’re looking for a better platform for your eCommerce store, then Joomla is the recommended option. Be prepared with an ample amount of understanding on your chosen CMS before moving on to installing it on your website.

IV - Adding Security on Websites

One of the things website owners tend to forget is website security. Most cases of hacking or security attacks start because their website is too weak or vulnerable to these kinds of malicious attacks.

Before you know it, it’s too late and the damage is done.

Even on the Internet, the quote “Prevention is better than cure” works just the same way. Instead of waiting or allowing it to happen, it is better to start building up your defenses and fortify them along the way. Yes, it will cost you money or take a lot of effort and time, but it’s worth it.

Here are the things you can start today:

Update your software or platform – did you know that the controversial Panama Papers leak started from an outdated Drupal installation? Other data security experts say that an outdated WordPress plugin is to be blamed. That is why updates to your software and platforms are important as it may cost you a big amount of data loss in the future.

Manage your passwords – change your passwords regularly. If you have used any app that has been compromised in the past few years, make it a habit to change your password and never revert back to the old one you use. Be wary of using other computers as those may be infected with keyloggers that capture your keystrokes; make it a habit to securely change your password regularly, and don’t let anyone know yours.

Manage user capabilities – once you manage your own website, you assign different user capabilities to a person, whether as an Editor, an Administrator, or a plain old User on your website. It is important to limit the number of Administrators, especially that Admin roles hold a lot of responsibilities and has access to a lot of functionalities within the site.

Secure login pages – hackers go straight for these pages to hack into your admin directories. Hackers have their own script that can go through all the directories on a web server to look for admin or login pages, then they start penetrating your site with all the tools they have to get in your backend. As much as possible, rename these admin folders to maintain security and avoid brute force attacks from these hackers.

Consider secured browsing through SSL – See explanation below.

SSL Certificates

Secure Sockets Layer (SSL) is an encryption technology that creates a secure connection between a web server and a visitor’s web browser, allowing all these data to be passed to and fro without worrying about any form of compromise.

Websites with SSL Certificates now display an HTTPS on the URL, instead of the insecure HTTP. All browsers recognize HTTPS URLs, and it can easily be spotted with a green padlock on the browser’s address bar.

Over the years, Comodo has dedicated itself to creating trust online with its various product offers. Trusted by 99.99% of browsers, Comodo believes that their clients only deserve the best; thus our SSL Certificates are issued and validated as quickly as possible.

When you choose Comodo, you choose a brand that’s trusted and well-known across the globe; our TrustLogo is largely recognized around the world and increases visitor’s trust. We offer the highest warranty of security at an affordable cost tailored to your needs.

Learn more about Comodo’s SSL certificates and how it can make your site secure and trustworthy.

Backing Up Your Website

There’s no telling when data loss would occur especially for those websites that are prone to hacking due to carelessness and lack of security features. Imagine losing all of your data - blog posts, videos, audio podcasts, hundreds of product pages - in just one unfortunate event. Remember the days when we used to swear that we will always click Save when we’re working on something we don’t want to lose? That’s how it is.

V - Following the Web Standards

The Internet is growing at a rapid pace; gone were the days of old, tabular websites and now we’re in the era of responsive web design. The World Wide Web has become a better place, thanks to the innovations of mankind as they strive to deliver the best content that will satiate information-hungry users across the globe.

Just like anybody else, the Web needs proper guidance and standards so that the content shared on the Internet is accessible to each and every one of the users in the world. Compliance with these standards makes it easier for anyone to access information on the Internet across multiple platforms, and even by the handicap.

Aside from these reasons, these web standards help search engines deliver the best answer to a search inquiry they receive. Because of these guidelines and standards, we enjoy the vast amount of information whenever or wherever we go.

Responsive Mobile Design

The use of mobile for searches and other online interactions has been growing at an astronomical pace. Because of the constraints brought about by different screen sizes, a responsive web design is preferred by many designers to keep up with the differences in display sizes in the present time or even in the future.

A responsive mobile design allows users to browse a website on different multi-device experiences. Instead of going to the trouble of creating a subdomain and redesigning a mobile website to look like its antecedent, a responsive web design enables the website owner to display the same website across different devices while providing a similar experience on each platform.

Keeping Accessibility in Mind

Website accessibility is simply making your website accessible to everyone, even to those who are handicapped. In 2012, the Census Bureau has declared that 56.7 million Americans (18.7% of the U.S. population) have some type of disability and out of this number, an estimated 38.3 million (12.6%) have a severe disability. These disabilities include hearing, sight, movement, and cognitive impairment. If these statistics were gathered in 2012, what more could it be by today?

Because of the new technologies available nowadays, the disabled can now access information on the Internet through assistive devices such as screen readers. If you have implemented the best practices on coding and you’ve properly formatted your content, you’re a few steps ahead in making your website accessible.

Copyright and Plagiarism

Billions of websites now exist on the Internet. When we search for a song lyric, there are thousands of websites returning the same result. While these types of content are typically seen across websites, there is still some content that is subjected to copyright violations and plagiarism.

Copyright and plagiarism are oftentimes misquoted and used interchangeably. Plagiarism is simply claiming or attributing a work that you did not make, or using someone else’s work without properly crediting the owner. Meanwhile, copyright infringement is using someone else’s work without obtaining or having their permission to do so.

Duplicate content is a rampant issue on the Internet. Search engines are continuously doing their part in removing these duplicate content from their search results. To avoid plagiarism and copyright infringement, cite resources you have gathered in creating your own content.

Looking for resources on copyright and plagiarism? Here’s a list of what you’ll need in managing a website: