Back to Blog
Posted by: Cracky⚡ Comments: 7

Frontend vs Backend : Overview

For anyone who doesn’t work directly with web development, concepts like frontend and backend development can be challenging to wrap your head around. Pile on all of the frameworks, Languages, APIs and libraries that frontend developers use to build apps and it can get very confusing.

To help you become a pro in frontend and backend development, I’ve written an article that covers what you need to know about the area fundamentals in a way even non-developers can understand : https://ophcrack.me/blog/frontend-or-backend-which-should-i-go-for. I suggest you have a look before going on.

 I will be writing on the learning aspect of the languages today and from there, you can pick any technology of your choice to work with. 

Doing a quick review, Frontend and Backend are the two keywords to understand how websites work. Frontend is basically what the user sees and interacts with. Backend also known as “server-side” is what happens on the server that the users don’t see.

Frontend Technologies
HTML : the key front-end technology

HTML (Hypertext Markup Language) is a markup languaage language designed to create websites that later can be explored by anybody who accesses the Internet. It is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript and VBScript. 

How HTML works. HTML is composed of a series of shortcodes called tags, normalized into a text-file by a site creator. The text is then stored as an HTML file and observed through a browser. The browser scans the file and interprets the text into a visible form, and in the best case, renders the page as the designer had planned. 

In the academy, this language is the primary language every Zen has to start with. It is plain and easy to understand. As a language, it holds the code words and syntax like any other language 

example of HTML code

CSS : Styling your facade

CSS ( Cascading Style Sheets) is a style sheet language. It’s applied to define how HTML elements are supposed to be presented on a webpage in terms of design, layout, and variations for diverse devices with different screen sizes. CSS masters the layout of numerous different web pages at a time. This language has so many importance as I use to tell my students that Without CSS, HTML is pretty useless.

To communicate with HTML, CSS uses selectors. A selector is the part of CSS code defining which HTML piece the CSS styling will impact.

Bits on CSS
To communicate with HTML, CSS uses selectors. A selector is the part of CSS code defining which HTML piece the CSS styling will impact

declaration contains properties and values that are employed by the selector.

Properties define font size, color, and margins, ETC. Values are the settings for these properties.

We also have the CSS frameworks. A CSS framework is a set of default CSS and HTML files. It extends a front-end developer’s capabilities for website design. In addition to assisting while building a responsive design, CSS frameworks also present distinct and symmetric layouts, saving developers from writing code from ground zero at every occasion.

P (for paragraph) is selector, {  font-size:24px;  color:blue;  } is a declaration, font-size: and color: are properties, while 24px; and blue; are values.

JavaScript : making the Web alive

JavaScript (JS) is one of the most popular scripting languages. It’s mostly renowned for providing a full stack of technologies for both front-end and back-end development. As we are talking about the first one, it’s applied to make web pages dynamic.

Bits on JavaScript
JS boosts a website’s overall interactivity. It enables modeling animated UI components such as image sliders, pop-ups, extensive site navigation menus, and more.

JavaScript provides a website with extended functionality that isn’t otherwise achievable with HTML and CSS alone.

JavaScript allows web pages to reply to users’ actions and dynamically refresh themselves.

Main frameworks and libraries to know
Angular – is a front-end framework powered by Google that is compatible with most of the common code editors.

Vue.js is yet another open-source framework for SPAs. It employs a component-based development model and enables attaching components to a project. 

React is an open-source library for building dynamic user interfaces, born and bred by Facebook. The framework is applied to create web-applications with multiple dynamic components.

jQuery, in turn, is aimed at controlling HTML documents. It has a simple API to control events and design animation in browsers.

js code

Backend Technologies
PHP – Server-side

PHP powers 78.2% of all websites whose server-side programming language we know. The language was first released in 1995 when there were few options for building dynamic websites.

Bits on PHP
There is an abundance of resources dedicated to the language as a result of the large community and tool support.

Generate dynamic page content

Write command line scripting

php code

Read more on PHP Advantages/Disadvantages : https://ophcrack.me/blog/python-vs-php/.

RUBY

Ruby on Rails ( Ruby) is a web development language built on top of the Ruby programming language. Ruby on Rails has a set of tools that allow you to simply create basic tasks (e.g. you’re able to create a basic blog with one line of code).

Ruby is open source, which means it can be modified and built upon.

Bits on RUBY
You can use it to build desktop applications

You can use it to create mobile apps

You can use it to build web applications and games

Other Backend languages are Python , .NET , SQL and JavaScript.

Read more on Python : https://ophcrack.me/blog/python-vs-php/

We offer HTML, CSS, JavaScript, SQL and PHP in the OPH Code Academy. If you are yet to be a student/zen, you can register here : https://codeacademy.ophhub.com

code ti the future.

Conclusion

In this overview, I hope you were able to get a clearer picture of frontend and backend development and the capabilities of each language included. This is by no means an exhaustive list of the frontend and backend languages that are out there

If you are considering pursuing a career in development, I would highly recommend taking a look at the job descriptions of the roles you’re interested in and make a note of the languages that appear the most. Then, start studying those using frontend and backend language courses like the ones highlighted above.

Don’t let anyone scare you. Remember that an expert at anything was once a beginner too. Practice is key. Amateurs call it Genius. Masters call it Practice.

Comments (7)

  • Ekojawe Efe Reply

    Enlightening!!!!
    Thank you very much…

    June 29, 2020 at 8:10 pm
    • OPH_Crack Reply

      My lady?

      June 29, 2020 at 8:51 pm
  • Kaycee Reply

    Well detailed Succylo, please I want to ask when Python will be added to the list of courses you offer in hour academy.

    June 29, 2020 at 8:11 pm
    • OPH_Crack Reply

      I have no idea brother man. Still in consideration. You’ll be notified!!

      June 29, 2020 at 8:52 pm
  • Mickey Reply

    Thank you sir ?

    June 29, 2020 at 11:33 pm
  • Cipher Reply

    Nice write up but what is node.js function

    June 30, 2020 at 8:31 am
    • OPH_Crack Reply

      hehe. Node.js is a framework for writing server-side JavaScript applications It deals with JavaScript’s runtime sha

      July 2, 2020 at 2:52 pm

Leave a Reply

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

Back to Blog