Article On Course Video

Overview of course video

Visual Design:

Visual design aim is to shape and improve the user experience through considering the effects of illustrations, photography, typography, space, layouts, and color on the usability of products and on their aesthetic appeal.
It focuses on the aesthetics of a product and its related materials by strategically implementing images, colors, fonts, and other elements.
To create the aesthetic style of a website or app, we work with fundamental elements of visual design, arranging them according to principles of design.
example of visual designing we observe in our daily life is:

The above picture is overall a mixture of different categories together forming into a neat visual design which is apt for using with good texture and balance .
For a good web developer having good visual designing skills is also important.

Adobe Photoshop:

Introduction To Adobe Photoshop:

Photoshop is basically meant for either morphing,creating designing and graphics like web design.
When we create a new Photoshop document, we create what is essentially a blank canvas. Once we’ve created the canvas (the document), we can then import images, graphics or other design assets into it. New documents are perfect for design layouts, whether for print or for the web. You simply create a new blank document at the size you need and then begin adding and arranging your various elements.
If you’re a photographer, rather than creating a new document, you’ll most likely want to start by opening an existing image into Photoshop. Opening images is different from creating new documents. We’ve already learned how to set Photoshop as our default image editor for both windows and Mac. We’ll learn other ways of getting our images into Photoshop beginning with the next tutorial in this series, How to open images in Photoshop CC.

To create a new document in Photoshop, we use the New Document dialog box. There’s a few ways to get to it. One way is by clicking the create new button on Photoshop’s Start screen:click the “create new”button to create a new Photoshop document.Another is by going up to the file menu in the Menu Bar along the top of the screen and choosing New. This is helpful if you already have one or more documents open and don’t have access to the Start screen, or if you’ve disabled the start work-space:Going to a file>New.Or, you can use the keyboard shortcut, Ctrl+N (Win) / Command+N (Mac). Any way you choose opens the New Document dialog box:The redesigned New Document dialog box in Photoshop CC.

IMPORTANCE OF PHOTOSHOP:-

Adobe Photoshop is very popular software among web designers and image editors. It is a user friendly software and offers lots of unique tools that help you unleash your creativity. Despite being paid software, Adobe Photoshop is used by thousands of budding and professional web designers all over.

General view of Adobe PhotoShop CS6:

Introduction To HTML:

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.
Basic HTML Document:

<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
 
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>

The above is the basic format of writing any HTML document
HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within angle braces <Tag Name>.

SYNTAX:-The basics syntax of HTML is made up to tags ,attributes and elements.

TAGS:-HTML tags usually come in pairs ,like so:<body> </body>

The First Tag is called the opening tag and the second tag is called the closing tag.<article>content here</article>

ATTRIBUTES:-Attribute values is should be enclosed within quotation marks You may come across something like :<article attribute=value></article>But this quotation marks is more common,cleaner ,and best practice.

ELEMENTS:-An element is a tag and the content it wraps around,for example.HTML PARENT/CHILD STRUCTUREIt is also called parent /child relationships ,where the containing element is referred to as the parent of the element contained within it.

EXPLANATION OF THE EXAMPLE:-The body is the parent of the headings (h1,h2)and paragraph tags(p),and the second paragraph is the parent of the em and strong elements.The body is the ancestors of these latter elements rather than their parent.The heading and paragraphs are siblings and the em and strong elements within one paragraph tags are siblings.<p>content</p>.

Introduction To CSS:

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

Internal CSS:The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

EXTERNAL CSS:The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

There are three ways of inserting a style sheet:

External style sheet
Internal style sheet
Inline style

EXTERNAL STYLE SHEET:

With an external style sheet, you can change the look of an entire website by changing just one file!Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Internal Style Sheet:

An internal style sheet may be used if one single page has a unique style.Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Multiple Style Sheets:

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

Introduction To JavaScript:

JavaScript Can Change HTML Attribute Values
JavaScript Can Hide HTML Elements
JavaScript Can Show HTML Elements
JavaScript Can Change HTML Content
JavaScript accepts both double and single quotes
JavaScript Can Change HTML Styles (CSS)

JavaScript syntax is the set of rules, how JavaScript programs are constructed

