You may have your own business and would want to create a website of your own. Expect to be mind-boggled if you begin looking on the internet. So much information is out there that choosing where to begin can be confusing.
There are so many reasons why a business needs a website, even if you are a small business. Learning about web development is like drinking from a fountain with the pressure of a fire hose, on full blast. Perhaps the hardest part of going into web design from scratch is identifying where to start.
To shed some light on this fascinating topic, we’ve put together this ultimate beginner’s guide to web development. Perhaps, it can help guide you on the right path in your quest to become a full-fledged web developer.
What is web development?
To put it in the simplest of terms, web development is the creation of website pages for the internet. This website can be a single page or composed of multiple pages. To cite a concrete example, Facebook is a congregation of multiple pages working as one. The same goes for e-commerce sites like Amazon.
Technically, web development involves technologies employing multitudes of programming languages and tools used to produce dynamic and fully-featured websites and applications.
1. Learn the basics of web development
As already mentioned, web development is all about building websites that can be a single page or multiple pages. Whatever you see on your web browser has a direct connection to web development.
Websites are all made up of files that are:
● HyperText Markup Language (HTML)
HTML is the main file type that is loaded in your browser and is the foundation of all websites. It is what you see when you look at a website.
A very basic website can be made using only HTML and no other types of files. It won’t look as interesting, but that’s the minimum that you can do for a website to be a website.
● Cascading Style Sheets (CSS)
A website will look as aesthetically pleasing as a Word document without CSS.
With CSS, you can create layouts for the website in any way you please. With it, you can add colours and eye-catching fonts. You can add animations and draw shapes with more advanced CSS.
● JavaScript
Of course, you would want something that allows you to interact with elements on the website and manipulate them. To do this, you would need to learn a programming language called JavaScript.
Whatever you code using HTML can be ‘beautified’ using CSS. What JavaScript does is make a website more dynamic.
To cite an example, JavaScript is responsible when you scroll anywhere on the page when you click a button. Or, it is used when building a slideshow with buttons to navigate through a set of images.
To be able to work with HTML, CSS and JavaScript files, you would need to use a program called a code editor. But we’ll discuss that a bit later.
2. Choose your specialisation.
There are three broad categories of web development. Front-end development, back-end development, and full-stack development.
- Front-end development also called client-side development of your website or application. This aspect of the development process deals with the interactive components of the website.
It deals with producing the elements that users see and interact with. Included in this is the incorporation of text colours and styles, buttons, images, and navigation menus.
Front-end developers typically use HTML, CSS, and JavaScript.
- Back-end development also called server-side development, involves the technical foundation of the website. This side of development arranges data and the process of making sure that everything on the front end works.
For example, when a user logs in to social media, the back-end checks if the login credentials are accurate. With verified credentials, the server then sends back all information associated with that account.
Back-end developers have a lot more languages to choose from such as Python, PHP, Java, C#, or Rust.
- Full-stack development refers to the development of both front-end and back-end portions of a website or application.
In web development, you can choose to specialise in just the front end or just the back end. Perhaps if you’re focused, you can learn both and go full-stack, which would make you more marketable.
3. Learn key programming languages for web development
We already mentioned a few programming languages that one can use in making websites. A logical question you might ask is what and how many programming languages do I have to learn?
The question is simple, but it has a complicated answer. The complication lies mainly in multiple variables. Variables like if you’re a beginner or a pro. The types of projects you work on or would want to work on.
Since you are a new Web Developer, it makes sense to start with the basics. Of course, knowing more than the basics will set you apart from other developers. But of course, if you know more programming languages, so much the better.
To some extent, three names come up again and again: C++, Java, and Python.
4. Code Editor.
Regardless of the programming languages you decide to work with, we already mentioned you would need a code editor. The best code editor would depend on what kind of code you would write.
If you’re mainly doing HTML, CSS, or JavaScript, you could write code using Windows Notepad or TextEdit for Macs. No frills, no fuss, not much fun either.
Sublime, Atom or VS Code are editor programs loaded with features that make coding a lot easier. For back-end languages, you will need a more powerful editor called an Integrated Development Environment (IDE). IDEs allow you to debug and compile your code.
Time to make your front-end skills shine.
Once you have the basics of HTML, CSS, and JavaScript down, you are ready to start getting into more advanced programming skills in the front end.
Back then, there was only one way to view websites: on your computer. Making a website, you only had to think of how it would look on your computer. Smartphones and mobile data were still a gleam in their engineer’s eyes.
Today, more people are using their smartphones or tablets than their desktop computers to browse the internet. Therefore, we need to make sure that all our websites look good on everything from the biggest monitor to the smallest phone.
You have to create a ‘responsive design’ when making your website. It is called that way because the design can ‘respond’ to any device that is using it. This can be tested by manually changing the width of your browser window and seeing how the design looks at large and small widths.
A truly responsive website will take a bit of planning during the design phase. The purpose of this is to see how everything will look regardless of the device being used. The web development stage will involve employing media queries to control which CSS properties are being used at specific widths.
Building a responsive website quickly with the framework.
Coding all the CSS of a responsive website takes a lot of work. If you don’t have spare time, using frameworks can spare you a lot of time, such as: Bootstrap or Zurb Foundation.
Think of frameworks as the web development version of a cake mix or a bare-bones house. All the components are there to bake a cake or build the house, but it isn’t totally complete.
Frameworks come prepackaged with custom CSS and JavaScript. The guesswork is eliminated by coming in with pre-styled elements such as headlines and buttons.
Frameworks also come with JavaScript components that are essentially little plugins like navigation bars and modal pop-up windows.
Three JavaScript frameworks are currently big winners: Angular, React, and Vue. Of these three, React is the most popular among developers who have used and loved it.
Vue on the other hand may have the lowest amount of usage. But, it is in the lead in terms of being a technology that developers want to use in the future. It is safe to say that Vue could become big in the next couple of years.
If you are still learning, Vue is a good place to start learning. It is lightweight and well-documented. It is also a good idea to eventually add either React or Angular to your toolbelt.
Using something that’s already been tested will make building your website a lot easier. But, if you want to be a savvy developer, later on, you shouldn’t become too dependent on frameworks. It’s still best to learn how to build a responsive website from scratch.
Spare yourself the headache with Sass.
Sass stands for “Syntactically Awesome Style Sheets.” It is a stylesheet language that is compiled into CSS. Sass maintains large stylesheets and keeps them well-organised making it easy to share design within and across projects. Consider it an extension of CSS.
Sass simply makes writing CSS styles much faster, easier, and more intuitive.
As you get into CSS, you’ll realise that regular CSS can be quite tedious. If you are not organised in writing your style, it can quickly become too frustratingly tangled. Sass will give you more power and control.
Here are two examples of how Sass can make your life easier:
- Mixins: You can use mixins instead of copying and pasting the CSS code for certain elements a million times. With mixins, you only need to write a set of styles once and reuse it as many times as you want.
- Nesting: You can nest all children inside the parent styles, instead of simply writing all the parent classes. Doing this also cuts down on a lot of duplicate work.
Reminder: browsers can’t read Sass files themselves. Sass files need to be compiled into CSS. To do this, you would need a build tool. But with so many of them, what would you choose?
Tools do heavy work for you.
From source code, build tools assist in the creation of executable applications. Build tools like Webpack, Grunt, and Gulp are usually used by developers to do the following tasks:
- Processing Sass files into CSS.
- Concatenating several JavaScript or CSS files and combining them into one CSS or JavaScript file.
- Minifying or compressing CSS, JavaScript, and even image files.
- Automatically refreshing your browser with JavaScript or CSS code that is already updated.
But can you not do these tasks yourself? Yes, you could. But think of doing it over and over again every time you make a small CSS or JavaScript change, it would get tedious after some time.
Time for the library.
In web development, a library is a set of pre-made tools that you can add to your structure. Though libraries are not a structure in themselves, they do provide additional functionality for existing systems.
To continue with the cake and home-building analogy mentioned above, think of libraries as the icing on the cake. Or furnishings and appliances that you choose to install in your house.
These furnishings and appliances all perform a specific function. But for them to be useful, you have to install them. One example of a library is jQuery.
It is a JavaScript library that doesn’t have a structure in itself, but it has over 300 various functions that can be of use. Of course, these definitions are not agreed upon by everyone.
The back-end.
We’ve mentioned that back-end development involves the technical side of web development. There are a lot of back-end languages that a developer can use. Many of these languages have been around for some time. Some existed even before the internet.
This presents a dilemma on which language to start with. To narrow down your choices, pick a programming language that is easy to learn, enjoyable, and relevant. A language that’s well-documented, and/or has good online support.
The only thing you have to keep in mind is that it is not a requirement that you learn every programming language. And being a beginner, it is highly recommended that you start off learning one language first.
The good thing is, that once you get the hang of programming in one language, it will be easier to adapt those concepts into other programming languages.
Back-end languages.
By far, Java is a stable language. It has been around for quite a while and has been widely used. Many big tech companies use Java in their websites: Google, Facebook, Amazon, Twitter, and YouTube among others.
The reason for this is that Java is fast and consistent. Java can also scale up to handle large websites, and it allows for easier maintenance for long-term projects.
In 2015, Twitter was growing so fast that it switched to Scala, a language that runs on the Java Virtual Machine. They originally used Ruby on Rails.
Microsoft created C# to be Java’s competitor, and it was an industry leader, peaking back in 2009. It has declined since then. But don’t count it out yet. C# is used in a wide variety of applications, such as Windows desktop apps and even in Android programming.
C# is also being used a lot in game development. So if you’re also into Android or game development, C# is a great option to learn.
First coming to the scene in 1991, Python is a frequent “first language” learned by many programming students. This is due to its readability and the free use of English keywords, making it an easy language to learn.
Ruby was first released in 1995 and began getting attention when startup Basecamp invented the framework Ruby on Rails. Rails made it quick and easy to build web apps. Due to its popularity, it became the framework of choice for a lot of startups.
The only problem with Ruby on Rails is that it does not scale well. This leads startups to eventually switch to other languages once they get huge, like Twitter switching to Java.
PHP.
As of July 5, 2021, W3Techs.com, shows that PHP is being used by 79.1% of all websites. The large market share of PHP is due to its use in content management systems (CMSs). Three of the largest CMS — WordPress, Joomla, and Drupal are all built with PHP.
In addition to CMS, PHP has some frameworks that make development easier and quicker. The most popular currently is Laravel which first came out in 2011.
Data and databases.
You have probably worked with and used data in your life. If you have ever used Excel to organise data, then you’ve done a similar yet simpler function that databases do.
Fortunately for you, you don’t need to learn a lot of different languages. The main database language you would need to learn is Structured Query Language (SQL).
Created by IBM back in the 1970s, it is used in relational databases. The relational model is structured similarly to an Excel spreadsheet, where data is arranged into rows and columns.
Websites on servers.
Servers are computer systems that store resources like databases and website files. Website files need to be installed on a server before it can be accessible publicly.
Domain name and SSL.
To go live, there are still a few things that you have to work with like a domain name and SSL certificates. Domain names are technically the address of a website such as Google.com, Wikipedia.org, or unsw.edu.au.
You might ask, “How do I get one?” First, you have to choose one that is available, then buy it from a domain name registrar such as Google Domains. “Do I need one?” Short answer: YES!
Domain name registrars register domains with the Internet Corporation for Assigned Names and Numbers (ICANN). It’s a centralised organisation that oversees and manages the Internet Protocol (IP) and the Dynamic Name System (DNS) areas of the global internet.
On top of getting your domain name, you should also acquire a Secure Sockets Layer (SSL) certificate for your domain. SSL is needed to encrypt traffic on your website to help protect it from cyberattacks.
Web Host.
At this point, you must already have done all the above and be ready to go online. Hold on, we still have a few kinks to work on before your AwesomelyIncredibleSite.com goes live. You need to purchase server space from a host.
There are different levels of hosting plans you can get:
- Shared Servers: The cheapest of the levels and cost a few dollars. The upside is its affordability. The catch as the name implies is that you get to “share” your server space with other websites. Hence, slower speeds and downtimes if you exceed your usage for the month.
- Cloud Servers: A fairly new option that consists of a system of numerous physical servers. All these resources are shared and each “tenant” is given a virtual server. It then pulls its resources from a collective pool.
This allows for more bandwidth flexibility and scaling up can be done quickly. Pricing would depend on your server specs, ranging from a few dollars a month and up.
- Virtual Private Servers (VPS): VPS is similar to cloud hosting. Better than shared hosting since each tenant has their virtual server from one physical server. This means you get your slice of the server resources. The hosting price, though more expensive than the first two, is still quite reasonable.
- Dedicated servers: This means you have all the server resources all to yourself. This option is the most powerful, but also the most expensive. Dedicated hosting can run from a couple of hundred dollars per month.
Server setup and maintenance.
At this point, you have your site, domain name, and your own space on a server. The next step you have to do is to set up your site on the server.
The process involves directing your domain name to your server’s unique IP address. Setting up your website files database, and other configurations.
Deployment
So how do you get your files from your computer up to your server? It is accomplished by using protocols, which is a method of transporting files and other data to and from a server.
The simplest way to do this is through a protocol called File Transfer Protocol (FTP). However, it is now discouraged to transfer files through FTP since it is not secure.
Today, it is more common to use secure protocols FTPS or FTP over SSL. Another is via SFTP or Secure SHell FTP. To get this working for you, you need to create an account on your server. You will then have to connect to the server using the server’s IP address and using a username and password for authentication.
To begin transferring over FTP/SFTP, you can use programs like FileZilla or CyberDuck. These are relatively easy to use since they have a graphical user interface (GUI). It makes it easy to upload and download files to and from your computer and your server.
Deployment Tools
You will soon find out that it gets tedious to manually upload files to your server. This happens every time you make one little code change. Additionally, it gets confusing if multiple users are working on the same file and uploading at the same time.
Luckily, there is a way to set up deployments that link to your Git repository.
A deployment tool can store your FTP.SFTP settings. The moment you change Git to your master branch, the tool will transfer the files for you. This will effectively reduce the number of mistakes you make, especially if you don’t remember which files you have edited.
If you work with a team on complex websites, there are more advanced deployment tools and systems that can be used to make deployments more structured.
But we are getting ahead of ourselves, at this point you are still far from doing more complex practices.
Congratulations!
If you made it this far, then you’re on your way to becoming a web developer. It pays to know
what kind of work goes into creating a website. We are not going to lie that it can be daunting at times depending on what you want to put out there.
If you want to spare yourself the guesswork and the headache of creating your website, consider what we can do for you. We here at Accentuate Web Design and Marketing can help you get your page up from design, branding, and optimisation. We can even assist you in registering your domain and hosting your website.
