Photo by Paul Berthelon Bravo on Unsplash

When a user interacts with a webpage and something happens this is the product of HTML and Javascript working together. For instance, if a user clicks on an HTML button and it redirects them to another page this is an event. If a user submits a form and the page refreshes telling them they have successfully signed up for a website this is another instance of a web event. HTML provides the layout for the user to see and Javascript carries out the functionality. Below are some good HTML events for beginners to use in their applications:

onclick — When…


Photo by Julian Hochgesang on Unsplash

You can create your Ruby on Rails apps manually and from scratch if you want to better familiarize yourself with the language. Once you get the hang of writing the code out here are a few basic Rails shortcuts to save you some time when writing the code:

$ rake db:create - Create a databaseresources :names - Creates all the routes for your desired component, it will generate the :new, :create, :edit, :update, :show, :destroy actions$ rails g controller Names - Generate a new controller$ rails g model Photo - Generates a model and initialize a migration table$ rails db:seed - Use sample data and run tests with your database$ rake db:migrate - Run the migrations for your database

https://gist.github.com/mdang/95b4f54cadf12e7e0415


Photo by Jeremy Thomas on Unsplash

If you are building an app in Ruby or React there is an easy way to get you setup in the beginning. Check out the commands below and what they produce:

rails new nameOfApp

This will create a template for you to use throughout your application. When you type this command in your terminal you will see that many new files are created. For instance, some common files that you have seen and may have worked in before are the app, readme, and gemfile folders. These are all created and ready to be worked in when you use this command.


Photo by Ryan Quintal on Unsplash

If you are just starting out on web development, utilizing Github will help you keep your work safe and organized. Take a look below to see a few git commands for beginners.

git init — Allows you to create a new repo locally

git clone — Allows you to clone a copy of someones else's repository

git add . — You will be able to save the work you have created and add the files to an index.

git commit -m “message” — Write any messages in the quotations before you send it over to github

git push — Sends the code you saved to Github

git checkout -b <anyname> — Allows you to create a new branch and switch to it

git checkout <anyname> — To switch over to any branch that has been created

https://git-scm.com/docs


Photo by JOSHUA COLEMAN on Unsplash

CRUD stands for create, read, update, and delete. These applications can range from advanced to very basic. Developing basic CRUD apps will help you hone in on your developer skills and with each project you build you can add new things each time. So what does each component of CRUD mean?

Create — This portion of CRUD allows for new records to be made and added to the database.

Read — With this portion of CRUD you can retrieve or search for records in the database.

Update — Update allows you to change a record once you have retrieved it

Delete — Delete allows you to take a record from your database and destroy it.

Citations

https://www.sumologic.com/glossary/crud/


Photo by Simone Secci on Unsplash

Defining API

API stands for Application Programming Interfaces allow programmers to create more intricate and user friendly apps in an easier way. They are known as abstractions which allow you to take away complicated code and use easier code in its place while achieving the same functionality you want. For the Client-side of JavaScript there have been many APIs built on top of it. They can be broken into two categories, Browser APIs and Third-party APIs. Browser APIs are already incorporated into your browsers as the name suggest. The Fetch API is very common and allows you to do thing such as making post requests and handles network requests from the browser. Third-party APIs require you to install the code from the web. They provide you with the data that you can then manipulate to utilize in your own applications.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction


Photo by Mike Lewis HeadSmart Media on Unsplash

CSS stands for Cascading Style Sheets. It will play a very important role in your application development. It is used design your application and bring out your creativity in the appearance of your app. There are many ways to incorporate CSS into your apps. There are many websites where you can download a CSS library that will facilitate the implementation of CSS. Flexbox, Materialize, and Bootstrap I believe are best for beginners. Vanilla CSS allows you to write everything from scratch. With CSS you can do a lot stylistically with your apps such as changing the fonts, background color, size, and add animations. A simple Vanilla CSS example that makes your header blue can be seen below:

h1 {
color: blue;
font-size: 2em;
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps


Photo by Andrej Lišakov on Unsplash

What Operators are there in JS?

Operators in Javascript allow you to complete certain tasks in your application. There are many types of operators in Javascript. But for beginners I recommend getting familiar with the Assignment, Comparison, and Arithmetic operators.

Assignment: This operator uses the “=” sign to equate the left value to the right value. For example:

x = y

Comparison: This operator uses a number of different symbols to determine the truthiness of a value. You will see the following signs when using the comparison operator:

equal (==)
not equal (!=)
strict equal (===)
strict not equal (!==)
greater than (>)
greater than…

Photo by Danil Shostak on Unsplash

Functions are a significant portion of learning Javascript. The purpose of functions in Javascript is to take an input and return an output where the two are correlated to each other. Functions looks like a lines of statements that will equate to completing a task or attaining a value. Functions must be defined within the scope of which you are calling it. There are different types of scopes in Javascript as well such as, global, local, and block scopes. However, that is a different topic. In order to declare a function you will need to use the word “function” in your code. For instance, see the code below to declare a simple function:

function salad(dressing, protein, extra){return "The ingredients are' dressing + protein + extra; }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions


Photo by Priscilla Du Preez on Unsplash

In your applications you are often going to want a user to do a repeated action like clicking a like button. Once the user clicks that like button you want to increment the number of likes for that item by 1. This is where loops and iterations come into play. Essentially, a loop and iteration in Javascript handles the response to a users repeated action. There are several types of loops that can be used within Javascript for different use cases. The types of loops in Javascript are for, do…while, while, labeled, break, continue, for…in, and for…of statements. The best…

Jim Ferdous

Fullstack Software Engineer | Ruby on Rails | Javascript | React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store