Syntax:

var x, y, z;          // How to declare variables
x = 5; y = 6;      // How to assign values
z = x + y;         // How to compute values

JavaScript uses arithmetic operators ( +-*/ ) to compute values
JavaScript uses an assignment operator ( = ) to assign values to variables
JavaScript keywords are used to identify actions to be performed.

Not all JavaScript statements are “executed”.

Code after double slashes // or between /* and */ is treated as a comment.

Comments are ignored, and will not be executed:

All JavaScript identifiers are case sensitive.
JavaScript uses the Unicode character set.
JavaScript variables are containers for storing data values.
All JavaScript variables must be identified with unique names.These unique names are calledd as Identifiers
Creating a variable in JavaScript is called “declaring” a variable.

Introduction To JQuery:

How to download jquery

Next, fire up a Node Command Prompt and then change to your project folder.
In the prompt, enter this command: npm install jquery.
Node will fetch and install jQuery—it displays a confirmation message when the installation is complete:

You can then reference jQuery by using the line
How to Install jQuery Plugins

Locate and download a jQuery plugin from the plugins page the jQuery website.
Open the downloaded plugin’s archive file and extract the “.js” file inside it. Some plugins may contain multiple JS files
Open your Web page’s HTML file in a text editor.
Locate the line that begins with “
Add additional

Simple Syntax for JQuery

Query Syntax. The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). $(“.test”).hide() – hides all elements with class=”test”.

JQUERY SELECTORS
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
JQUERY EVENT METHODS
The jQueryselector finds particular DOM element(s) and wraps them with jQueryobject. For example, document.getElementById() in the JavaScript will return DOM object whereas $(‘#id’) will return jQuery object. … jQuery provides various methods for different tasks e.g. manipulate DOM, events, ajax etc.

Introduction To PHP:

Introduction & Intermediate PHP:

PHP files can contain text, HTML, CSS, JavaScript, and PHP code
PHP code are executed on the server, and the result is returned to the browser as plain HTML
PHP files have extension “.php”

PHP can generate dynamic page content
PHP can create, open, read, write, delete, and close files on the server
PHP can collect form data
PHP can send and receive cookies
PHP can add, delete, modify data in your database
PHP can be used to control user-access
PHP can encrypt data

PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP supports a wide range of databases
PHP is free. Download it from the official PHP resource: www.php.net
PHP is easy to learn and runs efficiently on the server side

Introduction To MySQl:

MySQL Databases:

MySQL is an Oracle-backed open source relational database management system (RDBMS) based on Structured Query Language (SQL). MySQL runs on virtually all platforms, including Linux, UNIX and Windows. … MySQL is an important component of an open source enterprise stack called LAMP.

-> MySQL is an open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language.

->MySQL itself is open source and can be used as a standalone product in a commercial environment. If you’re running MySQL on a web server, you are free to do so for any purpose, commercial or not. If you run a website that uses MySQL, you won’t need to release any of your code.

->An Example for the Beginners (But NOT for the dummies) A MySQL database server contains many databases (or schemas). Each database consists of one or more tables. A table is made up of columns (or fields) and rows (records).

->The best-known RDBMS using SQL to create and query databases are IBM DB2,Oracle, Microsoft Access and MySQL. Examples of SQL-based databases citizens use every day include banking systems, computerised medical records, and online shopping to name just a few.

Angular JS expert:

Angular JS Expert:

Here we build the listing app.The first app for learning any technology is angular app.So what we need is the Text Editor,Local Web Server.Here we see XAMPP,XAMPP means It is the most popular PHP development environment .XAMPP is a completely free,easy to install Apache distribution containing Mysql,PHP and perl. The XAMPP open source package has been set up to be incredibly easy to install and to use.There is again Bootstrap,Source Code,Sass.

BOOTSTRAP:–

Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. It also gives you support for JavaScript plugins.

Source code:-

Source code is the list of human-readable instructions that a programmer writes—often in a word processing program—when he is developing a program. The source code is run through a compiler to turn it into machine code, also called object code, that a computer can understand and execute.This is all about this video.

Hope this articles helps you to get the required info