Front-end Development School

Trying to develop for the web today is a little like....

FRONT-END TOOLING

Time is a key factor in staying productive. Use yours efficiently.

Choose tools you'll use.

The average front-end workflow today....

Setup

Scaffolding= "Download Libraries" "Download Templates" "Download Frameworks"

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Friday, 2 October 2015

Introduction Of HTML5

What is HTML?


HTML is a markup language for describing web documents (web pages).


  1. HTML stands for Hyper Text Markup Language
  2. A markup language is a set of markup tags
  3. HTML documents are described by HTML tags
  4. Each HTML tag describes different document content
A small HTML Document


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Example Explained

  1. The DOCTYPE declaration defines the document type to be HTML
  2. The text between <html> and </html> describes an HTML document
  3. The text between <head> and </head> provides information about the document
  4. The text between <title> and </title> provides a title for the document
  5. The text between <body> and </body> describes the visible page content
  6. The text between <h1> and </h1> describes a heading
  7. The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and a paragraph.

HTML tags

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content</tagname>

  1. HTML tags normally come in pairs like <p> and </p>
  2. The first tag in a pair is the start tag, the second tag is the end tag
  3. The end tag is written like the start tag, but with a slash before the tag name


Web Browser

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents & display them.
The browser does not display the HTML tags, but makes use of them to select how to display the document:

Introduction Of HTML5
Introduction Of HTML5

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There's different document types on the net.

To display a document correctly, the browser must know both type & version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

HTML VERIONS

Since the early days of the web, there have been many versions of HTML:


Version                    Year
HTML                      1991
HTML 2.0              1995
HTML 3.2              1997
HTML 4.01              1999
XHTML                      2000
HTML5                      2014



HTML(5) Tutorial



With HTML you can generate your own Website.

This tutorial teaches you everything about HTML.

HTML is simple to learn - You will enjoy it.

Examples in Every Chapter

This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, & click on a button to view the result.

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Examples

At the finish of the HTML tutorial, you can find over 200 examples.

With our online editor, you can edit and check each example yourself.

Front-end & Back-end Developer Difference

                                         
Front-end & Back-end
In application engineering, the terms "front end" & "back end" are distinctions which refer to the separation of concerns between a presentation layer as well as a information access layer respectively.

The front finish is an interface between the user & the back finish. The back & front ends may be distributed amongst or more systems.

In application design, for example, the model-view-controller architecture provides back & front ends for the database, the user & the information processing parts. The separation of application systems in to back & front ends simplifies development & separates maintenance. A rule of thumb is that the front (or "client") side is any part manipulated by the user. The server-side (or "back end") code resides on the server. The confusion arises when must make front-end edits to server-side files. Most HTML designers, for example, need not be on the server when they are developing the HTML; conversely, the server-side engineers are, by definition, never on anything but a server. It takes both to ultimately make a functioning, interactive website.

In application architecture, there may be plenty of layers between the hardware & finish user. Each can be spoken of as having a front finish as well as a back finish. The front is an abstraction, simplifying the underlying part by providing a user-friendly interface.

Using the command-line interface (CLI) requires the acquisition of special terminology & memorization of commands, so a graphical user interface (GUI) acts as a front finish desktop surroundings in lieu. In the Unix surroundings, ncurses is an simpler, semi-graphical front finish to the CLI. At the level of the Unix CLI itself, most byte stream-oriented (that is, using stdin/stdout/stderr as their interface) programs act as filters standalone programs that can also serve as front ends & back ends to other programs. (They function by piping information between themselves, mostly for text processing; for example: $ grep word ~user/dir/infile | sort | tee ~user/dir/outfile)

For major computer subsystems, a graphical file manager is a front finish to the computerâ's file technique, as well as a shell interfaces with the operating technique. The front finish faces the user, & the back finish launches the programs of the operating technique in response.

In network computing, front finish can refer to any hardware that optimizes or protects network traffic. It is called application front-end hardware because it is placed on the network's outward-facing front finish or boundary. Network traffic passes through the front-end hardware before entering the network.

Tuesday, 8 September 2015

The five Most Popular Frontend Frameworks of 2015 Compared

Nowadays there is a deluge of CSS front-end frameworks. But the number of nice ones can be narrowed down to a few.

In this article we all compare what I think are the best frameworks available today. Each framework has its own strengths and weaknesses, and specific areas of application, allowing you to select based on the needs of a specific project. For example, if your project is simple, there is no need to make use of a complex framework. Also, plenty of of the choices are modular, allowing you to make use of only the parts you need, or even mix parts from different frameworks.

(Note: A quantity of the knowledge below will go obsolete in the approaching weeks and months  e.g. GitHub stars, version numbers so be aware of this if you are reading this article long after the publication date. Also note that the framework sizes are the minified sizes of the necessary CSS and JavaScript files.)

The frameworks that I am going to explore are introduced based on their GitHub popularity, beginning with the most popular, which is, of coursework, Bootstrap.

1.Bootstrap

Bootstrap is the undisputed leader among the obtainable frameworks today. Given its large popularity, which is still growing every day, you can be positive that this glorious toolkit wont fail you, or leave you alone on your way to building successful sites.
                                                       

Creators: Mark Otto & Jacob Thornton
Released: 2011
Current version: three.3.1
Popularity: 75,000+ stars on GitHub
Description: Bootstrap is the most popular HTML, CSS, & JavaScript framework for developing responsive, mobile first projects on the net.
Core concepts/principles: RWD & mobile first.
Framework size: 145 KB
Processors: Less & Sass
Responsive: Yes
Modular: Yes
Beginning templates/layouts: Yes
Icon set: Glyphicons Halflings set
Extras/Add-ons: None bundled, but lots of third-party plug-ins are obtainable.
Unique parts: Jumbotron
Documentation: Nice
Customization: Basic GUI Customize. Regrettably you require to input the color values by hand, because there is no color picker obtainable.
Browser support: Firefox, Chrome, Safari, IE8+ (you require Reply.js for IE8)
License: MIT

Notes on Bootstrap

The main strength of Bootstrap is its large popularity. Technically, its not necessarily better than the others in the list, but it offers lots of more resources (articles & tutorials, third-party plug-ins & extensions, theme builders, & so on) than the other frameworks combined. In short, Bootstrap is in all places. & this is the main reason people continue to select it.

(Note: By saying a unique components I mean that they are unique compared only to the frameworks mentioned in this list.)

2.Foundation By ZURB

Foundation is the second large player in this comparison. With a solid company like ZURB backing it, this framework has a strong s well a foundation. After all, Foundation is used on plenty of large sites including Facebook, Mozilla, Ebay, Yahoo!, & National Geographic, to name a few
 

Creators: ZURB
Released: 2011
Current version: five.4.7
Popularity: 18,000+ stars on GitHub
Description: The most advanced responsive front-end framework in the world
Core concepts/principles: RWD, mobile first, semantic.
Framework size: 326 KB
Processors: Sass
Responsive: Yes
Modular: Yes
Beginning templates/layouts: Yes
Icon set: Foundation Icon Fonts
Extras/Add-ons: Yes
Distinctive parts: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
Documentation: Lovely. Plenty of additional resources are obtainable.
Customization: No GUI customizer, only manual customization.
Browser support: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
License: MIT

Notes on Foundation

Foundation is a professional framework with business support, training, and consulting offered. It also provides plenty of resources to help you learn and use the framework faster and simpler.

3.Semantic UI

Semantic UI is an ongoing work to make building sites much more semantic. It utilizes natural language principles, thus making the code much more readable & understandable.                                                    
                 

Creator: Jack Lukic
Released: 2013
Current version: one.2.0
Popularity: 12,900+ stars on GitHub
Description: A UI part framework based around useful principles from natural language.
Core concepts/principles: Semantic, tag ambivalence, responsive.
Framework size: 552 KB
Preprocessors: Less
Responsive: Yes
Modular: Yes
Beginning templates/layouts: No
Icon set: Font Awesome
Extras/Add-ons: No
Unique parts: Divider, Flag, Rail, Reveal, Step, Commercial, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
Documentation: Excellent. Semantic offers a well organized documentation, and a separate net site that offers guides for getting started, customizing and generating themes.
Customization: No GUI customizer, only manual customization.
Browser support: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android four, Blackberry ten
License: MIT

Notes on Semantic UI

Semantic is the most innovative and full-featured framework among those discussed here. The general structure of the framework and the naming conventions, in terms of clear logic and semantics of its classes also surpasses the others.

4.Pure by Yahoo!

Pure is a lightweight, modular framework  written in pure CSS  that includes parts that can be used together or separately depending on your needs.


Creator: Yahoo
Released: 2013
Current version: 0.5.0
Popularity: 9,900+ stars on GitHub
Description: A set of small, responsive CSS modules that you can use in every web project.
Core concepts/principles: SMACSS, minimalism.
Framework size: 18 KB
Preprocessors: None
Responsive: Yes
Modular: Yes
Beginning templates/layouts: Yes
Icon set: None. You can use Font Awesome in lieu.
Extras/Add-ons: None
Matchless parts: None
Documentation: Nice
Customization: Basic GUI Skin Builder
Browser support: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android four.x
License: Yahoo! Inc. BSD

Notes on Pure

Pure offers only bare-bones styles for a tidy start to your project. Its ideal for individuals who donat need a full-featured framework but only specific parts to include in their work.

5.UIkit by YOOtheme

UIkit is a concise collection of simple to make use of & simple to personalize parts. Although it's not as popular as its competitors, it offers the same functionality & quality.


Creator: YOOtheme
Released: 2013
Current version: two.13.1
Popularity: three,800+ stars on GitHub
Description: A lightweight and modular front-end framework for developing rapid and powerful web interfaces.
Core concepts/principles: RWD, mobile first
Framework size: 118 KB
Preprocessors: Less, Sass
Responsive: Yes
Modular: Yes
Beginning templates/layouts: Yes
Icon set: Font Awesome
Extras/Add-ons: Yes
Unique parts: Article, Flex, Cover, HTML Editor
Documentation: Lovely
Customization: Advanced GUI Customizer
Browser support: Chrome, Firefox, Safari, IE9+
License: MIT

Notes on UIkit

UIkit is successfully used in lots of WordPress themes. It offers a flexible and powerful customization mechanism, either by hand or by its GUI customizer.