Hosting a Website

By now you know how to create websites, now it time to get them LIVE on the internet for everyone to see what you just created, this little tutorial will guide you in how to take the file that you created and put it live in the internet.

in this case we will use the following example as our website.

This is a website about fitness without a GYM. and the code can be found on GitHub: Hosting-Example.

 

****************************************************************************************

Now is time to get this site LIVE on the INTERNET:

To do this we need to host it, on a server. and here are the instructions of how to do this, using a Free Hosting service.

01 – Go to the site: www.biz.nf

 

****************************************************************************************

Next are two videos that teach step by step how to upload a website to a free hosting:

Note: watch the videos “Full Screen”.

****************************************************************

01 – Instructions in how to create an account:

****************************************************************

02 – How to Upload the files to the server.

****************************************************************************************

And here is the link to our new website: www.nogym.co.nf

****************************************************************************************

Here are some examples made for some of the students.

Camila (Spain): www.doolaylay.co.nf

Worakarn Rojjanawat (Thailand): www.myfavsinger.co.nf

knomjean (Thailand): www.singerknomjean.co.nf

 

Category: FED, Web-Dev-Training | Comments Off on Hosting a Website

GIMP

Free Image Manipulation Software.

when creating Websites and Apps there is almost always the need for Images, so far I has bee able to get away with Google and the images that I can find there, but some times there is a Image that I want in a specific size, format, or in other cases I just don’t find the image that I want, this is a small tutorial that teach how to produce images when we did not got so lucky in our Google Search.

Installation:

First we need to install it:

Now lest learn ho to use it.

Quick Tutorials:

Here are a few resources that will get you up an running, and give you some basic knoledge so you know the software, and have the skills to create some basic projects,  this will not make you a master but will give you the basic skills so you can be a little more Auto-Sufficient whit the images on your Web-Development.

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

Getting Started with Gimp 2.8 ~ Tutorials for Beginners

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

GIMP 101 Tutorial for Beginners: Learning the Basics: Video

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

How to Remove Anything from a Photo in GIMP – Tutorial

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

GIMP Tutorial – How to change Background/background removal

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

GIMP Tutorial – How to cut out a person

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

 

20 fantastic GIMP tutorials to get you from beginner to pro

Here are some other quick tutorials that will teach you some specific skills that will help you to create new Images. Link

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

How to add Layers in GIMP: Link

GIMP: Quickies: LInk

 

 

Category: FED | Comments Off on GIMP

Test you Site

Here you will find some links that will be able to help you to test your site.

Google PageSpeed Insights

Here you will be able to plug the URL of your site and this Google tool will provide you with some recommendations: Link

Category: FED | Comments Off on Test you Site

Atom Tex-Editor

Install: Atom + Packages


Installing Athom: Link

if interested on Atom

Lay Out 2 Columns:  link1 , link2 , link3

Emmet: Link1 , Link2 , Link3

Other Plug-Ins: link1

File Type Icons: Link1 ,  link2

To Open HTML in Browser

Install: open-html-in-browser pakage


List of Packages that I use in Atom.

Atom Tutorials: Manual

Go to: Edit / Preferences  then: click Install:  search and install:

  • atom-runner
  • atom-save-all  // will save changes in all documents open in tabs. overwrite Ctrl + S
  • auto-indent
  • color-picker
  • emmet-atom
  • file-icons
  • javascrip-snipets  // Disabled for now
  • autocomplete-css
  • autocomplete-html
  • autocomplete-plus  // this needs autocomplete-snipets
  • autocomplete-snippets // this needs autocomplete-plus
  • jshint
  • linter-jscs

when I activate the package “react” I got a message of a conflict, with the package “language-babel” it requires to disable one or the other, I will disable “language-babel” to see if I can get the Auto-Complete feature that the package “react” offers.

Now on the same window click the tab: Packages

go to the settings of atom-runner, scroll to CONFIGURING there select and copy the following text:

now go to: Edit / config…

and at the end of the file paste the text, (with NO Indentation), now ( Ctrl + S ) to save it

