diff --git a/guide/english/bootstrap/jumbotron/index.md b/guide/english/bootstrap/jumbotron/index.md new file mode 100644 index 00000000000..3d0a952882d --- /dev/null +++ b/guide/english/bootstrap/jumbotron/index.md @@ -0,0 +1,53 @@ +--- +title: Jumbotron +--- + +## Jumbotron + +`Jumbotron` is Lightweight, flexible component for showcasing hero unit style content. +`Jumbotron` is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information. + +Jumbotron make use of almost any other bootstrap code to additionally increase its engagement value. It's operate with images,enlarged fonts,different backgorund styles etc. + +### Most Attracting features of jumbotron + + - * Showcase the marketing messages on your site + - * Project presentation + - * Article introduction + - * Image showcase + +### How to use + +Use a `<div>` element with class `.jumbotron` to create a jumbotron: + + + +**Code Example:** +``` +
+

Hello, world!

+

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

+
+

It uses utility classes for typography and spacing to space content out within the larger container.

+ Learn more +
+ +``` +#### Fluid jumbotron + +To make the jumbotron full width, and without rounded corners, add the `.jumbotron-fluid` modifier class and add a `.container` or `.container-fluid` within. + +**Code Example:** + +``` +
+
+

Fluid jumbotron

+

This is a modified jumbotron that occupies the entire horizontal space of its parent.

+
+
+``` + +### More Information: + +- [Bootstrap Jumbotron components Doc](https://getbootstrap.com/docs/4.0/components/jumbotron/) diff --git a/guide/english/html/editors/index.md b/guide/english/html/editors/index.md new file mode 100644 index 00000000000..9812615aac4 --- /dev/null +++ b/guide/english/html/editors/index.md @@ -0,0 +1,97 @@ +--- +title: HTML Editors +--- + +### HTML editors + +An `HTML editor` is a program for editing `HTML` markup language. HTML editors can be created and modified HTML document. + +However, for leraning HTML we recomended simple text editor like Notepad (Windows PC) or TextEdit (Mac). + +* Simple text editor is good way to learn HTML for beginners. +* There are two main varieties of HTML editors: textual and WYSIWYG (what you see is what you get) editors. + +### Text editor + +Basic text editor is source code editors, include additional tools specifically geared toward handling code. + + +### WYSIWYG editors + +HTML editors that support What You See Is What You Get (WYSIWYG) paradigm provide a user interface similar to a word processor for creating HTML documents, alternative to manual coding for editing HTML documents. + + +### Write HTML using Notepad or TextEdit + +follow the below four steps to create your first web page with Notepad or TextEdit. +* * * + +#### Step 1: Open Notepad (Windows PC) + +**Windows 8 or later:** + +1. Open the **Start Screen** (the window symbol at the bottom left on your screen). + Type **Notepad**. + +**Windows 7 or earlier:** + +1. Open **Start > Programs > Accessories > Notepad** + +#### Step 1: Open TextEdit (Mac) + +1. Open **Finder > Applications > TextEdit** + +2. Also change some preferences to get the application to save files correctly. + In **Preferences > Format >** choose **"Plain Text"** + +3. Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text". + +4. Then open a new document to place the code. + +#### Step 2: Write Some HTML + +Write or copy some HTML into Notepad. + +```HTML + + + + +

My First Heading

+ +

My first paragraph.

+ + + +``` + +#### Step 3: Save the HTML Page + +1. Save the file on your computer. Select **File > Save** as in the Notepad menu. + +2. Name the file **"index.html"** and set the encoding to **UTF-8** + (which is the preferred encoding for HTML files). + +> You can use either .htm or .html as file extension. There is no difference, it is up +> to you. + +#### Step 4: View the HTML Page in Your Browser + +Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with"). + +### List of Editors (Open-source and Commercial softwares) + +* [Eclipse](https://www.eclipse.org) +* [Atom](https://atom.io) +* [WebStorm](https://www.jetbrains.com) +* [Microsoft Visual Studio](https://visualstudio.microsoft.com/) +* [NetBeans](http://netbeans.apache.org/) +* [Brackets](http://brackets.io) +* [EditPlus](https://editplus.com/) +* [Sublimetext](https://www.sublimetext.com) + +#### More Information: + +Wikipedia HTML editors tag +W3schools HTML Editors
 tag + diff --git a/guide/english/html/responsive-web-design/index.md b/guide/english/html/responsive-web-design/index.md index 2532c3b13ca..5cc3b8413b3 100644 --- a/guide/english/html/responsive-web-design/index.md +++ b/guide/english/html/responsive-web-design/index.md @@ -49,6 +49,76 @@ The Bootstrap framework divides a row into twelve columns. In the above example, ![Grid Example](https://www.javatpoint.com/bootstrappages/images/bootstrapgrid.jpg "Basic Grid Example") +### 3. Flexbox Model + +The `flexbox layout model`, makes it's easier to design responsive layout structure without using float or positioning. + +This layout model is one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. + +The main axis is defined by `flex-direction`, which has four possible values: + + * row + * row-reverse + * column + * column-reverse + +To start using the Flexbox model, you need to first define a `flex container`. +The flex container becomes flexible by setting the display property to flex: + +``` +
+
1
+
2
+
3
+
+ +``` +#### The flex container properties are: + + * flex-direction + * flex-wrap + * flex-flow + * justify-content + * align-items + * align-content + +#### The flex item properties are: + + * order + * flex-grow + * flex-shrink + * flex-basis + * flex + * align-self + +#### CSS Flexbox Properties + +The following table lists the CSS properties used with flexbox: + +| Property | Description | +| ------------- | -------------------------------------------------------------------------------- | +| display | Specifies the type of box used for an HTML element | +| flex-direction | Specifies the direction of the flexible items inside a flex container | +| justify-content | Horizontally aligns the flex items when the items do not use all available | | | space on the main-axis | +| flex-wrap | Specifies whether the flex items should wrap or not,there is not enough | +| | if room for them on one flex line | +| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items,but| | | instead of aligning flex items, it aligns flex lines | +| flex-flow | A shorthand property for flex-direction and flex-wrap | +| order | Specifies the order of a flexible item relative to the rest of the flex items | | | inside the same container | +| align-self | Used on flex items. Overrides the container's align-items property | +| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis | +| | properties | +| align-items | Vertically aligns the flex items when the items do not use all available | +| | space on the cross-axis | + +#### Shorthand values for the flex properties +The predefined values are as follows: + + - flex: initial + - flex: auto + - flex: none + - flex: + ### More Information: 1. CSS Flexbox Complete tutorial in 8 minutes