gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
guide/english/css/css-frameworks/css-framework-bootstrap/index.md Normal file
View File

@ -0,0 +1,83 @@
---
title: CSS Framework Bootstrap
---
# CSS Framework Bootstrap
Bootstrap is the most popular CSS framework for developing responsive, mobile first projects for the web.
## Getting Started - Latest version: 4.1
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Bootstrap library. We have used a CDN in this example, but you can checkout <a href='https://getbootstrap.com/docs/4.1/getting-started/download/' target='_blank' rel='nofollow'>other ways of installing Bootstrap</a>.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap</title>
<!--Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<!-- Add all HTML Code below -->
<!-- Add all HTML Code above -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- Latest compiled bootstrap JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
```
## Getting started - Bootstrap 3
Bootstrap 3 isn't the latest stable version of Bootstrap, but it's still the most widely used version. You will find it in a lot of templates, wordpress themes, projects and many more. With that in mind, it's clear it is still useful to know how to use it.
Don't hesitate to go trhough the excellent <a href="https://getbootstrap.com/docs/3.3/getting-started/" target="_blank" rel="nofollow">Bootstrap Documentation</a>.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Add all HTML Code below -->
<!-- Add all HTML Code above -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- IU jQuery for better animations-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
```
<b>Note:</b> Other versions are available and can be found on Bootstrap website.
## Learning Resources
* Checkout the official Bootstrap 4 Documentation <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/" target="_blank">here</a>
* Checkout the official Bootstrap 3 Documentation <a href='https://getbootstrap.com/docs/3.3/getting-started/' target='_blank' rel='nofollow'>here</a>.
* Checkout Bootstrap's open source GitHub repository <a href='https://github.com/twbs/bootstrap' target='_blank' rel='nofollow'>here</a>.
* At <a href='https://www.freecodecamp.com/' target='_blank' rel='nofollow'>FreeCodeCamp</a>, we teach Bootstrap as part of our curriculum.

32
guide/english/css/css-frameworks/css-framework-bulma/index.md Normal file
View File

@ -0,0 +1,32 @@
---
title: CSS Framework Bulma
---
# CSS Framework Bulma
Bulma is a modern CSS framework based on <a href='http://forum.freecodecamp.com/t/css-flexbox-tips-and-tricks' target='_blank' rel='nofollow'>Flexbox</a> and highly customizable using <a href='http://sass-lang.com/' target='_blank' rel='nofollow'>Sass</a> (SCSS).
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the Bulma library.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing Bulma <a href='http://bulma.io/documentation/overview/start/' target='_blank' rel='nofollow'>here</a>.
## Learning Resources
* The official documentation for Bulma is available <a href='http://bulma.io/documentation/overview/start/' target='_blank' rel='nofollow'>here</a>.
* Checkout Bulma's open source GitHub repository <a href='https://github.com/jgthms/bulma' target='_blank' rel='nofollow'>here</a>.

37
guide/english/css/css-frameworks/css-framework-foundation/index.md Normal file
View File