now to test it: create a file and save it with extension “.py” , on that file write:

to run it press: (Alt + R)

to do this I use this: video


ATOM COMMANDS

To split screen: Ctrl + Shift + P.    link

To open other files on Project: Ctrlthen write the name of the file and press enter.

To go to a specific line: Ctrl + G

To select and (or) replace all the instances of a word: Ctrl + F

To find the next occurrence of a word: Ctrl + D  repeat until you select all the instances desired, and then you can change them.

To open Atom from the Terminal: ” atom .


Installing PIP3

To install I type the following commands in the terminal.


Installing Flask

To install Flask, get to the local working directory of the project and:


Find and Replace

This is really useful when you have a variable that repeat several times in the code and you want to change the name in all the ocurrances at once:

  • Ctrl+F – Search within a buffer
  • Ctrl+Shift+F – Search the entire project

for more information use this link:  Find and Replace


x

Category: FED | Comments Off on Atom Tex-Editor

Filezilla

How to setup and use Filezilla

To install FileZilla:

Configuration with BlueHos

Link with instructions: BlueHost

Video Instructions:

 

.


How to Use IT

  1. Subdomains: Create the domain to load Upload files.
  2. Open Filezilla, / open “Site Manager” / put password
  3. Select Directory with files to Upload.
  4. Double “click” in the files to Upload.
  5. Move the files from: “FTP”   to   “Domain-XYZ”

 

x

Category: FED | Comments Off on Filezilla

Post-CSS

Pospular new post-processor, fast to compile out of all pre/post-processors.

 

Category: FED | Comments Off on Post-CSS

Git & GitHub

Here we will find information about Git & GitHub.


Basic Git Vocabulary

  • Repository = Where Git save all the: files, history, and data of the Project.
  • Working Directory = Folder location in PC.
  • Staging Changes = Choosing what Changes we want to commit, and what to ignore.
  • Commit = The ACT of save the changes to Git.
  • Push = Saving: Changes in repository to GitHub.com
  • pull = Download the Lattes changes from GitHub.com and update our Local Repository.
  • Clone a Repository: Download an existing GitHub.com Repository to your PC.

 

For the ReadMe.md: LINK  —  LINK2

Git Commands:

Restore files back to last commit:

Clone a Repository:

Set Own Repository on Cloned Repository:

To get help on any command: command + –help

To stop tracking changes on a Local repository:

Review recent statistics changes.

Stop viewing “git log”

press ” q ”

Getting Colored Output

Git Ignore:

Create a file named: ” .gitignore  ” in the main working directory and here where you will list the files and folders that you don’t want to Commit or Push, and here is an example of the file, here Im ignoring the folder: “node_modules” and the file “myNotes.txt” I also add a link where you can find more help about how to configure this file.

and this is how you can ignore files and folders from been Push to GitHub.

Remove a folder pushed by mistake:

 

Comparing

Compare two  Logs ID’s

Compare Working Directory with Staging Area

Compare the Staging area doc with repository


Clone: copy all the repository with all the History. not just files.

Temporary restore previous version

Style the Terminal (Colors) instructions:

Links:  Udacity


BRANCHES

To know in what branch we are:

To create a new branch, just add an argument

Now if you check in what branch we are, you will see that we are working on the branch “master”

To change working branch

Now we can do changes to the files on a new and separate branch.

you can create a branch and change to work in that branch in a single command.

 

Wen working with branches in the same computer, you should use different folders (directory location). to see who did what, “$ git log 

To visualize Git Log:

To delete a branch.


MERGING

To merge two branches

To find what is the parent of a commit after a merge, without know what commit is the parent.

 

 

morei

 

.

Category: FED | Comments Off on Git & GitHub

FlexBox

Yes I know that FlexBox is part of CSS, but if in your previous pages you struggle with CSS to achieve: Layout, Positioning, Block-Formatting, Centering, etc…. you know that getting the desire results using CSS Floats and other Properties can be very frustrating, the hard part should be make it Dynamic and Interactive not building the frame. FlexBox can make the process of creating the Frame more easy and fast, and that put FlexBox in a category of its own and here in a post of its own. enjoy. I will put more updates when I learn more about FlexBox.


