SLACK

This is an amazing tool where you can communicate, ask questions and stay in contact with other people.  and is free

What is Slack?

 

15 Slack tips in 5 minutes

 

Slack Tutorial. Inbox Zero for Everything

 

How to Slack Like A Pro In Less Than 5 Minutes

Now you know how to use it, try to log in to other chanesl where you can meet people in the industry and also help.

 

Category: Web-Dev-Training | Comments Off on SLACK

Learning JavaScript

We talk before why it would be a great idea to learn JavaScript, now on this post we will start the process to learn JavaScript, on this part of the class we will use several resources from the internet. to learn JavaScript and know how to create more complex and awesome JavaScript Applications.

The following is a list of the projects that we will create once we know basic JavaScript.

  1. Singer website & Upload to internet
  2. Add two number using JavaScript
  3. Basic Portfolio Website
  4. Temperature Converter
  5. Image Resize Calculator
  6. Fizz – Buzz
  7. Basic Calculator (eval.)
  8. Keyboard Piano
  9. Wedding Guest Book
  10. To-Do List
  11. Pong (The Game)

 

Before we move forward and do this projects we should learn the basics of JavaScript, and that is what we will be learning in the following classes.

 

On your personal learning you should use whatever resource that is best for you, here is a list of some of the resources that we advice:

 

Tex Editor
Atom: Link
 .
Reference Sites:
Mozilla Developer Network: Link
DevDocs.io (JavaScript): Link
Tutorials Point (JavaScript): Link
The Modern JavaScript Tutorial: Link
SCOTCH.IO : Link
 .
JavaScript homework and exercises: 
CodeWars.com: Link
.
For text editor we should use Atom + Chrome, or the CodeWars interface, but if you want to use an online compiler my choice is REPL here is the: LINK
 .

 DOCUMENTS:

PDF to Read-1:   DONWLOAD

01-Basics

.

 

PDF to Read-2:    DONWLOAD

02-Eloquent_JavaScript

 

I will create videos with all this information latter, for now I will share the already created videos on one YouTuber:

01 – JavaScript – The Basics.

.

02 – ES6 JavaScript – The Basics

.

Finally do not forget to practice using CodeWars.com

KATAS:

  1. Opposite Number: Link
  2. String Repeat: Link
  3. Find Multiples of a Number: Link
  4. Pole Vault Starting Marks: Link
  5. Unfinished Loop: Link

.

Category: Web-Dev-Training | Comments Off on Learning JavaScript

Why Learn JavaScript & CodeWars

In Web-Development there is an area that enables the website to interact with the user, and transform it from a static website that presents information, to a dynamic website that can interact with the user and provide a service by executing a series of commands that will process data and give an answer to specific questions.

The firs video will show how JavaScript can take a static website and make it dynamic.

The second video will teach how to open an account to CodeWars.com and how to use it.

why should I use JavaScript:

 

Introduction to CodeWars:

There are more reason to learn JavaScript this are just some of those. to learn more about JavaScript see my notes: Link

Here are some of the most basic problems ready for you to solve them:

  1. Calculate Averages: Link
  2. Basic Matematical Operators: Link
  3. Reversing Words In a String: Link
  4. Pre-Fizz-Buzz: Link
  5. Keep Up the Hoop: Link
  6. Even of Odd: Link

Now you are ready for more complex Katas, go: “May the Code be with You

 

Category: Web-Dev-Training | Comments Off on Why Learn JavaScript & CodeWars

Temperature Conversion

If I tell you that the water boils at 100 Celsius degrees, what is the equivalent in Fahrenheit?, also if in the news you heard that the temperature for today is, 72 degree Fahrenheit, what is the equivalent in Celsius?

To do this conversions we use a simple formula:

After you do the math, you have the conversion from one to another, in this project we will create a basic website that use JavaScript to do the calculations and provide the answer to the user.

Instructions and Resources

By the end of this class you will code the following site: Temperature Conversion.

The source code for this project is located in Github: Temperature-Conversion.

Codding Videos

01 – Start Project:

02- CSS – Optional:

03- JavaScript Code:

Category: Web-Dev-Training | Comments Off on Temperature Conversion

Basic Portfolio Website

Employers and customer want to hire a developer that will be able to perform the required job, one way to show them that you have experience is to show them the work that you did in the past, and the easiest way is to have a PORTFOLIO website, where employers and customers can see examples of the work that you did before.

The Portfolio is also a place where you can present your self and show that you are more than a Developer, just dont share too much about your personal life or hobbies, remember most of the people there what to get to know your work and your developer side. There are much more to talk about why you should have a Portfolio Site, however on this article is more about how to create one, I you want to know more about this you can ask the developers best friend: “GOOGLE”, also here are a couple of links to articles that talks about this:

Now the meet of this article, the following are some videos that will teach the process of how to create a basic Web-Dev Portfolio Site, this is a basic example from where you can get ideas and start the foundation of your own portfolio site.

Instructions and Resources :

By the end of this class you will code the following Portfolio site: Portfolio-Example

The source code for this project is located in GithubEdxael/Basic-Portfolio

In this project I will use 5 images and 1 .pdf files those file should be your own pictures, however on this practice you can download and use the ones that I will use, to download them Click the image below or this link: Project Resources

Videos in how to code the Wev-Dev Portfolio:

01- Review and Start of Port Folio Site:

– – – – – – – – – – – – – – – – –

 

02- The projects part of the Portfolio:

  – – – – – – – – – – – – – – – –

 

03- Contact Me and Finish Portfolio:


This is a basic site that is intended to provide Ideas, inspiration, and a foundation to your own Web-Deb Portfolio Site, now you can customize it and use your own picture, projects, resume, and projects in your own personal Web-Dev Portfolio.

The final step after customizing the portfolio with your own files, is to get that portfolio online where potential employers and customers can see it, here is a link were you can find Free: Domain & Hosting for your portfolio: Hosting a Website.

Note: If there are some words that you do now know, chances are that is a Web-Dev Jargon, or a reserve word from the language, to find out more about this new term i suggest that you use the industry tool to find terms and words that we do not know, used for the best programmers in the world, GOOGLE, also I will include a couple or links with a glossary where you can find those terms: Link1   –   Link2

By: Edmundo Rubio.

Category: Web-Dev-Training | Comments Off on Basic Portfolio Website

Add Two Numbes

In this class we will learn how to add two numbers and display the result using JavaScript, in order to do this easy for every one, here are some videos that show the process from beginning to end of this project.

01 – Explanation of Project:

 

Here is a short explanation of the scope of the project:

02 – Set-Up Project:

Steps to setup the files and environment for the project:

03 – Index.html File:

Here is the HTML code:

04 – Style.css File:

Here is the CSS code:

 

05 – JavaScript code.js File:

Here is the JAVASCRIPT code:

 

This is a very simple example of JavaScript DOM Manipulation, please email me if you have any questions.

Edmundo Rubio.

 

Category: Web-Dev-Training | Comments Off on Add Two Numbes

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

What is the Internet

When building houses is important to have the blueprints, another thing that can provide important information is where the house will be constructed, knowing more about the location, can help us to make the home better.

We like to build Websites, and knowing more about where those websites will located is important, we know they will be on the internet, but what exactly is the internet??

The following are some videos that I found on Youtube, I did not create this videos, but they give a good explanation about this topics.

Now lets study a little more about DNS. or Domain Name System. (what is the name of your website and how to get there).

This knowledge can help you to understand the environment where the websites will be deploy, this are just the basics, there are much more to learn but is a good beginning.

Category: Web-Dev-Training | Comments Off on What is the Internet