fbpx
full-stack-web-development-malaysia

Full Stack Development and The Technologies You Need To Learn

Nov 21, 2018

What is full stack development? Just as straightforward as its namesake, full stack development refers to web development from both the frontend and backend.

As much as it sounds intimidating, learning full stack development does not mean you have to master every single part of web development, but rather, it means you understand web development as a big picture. You can then always choose if you want to specialize in front, back-end or the full stack. 

Throughout talking to several students, we found that many people are wondering if full stack development is something worth pursuing. 

Is it tough to learn? What are the technologies within Full Stack development? Does the industry pay full-stack web developers well?

In this post, we break down the technologies under Full Stack development and hopefully you would see if its something you’d like to pursue.

What are the front-end programming languages in full stack development?

When we talk about frontend development, people often think about the basic trio, HTML, CSS and Javascript. You would call them the basics and must-have for front-end web development. 

What is the difference between HTML, CSS, and Javascript?

So let’s talk a little bit about HTML, CSS, and Javascript. And why they are technologies you will need to learn.


HTML (Hypertext Markup Language) basically defines the layout and the structure of the website. It’s a text-based approach to tell web browsers, how a website is structured – the text, images and other forms of multimedia content on a website. 

It works by ‘tags’ and commonly, you’ll find websites to contain <H1>, which describes a top-level heading, <p>, which descibes a paragraph, <br>, which describes a line break, and so on.

While HTML is the structure of a website, CSS (Cascading Style Sheets) is the “dressing” or “makeup” you put on that structure. Using CSS, you control and build the style and look of a website.

In a web development team setting, it’s common to see developers distribute the work between HTML and CSS. For example, if you are just handling website content, you can focus on the layout of the website with HTML; while the web designers can focus on the CSS to come up with various different themes or designs for the look and feel of the website.

On the other hand, Javascript is used for things related to loading your data, displaying your data, including creating every interaction you see on a website. It’s a programming language built for the web and is supported by most web browsers like Google Chrome, Firefox, Safari, Opera, Edge and more.

A quick example of Javascript use when it comes to digital marketing is Google Analytics, where marketers normally place Javascript tags into websites to track data & events that take place on your website. 

javascript-tag

We designed Full Stack 360 to include lessons on web frameworks, such as Bootstrap and Vue.js.

What are web frameworks?

There are many types of web frameworks being used in the market. Generally, frameworks are used to help web developers speed up their web development process.

Here are some key benefits:

Quicker development – For example, if you get a value of an input box in HTML, it will consist of about 4 – 5 lines. But if you used a framework, you reduce it to 1 line. This simply makes your web development process quicker.

Faster web loading speed – Another good thing about using frameworks is that if everyone is using the same framework,  this further optimizes your website loading speed. For example, if two people both view two different websites using jQuery, the website loading speed would be much faster.

Efficient team communication – Imagine you are in a team environment, where everyone is using the same framework. Now, even if you use different syntaxes, you will at least still be using the same “grammar” and approach in the coding process. This brings efficient communication among team members, which in turn makes the development process more efficient.

Is Bootstrap used to build responsive websites?

Bootstrap is a CSS framework, so it helps you build a responsive framework with grid layouts. The idea behind this is that with every screen that we see, it will be split into 12 columns. From there, we can create different styles of websites.

bootstrap-column-system

For example, if you want to build a website that has two columns, split into 2. That would mean you simply used 6 columns on the left and 6 columns on the right, of the screen. If you are looking to build a left sidebar, then maybe it could be 4 columns and 8 columns. Then within the 8 columns, you can further separate them depending on your needs.

From a layman’s website building process, say, using WordPress, you will see it in themes like Divi etc. These themes are usually built with Bootstrap. Even if they do not use Bootstrap, you’ll find that the framework they use, usually have the same conceptual idea, in which it uses the grid-based designs.

The cool thing about grid-based web building is that the columns will automatically stack on each other when we push the screen to a smaller dimension or view your website on a smaller screen, like a mobile phone. This means your website layout is ‘responsive’ as it automatically resizes to maintain proper readability on different screens.

Bootstrap is one of the frameworks that is taught in Full Stack 360. Learning bootstrap gives you the ability to understand how themes are built in the back-end. You’ll find that most major websites use Bootstrap, following the 12 column grid web building structure for the website.

What are some backend technologies for full stack programming?

A beginner who’s trying to pick up back-end technologies is often spoilt for choice. If you’re coming from a Microsoft background, you’ve probably heard of C Sharp or ASP.net. If you come from a Python background, you have probably heard of Django or Flask etc.

But if you are a complete beginner, we recommend that you start with Node.js

Node.js is an application runtime environment that allows you to write server-side applications in Javascript. In this case – your backend. It comes with different sets of APIs, and the Javascript that we mentioned earlier is no different from Javascript in Node.js.

