Software Development Podcast Show in India

India’s First Software Development Podcast Show

SDP Show # 5 : Basics of Client-Side Web Programming

SDP Show # 5 : Basics of Client-Side Web Programming. As a student or a newbie web developer learning client-side web development can get you overwhelmed.

So, today’s podcast show is on the basics of client-side web programming.

Client-Side web development has improved a lot over these years. The days of creating a web page using “td tr th table” tags have gone.

software development podcast show

Please feel free to download the MP3 directly. Listen to it, when you drive to work, are stuck in traffic, or wait for your flight.

Subscribe our podcast show on iTunes


Get Podcast in your mailbox









Read the whole transcript

SDP Show # 5 : Basics of Client-Side Web Programming.

As a student or a newbie web developer learning client-side web development can get you overwhelmed. So, today’s podcast show is on the basics of client-side web programming.

Client-Side web development has improved a lot over these years. The days of creating a web page using td tr th table tags have gone.

HTML :

HTML means Hyper text markup language is a standard markup language used to create web pages, static websites and as well as dynamic websites using a server-side programming language. HTML tags are mixed with textual content which is then parsed and rendered as a web page using a software called a Web Browser.

CSS :

Cascading Style Sheets is a style sheet language used for describing the look and formatting of a document or a web page.

Other than normal CSS there many CSS pre-processors available which help you to write maintainable, future-proof code and it will seriously reduce the amount of CSS you have to write.

SASS and LESS are one of the most popular CSS pre-processor in the market.

CSS pre-processors allow you to declare colors, margins, fonts, font size and others using variables, mixins and nested-style rules i.e. just like any programming language, with a .SASS or .SCSS and .LESS file extension which is then parsed by the pre-processor spitting out CSS that is ready to be consumed by your web project.

Javascript, jQuery and DOM :

Javascript is considered as “assembly language of the web” and mainly used for making client-side web applications and is supported by all the major browsers without plugins. It is also used in server-side programming with runtime environments suchs as Node.js and creation of desktop and mobile applications.

jQuery is a cross-platform javascript library designed to simplify the client-side scripting of HTML. Designed to make it easier to navigate a document, select DOM elements, create animations, handle events, develop ajax applications.

What is DOM? when a web page is loaded , the browser creates a DOM Document Object Model of the page. With the object model , javascript gets all the power it needs to create dynamic HTML. HTML DOM is a standard or a way for how to get, change, add or delete HTML elements.

Front-End JS Frameworks :

Angular.js : Is a structural framework for dynamic web apps. It let’s you use HTML as your template language and lets you extend HTML’s syntax. Angular’s data binding and dependency injection eliminates much of the code you would otherwise have to write.

Backbone.js : Is a javascript library with a RESTful JSON interface and is based on the model-view-presenter (MVP) application design style and it has a dependency on one javascript library, Underscore.js

Ember.js : Is an open-source client-side Javascript web application framework based on the model-view-controller (MVC) software architectural pattern.

Knockout.js : Shortly called KO. This library helps to create rich/responsive/interactive web applications.

Underscore.js : Provides utility functions for common programming tasks.

Image Placeholders :

While designing a website developer sometimes need images to test the actual design of the website but sometimes it gets difficult if the images are not ready. Placeholder images to the rescue. We can use placeholder images instead of the actual image.

Visit www.placehold.it and www.lorempixel.com

Lorem Ipsum :

Lorem Ipsum is a filler text commonly used to demonstrate the graphic elements of a document. It reduces the need for the designer or web developer to come up with meaningful text, as they can instead use quickly-generated lorem ipsum text fillers.

Front-End Web Frameworks :

Web Frameworks provide responsive boilerplate code and tools of front-end web development.

  1. Twitter Boostrap : http://getbootstrap.com/
  2. Foundation : http://foundation.zurb.com/
  3. Skeleton : http://getskeleton.com/
  4. HTML Boilerplate : https://html5boilerplate.com/
  5. HTML kickstart : http://www.99lime.com/elements/
  6. Pure CSS : http://purecss.io/

Comments