@ -0,0 +1,37 @@
---
title: CSS Framework Foundation
---
# CSS Framework Foundation
[Foundation](http://foundation.zurb.com/) is an open-source, mobile first CSS framework created by [Zurb](https://zurb.com/).
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Foundation library.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Foundation Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
</body>
</html>
```
This example makes use of a CDN that loads the default settings. If you'd like to customize the grid layout, change the colors or add and remove components you can do so on the Foundation [download](http://foundation.zurb.com/sites/download/) page.
#### Learning Resources
1. [Foundation Documentation](http://foundation.zurb.com/sites/docs/)
1. [List of Foundation Tutorials](https://github.com/zurb/foundation-sites)
1. [Foundation Source Files on GitHub](http://foundation.zurb.com/learn/tutorials.html)
1. [DevTips YouTube Series on Foundation Grid](https://www.youtube.com/playlist?list=PLqGj3iMvMa4LJo_lBMTJwAlQRElulSeL8)

31
guide/english/css/css-frameworks/css-framework-material-design-lite/index.md Normal file
View File

@ -0,0 +1,31 @@
---
title: CSS Framework Material Design Lite
---
# CSS Framework Material Design Lite
Material Design Lite lets you add a Material Design look and feel to your websites. It aims to optimize for cross-device use.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the MDL library.
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing MDL <a href='https://getmdl.io/started/index.html' target='_blank' rel='nofollow'>here</a>.
### Learning Resources
* The official documentation for MDL is available <a href='https://getmdl.io/started/index.html' target='_blank' rel='nofollow'>here</a>.
* Checkout MDL's open source GitHub repository <a href='https://github.com/google/material-design-lite' target='_blank' rel='nofollow'>here</a>.

38
guide/english/css/css-frameworks/css-framework-materialize/index.md Normal file
View File

@ -0,0 +1,38 @@
---
title: CSS Framework Materialize
---
# CSS Framework Materialize
Materialize is a Responsive CSS framework based on Google's <a href='https://design.google.com/spec/' target='_blank' rel='nofollow'>Material Design</a> Language.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.
```html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<h1>Hello World!</h1>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing Materialize <a href='http://materializecss.com/getting-started' target='_blank' rel='nofollow'>here</a>.
## Learning Resources
* The official documentation for Materialize is available <a href='www.materializecss.com/' target='_blank' rel='nofollow'>here</a>.
* Checkout Materialize's open source GitHub repository <a href='https://github.com/Dogfalo/materialize' target='_blank' rel='nofollow'>here</a>.
* <a href='https://scotch.io/tutorials/make-material-design-websites-with-the-materialize-css-framework' target='_blank' rel='nofollow'>Here</a> is a handy tutorial on using Materialize.

31
guide/english/css/css-frameworks/css-framework-semanticui/index.md Normal file
View File

@ -0,0 +1,31 @@
---
title: CSS Framework Semantic UI
---
# CSS Framework Semantic UI
Semantic UI is one of the most popular CSS framework for developing responsive, mobile first projects for the web.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Semantic UI library. We have used a CDN in this example, but you can checkout other ways of installing Semantic UI <a href='https://semantic-ui.com/introduction/getting-started.html' target='_blank' rel='nofollow'>here</a>.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Semantic UI Template</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
</body>
</html>
```
## Learning Resources
* The official documentation for Semantic UI is available <a href='https://semantic-ui.com/introduction/getting-started.html' target='_blank' rel='nofollow'>here</a>.
* Checkout Semantic UI's open source GitHub repository <a href='https://github.com/Semantic-Org/Semantic-UI' target='_blank' rel='nofollow'>here</a>.

37
guide/english/css/css-frameworks/css-framework-skeleton/index.md Normal file
View File

@ -0,0 +1,37 @@
---
title: CSS Framework Skeleton
---
# CSS Framework Skeleton
Skeleton is a dead simple boilerplate to kickstart any responsive project.
## Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the Skeleton library.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton Template</title>
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
<h1>Hello World</h1>
<!-- Add all HTML Code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
```
<kbd>[![](//discourse-user-assets.s3.amazonaws.com/original/2X/3/31bd555700f1ee85bb4ddcacf595f0dfd8a16254.png) **JSBin Demo**](http://jsbin.com/sekojaxali/edit?html,output)</kbd>
We have used a CDN in this example, but you can checkout other ways of installing Skeleton <a href='https://github.com/dhg/Skeleton#getting-started' target='_blank' rel='nofollow'>here</a>.
## Learning Resources
* ![:point_right:](//forum.freecodecamp.com/images/emoji/emoji_one/point_right.png?v=2 ":point_right:") <a href='http://getskeleton.com/#grid' target='_blank' rel='nofollow'>**`Official Documentation`**</a> of Skeleton.
* Checkout Skeleton's open source GitHub repository <a href='https://github.com/dhg/Skeleton' target='_blank' rel='nofollow'>here</a>.
* <a href='http://getskeleton.com/#examples' target='_blank' rel='nofollow'>Here</a> are some examples of how Skeleton was used on different websites.

32
guide/english/css/css-frameworks/css-frameworks-uikit/index.md Normal file
View File

@ -0,0 +1,32 @@
---
title: CSS Framework UIKit
---
## CSS Framework UIKit
UIKit is A lightweight and modular front-end framework for developing fast and powerful web interfaces.
### Getting Started
Here is a simple HTML template which includes the latest compiled and minified CSS for the UIKit library.
```html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>
<body>
</body>
</html>
```
We have used a CDN in this example, but you can checkout other ways of installing UIKit <a href='https://getuikit.com/docs/introduction' target='_blank' rel='nofollow'>here</a>.
### Learning Resources
* The official documentation for UIKit is available <a href='https://getuikit.com/docs/introduction' target='_blank' rel='nofollow'>here</a>.
* Checkout UIKit's open source GitHub repository <a href='https://github.com/uikit/uikit' target='_blank' rel='nofollow'>here</a>.

42
guide/english/css/css-frameworks/index.md Normal file
View File

@ -0,0 +1,42 @@
CSS frameworks are designed to simplify the work of the typesetter, eliminate errors when creating a project, and get rid of the boring monotonous writing of the same code.
Advantages of CSS frameworks:
* Cross-browser compatibility
* Ability to create the correct HTML layout even for a not very experienced specialist.
* Code uniformity
* Increase development speed
Minuses:
* Attachment to CSS style library
* Redundant code
## Bootstrap
One of the most famous CSS frameworks to date. Includes templates for drawing buttons, sidebars, navigation bars, forms, and other site elements. Includes itself javascript extensions.
Bootstrap is compatible with all major modern browsers, but there may be problems in older versions of browsers. Supports adaptability. Uses the languages Less and Sass.
## Skeleton
Based on JavaScript and CSS, it is used to quickly and accurately create responsive websites that are correctly displayed on both large monitors and small gadget screens. A big plus Skeleton - it can be adapted to any design. The markup grid contains 12 columns and has a base width of 960 pixels. Compatible with all major browsers.
## Kube
Complete freedom for the developer without imposing styles. Provides maximum design flexibility. It has several grid options and is positioned by the creators as a framework for professional CSS developers. Uses Less, supports responsive design.
## Foundation
Common CSS framework. Along with other main elements includes several HTML templates with different arrangement of blocks on the page. It has a large set of components in JavaScript. The framework is very serious in its capabilities and composition. Uses Sass. Compatible code with all major browsers.
## Semantic UI
Support for Firefox, Chrome, Safari, Internet Explorer, Android 4, Blackberry10. Contains a large number of components: icons, images, labels, menus and other standard components. It supports the latest versions of HTML and CSS and has a good selection of script modules and APIs. Uses Less. On applicability competes with bootstrap.
Each task has its own tool. A good step would be to try the framework and understand “your” it or not. You can use the skeletons of the code presented in the frameworks as a cheat sheet and just take solutions and code from there.