Front End, HTML/CSS, IT, Uncategorized

Basic Use for FontAwsome V5

Basic Use for FontAwsome V5

  •  Download the free version.
  • Grab & move the CSS file ontawesome-all.css- and web fonts folder into your project
  • Reference the CSS in the head tag
  • Search for the icon, get its class and int it in your code.

 

Related Posts:

Simple Search Form

CSS Class and ID Simple Exercise with Solution

Simple Navbar with Dropdown List & Nice Transition

HTML5 Forms for Beginners

 

Front End, HTML/CSS, IT, Uncategorized

CSS Class and ID Simple Exercise with Solution

Question:

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, javascript, Uncategorized

(15) AngularJs Filters Example (Uppercase, Lowercase, and Date)

In the following example:

We will display the students information in the following format:

  • First name: Uppercase
  • Last name: Uppercase
  • Gender: Uppercase
  • Spec: Lowercase
  • Level: Uppercase
  • Date of Birth (DOB): Date Format

You can refer to AngularJs Date Format Reference to now more about date format.

 

 

 

Front End, IT, javascript, Uncategorized

(13) AngularJs ng-repeat example (using module and controller)

 

We recommend you to review a simple example of ng-repeat directive before reading this post.

In the following example:

  • Using AngularJs controller and module, we create an array of students.
  • Each student has (first name, last name, gender, specialization, and level) information.
  • Then, we display the students information in an html page.
  • To display each student information, we use “ng-repeat” directive.
Front End, IT, javascript, Uncategorized

(12) AngularJs Two Way Data Binding Example (Student Information Form)

  • Using the AngularJs two way data binding, when you type the student information in the input field (Enter student information part), the value will immediately be displayed on the view part (View student information part).
  • Now, we don’t need any custom code to move data from the model to the view or from the view to the model.
  • ng-model directive can be used with the (input, select, and textarea) html tags.