css-tricks.com  —  Ultimate  —  CCpdf

GAME: flexboxfroggy


Udemy: Professional CSS Flexbox

  • flex-wrap to create multi-line flex boxes.
  • justify-content to distribute empty space between our items per line
  • flex-direction to control which way our main and cross axis point
  • align-items to align our items along the cross axis per line
  • align-content to distribute extra cross axis space between our lines

Basic Definitions:

Flex Container: Any Element with the CSS property :  display: flex;  or   display: inline-flex; 

Flex Items: Any Element that is INMEDIATE Child of a Flex Container. and will take Only the space that they need, as stipulated in the CSS-Properties.

Two types of Flex Container:

  • display: flex;   ==  Block Level Element, Meaning: Put it self in a New-Line all takes all available with.
  • display: inline-flex;  ==  Now the container takes only the space It needs, sharing the line with other elements.

flex-wrap:

Udemy 2:20 – jsbin – If there is no enough width in the Horizontal width of the Container for the combine width of all elements, Then by default they will squish and share the available width in equality, unless we “flex-wrap” is modify from its default value of: “flex-wrap: nowrap;”

Wrap is a property of the container, if we set up: “flex-wrap: wrap;” then the container is allow to take as many lines as need to fit its elements in they original width.

Justify-content:

Udemy 2:32 – jsbin – It distribute the items of a container without know the exact dimensions or having to specify, a complex margin and float rules.providing Manipulation in the “Main-Axis” (Horizontally) even center. This rule is only taken on account when is extra space.

flex-direction:

Udemy 2:04  –  jsbin  – Gives control to in what direction the items are lay-out to understand this better we need to understand two new concepts:

  1. Main Axis: what direction the Items are layout.    Default: Left — to — Right.
  2. Cross Axis: what direction New-Lines are added.   Default: Top — to Bottom.

                    flex-direction: column  &  column-reverse;

Column: will change the Main-Axis to: Top — to Bottom. like in a single Column, it will take as much vertical space needs to fit all its Items in a single Column, if you want it to take just a specific height, well you need to code it: height: 150px; and if the vertical space is not long enough it will “Wrap“.  column-reverse will do the opposite.

align-items:

Udemy 3.12  –  JsBin  :    align-items to align our items along the cross axis per line

This property will allow to manipulate the position of the items relative tot “Cross-Axis” (Vertically) Even Center them. Always maintaining the ITEM-HEIGHT. as long is smaller than the container,   Note: Baseline will align items in a Per-Line bases.

align-content:

Udemy 2:17  –  JsBin  :    align-content to distribute extra cross axis space between our lines

This is very similar to “align-items:” providing Manipulation in the “Cross-Axis” (Vertically) even center. with some variations like:

  • It can work just the same in Columns,  “flexdirection: column;
  • It can be use to Align and Distribute LINES across any extra space.

Element Properties.

  • order to change the display order of items
  • flex-grow to specify how our items take up extra main-axis space when available
  • flex-shring to specify how our items shrink when there isn’t enough main-axis space
  • flex-basis to specify a dimension tied to the main-axis
  • align-self to align individual items along the cross-axis on their line

order:

Udemy 2:22  –  JsBin  :  By default:   order: 0;  in all items., Using this you can change the order in which the elements are display.

flex-grow:

Udemy 3:03  –  JsBin.  by default all elements will take only the space need, and if the container is bigger they will leave the extra space empty,

flex-grow is how the elements will divide that reminder space. this flex grow is Responsive to window size.

flex-shrink:

Udemy 2.05  –  JsBin. this specify how the items will shrink in comparation with the other items, when the container do not have enough space for the total size of the items.

Example: flex-shrink: 2;  do not means that the Item will be half the size, this means that the number of pixels  cut, will be double the number the items with size 1;

flex-basis:

Udemy 2.05  –  JsBin.

