Front End, HTML/CSS, Uncategorized

Flexbox CSS Part (1) – display, flex-direction, justify-content

  • The flexible box makes it easier to design flexible responsive layout structure without using float or positioning.
  • The parent container should take flex display property, display:flex.
  • flex-direction: to define the stack of the flex items.
  • flext direction could be: row, row-reverse, column, column-reverse.
    1. Row: the default (LTR).
    2. Row-reverse: (RTL).
    3. column: Top to bottom (TTB).
    4. column-reverse: (BTT).

Continue reading “Flexbox CSS Part (1) – display, flex-direction, justify-content”

Uncategorized, Front End, IT, javascript

(17) AngularJs Sorting by Column Header

AngularJs Tutorial
AngularJs Tutorial
  • The data will be sorted when clicking on one of the columns headers.
  • The user should be able to sort in both the directions (ascending and descending).
  • Clicking on the column for the first time will sort the data in ascending order.
  • on the same column again will sort data in descending order.
  • An arrow (up/down) will be displayed next to the column showing the sort column and direction.

Continue reading “(17) AngularJs Sorting by Column Header”

Front End, IT, javascript, Uncategorized

(16) AngularJs Sorting using DropDown List

AngularJs Tutorial
AngularJs Tutorial
  • The data will be sorted according to the selected option in the ddl.
  • The orderBy filter allow the array sorting.
  • Some columns will be sorted descending and others will be sorted ascending, as:
  • minus sign (-) allows the descending sorting.
  • plus sign (+) allows the ascending sorting. It is the default.

 

Related posts:

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

(14) What are the AngularJs Filters?

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

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”