CMS certification Process

Submitted By: Kanwaljeet Singh

Before starting the “Hubspot CMS For Developer” certification process it is quite helpful to know some basic things and good to have an idea about what we will learn in certification process in short. If you are new in CMS then it will help you a lot and if you are experienced one then you may skip this and start from the CMS certification process.

What is CMS ?

Basically CMS is a “Content Management System” which we used to manage the digital content.

 [Don’t be confuse with term digital content we will cover this in this blog   you just keep reading. ]

Why we used Hubspot CMS? What are the Pros and Cons of Hubspot CMS.

Thanks to the Webdew Team, We already have a blog on that please refer it for in-depth knowledge and start as a Pro.

https://www.webdew.com/blog/what-is-hubspot-cms

Great! now you know what is Hubspot CMS and its pros and cons.

Now continue your reading and focused on following use case:

Probably you visit webdew.com at least once and see the menu bar
https://prnt.sc/1md05pi

Assume that you are a developer and your task is to make the same menu bar as shown in above image. I know you can do this.


But the point is :

 

  • Can you add a new menu item ?
  • Can you modify previous one like change its URL or Rename it.

So think about it that how you can do it. 

Probably your answer includes that you can do this by doing coding again. But can a layman person with a zero knowledge of coding can do this?

May be now your answer is No. So here’s the CMS comes into the picture.

So this is one of the major reason that why we use CMS. Because it provide such tools which helps to modify the content of website.

Hope so now you have a little idea that why we use CMS.

If you are still confusing take an example of slider. And my question to you is :

  • can layman person add new slide.
  • can layman person reorder the slides.
  • can layman person delete any slide.

Again this will not possible without knowing the coding skills but thanks to the CMS. Yes CMS can do this for us.

Common Myth regarding CMS

When I starting the Certification process I have an myth in my mind may be it also comes in your mind.

I think at that time that When we use CMS we need less coding skill because CMS do each and everything for us. There are built in features and I just Drag and Drop them and my matter will be solve.

This is true for only layman, Yes layman will have a full rights to drag and drop modules wherever he wants without knowing the coding skill.

Some points which a layman person can do with CMS:

  1. Change colors of website
  2. change font-family, font-size, Color, Style etc.
  3. Change Images
  4. Edit Content 
  5. Modify sliders
  6. Remove any module
  7. Reorder the full website and lot more other things.

But when we see CMS from developer perspective this is the myth buster think which I knew when I complete my certification.

Keep one thing in mind that as a Developer we are the one who provide the modules, who provide the area where client drag and drop the module, we are the one who provide the global settings for change the look and feel of website. It is totally in developer’s hand that what the client will see as a tool to modify the website.

For example it is depends on developer that he will provide a functionality to change font size and color to client or not.

So in short developer need a good skill in coding so that he can easily modify the things according to the client’s need.

Now let’s take one more example which give you more insights about CMS:

See the first screen shot : https://prnt.sc/1nhrj0s this snippet of code generate the output which is shown in https://prnt.sc/1nhsbmk

Now focus in this snippet it is a hubspot template snippet and the text which which I highlight is the default hubspot module : https://prnt.sc/1nhw5pk this snippet generate the output which is shown in https://prnt.sc/1nhxo1q.

I know you are feeling amaze now after seeing the output of Hubspot code that we are not wrote anything but from where the content is comes which has shown in output. 

So the secret revealed, the content which you see is the default content. Now be prepare yourself for more amazing things.

This file https://prnt.sc/1nhrj0s is static file but the code which we written using HubL is dynamic. Yes the code which I highlight is written in HubL templating language.

Note that HubL is a scripting language which is used by Hubspot developers. And it is not a programming language it is a scripting language. For a quick reminder all scripting languages are programming languages but the difference is that scripting language does not require to compilation process they are rather interpreted.  

Now lets see how the code which we write in hubL is dynamic.

After creating the website page using our example template the Hubspot CMS provide you a space https://prnt.sc/1nqycoq here you can edit the content specific to that page.

Lets Edit the content by selecting Rich text from left side https://prnt.sc/1nr07jq remember that this is the module which we add in template. After selecting it is open a editor where we edit our content https://prnt.sc/1nr356x it provides you so many tools. So the changes you make here will directly reflects to the webpage either it is Live(Page is available on internet) or not.  

[ So note down one more thing that all of your modules which you use in template will be shown in left side and we select any module and edit it. See a example of what I am trying to explain https://prnt.sc/1nr1h4o ]

So know you have a better idea about why we use CMS now lets focus on some few other terms which helps you to start the certification journey more smoothly. 

I point out some important things related to HubSpot CMS which may helps you to understand the context of CMS:

  • Modules
  • Templates
  • Theme
  • HubL (pronounce as Hubble ) Templating Language for Hubspot
  • Drag & Drop areas

Modules

Modules are basically a independent block of code with its own CSS and JS. The developer can modify the module without even affecting the other content of page. Modules are basically reusable components. It follows the DRY ( Do-not Repeat Yourself) concept that means we can create it once and use it any where without writing the code again and again.

It looks like a function in any programming language. Remember that how we reuse the functions by making different from different parts of the program.

The modules also have three different phase similar like functions:

  1. Declaration
  2. Definition
  3. Call

Creating a module is called module declaration. There is three main things to keep in mind.

  1. Name of module
  2. Scope of Module ( Global or Local ) 
  3. Where you want to use it ( In pages, in blogs etc.)

After that you can write HTML + HubL and CSS and JS code for that particular module. That is called module definition. Screen shot of module https://prnt.sc/1q3r7r3 At the end we can call the module to use it our template or page.

Few examples of modules are : Menu bar, Header, Footer, Slider etc…
 

Template

Template is a collection of independent modules. These templates are then used for creating website pages or blogs by user.

Themes

The collection of templates and modules with global setting is called theme.

Drag & Drop areas

This is the area provided by the developer to layman so that layman person can use the drag & drop feature.

By using this feature user can easily reorder there website, add or remove the module and do many more things which you explore in the course.

So that’s enough for the basics I hope you have got an basic idea and prepare your self for starting the certification process.

Hubspot Academy provide a in-depth quality content for developers to explore the Hubspot CMS.

But my motive to explore the things before course is that sometimes as fresher we will stuck and face difficulty to understand the technical terms.

After reading this whole blog I strongly believe that when instructor teach you the things then you will relate the knowledge you have  and then will curious about learning the in-depth concepts.

At the end I provide the links from where you start the certification process. So you just follow the things along with instructors for earn the Hubspot CMS developer certificate.

Here is the link of the course. 

https://academy.hubspot.com/courses/cms-for-developers?library=true&library=true&q=hubspot%20cms%20for%20developers

Some other useful links sequence wise:

Modules : https://developers.hubspot.com/docs/cms/building-blocks/modules/default-modules

Drag drop areas : https://developers.hubspot.com/docs/cms/hubl/tags/dnd-areas

Themes : https://developers.hubspot.com/docs/cms/building-blocks/themes

Global fields : https://developers.hubspot.com/en/docs/cms/building-blocks/module-theme-fields

Thanks for stay with me. Best of luck from our whole Webdew team. We wish you will have a awesome learning experience with Webdew and Hubspot.