Front End, IT, Uncategorized

CSS Class and ID Simple Exercise with Solution


Using external CSS style sheet, create the following design:

  • Main Div as a container for all the following elements. Use #EEE as a background color: It contains:
  • First Div:
  • Add an id for the div.
  • Use an rgba background color. Green value is 9, red is 3, blue is 33, and the alpha value is 0.9.
  • Insert your full name using heading one.
  • Center your name.
  • Use “Comic Sans MS” font.
  • Use 30 pixels font size.
  • Use ff5722 hex value as a color for the heading.
  • Second Div:

Continue reading “CSS Class and ID Simple Exercise with Solution”

Front End, IT, Uncategorized

(5) AngularJS Expressions (ng-bind)

  • AngularJS expressions can also be written inside a directive: ng-bind=”expression”.
  • In the following example, the user will enter the first name and last name in two separated input fields. A paragraph will be generated that contain: Your name is “firstName” “lastName”.
  • Try to do the same function using {{expression}} format.


Front End, IT

(4) AngularJs Expressions {{Expression}}

  • AngularJS binds data to HTML using Expressions.
  • AngularJS expressions can be written inside double braces: {{ expression }}.
  • AngularJS solve the expression, and return the result.
  • AngularJS expressions can contain literals, operators, and variables like JavaScript expressions.
  • If you remove the ng-app directive, HTML will display the expression as it is, without solving it.
  • Look at the following code, and review the used expressions.
  • Note: Notice that ng-app is written inside the html tag, as we use more than one div. Try to write it in anther tag, such as in the first div only.
AngularJs Expressions

Continue reading “(4) AngularJs Expressions {{Expression}}”

Front End, IT

(2) AngularJs Introduction – ng-directives

  • AngularJS extends HTML with ng-directives.
  • AngularJS directives are HTML attributes with an ng prefix such as (ng-app, ng-model, ng-bind).
  • ng-app: defines an AngularJS application.
  • ng-model: binds the value of HTML controls (input, select, textarea) to application data.
  • ng-bind: binds application data to the HTML view.
  • ng-init:  initializes AngularJS application variables.
AngularJs ng-directives

Continue reading “(2) AngularJs Introduction – ng-directives”

Front End, IT

(1) What is AngularJs?

  • Before learning AngularJs, you should already learn HTML, CSS, and JavaScript.
  • AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google.
  • It is easy to learn.
  • It extends HTML with new attributes.
  • You can view some websites that are built using AngularJs: madewithangular
  • You can download AngularJs from
  • You can download the script file and save it locally and call it in your  html file using script tag.
  • You can include CDN link directly to your html file using script tag (You can get it from
  • Review and try the following simple code: