<html>
<head>
<meta charset="utf-8">
<meta name="viewport" width="width=device-width, initial-scale=1">
</head>
<body>
<!--header-->
<header class="main-header"><h1>Frontend Dev Documentation</h1></header>
<div class="container">
<main id="main-doc" class="maindoc";>
<!--NavBar-->
<div class="nav-container">
<nav id="navbar" class="nav">
<header class="nav-header">Coding Fundamentals</header>
<ul class="main-ul">
<li>
<a class="nav-link" href="#HTML">HTML</a>
</li>
<li>
<a class="nav-link" href="#CSS_Syntax">CSS Syntax</a>
</li>
<li>
<a class="nav-link" href="#JavaScript">JavaScript</a>
</li>
<li>
<a class="nav-link" href="#ES6_JavaScript">ES6 JavaScript</a>
</li>
<li>
<a class="nav-link" href="#Other_Front-end_Languages">Other Front-end Languages</a>
</li>
</ul>
</nav>
</div>
<!--HTML section-->
<div>
<section class="main-section" id="HTML">
<header><h1>HTML</h1></header>
<h2>What is HTML</h2>
<p>HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most of markup (e.g. HTML) languages are human readable. Language uses tags to define what manipulation has to be done on the text. </p>
<p><p>
<h3>Features of HTML</h3>
<ul>
<li>It is easy to learn and easy to use.</li>
<li>It is platform independent.</li>
<li>Images, video and audio can be added to a web page.</li>
<li>Hypertext can be added to text.</li>
<li>It is a markup language.</li>
</ul>
<h3>Advantages</h3>
<ul>
<li>HTML is used to build a websites.</li>
<li>It is supported by all browsers.</li>
<li>It can be integrated with other languages like CSS, JavaScript etc.</li>
</ul>
<h3>disadvantages</h3>
<ul>
<li>HTML can create only static webpages so for dynamic web page other languages have to be used.</li>
<li>Large amount of code has to be written to create a simple web page.</li>
<li>Security feature is not good.</li>
</ul>
</article>
</section>
<!--Css3 Section-->
<section class="main-section" id="CSS_Syntax">
<header><h1>CSS Syntax</h1></header>
<article>
<h2>What is CSS?</h2>
<p>Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
CSS is easy to learn and understood but it provides powerful control over the presentation of an HTML document.</p>
<p>
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.
A style rule set consists of a selector and declaration block.
<pre><code>Selector => h1
Declaration => {color:blue;font size:12px;} </code></pre>
</p>
<h3>Pros of CSS</h3>
<p> Aside from making the formatting and style of Web pages conform to a single format or style with just one piece of code, CSS has many other features enjoyed by designers, including the following</p>:
<ul><li>
<strong>Speed of Design</strong>: CSS helps developers quickly create multiple pages in the same style and format.</li>
<li>
<strong>Consistency</strong>: CSS helps establish a consistent framework that Web designers can use across all the sites they build.</li>
Ease of Use: CSS is easy to learn, and there are many tutorials and forums online to help designers in a pinch.<li>
<strong>Multiple Browser Support</strong>: CSS works with Internet Explorer, Firefox, Chrome and more.</li></ul>
<h3>Cons</h3>
While CSS has several benefits, some designers are quick to list the following cons:
<ul>
<li><strong>Speed:</strong> Downloading an HTML page will always take longer if CSS is embedded within it. However, with ever-increasing Internet speeds, this is less of a problem than you might imagine.</li>
<li><strong>Weirdness:</strong> While CSS is easy to use and understand, its syntax is very different from HTML and not terribly user-friendly. This forces developers to take time to learn two different types of code and then understand how they interact with each other.</li>
<li><strong>Complications:</strong> CSS can get messy and complicate the creation of websites with third-party software, such as Dreamweaver or Microsoft FrontPage.</li>
</ul>
</article>
<!--Vanilla JavaScript-->
</section>
<section class="main-section" id="JavaScript">
<header><h1>JavaScript</h1></header>
<article>
<h2>What is Vanilla JavaScript?</h2>
<p>JavaScript is a programming language that allows you to implement complex things on web pages. Every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved.</p>
<p>JavaScript is incredibly versatile and beginner friendly. With more experience, you'll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!</p>
<ul>
<li>Speed. Client-side JavaScript is very fast because it can be run immediately within the client-side browser. Unless outside resources are required, JavaScript is unhindered by network calls to a backend server. It also has no need to be compiled on the client side which gives it certain speed advantages (granted, adding some risk dependent on that quality of the code developed).</li>
<li>Simplicity. JavaScript is relatively simple to learn and implement.</li>
<li>Popularity. JavaScript is used everywhere in the web. The resources to learn JavaScript are numerous. StackOverflow and GitHub have many projects that are using Javascript and the language as a whole has gained a lot of traction in the industry in recent years especially.</li>
<li>Rich interfaces. Drag and drop components or slider may give a rich interface to your website.</li>
<li>Versatility. Nowadays, there are many ways to use JavaScript through Node.js servers. If you were to bootstrap node.js with Express, use a document database like mongodb, and use JavaScript on the front-end for clients, it is possible to develop an entire JavaScript app from front to back using only JavaScript.</li>
<li>Updates. Since the advent of EcmaScript 5 (the scripting specification that Javascript relies on), Ecma International has dedicated to updating JavaScript annually. So far, we have received browser support for ES6 in 2017 and look forward to ES7 being supported in future months.</li>
<li><strong>JQuery versus Vanilla Javascript:</strong><h3>JQuery</h3>
<pre>
<code>$('.my #awesome selector');
</code></pre></li>
</ul>
</article>
</section>
<!--ES5 Javascript section-->
<section class="main-section" id="ES6_JavaScript">
<header><h1>Es6 JavaScript</h1></header>
<article>
<h2>What is ES6</h2>
<p>ECMAScript 2015 is the sixth edition of ECMAScript language specification standard which is used in the implementation of JavaScript. In order to run the ES6 code in modern browser , we use BABEL. BABEL is a transpiler for JavaScript which makes the ES6 code to run in any browser.</p>
<p></p>
<ul>
<li><strong>Let vs var:</strong>
Let is the new var. As it has "sane" bindings.</li>
<pre>
<code>
//Old code
{
var globalVar = "from demo1"
}
//New Code
{
let globalLet = "from demo2";
}
console.log(globalVar)
console.log(globalLet)
</code>
</pre>
<li>Const is for read-only variables.
<pre>
<code>
const a = "b"
a = "a"
</code>
</pre>
</li>
<li>For..of
New type of iterator, an alternative to for..in. It returns the values instead of the keys.
<pre>
<code>
let list = [4, 5, 6];
console.log(list)
for (let i in list) {
console.log(i);
}</code>
</pre>
</li>
</ul>
</article>
</section>
<!--Front End Libraries-->
<section class="main-section" id="Other_Front-end_Languages">
<header><h1>Other Front-End Languages<h1></header>
<article>
<h2>Libraries and Tools</h2>
<p>
Many websites use libraries to extend the capabilities of HTML, CSS and JavaScript. jQuery is the most widely used JavaScript library, powering over 74 million websites. When it was first released in 2006, browsers used different (sometimes incompatible) implementations of JavaScript. jQuery bridged these inconsistencies, letting developers write code that worked in any browser.
</p> <p>For a complete front-end solution, Bootstrap is a popular toolkit that lets you quickly get started creating websites. Created by Twitter, it offers a framework that includes pre-designed site layouts, page elements and templates.</p>
<ul>
<h3>React.js</h3>
<p>
React is a JavaScript component-based library with JSX syntax.
Facebook software engineer Jordan Walke created the prototype for React in response to common problems in the work of the Facebook app caused by an expansion of the network. Officially, its first application by Facebook gets in 2011 and two years after that, 2013, it becomes an open-source library.
The main characteristic of React is a virtual DOM, but necessary to mention that it is 1-way data binding. Thanks to the virtual DOM characteristic, React is characterized by exceptional performance.
From the aspect of the level of difficulty, React is one of the easiest to learn, especially compared to Angular.</p>
<h4>Pros & Cons</h4>
<li>Maintained by Facebook</li>
<li>The community is constantly evolving</li>
<li>Virtual DOM</li>
<li>High Performance</li>
<li>Suitable for Apllication with High traffic</li>
<li>Often updated</li>
<br>
<h4>Cons</h4>
<li>Not SEO friendly</li>
<li>Needs other libraries to build more complex applications</li>
</ul>
<ul>
<h3>Agular.js</h3>
<p>Extremely popular framework Angular is the only one on this list whose source language is TypeScript.
The Google team developed it to upgrade the earlier version of AngularJS. In the focus of development, on the one hand, there was the fulfillment of modern demands, talking about technology, and, on the other hand, the tendency to combine the concepts that best showed in practice. With this framework, the Google team has undoubtedly set standards in this sphere. They published the first version of Angular (v2) in 2016. Before that, in 2014 and 2015 were released alpha and beta.
Angular is a component-based framework, but unlike React, it is a 2-way data binding.
Learning Angular is difficult although the documentation and community are very numerous. The documentation is even more confusing, especially for beginners.
</p>
<h4>Pros & Cons</h4>
<li>Strong Community</li>
<li>Two way data binding</li>
<li>Simple Single PAge App</li>
<li>Shadow DOM</li>
<li>TypeScript</li>
<li>Often updated</li>
<br>
<h4>Cons</h4>
<li>Complex and not easy</li>
<li>Must Learn TypeScript</li>
</ul>
</article>
</section>
</div>
</main>
<div>
<footer class="footer">
<p><strong>© Copyright 2018, Example Corporation</strong></p>
</footer>
</div>
</div>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>
!