Usint flex-basis in an Item we can ensure that will take a particular amount of space along its Main-Axis regardless which direction is pointing.

align-self:

Udemy 1:56  –  JsBin.  does the same thing than “align-items” but this is for each individual item, and it overwrites “align-items” unless “align-self: auto;

Shorthand Properties

There are two:

  • flex:
  • flex-flow:

“Shorthand properties are CSS properties that let you set the values of several other CSS properties simultaneously” – MDN CSS Shorthand Properties

Examples:

For Flex Items:

The shorthand property flex specifies flex-grow, flex-shrink but only if flex-grow is specified, and / or flex-basis.

Examples

 .



Flexbox Quick Reference

Concepts

  • Flex Container : Any HTML element with the CSS property of display set to “flex” or “inline-flex“.
  • Flex Item : Any element that is a direct child of a Flex Element.
  • Main Axis : The direction items are laid out on a line. By default this is left to right.
  • Cross Axis: The direction that lines are added to the flex container. By default this is top to bottom.

CSS properties for Flex Containers

display : Designate an element as a Flexbox or Inline Flexbox

  • flex
  • inline-flex

flex-wrap : Specify whether items should wrap when there is not enough space to display them all.

  • no-wrap (default)
  • wrap
  • wrap-reverse

justify-content : Distribute extra space between items per line.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around

flex-direction : Specify which direction the Main and Cross axes point.

  • row (default)
  • row-reverse
  • column
  • column-reverse

align-items : Align the items along the cross axis per line.

  • flex-start (default)
  • flex-end
  • center
  • stretch
  • baseline

align-content : Distribute extra space between lines.

  • flex-start (default)
  • flex-end
  • center
  • stretch
  • space-between
  • space-around

CSS properties for Flex Items

order : Takes a group number, default is 1

flex-grow : Takes a positive number that determines what proportion of empty space an item gets to take for itself. Default is 0.

flex-shrink : Takes a positive number that determines how fast an item shrinks relative to other items when there is not enough space to display all items. Default is 1.

flex-basis : Specifies how much space an item will take up along it’s main axis. Takes either an exact dimension like 150px, 10rem, or 30% or the word auto. Auto means use the height or width CSS property specified for the item or fall back to its content size. Default is auto.

align-self : Align an individual item on its line.

  • auto (default)
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Helpful Resourses

x




Notes from Other classes

To start in the parent container set up the Display:

Flex Direction

This depends from what “Axis” we are using, by default it uses the Main axis, but we also have the  Cross axis

MAIN: when row goes from Left to Right  — when column goes from Top to Bottom.

CROSS: wen row goes from Top to Bottom.  — when column goes from Left to Right

 

To reverse the Direction of the elements.

Wrapping elements with Flexbox

Flexbox Re-Ordering

Alignment and Centering

Justify – Horizontally: V6

Align-Items – Vertically: V 7, 8, 9

Divide space btween elements

Flex: grow shrink bases;




Udemy: Professional CSS Flexbox

Basic Definitions:

Flex Container: Any Element with the CSS property :  display: flex;  or   display: inline-flex; 

Flex Items: Any Element that is INMEDIATE Child of a Flex Container. and will take Only the space that they need, as stipulated in the CSS-Properties.

Two types of Flex Container:

  • display: flex;   ==  Block Level Element, Meaning: Put it self in a New-Line all takes all available with.
  • display: inline-flex;  ==  Now the container takes only the space It needs, sharing the line with other elements.

flex-wrap: nowrap;

 

Udemy 2:20 – jsbin – If there is no enough width in the Horizontal width of the Container for the combine width of all elements, Then by default they will squish and share the available width in equality, unless we “flex-wrap” is modify from its default value of: “flex-wrap: nowrap;”

Wrap is a property of the container, if we set up: “flex-wrap: wrap;” then the container is allow to take as many lines as need to fit its elements in they original width.

Justify-content; flex-start;

Udemy 2:32 – jsbin – It distribute the items of a container without know the exact dimensions or having to specify, a complex margin and float rules. This rule is only taken on account when is extra space.

