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

Basic Web Server

Crating a basic Web Server.


Starting up Steps:

  • Create a directory with a Readme.txt file
  • Initialize a Git Repo (Optional)
  • CD to the directory and check node using: “npm -v”

Create Package.jason

In the project directory create the file: package.jason by executing the following commands in the terminal. ” npm init ” and provide the required information or just hit enter when you have a question to select the default value. Now open the new created file with Atom. The code should looks like:

Server.js File

Create a new file and name it: “server.js
Now go to the nodejs.org website and click on the About page. There you will find an extreme basic example of a “Web Server”, copy the basic code and paste on the server.js file.  The code should look like:

Testing the server

Now in the terminal type the command: ” node server.js ” and you should see the response  ” Server running at http://127.0.0.1:3000/ ”   NOTE: you can start the sever also using the command ” npm start

The address 127.0.0.1 is you local host and the 3000 is the port that is been used by the server. now lest check this on the browser.

In the browser type: localhost:3000 and hit Enter, if successful the browser should load a web page with the text: ” Hello World

Congratulations you create your first Node Project, a basic web server, but we are not done yet. this sever is serving text messages to the browser, in the real life this not happen, web servers serve HTML pages.

Serving a HTML Pages.

To do this we need to modify the code in the file: “server.js” and it should look like:

This is build to serve HTML pages, however this is just for exercise, in future projects we will be using a different code to crate and run the Node.js Server, in the industry is common practice to use Express and other tools to make this more simple, but it was important that you see the code without frameworks so you can see how it works.

Now you can start the server again and request some HTML Sites, I create a whole site with pages of some singers that I was lisenning while I was creation this project, find all the code and files in GitHub: Node.js-basic-Web-Server.

Here is a picture of the site when the server running and serving multi page sites.

The source code for the web pages is on the GitHub Repository too.

Category: Node | Comments Off on Basic Web Server