Category: Front End

Front End, HTML/CSS, Uncategorized

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

annsaid
  • 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

annsaid
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

annsaid
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

annsaid

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

annsaid

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” →