flex-direction: row | row-reverse | column | column-reverse

 

 

 

x

 

 

video

 

.

Category: FED | Comments Off on FlexBox

CSS-CS


CHEAT SHEETS


Box Element quick look

..


colors: creative  –  crockford  –  Picker


Unit Types

Distance & Size & Position:

  • Pixels: px;  :  screen pixels.
  • em: 1.3em; = 130% the size of parent : Relative to “Parent” element property.
  • rem: 2.1rem; :  Relative to “Document Root” (Body) element property.
  • % :  85%;  : Relative to the holding container.

Colors

  • Hex: #RRGGBB  exadecimals 0..9 A..F  = #FFFFFF;
  • Name: its literal name = black;
  • RGB: rgb(0, 0, 0); of rgb(255, 255, 255);
  • RGBa: rgba(0, 0, 0, 0.5);

Syntax

This is how syntax works.


Selectors

Multiple selectors can be used on the same line with the following syntax.

Decendant Selector

here we use:  ” ” + “a”  to target all anchor tags whiting the <p>.

Id & Class

Combination Selector

Pseudo Selectors


Properties

Lists of CSS Properties: w3.org , w3schools – blooberryMDN

Formats of Properties

Extra Spaces

Simple Menu using List

.


Layout — (Positioning)

Introduction to CSS Development:  Lectures 14 & 15:   float,  clear,  position : relative -or- absolute

block Formatting Context: How the browser controls and contains floats.

 


Centering

Inline

Horizontal

Vertical


Normalize

Pages can be seen different in different computers with diff O.S. or different Browser, there few tools to deal with this problem:

Reset Files.

Normalize: cdnjs.com : A cdn is a site that is build for serving content to multiple users.

 


Miscellaneous CSS

Clear Fix:  Introduction to CSS Development:  Lecture 20.

Specificity:

!important > Style At. > Id > Class > Element

CSS Architecture

  1. Re-usability
  2. Maintainability
  3. Modularity
  4. Scalability
  5. Semantics

Use Calc to divide width

x


Libraries

Font Awesome

Links: The-Icons

 

 

 

 

 

 

 

..

Category: FED | Comments Off on CSS-CS

HTML Basics

 


Cheat Sheets:

w3schools  –  Simplehtmlguide  –  Mega  –  Quackit  –  Emmet  – TIZAG


Block Elements: Create a new line.     examples: <p>, <h1>, <form>, <div>, etc..  tags

Line Elements: Do NOT create new lines.    examples: <a>, <strong>, <input/>, <span>, etc… tags

Singleton Tags: No closing Tags. (AKA) void elements.   examples: <img>, <hr>, <br>, <command>

Spaces and Images

 

Image Place-Holder

The site where this came is: placehold.it    and the code is:

List of Sites with Free Images:

  1. canva.com
  2. https://unsplash.com/
  3. https://www.splitshire.com/
  4. http://gratisography.com/
  5. Article with resources

Enjoy the use of this images on your Apps and Web-Sites.

 

Create Online Custom Text Images / Logos

This site provides free service to creation of Logos / Images: Cooltex.com

Online Free Logo Creator

Now if you need  FREE LOGO here is a great resource

“figure” with “figcaption”

Tables

Forms

More about forms Udemi: HTML Complete Course – Beginner to Expert: Sections: 4 – Lecture: 19.

HTML-5 Inputs

In this we will bu using the for=”name1″ in the label, and when the user click the label the cursor will be ready to type on the input box. The placeholder=”abcd” is the default text.

HTML Entities

HTML Entity List

Embed Video using “IFRAMES”

Many ways to embed videos, here is one way: in You-Tube, in the bottom of the video click “share” then “Embed”, copy the link and past it on the HTML file, you will get something like:

Another way to embed video would be using the <video> tag,

IFRAME Embedded websites.

Audio Embedding

“div”  &  “span”

This are containers that help to divide the page and give a easier styling. this will be explain in-depth in CSS.

 

.

Category: FED | Comments Off on HTML Basics