With Node.js, you are basically creating your own web server, in which it handles everything. For example, when someone submits a form, an inquiry to your website, or even down to how your URL looks like of creating permalinks – these can be done from the backend with Node.js.

So why is it worth developing web projects with Node.js?

There are a few reasons why many development teams favor Node.js.

Team Efficiency & Lower Cost – Using Node.js for your backend means, you’re using the same language on front-end and the back-end. This means your team is more functional as they speak the same language and will result in lower cost for development as well.

Javascript Is One Popular Language – Javascript is widely used and understood by most programmers. So it’ll be easier for you to get people to work on your application.

Growing Support Community – You can easily find heaps of knowledgebase on Node.js on sites like StackOverflow. As Node.js is open-source, more and more users are choosing the technology for their next project.

On top of teaching Node.js, it’s also important to learn web frameworks such as Express.js, which handles web authentication. For example, when you plan to build a protected section on your website, allowing only certain people to be able to log in and access.

Can I skip learning backend programming?

Backend programming may seem intimidating if you’re someone new to it. We usually recommend students to learn it, regardless.

When you visit a website, you would often just key in what you need. We usually do not put much thoughts into what goes on in the backend. For example, when you visit Google’s homepage, what you can see as a user, is the textbox in which you use to search a query. But what happens behind the scene is that data needs to be retrieved from the database, filtering out million of data to show you the results that are most relevant to you.

Learning backend development technologies, such as Node.js, would actually help you to understand how things work when you browse and work online.

How would this knowledge help you, you ask? 

Say if you run a tech startup and your product is an online web application. Anytime you encounter a problem on your website, you would have a better idea of what went wrong, and be able to fix it – without having to spend time asking developers and risking opportunity loss as your website is down. Why is the website broken? Why does the button not do anything? Why is the web application loading so slowly?

Even though if you don’t plan on being a backend programmer or engineer, having the skill and knowledge will give you the ability to dive in and check what went wrong, helping you detect the problem more efficiently. 

What about databases in Full Stack programming?

A full stack developer should also be someone who knows how to handle the work of databases. How do you write data in databases and how do you pull data out? 

Take an E-commerce website for example, where you will need to record the inventory stocks you have. How do you reduce the stock when someone purchases an item? And how do you capture their information? These are examples that require work with databases. 

In most cases, if you are using Structured Query language (SQL) to store your data, then you have to learn a specific set of SQL language. That is why we recommend learning MongoDB when it comes to databases, as the language used to retrieve data from MongoDB, is Javascript as well.

At this point, you would have observed that Javascript is indeed a powerful language to learn. In fact, it’s one of the most popular technologies used in the current market.

What types of web applications can I build with the technologies you mentioned so far?

When people talk about websites, they often think about simple corporate or informational websites.

However, having mastered these technologies means you can build websites which are much more extensive. Think about web applications, such as Piktochart, Canva, Lazada, Booking.com and more. Even for extensive web applications like this, you’ll be surprised to find that the fundamental technologies used are the same –  HTML, CSS, and Javascript.

What makes these websites more challenging (or different) is its interactive parts. For example, when users come into these kinds of websites, how are they supposed to use the features? How is the graphical user interface, such as the drag and drop feature built? How would rendering work on the web application? Some of these depend on the backend part of website building. However, essentially it is all built on the same fundamental technologies.

Tell me a little about Full Stack 360

The idea with the Full Stack 360 course, is to teach you to build something. Be it is just a basic informational website, or building a functionating and interactive web application, you will always still need HTML, CSS, and Javascript – these 3 basic technologies.

full-stack-360-blueprint

If you are someone who is interested to learn how web programming works or to build your own web application, Full Stack 360 would be a good program as you learn how to build something from end to end. 

Or if you are someone who wants to turn your ideas into reality. Maybe you’re looking to build your own tech startup or it’s suddenly required by your company for you to build a new website, then the Full Stack 360 web development course would be a great fit.

You may find that even after our Full Stack programming course in KL, you might not end up doing everything by yourself. That’s because there are many off-the-shelf solutions that you can purchase, such as themes. However, armed with full stack web programming skills, you would know how to take off-the-shelf solutions further by customizing and modifying them –  without having to rely on another tech person.


Full Stack 360 is our most complete web programming course, offered at LEAD. If you like to talk to us, just drop a comment or reach out to us via chat message. 

For real-time updates on events & happenings, visit our Facebook Page. Visit our YouTube channel to watch videos about technology, revolving around data science, big data, web development and digital marketing.

Brought to you by

The LEAD team believes in growth. The question we ask every day: How can we help our students achieve more?

Get the scoop on the latest stuff.

Guides

Ultimate Guide to Data Science

Recent Posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *