Summary

hings that i have learnt from the common folder:

I’m sanapala sravani from Dr.lankapalli bullaya college engineering for(women) .joined in your it start up internship. i started viewing these common videos from 15th on wards.in this summary article i’m going to mention about the things i’ve learnt from the common folder.

From video 1–Finding a web developer job with no experience:

Learnt about–The 3 types of web developers,such as Front-end developer, Server-side programmer, Full stack developer.And how to build our resume, Networking,and some online resources.

From video 2 –Tips On Learning How To Code:

Learnt about:

How to remember all the code: by understanding and grasping the concept.
Action to be taken :Understand every line of code and re-create similar situations, Make and fix mistakes.
Do not stopcoding :we have to code every day and learn some thing new every day.

From video 3–MUST-KNOW WEB DEVELOPMENT TECH :

Learnt about–Detailed view of web development and all its technologies.

Described about basic front end, Front-end developers, back-end developers with their appropriate tools,frameworks ,languages &softwares.

From video 4 -:Setup linux ubuntu for web developmentLearnt about–learnt how to setup linux ubuntu for web development

From video 5–Chrome Extensions For Web Developers & Web Designers:Learnt about-Learnt and implemented some of the chrome extensions such as Java script & css code beautifier, Web developer ,Created git hub account for accessing gist box, PHP console, Window resizer, Colorzilla etc.

From video 6 -Emmet For Faster HTML & CSS Workflow :Learnt about-Installing ’emmet ‘, a tool for web development for faster html&css work flow. From video– Automation Hacks for Entrepreneurs Lightning Round :Learnt about – Inspiration for Automation, Hacks to Grow & Engage Your Audience:learnt how to engage audience by following back new followers, Hacks for Finding New Customers, Hacks to Become the Master of Your Personal Work.

Created Zapier account and linked zapier with twitter account.

From video– Ultimate Free Tools And Resources For Entrepreneur :

Learnt about –

Free tools to find business name: Implemented some of the tools in finding business name.Some of the websites are , Sophify, Bust a name, Biz name wiz ,Name boy.
Free tools to create animated GIFs: Tools such as Animated GIF maker- imgflip, imgur.com, Gifs.com,GifRun.com,make a gif.com,GIFY.

created animated gif in imgflip.com : Here is the link-

Free tools to record your screen: Implemented tools such as cam studio, icecreamapps.com, ezvid, atomi, screen press o, bandicam .
Alternative tools for photoshop: Tools such as, photo pos pro ,GIMP, PIXLR editor, photopea, paint.net, canva etc.

Edited photo by changing its background and adding some text.Here is the photo

Free tools to create web marketing graphics:Canva,Fotor and Fotojet.
Website To Find WordPress Job: jobswordpress.net, wpmedev, codeble, wphired etc

from video-Automation hacks for entrepreneurs lightning round.

Learn about:

In this video have 11 automation hack for entrepreneurs lightning round . and favorite 3 hacks as.1.social media.2.finding customers.3.personal productivity. these every hack will accelerate growth as an entrepreneur.

· We can retwitt the followers and giving reply message to the followers to developing business.

· Face book ads, contact form for customers, providing templates in social media is the better way for finding customers.

· Using zapier sending mails to the customers and reply back to the mails.

· For developing business we can use tools like, zapier, buffer, clandely and streak ,etc

18 06 19

sri ramya

Summary Article

I’m R.D.Sri Ramya . I’m currently pursuing my B.tech in Dr.Lankapalli Bullayya College Of Engineering(women) in CSE department . I started learning web development course from 24.05.2019. This article is about the things i’ve learned from the web development course videos.

COMING TO THE THINGS I’VE LEARNED:

FOLDER 01 : Introduction Why This is The Only Design Development Course You’ll Ever Need

VIDEO 01: INTRODUCTION

It is about introduction about web designing i.e. what are the skills required for web designing, how to craft resume and negotiate a high salary etc.

VIDEO 02: WHAT YOU GET IN THIS COURSE

In this video i’ve learnt what are the skills required for web development as free lancer. The skills such as

html html
html5
css
css3
java script
jQuery1
jQuery3
Responsive
php
my sql
Angular js etc…

VIDEO 03: HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS, GRAPHICS MORE

I’ve learnt about free trial photoshop in websites such as

GIMP (gimp.org)
PIXLR(pixlr.com)
30-DAY PHOTOSHOP TRIAL (adobe.com/photoshop)

VIDEO 04: HOW MUCH SHOULD YOU CHARGE

I’ve learnt on what basis you should charge for your project such as

what’s the project?

who’s the client?

how much does it cost you basing on hours of work?

Is the project interesting?

VIDEO 05: PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE

I’ve learnt about how to charge for the work based on the time you have allocated to do project per hour.

FOLDER 02: INTRODUCTION TO VISUAL DESIGN

VIDEO 01:

It’s about the introduction to visual design.

VIDEO 02:

The basic elements of visual design are:

lines
shapes
colour palette
texture
typography
form

The basic 7 principles of visual design are:

space
dominance
hierarchy
unity
balance
rhythm
proportion

VIDEO 03: CRAP PRINCIPLES IN DESIGN

It’s about the principles about CRAP. They are:

C means CONTRAST
R means REPETITION
A means ALIGNMENT
P means PROXIMITY

VIDEO 04: TYPOGRAPHY

It’s about what typography is .. Typography is nothing but flow to message. It consists of ascender , X-height , cap height, descender…

VIDEO 05: SCIENCE OF COLOUR

I’ve learnt about colour wheel , Analogous , complementary, primary colours , secondary colours and tertiary colours . I’ve learnt about monochromatic, split complementary and double complementary. I’ve also learnt about hue , saturation , brightness , screen and print

VIDEO 06: DESIGNING WITH GRIDS

Grids are nothing but they keep content organized creates an order by distinguishing different types of information. They are 4 types of grids. They are:

single column grid
Multi column grid
Modular column grid
Hierarchical column grid

FOLDER 03: INTRODUCTION TO ADOBE PHOTOSHOP

VIDEO 01: Intro The 8020 Rule, Photoshop Basics, and More

It’s about the introduction to the photoshop.

VIDEO 02: Creating a New Photoshop Document

It’s about how to create a document using photoshop.

Steps for creating a document in photoshop:

Open Elements and select an editing mode. …
Choose File→New→Blank File in any workspace or press Ctrl+N (cmd+N). …
Select the attributes for the new file. …
Click OK after setting the file attributes to create the new document.

VIDEO 03:Photoshop Environment The Toolbar – Part 1

It’s about the toolbar of photoshop such as rectangular selection, selection tool, healing brush , patch tool etc… Healing brush tool removes wrinkles. Patch tool is used to remove fluzzy hair. Selection tool helps for the selection of image.

VIDEO 04:Photoshop Environment The Toolbar – Part 2

It’s about the tool bar of photoshop such as Brush tool, pencil tool, clone stamp tool, History brush tool, erase tool , quick selection tool, dodge tool, burn tool, pen tool, text tool etc… Brush tool is used to draw something of brush stroke. Quick selection tool is used to select quick for a tool. Dodge tool is used to lighten the color. Burn tool is used to change to burn effect. Pen tool is used for clean sort of selection.

VIDEO 05:Photoshop Environment Palettes

It’s about the palettes of the photoshop. Palette is a thing which we can choose options from.

VIDEO 06: Photoshop Environment The Menu

It’s about the environment of the photoshop such as File, Edit, Image, Layer, Type, Select, Filter, 3D, View and information. Auto tone is used to modify the best tone of the photographs.

VIDEO 07:Photo Enhancement Manipulation

It’s about the enhancement and manipulation of image using photoshop. Photo manipulation involves transforming or altering a photograph using various methods and techniques to achieve desired results

FOLDER 04: INTRODUCTION TO WEB DESIGN AND MORE PHOTOSHOP
VIDEO 01: Section Intro Web Design Basics, Wireframing, Photoshop

It’s about the essentials about photoshop and also introduction to web design.

VIDEO 02: Web Design Terminology The Jargon the Pros Use

It’s about the JARGON THE PROS USE. JARGON is a set of words that is used in specific industry (or) buzz words. I’ve learnt about mood board which is a collage composed of colours , Wire frame is a sketch on paper or screen, Rough is a first draft of layout, Comp is second draft of layout and Mock up is the final draft of web design.

VIDEO 03: The Four Phases of a Web Design Project Cost Estimates

I’ve learnt about the four phases such as Discovery phase, Creative Phase, Development Phase and Launch phase.

Discovery Phase : includes phone calls, messages, consultations, research , planning, scheduling, develop site structure

Creative Phase: includes User Experience design, Wire framing and Web Design Mockups.

Development Phase:

In this phase it consists of

Convert designs into HTML & CSS
Browser Testing

Launch Phase:

In this phase it consists of

Moving local website to live server
Client Training
Review

VIDEO 04: What is User Experience UX Design

I’ve learnt about User Experience Design. It consists of

Visual Design
Information Architechture
Usability
Research
Content Strategy
Interface design

User Experience Design educates and informs a user about the website

VIDEO 05: The Anatomy of a Website Design

I’ve have learnt about the common elements of website such as

Header & Navigation: Header is nothing but logo and navigation is the links used.
Call to Action: tells user what they should do
Primary Content : High lights the main article
Secondary Content
Tertiary content
Side bar
Footer

VIDEO 06: The 960 Grid System Free Photoshop Downloads

I’ve learnt about 960.gs which is used to generate Boot strap and templates such as omnigraffe and photoshop

FOLDER 06: INTRODUCTION TO HTML

VIDEO 01: Section Intro HTML Fundamentals, First Webpage, Course Files

It is about the introduction to html. HTML is nothing but hyper text mark up language

VIDEO 02: The Basics of HTML Tags, Attributes, Elements

Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

I’ve learnt about elements such as tags, attributes , Elements.

VIDEO 03: Basic File Folder Structure of a Website

I’ve learnt how to keep folder names for a website folder . For Example for home page keep it as index.html and for images create a images folder.

VIDEO 04: Your Must Have Tool A Good Code Editor

It’s about the text editors to write code for website. They are sublime, Text Wrangler, Notepad++, Brackets, Coda2 etc..

VIDEO 05:Hello World Create Your Very First Web Page

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</html>

FOLDER 07: INTERMEDIATE HTML

VIDEO 01: Section Intro HTML Tags, Code a Real Web Page

It’s about the introduction to html.

VIDEO 02: Basic Structure of an HTML Document

I’ve learnt about the basic structure of html . Here is the basic structure:

FOLDER 08: ADVANCED HTML HTML5

VIDEO 01: Section Intro Advanced HTML Techniques, HTML5

HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It’s actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen.

VIDEO 02: IDs Classes

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.

VIDEO 03: Span Div Tags

The HTML <span> tag is used for grouping and applying styles to inline elements. The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whilst the <div> tag is used with block-level content.

VIDEO 04: Intro to HTML5 Tags Header, Footer, Nav, Section, Article, Aside Time

I’ve learnt about Html5 tags. The following are some of them

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

FOLDER 09: EXPERT HTML HTML5

VIDEO 01: Section Intro Expert HTML5 techniques

It’s about the introduction to Expert Html.

VIDEO 02: New HTML5 Inputs

HTML5 added several new input types. some of them are:

color.
date.
datetime-local.
email.
month.
number.
range.
search.

VIDEO 03: Making Internet Explorer Compatible with HTML5

The following are the steps for making Internet Explorer compatible with

HTML 5:

Click Start.
On the search bar, type Internet Options, and click on Internet Options from the results.
Click on the Advanced tab.
Under Multimedia, check Enable alternative codecs in HTML5 media elements.
Restart your computer.

VIDEO 04: HTML5 Data Attribute

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

FOLDER 10: INTRODUCTION TO CSS

VIDEO 01: Section Intro Essentials of CSS Download Course Files

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.

VIDEO 02: What is CSS All the basics you need to know

CSS (Cascading Style Sheets) is what makes web pages look good and presentable.
There are typically three ways we do that.

Inline CSS. First off, we can include CSS directly in our HTML elements. …
Internal CSS. …
External CSS.

VIDEO 03: Inheritance of Styles

Inheritance is associated with how the elements in the HTML markup inheritproperties from their parent (containing) elements and pass them on to their children. The cascade relates to CSS declarations being applied to a document, and how conflicting rules do or do not override each other.

VIDEO 04: Measurements The Box Model

The term “box model” is used when talking about design and layout. TheCSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

VIDEO 05: Inline CSS

Inline CSS refers to CSS found in an HTML file. It is found in the head of a document between style tags. Inlining CSS simply means putting your CSS into your HTML file instead of an external CSS file.

VIDEO 06: Internal CSS

An internal stylesheet holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but you can configure CSS classes and IDs that can be used to style multiple elements in the page code.

body {background-color:lightgrey} h1 {color:blue} p {color:green} This is a heading This is a paragraph.

VIDEO 07: External CSS

External CSS is Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a “.css” file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>.

VIDEO 08: ID Class Selectors

VIDEO 09: Descendant Selectors

The descendant selector matches all elements that are descendantsof a specified element. The first simple selector within this selector represents the ancestor element—a structurally superior element, such as a parent element, or the parent of a parent element

VIDEO 10: Grouping Selectors

CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space. You can combinegrouped selectors with contextual and otherselectors to create powerful yet compact rules for your style sheets.

VIDEO 11: Specificity

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

FOLDER 11: INTERMEDIATE CSS

I’ve learnt about the colors, text styling forms, borders, background image and styling links.

FOLDER 12: ADVANCED CSS

VIDEO 01: Styling Web Forms

I’ve learnt how to write style sheets for a form to look beautiful using css

VIDEO 02: Block, Inline and Inline-Block Elements

We can add margins and padding on all four sides of any block element — top, right, left, and bottom.

Some examples of block elements are <div> and <p> tags. …
Inline Elements.
Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. …
Inline–Block.

VIDEO 03: Understanding Float Clear once and for all

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

left – The element floats to the left of its container
right- The element floats to the right of its container
none – The element does not float (will be displayed just where it occurs in the text). This is default
inherit – The element inherits the float value of its parent

VIDEO 04: Relative, Absolute Fixed Position

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, likefixed).

FOLDER 13: EXPERT CSS CSS3

VIDEO 01: Section Intro What is CSS3 Course Files Download

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.

VIDEO 02: CSS3 Box Sizing Round Corners

The border-radiusproperties makes rounding the corners on a box easy. The border-radiusproperty is a shorthand property that sets the radius for all four corners of the box to the same value when given only one value.

VIDE0 03: CSS3 Colours Gradients
CSS Linear Gradients. To create a linear gradient you must define at least twocolor stops. Color stops are the colors you want to render smooth transitions among.

VIDEO 04: CSS3 Shadows

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur etc…

VIDEO 05: CSS3 Columns
The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns.

VIDEO 06: CSS3 Animations Transitions

Animations within CSS3 allow the appearance and behavior of an element to be altered in multiple keyframes. Transitions provide a change from one state to another, while animations can set multiple points of transition upon different keyframes.

FOLDER 15: Introduction to Javascript

VIDEO 01: Section Intro What is Javascript, The 8020 Rule Course Files Download
JavaScript (JS) is a lightweight interpreted or just-in-time compiled programming language with first-class functions.

VIDEO 02: Internal External Javascript

External scripts are practical when the same code is used in many different web pages. JavaScriptfiles have the file extension .js.

VIDEO 03: Basic Syntax of Javascript and many other programming languages
JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.

VIDEO 04: Javascript Output

JavaScript can “display” data in different ways: Writing into an HTML element, using innerHTML . Writing into the HTML output using document.write() . Writing into an alert box, using window.alert() .

VIDEO 05: Javascript Variables

In java script , Variable means anything that can vary. JavaScript includes variables which hold the data value and it can be changed anytime.JavaScript uses reserved keyword var to declare avariable.

VIDEO 06: Javascript Arrays

An array is a special variable, which can hold more than one value at a time.

VIDEO 07: Javascript Functions

A function is a group of reusable code which can be called anywhere in your program. Some of the java script functions are alert() and write().

Example:

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

VIDEO 08: Javascript If Else Statements

The if/else statement executes a block of code if a specified condition is true. If the condition is false, another block of code can be executed. The if/else statement is a part of JavaScript’s “Conditional”Statements, which are used to perform different actions based on different conditions.

FOLDER 16: Introduction to jQuery

VIDEO 01: Section Intro What is jQuery Course Files

It’s about the introduction to jQuery

VIDEO 02: Download Install jQuery

I’ve learnt how to download and install jQuery

VIDEO 03:The Simple Syntax of jQuery

jQuery syntax is made by using HTML elements selector and perform some action on the elements are manipulation in Dot sign(.).

jQuery basic syntax:

$(document).ready(function() { $(selector).action(); });

VIDEO 04: jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.

VIDEO 05: jQuery Event Methods

I’ve learnt about jQuery event methods some of them are:

click() :The click() method attaches an event handler function to an HTML element. …
dblclick() :The dblclick() method attaches an event handler function to an HTML element.

FOLDER 17: Intermediate jQuery

VIDEO 01: Section Intro jQuery Deep Dive

It’s about the introduction to the jQuery and what are the things essential in jQuery.

VIDEO 02: jQuery Chaining

jQuery Chaining provides strong feature called chaining method that allows us to run multiple jQuery methods on the element within a single statement.

VIDEO 03: Hiding, Showing Fading Content with jQuery

jQuery hide() : Hides the Syntax or the element of html that you want to hide

Syntax: .$(selector).hide(speed, callback);

jQuery show() : Shows the syntax or the element of html that you want the user to see.

Syntax: .$(selector).show(speed, callback);

VIDEO 04: The jQuery Animate Method

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

VIDEO 05: Modifying CSS with jQuery

The css() method sets or returns one or more style properties for the selected elements.

Syntax:

$(selector).css(property,value)

FOLDER 18: jQuery UI Advanced jQuery

VIDEO 01: Section Intro What is jQuery UI Course Files

It’s about the introductipn of jQuery. jQuery UI is a widget and interaction library built on top of the jQuery . In the demos section, the navigation lists all of the interactions and widgets .The components you select will all be combined into a custom jQuery UI JavaScript file.

VIDEO 02: jQuery UI Draggable

The draggable (option) method specifies that an HTML element can be moved in the HTML page. Here, the option parameter specifies the behavior of the elements involved.

Syntax:
$(selector, context).draggable(options);

VIDEO 03: jQuery UI Droppable

The droppable (options) method specifies that you can use an HTML element as an element in which you can drop other elements. Here, the option parameter specifies the behavior of the elements involved.

Syntax:
$(selector, context).droppable (options);

VIDEO 04: jQuery UI Sortable

jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string

VIDEO 05: jQuery UI Accordion

Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.

Syntax:

The accordion() method can be used in two forms −

VIDEO 06: jQuery UI Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.

FOLDER 19: Responsive Design Development using Bootstrap

VIDEO 01: Section Intro What is Responsive Design Bootstrap Course Files

It’s about the introduction to responsive design and bootstrap .Bootstrap is a free and open-source framework for creating websites and web applications.

VIDEO 02: Getting Started with Bootstrap

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

VIDEO 03: Quickly Prototype with the Free Examples

A website prototype can be any mock-up or demo of what a website will look like when it goes live. It can be anything from a paper sketch, to a clickable HTMLprototype.

VIDEO 04: Understanding the Bootstrap Grid System

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers. The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components.

VIDE0 05: Responsive Forms
Responsive form elements span 100% by default; their width is designed to be constrained by the existing grid system. This makes them extremely flexible.

VIDEO 06: Responsive Tables, Buttons and Images
Responsive is a method for providing the browser with multiple image sources depending ondisplay density, size of the image element in the page, or any number of other factors. Often, when people talk about responsive images, they are referring to solutions for inline images.

VIDEO 07: Helper Classes Responsive Utilities

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.

VIDEO 08: Using Glyphicons Font Icons

Bootstrap includes 260 glyphs from the Glyphicon Halflings set.

VIDEO 09: Bootstrap Navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class=”navbar navbar-default”> .

VIDEO 10: Bootstrap Modal Window

Then include the two data-* attributes:

data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal

The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (“myModal”).

The .modal class identifies the content of <div> as a modal and brings focus to it.

The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.

The attribute role="dialog" improves accessibility for people using screen readers.

The .modal-dialog class sets the proper width and margin of the modal.

VIDEO 11: Bootstrap ScrollSpy

Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).

Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

VIDEO 12: TOGGLABLE TABS

To make the tabs toggleable, add the data-toggle=”tab” attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content .

VIDEO 13 :SLIDING CAROUSEL

The data-ride=”carousel” attribute tells Bootstrap to begin animating the carouselimmediately when the page loads. The “Indicators” part: The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in thecarousel, and which slide the user is currently viewing).

FOLDER 21: WEB HOSTING DOMAINS

VIDEO 01: Section Intro What is Web Hosting

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.

VIDEO 02: Purchasing a Bundled Domain Name Hosting Package

This means that even if you go to a company such as GoDaddy — known primarily for domain registration — you can still walk out with a bundled deal of hosting and domain. However, you can also do things the other way around. You can go to a well-known hosting company and get the same bundled package from them as well.

VIDEO 03: The Hosting Control Panel a.k.a. cPanel

cPanel is a control panel, so it allows you to control aspects of your site and/orserver. … However, cPanel does offer a real control advantage: once you get used to the GUI (graphical user interface), you will not have to learn a new system if and when you switch to another web hosting company.

VIDEO 04: Understanding FTP How to Upload a Website to Your Live Serve

HOW TO ESTABLISH AN FTP SESSION FROM THE COMMAND PROMPT

Establish an Internet connection as you normally do.
Click Start, and then click Run. …
A command prompt will appear in a new window.
Type ftp <insert your FTP host address here> …
Press Enter.

FOLDER 22: INTRODUCTION TO PHP

VIDEO 01: Intro What is PHP What Does It Do Course Files

It’s about the basic syntax of php. php is Hypertext Preprocessor. PHP is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.

VIDEO 02: BASIC PHP SYNTAX

I’ve learnt about PHP syntax

VIDEO 03: PHP VARIABLES AND CONSTANTS

I’ve learnt about variables and constants. Constants are the variables whose values are not changed throughout the script. A valid constant variable do not have a $ sign before its name. It starts with a letter or an underscore (_). Constants have global scope in the whole script.

VIDEO 04: PHP ARRAYS ASSOCIATIVE MULTI – DIMENSIONAL

I’ve learnt about the arrays in Php.

An array is created using an array() function in PHP.

There are basically three types of arrays in PHP:

Indexed or Numeric Arrays: An array with a numeric index where values are stored linearly.
Associative Arrays: An array with a string index where instead of linear storage, each value can be assigned a specific key.
Multidimensional Arrays: An array which contains single or multiple array within it and can be accessed via multiple indices.

FOLDER 23: INTERMEDIATE PHP

VIDEO 01: SECTION INTRO LETS DIVE DEEPER INTO PHP

I’ve learnt about the introduction to php.

VIDEO 02: IF, ELSE and ELSE IF Statements

I’ve learnt about if and else statements in php and also else if statements in php

if statement – executes some code if one condition is true
if...else statement – executes some code if a condition is true and another code if that condition is false
if...elseif....else statement – executes different codes for more than two conditions

Syntax:

if (condition) {
code to be executed if condition is true;
}

VIDEO 03: PHP Loops WHILE, For, Foreach DO WHILE

I’ve learnt about the php loops.

syntax for for loop:

for (init counter; test counter; increment counter) {
code to be executed;
}

Syntax for foreach loop:

foreach ($array as$value) {
code to be executed;
}

VIDEO 04: PHP Functions Arguments

I’ve learnt about PHP functions and arguments

syntax:

function functionName() {
code to be executed;
}

VIDEO 05: _GET and _POST

I’ve learnt about GET and POST methods . GET method is to get data from the database and POST method is used to insert data into database

FOLDER 24: INTRODUCTION TO MySQL DATABASES

VIDEO 01: INTRO WHAT IS MySQL COURSE FILES

It consists of what MySql is… Sql is nothing but structured query language which manipulates the information in the database.

VIDEO 02: CREATING YOUR FIRST MySQL DATABASE phpMyAdmin

It consists how to create database and tables using xampp in php my admin.

VIDEO 03: Establishing a MySQL Connection with PHP

I’ve learnt how to establish a connection with my SQL using php

VIDEO 04: SELECTING DATA FROM A DATABASE AND DISPLAYING IT ON YOUR WEB PAGE

I’ve learnt how to select data from database and display on the webpage using mySQL and php

syntax of MySQL query:

SELECT column1, column2, …….FROM table_name;

VIDEO 05: Insert Data into Your Database from a Web Page

I’ve learnt how to insert data from web page to database using MySQL and php

Syntax of MySQL query:

**INSERT INTO table_name (column1, column2, column3,…)VALUES (value1, value2, value3, …);**

VIDEO 06: Password Hashing for securely storing passwords

I’ve learnt about storing of passwords.

password_hash() – used to hash the password.
password_verify() – used to verify a password against its hash.
password_needs_rehash() – used when a password needs to be rehashed.
password_get_info() – returns the name of the hashing algorithm and various options used while hashing.

VIDEO 07:Using PHP Sessions to Store Global Variable

I’ve learnt about the sessions and how to store them using php.

Example:

<?php
// Start the session
session_start();
?>

<?php
// Set session variables
$_SESSION[“favcolor”] = “green”;
echo “Session variables are set.”;
?>

FOLDER 26: WordPress Websites

WordPress is a free and open-source content management system based on PHP & MySQL. Features include a plugin architecture and a template system. It is most associated with blogging but supports other types of web content including more traditional mailing lists and forums, media galleries, and online stores.

The WordPress Dashboard is a first screen which will be seen when you log into the administration area of your blog which will display the overview of the website. It is a collection of gadgets that provide information and provide an overview of what’s happening with your blog.

Steps to Provide WordPress Security:

Change the ‘admin’ login. …
Use strong passwords everywhere. …
Use the latest version of WordPress. …
Mind your plugins. …
Delete any plugins or themes you’re not using. …
Use .htaccess files to protect the ‘wp-admin’ and other directories. …
Install and activate anti-virus and anti-spyware software on your computer.

FOLDER 27: Career Development How to Start Your Web Design Development Career

Steps to start your career as web developer:

Build a Portfolio Site Full of Relevant Work. …
Do Freelance Projects. …
Put Your Code on Github. …
Contribute to an Open Source Project. …
Participate in a Hackathon. …
Meet Techies Online and IRL. …
Follow Industry News. …
Learn New, Relevant Skills Regularly.

FOLDER 28: AngularJS Quick Start Build a Single-Page Web Application NEW

Angularjs is a Single Page Applications Framework. Single page application(SPA) is a web application that fits on a single page. All your code (JavaScript, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.

Every angular application starts from creating a module. Module is a container for the different parts of your application: controllers, service, etc.

var app = angular.module('myApp', []);

`MVL means MODEL-VIEW-CONTROLLER.MODEL: Database communicationVIEW: content displayed on screenCONTROLLER: Ties the model and view together.`

18 06 19

MadhuShriya1405

THE KNOWLEDGE I GOT FROM THE INTERNSHIP

My name is S.L.S.K. Madhu Shriya . I am pursuing my B.Tech in Dr.Lankapalli Bullayya College of Engineering for Women. In these course videos I saw about different types of web developments,visual designs and many other aspects of Web development.

FOLDER 01 : Introduction Why This is The Only Design Development Course You’ll Ever Need

VIDEO 01: INTRODUCTION

It is about introduction about web designing i.e. what are the skills required for web designing, how to craft resume and negotiate a high salary etc.

VIDEO 02: WHAT YOU GET IN THIS COURSE

In this video i’ve learnt what are the skills required for web development as free lancer. The skills such as

html html
html5
css
css3
java script
jQuery1
jQuery3
Responsive
php
my sql
Angular js etc…

VIDEO 03: HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS, GRAPHICS MORE

I’ve learnt about free trial photoshop in websites such as

GIMP (gimp.org)
PIXLR(pixlr.com)
30-DAY PHOTOSHOP TRIAL (adobe.com/photoshop)

VIDEO 04: HOW MUCH SHOULD YOU CHARGE

I’ve learnt on what basis you should charge for your project such as

what’s the project?

who’s the client?

how much does it cost you basing on hours of work?

Is the project interesting?

VIDEO 05: PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE

I’ve learnt about how to charge for the work based on the time you have allocated to do project per hour.

FOLDER 02: INTRODUCTION TO VISUAL DESIGN

VIDEO 01:

It’s about the introduction to visual design.

VIDEO 02:

The basic elements of visual design are:

lines
shapes
colour palette
texture
typography
form

The basic 7 principles of visual design are:

space
dominance
hierarchy
unity
balance
rhythm
proportion

VIDEO 03: CRAP PRINCIPLES IN DESIGN

It’s about the principles about CRAP. They are:

C means CONTRAST
R means REPETITION
A means ALIGNMENT
P means PROXIMITY

VIDEO 04: TYPOGRAPHY

It’s about what typography is .. Typography is nothing but flow to message. It consists of ascender , X-height , cap height, descender…

VIDEO 05: SCIENCE OF COLOUR

VIDEO 06: DESIGNING WITH GRIDS

Grids are nothing but they keep content organized creates an order by distinguishing different types of information. They are 4 types of grids. They are:

single column grid
Multi column grid
Modular column grid
Hierarchical column grid

FOLDER 03: INTRODUCTION TO ADOBE PHOTOSHOP

VIDEO 01: Intro The 8020 Rule, Photoshop Basics, and More

It’s about the introduction to the photoshop.

VIDEO 02: Creating a New Photoshop Document

It’s about how to create a document using photoshop.

Steps for creating a document in photoshop:

Open Elements and select an editing mode. …
Choose File→New→Blank File in any workspace or press Ctrl+N (cmd+N). …
Select the attributes for the new file. …
Click OK after setting the file attributes to create the new document.

VIDEO 03:Photoshop Environment The Toolbar – Part 1

VIDEO 04:Photoshop Environment The Toolbar – Part 2

VIDEO 05:Photoshop Environment Palettes

->Palettes. Palettes [shown right] are groups of tools used to edit and manipulate your image. Photoshop contains over two dozen palettes that can be shown or hidden by using the Window menu and selecting the palette you wish to reveal.

->Photoshop supports to create custom swatches. – Some specific colors can be applied without remembering the numeric color values. – Colors can be extracted from an available image. – Default swatches and custom swatches can be used. – Custom swatch collections are vigorously used.

Video:-Photoshop Environment The Menu

->When you start Photoshop, the Tools panel appears at the left of the screen. Sometools in the Tools panel have options that appear in the context-sensitive options bar. You can expand some tools to show hidden tools beneath them

Different Parts of Adobe Photoshop Tools

Toolbars. Photoshop provides the most commonly used tools in two Toolbars, one at the left of the workspace and the other along the top. …
Adjustments. The primary use of any photo editing software is to adjust the color and tone of your images. …
Filters. …
Actions. …
Layers.

->Photoshop is a graphics editing program by Adobe that is used by professionals and regular consumers. It is usable on a variety of operating systems and is available in a variety of languages. This program can be used to create images from scratch or to alter existing images.

->Photoshop is an easy to use software designed for effortless editing and can be used by even a non- professional. Whereas Photoshop CC makes your work easy once you get to understand the tools and where to use them. … Whereas Photoshop CC just has a modified version of the same.

VIDEO 07:Photo Enhancement Manipulation

t’s about the enhancement and manipulation of image using photoshop. Photo manipulation involves transforming or altering a photograph using various methods and techniques to achieve desired results

Introduction to webdesign

WEB DESIGN TERMINOLOGY

MOOD BOARD:–>A collage composed of colours,pictures,sample of objects,textures,screenshots,etc.toconvey a mood or direction of a design or brand.->Popular with graphics and web designers when presenting ideas,or a direction they would like to go with a project..WIREFRAME:–>A sketch or series of sketches on paper or screen that serves as a blueprint for a website layout.->They are effective because they are quick to produce ,focus on optimizing functionality ,layout and content organization without letting colours and style get in the way.ROUGH:-The first draft of a layout ,after skretching is complete .It is called a rough,because the first draft is ofte not directly”on the mark”and needs much work before the design is perfect.COMP:-The second draft of a layout or design ,once the roughs have been approved.MOCKUP:-An Official,final draft of a web design.This is usually done in software like adobe photoshop ,or sketch.3.The Four Phases Of a Web Design Project Cost Estimates:–>In order to complete a web design project on budget ,on time and in a seamless and professionals manner,its important to approach the entire project in four specific phases.->The names of these phases may vary among designers ,but these are the exact four phases we use this when working on a proffesionals project with the clients.DISCOVERY PHASE:–>Initial phone cells ,meetings,consulations.->Research ,planning,scheduling->Develop site structure /sitemapCREATIVE PHASE:–>Users experience design ->wireframing->Web design MockupsDEVELOPMENT PHASE->Convert designs into HTML & CSS->Additional web development that is wordpress->Browser testingLAUNCH PHASE:–>Review->Moving local website to live server->Client training->Final Payment4.What is user experience UX designUX design means:–>visual design->Information architecture->Usability->Research->Content strategy ->Interface designWHAT MAKES GOOD UX?->it is useful and fulfills users goal->It is easy to use->It is pleasant and enjoyable UX IMPORTANCE->It solves a problem->It entertains or engages->It educates or informs a user->And the user must experience the above with ease,no stress, and no anger.SOME TOOLS USED IN UX DESIGN->omniGraffle->Visio->balsamia->Pen and Paper5.THE ANATOMY OF A WEBDESITE DESIGN-Every designer has his/her own way of creating a layout,and as we already know ,beauty is in the eye of the beholder.->Even though there are endless possibilities for web page layout ,there are some conventions that are in place.These conventions allow designers a foundation to start from ,but they also allow the user to recognize patterns,and therefore ,improve the user experience.COMMON ELEMENTS->Header and navigation->Call to action->Primary Content->Secondary /Tertiary Content->Side Bar->Footer
Header and Navigation->usually horizontal along the very top of the website ,but can be along the left or right side as well->Typically contains the brand ,or logo->Navigation items are most important ,or commonly used links->Global across all pagesCall To Action->Arguably the most important element on a web page->Tells your user what they should do next->Should be clear ,straight forward and to-the-point with a clear benefit to the user.->ONE call to action is more effective than multiple.PRIMARY CONTENT:–>Highlights the main article ,story,or message.->Most obvious in blogs and new websites->Typically centered within the layout or on the left side ,consuming about 3/4 of the page width.SECONDARY / TERTIARY CONTENT->Content that is secondary to the main message ->Can be a section with links to other pages ,or an excerpt of the next article in the blog->Usually lower on the page ,or within a sidebar,or folder.SIDEBAR:–>Located on the left or right side of the page ,hence”side” bar.->contains content that is secondary or tertiary to the primary content ,article or message .->Should not attract attention away from the primary content ,or call to action.->Should be used to enhance UX.FOOTER:–>Located at the very bottom ,or “foot’ of a web page .->Contains tertiary content that is relevant ,but not critical.->Can feature a secondary navigation menu with links to less common pages.->Commonly highlights links to social media profiles and other resources.

INTRODUCTION TO HTML

The Basics of HTML Tags ,Attributes,Elements->HTML means Hyper Text Markup Language .It is a language used to create document on the web .HTML is meant for meaning and structure of a web pages content->HTML contains tags that organize and structure text include images create forms and tables, and link to other documents or web pages all across the interest.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>TAGS:-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>.Basic File Folder Structure Of a WebsiteIt is important to keep the contents of your websites organized.Folders should have simple one word names.Multi-Word names can be faked by using the underscore “-‘character like so:-product_imagescourse_files->In the root folder of your site (“root” is the common name for the top-level directory of website )you will place an HTML document called index.html->index.html is the homepage -the first page visitors see when they arrive at our site.->the index.html filename is set in stone because unix-based HTTP servers are configured to look for a document named index.html when no additional filename is specified in the address bar.->The name of any file or folder you create as part of your website structure will eventually become part of a URL.->URL have some restrictions as far as the characters taht can be used within them ,so it is important to be aware of them.->It is widely accepted among most professionals web developers to use only lower case alphanumeric characters and the underscore when naming files and folders.4.Your Must Have Tool A good Code EditorSublime Text 3 – An Amazing Text Editor.

Vim (Free – GNU Compatible) Code Editor.
Gedit – Integrated Development Environment.
Bluefish – Linux HTML Editor.
CodeLite – Linux Code Editor.
Eclipse – IDE.
Code::Blocks – Code Editor.
Geany – Linux Text Editor.

Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

VIDEO 03: Basic File Folder Structure of a Website

I’ve learnt how to keep folder names for a website folder . For Example for home page keep it as index.html and for images create a images folder.

VIDEO 04: Your Must Have Tool A Good Code Editor

It’s about the text editors to write code for website. They are sublime, Text Wrangler, Notepad++, Brackets, Coda2 etc..

VIDEO 05:Hello World Create Your Very First Web Page

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</html>

FOLDER 07: INTERMEDIATE HTML

VIDEO 01: Section Intro HTML Tags, Code a Real Web Page

It’s about the introduction to html.

VIDEO 02: Basic Structure of an HTML Document

I’ve learnt about the basic structure of html . Here is the basic structure:

Section Intro Advanced HTML Techniques, HTML5

3.MAKING INTERNET EXPLORER COMPATIBLE WITH HTML5:HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.4. HTML5 DATA ATTRIBUTE:

For instance, let’s say you have a list of different restaurants on a web page. Before HTML5, if you wanted to store information about the type of food offered by restaurants or their distance from the visitor, you would have used the HTML class attribute. What if you also needed to store the restaurant id to see which particular restaurant the user would want to visit?

Here are a few problems with the approach based on the HTML class attribute.

The HTML class attribute is not meant to store data like this. Its main purpose is to allow the developer to assign style information to a set of elements.
Each additional piece of information requires us to add a new class to our element. This makes it harder to parse the data in JavaScript to actually get what we need.
Let’s say a given class name begins with numbers. If you decide to later style the elements based on that data in the class name, you will have to either escape the number or use attribute selectors in your style sheet.

To get rid of these issues, HTML5 has introduced custom data attributes. All attributes on an element whose name starts with data- are data attributes. You can also use these data attributes to style your elements.

Some more information about Intermediate HTML

“INTERMEDIATE HTML” .
1.SECTION INTRO HTML TAGS, CODE A REAL WEB PAGE: In this video it tells about the next videos in the intermediate html i.e. HTML tags, code etc.2.BASIC STRUCTURE OF AN HTML DOCUMENT: In this video it explains that the files were saved with the html extension.I learn the basic structure of the html. Every step is explained briefly and it is easy to understand.3. HEADING PARAGRAPH TAGS:Headings are defined with the <h1> to <h6> tags.<h1> defines the most important heading. <h6> defines the least important heading.

The <p> tag specifies a paragraph HTML of text.
It is a block-level element.
The <p> element can only contain inline elements within it.
The browser adds margin automatically before and after the <p> tag element.
This tag supports all global and event attributes.

4.USING EMPHASIS STRONG EMPHASIS:In HTML we have two types of emphasis one is “EMPHASIS” And second one is “STRONG EMPHASIS”.Here we use <em> tag and </em> tag for emphasis. It specifies , this section of text is important.<strong> tag and </strong> tag were used for strong emphasis.It also specifies the important text.5.HYPERLINKS:HYPERLINKS ARE ALSO KNOWN AS LINKS

Tag	Description
<a>	Defines a hyperlink
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>	Defines navigation links.

6.LISTS:

<ul> :Defines an un ordered list.
<ol> :Defines an ordered list.
<dl> :Defines
description list.

7.IMAGES:

<img> :Defines an image.

Here there is no closing tag for image. using this image tag we can insert the images according to our project.8.TABLES:For creating layouts people were use tables.

<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table

9.FORMS:We use forms to login into Facebook , open a web page etc.

<form>	Defines an HTML form for user input
<input>	Defines an input control

<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element

10.SPECIAL CHARACTERS AND HTML ENTITIES: HTML special characters are also referred to as masked characters and HTMLentities. HTML special characters are part of a character set, a coding, which goes beyond the available characters that can be recorded with a regular keyboard.Some of the special characters are :

Char	Number	Entity	Description
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS

CharNumberEntityDescription©©©COPYRIGHT SIGN®®®REGISTERED SIGN

11.HTML PROJECT CODE A BASIC WEB PAGE TUTORIAL:It is an web page creation using above 10 categories. HTML tags, emphasis and strong emphasis, hyper links, forms. images , lists etc. Using HTML we can create a simple web page

Expert HTML 5

1.SECTION INTRO EXPERT HTML5 TECHNIQUES:In this we are going to learn about “EXPERT HTML5 TECHNIQUES”.2.NEW HTML5 INPUTS:SEARCH:The <input type="search"> is used for search fields (a search field behaves like a regular text field).
EMAIL:

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add “.com” to the keyboard to match email input.URL: The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds “.com” to the keyboard to match url input.

NUMBER:

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

RANGE:

he <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

DATE:

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

MONTH:

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

WEEK:

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

TIME:

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

DATE TIME-LOCAL:

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

COLOR:

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

Introduction to CSS

ntroduction to css”1.SECTION INTRO ESSENTIAL OF CSS DOWNLOAD COURSE FILES:This is an introduction to css which explains it’s characters.2.WHAT IS CSS ALL THE BASICS YOU NEED TO KNOW: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.

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.

3.INHERITANCE OF STYLES:In CSS, inheritance controls what happens when no value is specified for a property on an element. Refer to any css property definition to see whether a specific property inherits by default (“Inherited: yes”) or not (“Inherited: no”).
4.MEASUREMENTS THE BOX MODEL:

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model.

Explanation of the different parts:

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent.

5.INLINE CLASSES:

Inline CSS refers to CSS found in an HTML file. It is found in the head of a document between style tags. Inlining CSS simply means putting your CSS into your HTML file instead of an external CSS file

6.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.

There are three ways of inserting a style sheet:

External Style SheetInternal Style SheetMultiple Style SheetsEXTERNAL 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.7.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.

8.ID CLASS SELECTORS:

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. 9. DESCENDANT SELECTOR:
The descendant selector matches all elements that are descendants of a specified element. The first simple selector within this selector represents the ancestor element—a structurally superior element, such as a parent element, or the parent of a parent element, and so on. 10.GROUPING SELECTORS: CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space. You can combine grouped selectors with contextual and other selectors to create powerful yet compact rules for your style sheets.
11.SPECIFICITY:Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestors

HTML HTML5

Here are a few problems with the approach based on the HTML class attribute.

The HTML class attribute is not meant to store data like this. Its main purpose is to allow the developer to assign style information to a set of elements.
Each additional piece of information requires us to add a new class to our element. This makes it harder to parse the data in JavaScript to actually get what we need.
Let’s say a given class name begins with numbers. If you decide to later style the elements based on that data in the class name, you will have to either escape the number or use attribute selectors in your style sheet.

->Download And Install 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 link
How to Install jQuery Plugins
Locate and download a jQuery plugin from the plugins page the jQuery website.
1. Open the downloaded plugin’s archive file and extract the “.js” file inside it. Some plugins may contain multiple JS files.
2. Open your Web page’s HTML file in a text editor.
3. Locate the line that begins with “
4. 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 jQuery selector 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 methodsfor different tasks e.g. manipulate DOM, events, ajax etc.

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 acommercial 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 servercontains 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, computerized medical records, and online shopping to name just a few.

Responsive Development using Bootstrap

.Getting started with bootstrap:-Bootstrap is the most popular HTML ,CSS, and JavaScript frameworksfor developing responsive ,mobile first projects on the web.->Download has a few easy to quickly get started each one appearing to a different skill level and use case .3.Quickly prototype with the free examples
Prototype theory is a mode of graded categorization in cognitive science, where some members of a category are more central than others. For example, when asked to give an example of the concept furniture, chair is more frequently cited than, say, stool. Confusing wireframes with prototypes is like assuming an architectural blueprint and a display house, are the same thing.” … Unlike a wireframe,a mockup looks more like a finished product or prototype, but it is not interactive and not clickable. It is rather a graphic representation.someone or something that serves to illustrate the typical qualities of a class; model; exemplar: She is the prototype of a student activist. something analogous to another thing of a later period: a Renaissance prototype of our modern public housing.
4.Understanding the Bootstrap with Grid System->Bootstrap includes a responsive,mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases .It includes predefined classes for easy layout options as well as powerful mixins for generating more semantic layouts.->Grid system are used for creating page layouts through a series of rows and columns that house your content .->The bootstrap grid system has four tiers of classes .We can use nearly any combination of these classes to craete more dynamic and flexible layputs.->Each tier of classes scales up meaning if we plan on setting the same widths for xs and sm .we only need to specify xs.
Bootstrap TablesBootstrap CSS Tables Reference

<table> Classes. Use the classes below to style any table: Class. Description. …
<tr>, <th> and <td> Classes. Use the classes below to color table rows or cells: Class. Description. …
Responsive Tables. The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px).

Helper classes Responsive utilities. For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included areutility classes for toggling content when printed. Bootstrap Modal Window Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that’s customizable and responsive. They can be used to display alert popups, videos, and images in a website. … Bootstrap Modals are divided into three primary sections: the header, body, and footerThe “Modal” part: The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (“myModal”). … The .fade class adds a transition effect which fades the modal in and out.

WEB HOSTING

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.

Angular JS Expert

Here we build the listing app.The first app for learning any technology isangular 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.

What are Plugin?

>Wordpress Plugin:-Wordpress plugin allow easy modification ,customization,and enhancement of a wordpress blog .Instead of changing the core programming of wordpress ,we can add functionality with wordpress plugins .A wordpress plugin is a program.or a set of one more functions written in the php scripting language that adds a specific set of features or services to the wordpress web blog,which can be seamlessly integrated with the weblog using access points and methods provided by the wordpress.->The core of wordpress is designed to be lean and lightweight ,to maximize flexibility and minimize code bloat .Plugins then offer custom functions and features so that each user can tailor their site to their specific needs.->wordpress Plugins are available from several sources .The most popular and official source for wordpress Plugins is the wordpress.org.repo.->Wordpress was born out of a desire for an elegant ,well-architectured personal publishing system built on PHP and MySql and licensed under the GPL.It is the official successor .Wordpress is modem software ,but its roots and development go back to 2001.It is a mature and stable product .Plugin directory are:–>WP super cache->Akismet->jetpack by wordpress .com->Buddypress.2.Ground Network Creating admin MenusUsually ,plugin and theme authors need to provide access to setting screen so users can customize how the plugin or theme can be used.The best way to present the user with such a screen is to create an administration menu item that allows the users to access that settings screen from all the administration screen. This is all about wordpress plugins.

->How to start a wordpress blpog in 5 minutes

we learn that how to install wordpress in very short time remain of time. It is specifically developing press means,increased power,flexibility,and control for our websites with VPS technologies.It is also about themes, and it is a kind of a surface level aspects.,getting wordpress set up in our own server.Here we use the website My.justhost.com. And then we have to log in the user name,Password. and after that control panel appears after log in to this website. In the control panel page we can see the website builders then we have to install the wordpress.2.The Dashboard:-In this video the wordpress dashboard is a first screen which will be seen when we log into yhe administration areaa of our blog which will display the overview of the website.It isa collection of gadgets that provide information and provide an overview of whats happening with or blog.3.Using Free and Premium Plugins to Achieve Any feature You Desire:-In ths video A plugins is a piece of software containing a group of functions that can be added to a wordpress website.Thy can exted functionality or add new features to your wordpress websites WordPress plugins are written in the PHP programming language and integrate seamlessely with wordpress.4.Using Free and Premium Themes To Quickly Make Gorgeous websites:-In this video a theme is a collecyion of templates and stylesheets used to define the appearance and display of a wordpresspowered website.They can be changed ,managed and added from the wordpress admin area under appearance Themes .There are several free and paid wordpress Themes are available.5.The X Theme:-It is a theme we can built anything whatever we want .There are so many sites with X . We can create themes like Dentalux-Dentist,Medical and Healthcare. We can customize anything like size,font size,colors.X theme has its own version.The theme customizers are Incredible shortcodes,Layout Options,Navigation Options.6.Wordpress Security:- Wordpress is an open source and it is open to hackers.WordPress security is a topic of huge importance for every website owner. … While WordPress core software is very secure, and it’s audited regularly by hundreds of developers, there is a lot that can be done to keep your site secure. At WPBeginner, we believe that security is not just about risk elimination.7. Quickly start an eCommerce Online Store:- Everything You Need To Start Selling Online Today. SSL Certificate. Social Media Integration. 100+ Professional Themes. Fulfillment Integration. Drop Shipping Integration. Mobile Commerce Ready. SEO Optimized. Secure Shopping Cart. Accept Credit Cards.

Introduction to PHP

Introduction. The term PHP is an acronym for PHP: Hypertext Preprocessor. PHP is a server-side scripting language designed specifically for web development. Websites like www.facebook.com, www.yahoo.com are also built on PHP. … PHP codes are first executed on the server and then the result is returned to the browser.

Here are the things that i have learn in the course video

Thank you Sir.

17 06 19

salma

ARTICLE ON INTERNSHIP

OVERVIEW COURSE VIDEOS

INTRODUCTION ALL YOU NEED TO KNOW :

1.INTRODUCTION:

In this we have WEB DESIGN AND DEVELOPMENT THE ULTIMATE ALL-IN-ONE COURSE

It is useful to learn about web designing and we can grow as a good web designer by learning from this videos.This videos helps in learning essentials in visual designing techniques,designing of web sites in Photoshop,coding in HTML and CSS web site,dynamic PHP and MYSQL applications.It helps to find jobs with good salary and how to start a successful freelance carer.

2.WHAT YOU GET IN THIS COURSE MAJOR COURSE DISCOUNTS EBOOK:

Here we have about 60 lectures which contains following content i.e.

Visual designing techniques
Photoshop
HTML and CSS, CSS-3
Boot strap
Web hosting
PHP and MYSQL
Java script
Jquery
Word press and word press web development

3.HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS,GRAPHICS MORE:

We can use this following web sites to do dummy Photoshop instead of original web sites as they also have free trial and this is useful in personal and commercial purposes.

GIMP: WEB ADDRESS: gimp.org .Not as feature rich.Does the trick.

PIXLR: WEB ADDRESS: pixlr.com . Similar to the Photoshop.

WE CAN CHANGE THE IMAGE ACCORDING TO OUR REQUIREMENT

30 DAY PHOTOSHOP TRIAL: adobe.com/Photoshop.

Any web designer like to have free resources instead of paid sources.One of the free resource is CREATIVE MARKET and web address for this source is bradhussey.ca/creativemarket . It contains free and premium graphics, designs, themes, Photography, icons, fonts and much more.

4.PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE:

I learned from this video i.e. we should charge money for our service from the clients based on the following questions.

What the project?
Who’s the client?
How much does it cost you?
Is the project interesting?
After the project?

The charge must based on the service that we provided to the clients.Based on the answers to the above questions ,we have to charge correct amount from the client.We can calculate by using the web address i.e. bradhussey.ca/pricecalculator .

5. INTRO WRAP UP WHAT YOU HAVE LEARNED WHATS NEXT:

This is about what we have learned in previous videos and next video is about visual designing .

INTRODUCTION TO VISUAL DESIGN:

1.SECTION INTRO WHAT YOU ARE GOING TO LEARN:

This is an introduction video which gives information about videos present in next to this video about visual designing.

2.THE BASIC ELEMENTS AND PRINCIPLES OF VISUAL DESIGN:

SIX ELEMENTS OF VISUAL DESIGN

Although visual design on the web can be incredibly complex,all web designs boil down to six basic elements:

Lines
Shapes
Colour Palette
Texture
Typography
Form

LINES: This helps to define shapes,divide sections,create separation and to have typical length,width &direction.

SHAPES: It composed of self contained areas which includes the lines, values, colour, texture. In this all objects are composed of shapes.

COLOUR PALETTE: It helps to differentiate with the shapes and items and to add depth & emphasis.It is used to organize information, to evoke emotion and feeling.

TEXTURE: It gives the illusion of how a surface feels and doesn’t have to be a real texture, like dirt, or paper. It is used to either attract or divert attention.

TYPOGRAPHY: It is used to change the fonts, size, colour, spacing, alignment.

FORM: It helps to create illusion of objects and to add depth & texture to create 3D objects. It is used to accentuate a message, or provide visual appeal.

SEVEN PRINCIPLES OF VISUAL DESIGN

While there are no official “industry standard” rules for visual design-as the beauty of a design purely depends on the audience-there are a set of widely accepted guidelines,or “principles”,when it comes to visual communications. The basic principles boil down to the following:

Balance
Rhythm
Proportion
Space
Dominance
Hierarchy
Unity

BALANCE: Arrangement & distribution of objects to create meaning i.e. symmetric and asymmetric.

RHYTHM: It creates movement ,repetition of elements and can establish pattern and texture.

PROPORTION: It is also known as “scale”. It demonstrates how each item relates in size.

SPACE: It is also known as “white space” . It is used to reduce noise, clutter, and increase reliability.

DOMINANCE: It is used as a focal point and it can achieved through size, colour, shape, etc. It is used to communicate the primary message.

HIERARCHY: It is used to differentiate primary and secondary focus. It can achieved through size, colour, & placement.

UNITY: This is about the big picture of a design and how all elements are related or unrelated,grouping of similar elements.

3.THE DESIGN CRAP PRINCIPLES:

The CRAP principles are:

REPETITION:-Consistency in elements and style throughout your design creates a cohesive feel,and can help guide the user throughout our website.

ALIGNMENT:-It creates clear relationship between elements ,nothing should feel out of place ,unless its intentional.

PROXIMITY:-It creates a clear relationship between elements ,grouped elements are related ,separate elements are not related.

Image result for CRAP PRINCIPLES OF VISUAL DESIGN

4.TYPOGRAPHY BASICS:

Typography means it gives a voice to written content,it increases readability,gives content form and can shape a message ,gives flow to the message.

5.THE SCIENCE OF COLOUR OF COLOR:

It can convey a mood ,or a feeling. The words frilly and freaky conjure different feelings and colour palettes. colors are used for the designers to emphasise an object or message .They also use color to de-emphasize objects

COLOUR WHEEL:-We ca see which colours sit near each other.This has allowed us to establish an official vocabulary for colour schemes.Different cultures perceive the meaning of colour differently.

ANALOGOUS:-analogous means it is next to each other on the colour wheel ,it is similar to similar temperature ,Minimal contrast ,Dissonant.

COMPLEMENTARY:-It is opposites on the wheel,opposites temperature and it creates a different mood than an analogous scheme.

There are some pure unmixed colour:-

PRIMARY COLORS:-Red,blue,yellow

SECONDARY COLORS:-Orange,Purple-ad greenMade of 2 Primary colours mixed together.

TERTIARY COLOUR:-Red-Orange,Red-Violet,Blue-Violet,Blue-green,Yellow-Green,Yellow-Green,Yellow-Orange made of 1 primary and 1 secondary mixed together.

HUE:-One of the main properties of colour .Where a colour sits on the spectrum, or colour wheel.

SATURATION:- How colorful a photo is,or is not.

BRIGHTNESS:-How much light is added to,or remove from, a photo.

GENERAL GUIDELINES FOR CREATING A COLOUR PALETTE:-

Know the purpose and message.
Review the colour basics.
choose a dominant colour.
choose an accent colour.
Experiment with different shades and hues.
keep it simple ,limit colours.
Record your colour palette for reference.

6.DESIGNING WITH GRIDS:

Way back in the mid 1800s ,a dude named William Morris and his buddy ,Philip Webb, designed a house where the rooms were organised according to purpose -in a grid-like fashion.This led people to rethink how books were laid out , and incorporated a grid.

FAST FORWARD:-Today,grids are very commonly used in web design.Grids on the internet help organise large amount of information in easy-to-navigate, digestible information.

APPROACHES:-

Single Column
Multi Column
Modular
Hierarchical

USES OF GRIDS:- It keeps content organised,creates an order by distinguishing different types of information ,Enhances navigation and usability,saves design time ,because you have limitations to work within.

8.SECTION AUTO WRAP UP FURTHER LEARNING WHAT NEXT:

In this video we use some web Sites to create designs.some of them are

INTRODUCTION TO HTML

1. Section Intro HTML Fundamentals, First Web page, Course Files:

It is about the introduction to html. HTML is nothing but hyper text mark up language

2.The Basics of HTML Tags, Attributes, Elements:

Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

I’ve learnt about elements such as tags, attributes , Elements.

3.Basic File Folder Structure of a Website:

I’ve learnt how to keep folder names for a website folder . For Example for home page keep it as index.html and for images create a images folder.

4. Your Must Have Tool A Good Code Editor:

It’s about the text editors to write code for website. They are sublime, Text Wrangler, Notepad++, Brackets, Coda2 etc..

5.Hello World Create Your Very First Web Page:

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</ht

INTERMEDIATE HTML

1.Section Intro HTML Tags, Code a Real Web Page:

It’s about the introduction to html.

2. Basic Structure of an HTML Document:

I’ve learnt about the basic structure of html . Here is the basic structure:

ADVANCED HTML HTML5

1. Section Intro Advanced HTML Techniques, HTML5:

2.IDs Classes:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.

3.Span Div Tag:

4.Intro to HTML5 Tags Header, Footer, Nav, Section, Article, Aside Time:

I’ve learnt about Html5 tags. The following are some of them

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

9. EXPERT HTML HTML5:

1.Section Intro Expert HTML5 techniques:

It’s about the introduction to Expert Html.

2.New HTML5 Inputs:

HTML5 added several new input types. some of them are:

color.
date.
datetime-local.
email.
month.
number.
range.
search.

3.Making Internet Explorer Compatible with HTML5:

The following are the steps for making Internet Explorer compatible with

HTML 5:

Click Start.
On the search bar, type Internet Options, and click on Internet Options from the results.
Click on the Advanced tab.
Under Multimedia, check Enable alternative codecs in HTML5 media elements.
Restart your computer.

4.HTML ATTRIBUTES:

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

Here are a few problems with the approach based on the HTML class attribute.

The HTML class attribute is not meant to store data like this. Its main purpose is to allow the developer to assign style information to a set of elements.
Each additional piece of information requires us to add a new class to our element. This makes it harder to parse the data in JavaScript to actually get what we need.
Let’s say a given class name begins with numbers. If you decide to later style the elements based on that data in the class name, you will have to either escape the number or use attribute selectors in your style sheet.

Thanking you sir,

yours faithfully,

sk.salma begam.

17 06 19

soffiyabanu

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:

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

17 06 19

Y.Roshni

The Things I Have learn in the Course videos

My name is Roshni Yadav . I am pursuing my B.Tech in Dr.L.Bullayya College of engineering. In this course video I saw about different types of web development,visual designs.

FOLDER 01 : Introduction Why This is The Only Design Development Course You’ll Ever Need

VIDEO 01: INTRODUCTION

It is about introduction about web designing i.e. what are the skills required for web designing, how to craft resume and negotiate a high salary etc.

VIDEO 02: WHAT YOU GET IN THIS COURSE

In this video i’ve learnt what are the skills required for web development as free lancer. The skills such as

html html
html5
css
css3
java script
jQuery1
jQuery3
Responsive
php
my sql
Angular js etc…

VIDEO 03: HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS, GRAPHICS MORE

I’ve learnt about free trial photoshop in websites such as

GIMP (gimp.org)
PIXLR(pixlr.com)
30-DAY PHOTOSHOP TRIAL (adobe.com/photoshop)

VIDEO 04: HOW MUCH SHOULD YOU CHARGE

I’ve learnt on what basis you should charge for your project such as

what’s the project?

who’s the client?

how much does it cost you basing on hours of work?

Is the project interesting?

VIDEO 05: PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE

I’ve learnt about how to charge for the work based on the time you have allocated to do project per hour.

FOLDER 02: INTRODUCTION TO VISUAL DESIGN

VIDEO 01:

It’s about the introduction to visual design.

VIDEO 02:

The basic elements of visual design are:

lines
shapes
colour palette
texture
typography
form

The basic 7 principles of visual design are:

space
dominance
hierarchy
unity
balance
rhythm
proportion

VIDEO 03: CRAP PRINCIPLES IN DESIGN

It’s about the principles about CRAP. They are:

C means CONTRAST
R means REPETITION
A means ALIGNMENT
P means PROXIMITY

VIDEO 04: TYPOGRAPHY

It’s about what typography is .. Typography is nothing but flow to message. It consists of ascender , X-height , cap height, descender…

VIDEO 05: SCIENCE OF COLOUR

VIDEO 06: DESIGNING WITH GRIDS

Grids are nothing but they keep content organized creates an order by distinguishing different types of information. They are 4 types of grids. They are:

single column grid
Multi column grid
Modular column grid
Hierarchical column grid

FOLDER 03: INTRODUCTION TO ADOBE PHOTOSHOP

VIDEO 01: Intro The 8020 Rule, Photoshop Basics, and More

It’s about the introduction to the photoshop.

VIDEO 02: Creating a New Photoshop Document

It’s about how to create a document using photoshop.

Steps for creating a document in photoshop:

Open Elements and select an editing mode. …
Choose File→New→Blank File in any workspace or press Ctrl+N (cmd+N). …
Select the attributes for the new file. …
Click OK after setting the file attributes to create the new document.

VIDEO 03:Photoshop Environment The Toolbar – Part 1

VIDEO 04:Photoshop Environment The Toolbar – Part 2

VIDEO 05:Photoshop Environment Palettes

Video:-Photoshop Environment The Menu

Different Parts of Adobe Photoshop Tools

Toolbars. Photoshop provides the most commonly used tools in two Toolbars, one at the left of the workspace and the other along the top. …
Adjustments. The primary use of any photo editing software is to adjust the color and tone of your images. …
Filters. …
Actions. …
Layers.

VIDEO 07:Photo Enhancement Manipulation

Introduction to webdesign

WEB DESIGN TERMINOLOGY

INTRODUCTION TO HTML

Vim (Free – GNU Compatible) Code Editor.
Gedit – Integrated Development Environment.
Bluefish – Linux HTML Editor.
CodeLite – Linux Code Editor.
Eclipse – IDE.
Code::Blocks – Code Editor.
Geany – Linux Text Editor.

Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

VIDEO 03: Basic File Folder Structure of a Website

I’ve learnt how to keep folder names for a website folder . For Example for home page keep it as index.html and for images create a images folder.

VIDEO 04: Your Must Have Tool A Good Code Editor

It’s about the text editors to write code for website. They are sublime, Text Wrangler, Notepad++, Brackets, Coda2 etc..

VIDEO 05:Hello World Create Your Very First Web Page

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</html>

FOLDER 07: INTERMEDIATE HTML

VIDEO 01: Section Intro HTML Tags, Code a Real Web Page

It’s about the introduction to html.

VIDEO 02: Basic Structure of an HTML Document

I’ve learnt about the basic structure of html . Here is the basic structure:

Section Intro Advanced HTML Techniques, HTML5

Here are a few problems with the approach based on the HTML class attribute.

The HTML class attribute is not meant to store data like this. Its main purpose is to allow the developer to assign style information to a set of elements.
Each additional piece of information requires us to add a new class to our element. This makes it harder to parse the data in JavaScript to actually get what we need.
Let’s say a given class name begins with numbers. If you decide to later style the elements based on that data in the class name, you will have to either escape the number or use attribute selectors in your style sheet.

Some more information about Intermediate HTML

The <p> tag specifies a paragraph HTML of text.
It is a block-level element.
The <p> element can only contain inline elements within it.
The browser adds margin automatically before and after the <p> tag element.
This tag supports all global and event attributes.

Tag	Description
<a>	Defines a hyperlink
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>	Defines navigation links.

6.LISTS:

<ul> :Defines an un ordered list.
<ol> :Defines an ordered list.
<dl> :Defines
description list.

7.IMAGES:

<img> :Defines an image.

Here there is no closing tag for image. using this image tag we can insert the images according to our project.8.TABLES:For creating layouts people were use tables.

<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table

9.FORMS:We use forms to login into Facebook , open a web page etc.

<form>	Defines an HTML form for user input
<input>	Defines an input control

<fieldset>	Groups related elements in a form
<legend>	Defines a caption for a <fieldset> element

Char	Number	Entity	Description
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS

CharNumberEntityDescription©©©COPYRIGHT SIGN®®®REGISTERED SIGN

Expert HTML 5

The <input type="email"> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and add “.com” to the keyboard to match email input.URL: The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds “.com” to the keyboard to match url input.

NUMBER:

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

RANGE:

DATE:

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

MONTH:

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

WEEK:

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

TIME:

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

DATE TIME-LOCAL:

The <input type="datetime-local"> specifies a date and time input field, with no time zone.

Depending on browser support, a date picker can show up in the input field.

COLOR:

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

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.

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model.

Explanation of the different parts:

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent.

5.INLINE CLASSES:

6.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.

There are three ways of inserting a style sheet:

External Style SheetInternal Style SheetMultiple Style SheetsEXTERNAL 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.7.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.

8.ID CLASS SELECTORS:

HTML HTML5

Here are a few problems with the approach based on the HTML class attribute.

The HTML class attribute is not meant to store data like this. Its main purpose is to allow the developer to assign style information to a set of elements.
Each additional piece of information requires us to add a new class to our element. This makes it harder to parse the data in JavaScript to actually get what we need.
Let’s say a given class name begins with numbers. If you decide to later style the elements based on that data in the class name, you will have to either escape the number or use attribute selectors in your style sheet.

->Download And Install 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 link
How to Install jQuery Plugins
Locate and download a jQuery plugin from the plugins page the jQuery website.
1. Open the downloaded plugin’s archive file and extract the “.js” file inside it. Some plugins may contain multiple JS files.
2. Open your Web page’s HTML file in a text editor.
3. Locate the line that begins with “
4. 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 jQuery selector 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 methodsfor different tasks e.g. manipulate DOM, events, ajax etc.

MYSQL DATABASES

Responsive Development using Bootstrap

<table> Classes. Use the classes below to style any table: Class. Description. …
<tr>, <th> and <td> Classes. Use the classes below to color table rows or cells: Class. Description. …
Responsive Tables. The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px).

WEB HOSTING

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.

Angular JS Expert

What are Plugin?

->How to start a wordpress blpog in 5 minutes

Introduction to PHP

Here are the things that i have learn in the course video

Thank you Sir.

14 06 19

Tejaswini

Website Speed Optimization – First Steps

Before getting into how to speed test your site, it makes sense to cover important concepts and tools in this area.

How a Webpage Loads

A basic thing to understand is how a web page ends up in front of a visitor. Knowing this will help you better understand where issues may arise and thus correct them.

First, the user opens a browser and puts in a web address. This creates a DNS request that resolves into the domain name provider, which points to a server. From there, the browser starts loading the files that make up your site:

HTML — Provides the main structure of your site. If you are using WordPress, the CMS dynamically produces it from PHP. The HTML document also includes calls to all following file types.
CSS — Responsible for styling, colors, dimensions, and more. Found in style sheets.
JavaScript — Mostly adds interactive elements and functionality to your site. Whenever something moves, it is often thanks to JavaScript.
Assets — Other files that provide parts of your site. The most common here are usually images.
External resources — Not everything that goes into your site lies on your own server. Some elements (like custom fonts) come from external sources.

Once the browser receives the files, it can start building and then rendering the content. The order and speed in which it receives files determine how fast visitors can see changes in their browser window. For a more detailed breakdown of how this works, check this article.

What’s important to note is that all of the above represent different HTTP requests. Having too many of them can already cause a slowdown. If you suspect that is the case, the linked post will tell you how to deal with it.

Important Speed Metrics

In addition to the above, in order to troubleshoot speed issues on your website, it’s good if you understand some basic metrics that influence the user experience while loading a page.

visualization of user experience during page load — Image Source

Time to first byte (TTFB) — Amount of time it takes for a browser to receive the first information from the site.
First paint — The moment the screen is no longer blank. For example, a background color change counts as first paint.
First contentful paint — When the first content appears. Might be part of the navigation, header image or any other element.
First meaningful paint — Here, users are able to see the primary content so that they can understand what the page is about.
Time to interactive — The duration until the page is usable and you can interact with it.

Many of the tools below will show you exactly this type of information.

important metrics for speed testing your website

Each step depends on different factors and thus needs different solutions when there is a problem. For example, if the time to first byte is very long, it’s often an indicator for a slow server. Thus, knowing the steps will help you pick up on where the process stalls and take targeted action.

Site Speed Testing Tools

Below are a number of tools you can use to test your site. They will give you different sets of data to understand how it is faring. Further below, we will discuss what to do with this data.

Lighthouse — A chrome extension that you can use to generate reports on any website’s accessibility, SEO, best practices, and performance. It’s able to simulate a mobile connection, uses many of the metrics above and gives recommendations on how to improve your site.
PageSpeed Insights — I have recommended this tool many times in other posts. It now comes with data from the Chrome User Experience Report, at least for popular sites. Aside from that, the service provides similar data as the Lighthouse extension.
Test Your Mobile Speed — A Google testing tool specifically for mobile speed. Allows you to simulate different locations and connection speeds, compare the results with competitors, evaluate the potential business impact of improving your loading speed and get tailored recommendations for different pages. You can also get a detailed report emailed to you.
Pingdom — The first non-Google tool for speed testing. Pingdom will give you a lot of the same information as PageSpeed Insights, however, in my opinion, easier to digest and understand. For example, it comes with a waterfall diagram to spot bottlenecks and has other information.
GTmetrix — Similar to Pingdom but with even more data. Can be a bit more overwhelming and less user-friendly but gives you a lot of information to work with.

In addition to the above, there are two other sources of information on how visitors see your site. The first is located in Google Search Console under Crawl > Crawl Stats.

how to speed test your website with google search console

Here, you can see the response time for when Google accesses your site. If the average is above 500ms, it’s time to take action

The second tool is the speed reports in your Google Analytics (find them under Behavior > Site Speed).

use google analytics data to speed test your website

Here, you get information about the page loading speed for different browsers and pages as well as suggestions for improvement. Be aware, that, by default, Google Analytics will only track this for 1 percent of your pages. To get more information, increase this number to 50 or 100 percent.

So, How Do You Use This to Speed Test Your Website Then?

Alright, now that you know what to look for and how to track it, here’s how you can you use the above information to test the speed of your website.

1. Test Your Homepage

A site’s front page often gets a large share of traffic. It’s also your site’s figurehead. For that reason, this page is one of the first things you should test. Doing so will also give you information about how your site fares in general.

Therefore, feel free to plug your homepage into one or more of the speed testing tools above. However, when you input the URL somewhere, it’s a good idea to add a cache buster parameter to it like so: https://yoursite.com/?cache=busted. That way, it doesn’t use any pre-loaded assets and you get closer to the experience that a first-time visitors would have.

If this makes a huge difference on your page, it might mean that you are relying too much on caching for speeding up your site. In that case, you should take action to make the experience better for those coming to your site for the first time. For repeat tests, add numbers to the end of the parameter (e.g. https://yoursite.com/?cache=busted2), otherwise, you might get cached results again.

2. Take Multiple Tests From Multiple Locations

Your site speed will be different depending on the time of day and location from which people access it. Thus, to get a more accurate reading about its situation, it’s best to take several measurements.

Ideally, you should schedule automatic tests every hour and let them run for a week. You can set up monitoring like this with GTmetrix and Pingdom but it’s not free. So, if that’s not something you want to pay for, at least do a number of manual tests at different times.

In addition to that, it makes sense to try several locations. You can use the same tools to do so, just note that you have to register for a (free) GTmetrix account to enable switching locations there.

Here, it’s important that you test according to your audience. If you have a local site (for example, one that is only available in your home country’s language), using the closest location to your server is enough. However, if you target an international audience, it makes sense to see what the experience is like for visitors from different locations.

3. Test Your Most Important Pages

At this point, you need to be aware that there is a difference between site speed and page speed. Site speed is the sum of the loading speed of all pages on your site. Page speed is how fast singular pages on it load.

For that reason, it’s not enough to simply test the front page of your website. This is especially important, since, in many cases, it is actually one of the least content-heavy pages you’ll have.

Theoretically, you should run tests on all of your pages, as most organic visitors do not come through the main address but random pages they find in search results. It’s possible to do so with crawlers, for example, Sitebulb or Screaming Frog (both paid products).

If you are not using those, depending on the size of your site, testing all pages isn’t all that practical. In that case, you should check at least your most important pages. You can find those via your analytics band Behavior > Site Content > Landing Pages.

These are the parts of your site that visitors mainly use to enter it. When you set yourself a goal to optimize at least the top 20 results, you already have your work cut out for you.

In addition, you might want to check the aforementioned page timings and order them by average page load time to find the worst offenders.

find worst performing pages in google analytics

Put those on your list of pages to optimize as well. Also, come back here after you have optimized your site as the average will change and there will be a new set of slowest pages.

4. Now Do the Same for Your Competition

After figuring out how your own site is faring in the above areas, if you still have energy, you might want to engage in some competitor analysis. That means, taking a handful of your closest competitors (business wise or in the search results) and put them through the same process.

Why?

Because speed might be something that you can beat them at. Studies have shown that people are likely to go to a competitor website if their first choice takes too long.

In addition to that, page loading speed might be the thing that puts you above your competitors in the SERPs. Since the majority of clicks go to the top Google results, that can never be a bad thing. For that reason, don’t forget to speed test the competition.

How to Use the Speed Test Results

Alright, by now you should possess a lot of information about your site’s speed profile. Now is the question, what do you do with it? Let’s talk about that quickly.

Focus on Real-Life Improvements

While many of the speed testing tools give you ratings and percentages, it’s important that you don’t concentrate on these scores. It’s possible to have a lot of green lights but still provide an abysmal user experience.

Instead, focus on what your visitors really care about: how many seconds it takes to load your pages. If you can improve that, it will make the most impact and also automatically lead to better scores. So, forget about the feel-good metrics and concentrate on producing real-life results.

How to do that? I’m glad you asked.

Fix Sitewide Problems First

When trying to speed up your WordPress website, it’s best to first focus on factors that affect all parts of it. By fixing general shortcomings, you can improve the page loading speed of all pages at once. Doing so will make the biggest difference for the largest share of visitors.

Examples of measures you can take in this area include:

All of this will affect your site as a whole, leading to great improvements.

After That, Focus on Single Pages

When you have taken measures to improve your site in general, you can then go ahead and deal with single pages. If your tests showed that some of the most important ones have bigger problems, it’s time to dive into the waterfall diagram and find out who is the culprit.

It could be an image that is too large, a remote script that would be better off hosted locally or any other of the many files that go into a page. Each instance is different, therefore, the solutions will vary. Improve one page after the other in the order of importance and you will make a big difference in the end.

Final Thoughts on How to Speed Test Your Website

Learning how to test your website for loading speed is a helpful skill in creating better, more user-friendly sites. The influence of page loading speed on website success is something many people underestimate. Only having proper data will allow you to take the right action in this area.

Above, you have gotten a first-rate education on performing a speed test on your WordPress site. You have learned what goes into loading a web page, important metrics for page loading speed and tools to measure them. You now also know how to apply that knowledge to your own site to make it faster.

The above should be enough to give your website a significant speed bump. When you do that, chances are good that it will improve the rest of your success metrics as well.

13 06 19

chandala_niharika

THINGS I’VE LEARNED IN WEB DEVELOPMENT COURSE

I’m CHANDALA NIHARIKA . I’m currently pursuing my B.tech in Dr.Lankapalli Bullayya College Of Engineering(women) in CSE department . I started learning web development course from 24.05.2019. This article is about the things i’ve learned from the web development course videos.

COMING TO THE THINGS I’VE LEARNED:

FOLDER 01 : Introduction Why This is The Only Design Development Course You’ll Ever Need

VIDEO 01: INTRODUCTION

It is about introduction about web designing i.e. what are the skills required for web designing, how to craft resume and negotiate a high salary etc.

VIDEO 02: WHAT YOU GET IN THIS COURSE

In this video i’ve learnt what are the skills required for web development as free lancer. The skills such as

html html
html5
css
css3
java script
jQuery1
jQuery3
Responsive
php
my sql
Angular js etc…

VIDEO 03: HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS, GRAPHICS MORE

I’ve learnt about free trial photoshop in websites such as

GIMP (gimp.org)
PIXLR(pixlr.com)
30-DAY PHOTOSHOP TRIAL (adobe.com/photoshop)

VIDEO 04: HOW MUCH SHOULD YOU CHARGE

I’ve learnt on what basis you should charge for your project such as

what’s the project?

who’s the client?

how much does it cost you basing on hours of work?

Is the project interesting?

VIDEO 05: PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE

I’ve learnt about how to charge for the work based on the time you have allocated to do project per hour.

FOLDER 02: INTRODUCTION TO VISUAL DESIGN

VIDEO 01:

It’s about the introduction to visual design.

VIDEO 02:

The basic elements of visual design are:

lines
shapes
colour palette
texture
typography
form

The basic 7 principles of visual design are:

space
dominance
hierarchy
unity
balance
rhythm
proportion

VIDEO 03: CRAP PRINCIPLES IN DESIGN

It’s about the principles about CRAP. They are:

C means CONTRAST
R means REPETITION
A means ALIGNMENT
P means PROXIMITY

VIDEO 04: TYPOGRAPHY

It’s about what typography is .. Typography is nothing but flow to message. It consists of ascender , X-height , cap height, descender…

VIDEO 05: SCIENCE OF COLOUR

VIDEO 06: DESIGNING WITH GRIDS

Grids are nothing but they keep content organized creates an order by distinguishing different types of information. They are 4 types of grids. They are:

single column grid
Multi column grid
Modular column grid
Hierarchical column grid

FOLDER 03: INTRODUCTION TO ADOBE PHOTOSHOP

VIDEO 01: Intro The 8020 Rule, Photoshop Basics, and More

It’s about the introduction to the photoshop.

VIDEO 02: Creating a New Photoshop Document

It’s about how to create a document using photoshop.

Steps for creating a document in photoshop:

Open Elements and select an editing mode. …
Choose File→New→Blank File in any workspace or press Ctrl+N (cmd+N). …
Select the attributes for the new file. …
Click OK after setting the file attributes to create the new document.

VIDEO 03:Photoshop Environment The Toolbar – Part 1

VIDEO 04:Photoshop Environment The Toolbar – Part 2

VIDEO 05:Photoshop Environment Palettes

It’s about the palettes of the photoshop. Palette is a thing which we can choose options from.

VIDEO 06: Photoshop Environment The Menu

It’s about the environment of the photoshop such as File, Edit, Image, Layer, Type, Select, Filter, 3D, View and information. Auto tone is used to modify the best tone of the photographs.

VIDEO 07:Photo Enhancement Manipulation

FOLDER 04: INTRODUCTION TO WEB DESIGN AND MORE PHOTOSHOP
VIDEO 01: Section Intro Web Design Basics, Wireframing, Photoshop

It’s about the essentials about photoshop and also introduction to web design.

VIDEO 02: Web Design Terminology The Jargon the Pros Use

VIDEO 03: The Four Phases of a Web Design Project Cost Estimates

I’ve learnt about the four phases such as Discovery phase, Creative Phase, Development Phase and Launch phase.

Discovery Phase : includes phone calls, messages, consultations, research , planning, scheduling, develop site structure

Creative Phase: includes User Experience design, Wire framing and Web Design Mockups.

Development Phase:

In this phase it consists of

Convert designs into HTML & CSS
Browser Testing

Launch Phase:

In this phase it consists of

Moving local website to live server
Client Training
Review

VIDEO 04: What is User Experience UX Design

I’ve learnt about User Experience Design. It consists of

Visual Design
Information Architechture
Usability
Research
Content Strategy
Interface design

User Experience Design educates and informs a user about the website

VIDEO 05: The Anatomy of a Website Design

I’ve have learnt about the common elements of website such as

Header & Navigation: Header is nothing but logo and navigation is the links used.
Call to Action: tells user what they should do
Primary Content : High lights the main article
Secondary Content
Tertiary content
Side bar
Footer

VIDEO 06: The 960 Grid System Free Photoshop Downloads

I’ve learnt about 960.gs which is used to generate Boot strap and templates such as omnigraffe and photoshop

FOLDER 06: INTRODUCTION TO HTML

VIDEO 01: Section Intro HTML Fundamentals, First Webpage, Course Files

It is about the introduction to html. HTML is nothing but hyper text mark up language

VIDEO 02: The Basics of HTML Tags, Attributes, Elements

Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

I’ve learnt about elements such as tags, attributes , Elements.

VIDEO 03: Basic File Folder Structure of a Website

I’ve learnt how to keep folder names for a website folder . For Example for home page keep it as index.html and for images create a images folder.

VIDEO 04: Your Must Have Tool A Good Code Editor

It’s about the text editors to write code for website. They are sublime, Text Wrangler, Notepad++, Brackets, Coda2 etc..

VIDEO 05:Hello World Create Your Very First Web Page

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</html>

FOLDER 07: INTERMEDIATE HTML

VIDEO 01: Section Intro HTML Tags, Code a Real Web Page

It’s about the introduction to html.

VIDEO 02: Basic Structure of an HTML Document

I’ve learnt about the basic structure of html . Here is the basic structure:

FOLDER 08: ADVANCED HTML HTML5

VIDEO 01: Section Intro Advanced HTML Techniques, HTML5

VIDEO 02: IDs Classes

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.

VIDEO 03: Span Div Tags

VIDEO 04: Intro to HTML5 Tags Header, Footer, Nav, Section, Article, Aside Time

I’ve learnt about Html5 tags. The following are some of them

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

FOLDER 09: EXPERT HTML HTML5

VIDEO 01: Section Intro Expert HTML5 techniques

It’s about the introduction to Expert Html.

VIDEO 02: New HTML5 Inputs

HTML5 added several new input types. some of them are:

color.
date.
datetime-local.
email.
month.
number.
range.
search.

VIDEO 03: Making Internet Explorer Compatible with HTML5

The following are the steps for making Internet Explorer compatible with

HTML 5:

Click Start.
On the search bar, type Internet Options, and click on Internet Options from the results.
Click on the Advanced tab.
Under Multimedia, check Enable alternative codecs in HTML5 media elements.
Restart your computer.

VIDEO 04: HTML5 Data Attribute

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

FOLDER 10: INTRODUCTION TO CSS

VIDEO 01: Section Intro Essentials of CSS Download Course Files

VIDEO 02: What is CSS All the basics you need to know

CSS (Cascading Style Sheets) is what makes web pages look good and presentable.
There are typically three ways we do that.

Inline CSS. First off, we can include CSS directly in our HTML elements. …
Internal CSS. …
External CSS.

VIDEO 03: Inheritance of Styles

VIDEO 04: Measurements The Box Model

VIDEO 05: Inline CSS

VIDEO 06: Internal CSS

VIDEO 07: External CSS

VIDEO 08: ID Class Selectors

VIDEO 09: Descendant Selectors

VIDEO 10: Grouping Selectors

VIDEO 11: Specificity

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

FOLDER 11: INTERMEDIATE CSS

I’ve learnt about the colors, text styling forms, borders, background image and styling links.

FOLDER 12: ADVANCED CSS

VIDEO 01: Styling Web Forms

I’ve learnt how to write style sheets for a form to look beautiful using css

VIDEO 02: Block, Inline and Inline-Block Elements

We can add margins and padding on all four sides of any block element — top, right, left, and bottom.

Some examples of block elements are <div> and <p> tags. …
Inline Elements.
Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. …
Inline–Block.

VIDEO 03: Understanding Float Clear once and for all

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

left – The element floats to the left of its container
right- The element floats to the right of its container
none – The element does not float (will be displayed just where it occurs in the text). This is default
inherit – The element inherits the float value of its parent

VIDEO 04: Relative, Absolute Fixed Position

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, likefixed).

FOLDER 13: EXPERT CSS CSS3

VIDEO 01: Section Intro What is CSS3 Course Files Download

VIDEO 02: CSS3 Box Sizing Round Corners

VIDE0 03: CSS3 Colours Gradients
CSS Linear Gradients. To create a linear gradient you must define at least twocolor stops. Color stops are the colors you want to render smooth transitions among.

VIDEO 04: CSS3 Shadows

The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur etc…

VIDEO 05: CSS3 Columns
The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns.

VIDEO 06: CSS3 Animations Transitions

FOLDER 15: Introduction to Javascript

VIDEO 01: Section Intro What is Javascript, The 8020 Rule Course Files Download
JavaScript (JS) is a lightweight interpreted or just-in-time compiled programming language with first-class functions.

VIDEO 02: Internal External Javascript

External scripts are practical when the same code is used in many different web pages. JavaScriptfiles have the file extension .js.

VIDEO 03: Basic Syntax of Javascript and many other programming languages
JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.

VIDEO 04: Javascript Output

VIDEO 05: Javascript Variables

VIDEO 06: Javascript Arrays

An array is a special variable, which can hold more than one value at a time.

VIDEO 07: Javascript Functions

A function is a group of reusable code which can be called anywhere in your program. Some of the java script functions are alert() and write().

Example:

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

VIDEO 08: Javascript If Else Statements

The if/else statement executes a block of code if a specified condition is true. If the condition is false, another block of code can be executed. The if/else statement is a part of JavaScript’s “Conditional”Statements, which are used to perform different actions based on different conditions.

FOLDER 16: Introduction to jQuery

VIDEO 01: Section Intro What is jQuery Course Files

It’s about the introduction to jQuery

VIDEO 02: Download Install jQuery

I’ve learnt how to download and install jQuery

VIDEO 03:The Simple Syntax of jQuery

jQuery syntax is made by using HTML elements selector and perform some action on the elements are manipulation in Dot sign(.).

jQuery basic syntax:

$(document).ready(function() { $(selector).action(); });

VIDEO 04: jQuery Selectors

VIDEO 05: jQuery Event Methods

I’ve learnt about jQuery event methods some of them are:

click() :The click() method attaches an event handler function to an HTML element. …
dblclick() :The dblclick() method attaches an event handler function to an HTML element.

FOLDER 17: Intermediate jQuery

VIDEO 01: Section Intro jQuery Deep Dive

It’s about the introduction to the jQuery and what are the things essential in jQuery.

VIDEO 02: jQuery Chaining

jQuery Chaining provides strong feature called chaining method that allows us to run multiple jQuery methods on the element within a single statement.

VIDEO 03: Hiding, Showing Fading Content with jQuery

jQuery hide() : Hides the Syntax or the element of html that you want to hide

Syntax: .$(selector).hide(speed, callback);

jQuery show() : Shows the syntax or the element of html that you want the user to see.

Syntax: .$(selector).show(speed, callback);

VIDEO 04: The jQuery Animate Method

VIDEO 05: Modifying CSS with jQuery

The css() method sets or returns one or more style properties for the selected elements.

Syntax:

$(selector).css(property,value)

FOLDER 18: jQuery UI Advanced jQuery

VIDEO 01: Section Intro What is jQuery UI Course Files

VIDEO 02: jQuery UI Draggable

The draggable (option) method specifies that an HTML element can be moved in the HTML page. Here, the option parameter specifies the behavior of the elements involved.

Syntax:
$(selector, context).draggable(options);

VIDEO 03: jQuery UI Droppable

Syntax:
$(selector, context).droppable (options);

VIDEO 04: jQuery UI Sortable

jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string

VIDEO 05: jQuery UI Accordion

Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.

Syntax:

The accordion() method can be used in two forms −

VIDEO 06: jQuery UI Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.

FOLDER 19: Responsive Design Development using Bootstrap

VIDEO 01: Section Intro What is Responsive Design Bootstrap Course Files

It’s about the introduction to responsive design and bootstrap .Bootstrap is a free and open-source framework for creating websites and web applications.

VIDEO 02: Getting Started with Bootstrap

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

VIDEO 03: Quickly Prototype with the Free Examples

A website prototype can be any mock-up or demo of what a website will look like when it goes live. It can be anything from a paper sketch, to a clickable HTMLprototype.

VIDEO 04: Understanding the Bootstrap Grid System

VIDE0 05: Responsive Forms
Responsive form elements span 100% by default; their width is designed to be constrained by the existing grid system. This makes them extremely flexible.

VIDEO 06: Responsive Tables, Buttons and Images
Responsive is a method for providing the browser with multiple image sources depending ondisplay density, size of the image element in the page, or any number of other factors. Often, when people talk about responsive images, they are referring to solutions for inline images.

VIDEO 07: Helper Classes Responsive Utilities

VIDEO 08: Using Glyphicons Font Icons

Bootstrap includes 260 glyphs from the Glyphicon Halflings set.

VIDEO 09: Bootstrap Navbar

With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class=”navbar navbar-default”> .

VIDEO 10: Bootstrap Modal Window

Then include the two data-* attributes:

data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal

The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (“myModal”).

The .modal class identifies the content of <div> as a modal and brings focus to it.

The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.

The attribute role="dialog" improves accessibility for people using screen readers.

The .modal-dialog class sets the proper width and margin of the modal.

VIDEO 11: Bootstrap ScrollSpy

Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).

Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.

VIDEO 12: TOGGLABLE TABS

VIDEO 13 :SLIDING CAROUSEL

FOLDER 21: WEB HOSTING DOMAINS

VIDEO 01: Section Intro What is Web Hosting

A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their website accessible via the World Wide Web.

VIDEO 02: Purchasing a Bundled Domain Name Hosting Package

VIDEO 03: The Hosting Control Panel a.k.a. cPanel

VIDEO 04: Understanding FTP How to Upload a Website to Your Live Serve

HOW TO ESTABLISH AN FTP SESSION FROM THE COMMAND PROMPT

Establish an Internet connection as you normally do.
Click Start, and then click Run. …
A command prompt will appear in a new window.
Type ftp <insert your FTP host address here> …
Press Enter.

FOLDER 22: INTRODUCTION TO PHP

VIDEO 01: Intro What is PHP What Does It Do Course Files

VIDEO 02: BASIC PHP SYNTAX

I’ve learnt about PHP syntax

VIDEO 03: PHP VARIABLES AND CONSTANTS

VIDEO 04: PHP ARRAYS ASSOCIATIVE MULTI – DIMENSIONAL

I’ve learnt about the arrays in Php.

An array is created using an array() function in PHP.

There are basically three types of arrays in PHP:

Indexed or Numeric Arrays: An array with a numeric index where values are stored linearly.
Associative Arrays: An array with a string index where instead of linear storage, each value can be assigned a specific key.
Multidimensional Arrays: An array which contains single or multiple array within it and can be accessed via multiple indices.

FOLDER 23: INTERMEDIATE PHP

VIDEO 01: SECTION INTRO LETS DIVE DEEPER INTO PHP

I’ve learnt about the introduction to php.

VIDEO 02: IF, ELSE and ELSE IF Statements

I’ve learnt about if and else statements in php and also else if statements in php

if statement – executes some code if one condition is true
if...else statement – executes some code if a condition is true and another code if that condition is false
if...elseif....else statement – executes different codes for more than two conditions

Syntax:

if (condition) {
code to be executed if condition is true;
}

VIDEO 03: PHP Loops WHILE, For, Foreach DO WHILE

I’ve learnt about the php loops.

syntax for for loop:

for (init counter; test counter; increment counter) {
code to be executed;
}

Syntax for foreach loop:

foreach ($array as$value) {
code to be executed;
}

VIDEO 04: PHP Functions Arguments

I’ve learnt about PHP functions and arguments

syntax:

function functionName() {
code to be executed;
}

VIDEO 05: _GET and _POST

I’ve learnt about GET and POST methods . GET method is to get data from the database and POST method is used to insert data into database

FOLDER 24: INTRODUCTION TO MySQL DATABASES

VIDEO 01: INTRO WHAT IS MySQL COURSE FILES

It consists of what MySql is… Sql is nothing but structured query language which manipulates the information in the database.

VIDEO 02: CREATING YOUR FIRST MySQL DATABASE phpMyAdmin

It consists how to create database and tables using xampp in php my admin.

VIDEO 03: Establishing a MySQL Connection with PHP

I’ve learnt how to establish a connection with my SQL using php

VIDEO 04: SELECTING DATA FROM A DATABASE AND DISPLAYING IT ON YOUR WEB PAGE

I’ve learnt how to select data from database and display on the webpage using mySQL and php

syntax of MySQL query:

SELECT column1, column2, …….FROM table_name;

VIDEO 05: Insert Data into Your Database from a Web Page

I’ve learnt how to insert data from web page to database using MySQL and php

Syntax of MySQL query:

**INSERT INTO table_name (column1, column2, column3,…)VALUES (value1, value2, value3, …);**

VIDEO 06: Password Hashing for securely storing passwords

I’ve learnt about storing of passwords.

password_hash() – used to hash the password.
password_verify() – used to verify a password against its hash.
password_needs_rehash() – used when a password needs to be rehashed.
password_get_info() – returns the name of the hashing algorithm and various options used while hashing.

VIDEO 07:Using PHP Sessions to Store Global Variable

I’ve learnt about the sessions and how to store them using php.

Example:

<?php
// Start the session
session_start();
?>

<?php
// Set session variables
$_SESSION[“favcolor”] = “green”;
echo “Session variables are set.”;
?>

FOLDER 26: WordPress Websites

Steps to Provide WordPress Security:

Change the ‘admin’ login. …
Use strong passwords everywhere. …
Use the latest version of WordPress. …
Mind your plugins. …
Delete any plugins or themes you’re not using. …
Use .htaccess files to protect the ‘wp-admin’ and other directories. …
Install and activate anti-virus and anti-spyware software on your computer.

FOLDER 27: Career Development How to Start Your Web Design Development Career

Steps to start your career as web developer:

Build a Portfolio Site Full of Relevant Work. …
Do Freelance Projects. …
Put Your Code on Github. …
Contribute to an Open Source Project. …
Participate in a Hackathon. …
Meet Techies Online and IRL. …
Follow Industry News. …
Learn New, Relevant Skills Regularly.

FOLDER 28: AngularJS Quick Start Build a Single-Page Web Application NEW

Every angular application starts from creating a module. Module is a container for the different parts of your application: controllers, service, etc.

var app = angular.module('myApp', []);

`MVL means MODEL-VIEW-CONTROLLER.MODEL: Database communicationVIEW: content displayed on screenCONTROLLER: Ties the model and view together.`

13 06 19

Duvvari Kalyani

SUMMARY-2

I’m D.kalyani. In this article i’m going to share “What i’ve learned from the course videos”.

From the video-1:Introduction to Why This is The Only Design Development Course You’ll Ever Need

From these videos I learnt about the photoshop using different tools.
next I participated in photoshop quiz and secured 100%marks

video-2: Introduction to web design

From these videos I learned about

The Basic Element Principles Of Visual Design are
- balance
- Rhythm
- Proportion
- Space
- Dominance
- Hierarchy
- Unity
CRAP Principles
where
- C-CONTRAST
- R-REPETITION
- A-ALIGNMENT
- P-PROXIMITY
Typography Basics
- In this video I learned about What is Serif.

video-3: Introduction to photoshop.

From the video-3: I have learned about “The four phases of a Web Design Project Cost Estimates”.

Adobe Photoshop Adobe Photoshop is very easy to understand and make websites as a web designer. We get results in it easily. We can also create some web graphics and designs for business.
-> Creating Photoshop document Is used for modifying or editing images. We open a file with the filename and many features are available in Photoshop like preset, size, content ,colour profile ,mode and ratio.
-> Photoshop environment Adobe Photoshop is a creative version. We can drag images from desktop to Photoshop document. You shortcuts For tools and edit images and text. -> -> We can make magic out of this Photoshop. Shapes, colour ,strokes ,resize, border are available in Photoshop along with graphic design.
-> Photoshop environment palettes,. From different options in Photoshop we can create pallets, layers, case, enlarge ,screen dark ,customise and ,styles in Photoshop.
-> The menu Many options are present in Photoshop as directory hdr, adjustment ,tone colour, style, mode, blur in the menu.
-> Enhancement manipulation Scenery can be changed in Photoshop using the tool for location. It is mostly used in creative market. We Remove unwanted background and manipulate images in Photoshop.

video 4:-web design and Photoshop.

I lerarned about basic tools like wirw framing,mood board,rough,comp,mockup, and abouy users.

Different phases about web design:-

1.Discovery phase

2.creative phase

3.development phase

4.launch phase

–> learned about tools and strategies of user experience ux design.,Blog landing page,free photoshop downloads.

Video-5:Advanced Web Design Challenge

we learned about challenging works in designing.About:

–>creating sitemap,sketching wire frame.

–>phase design in photoshop.

–>getting feed back on design.

–>Flasties tool for designing and sharing concepts.

video 6: Introduction to html

–>I have learned about basic structure of html.

–>i have learned about heading and paragraph tags,its emphasis,hyperlinks,lists,inserting images,tables,entities.

–>also learned about creating web pages easily by using forms.

video 7:-Advanced html and html html5

I have learned different topics on:

–>Introduction to html.about its ID’s and classes.

–>Div and span tags.About web pages. Introduction to expert html5.

–>Coding a web page using html5,html inputs such as labels,range,,form-num…and coding through internet explorer.data attributes in html5.

video 8:-about css topics

—> I learned about basics of css like syntax,selectors,properties,values,inheritence of styles.measurements,margins,inline elements,inline css,descendant selectors,box models,external css,ID and class selectors,grouping selectorsand design a web page.

video 9:about intermediate css

–> understood introduction about intermediate css,different colors in web page.And also learned about:

–> text formatting using different styles,borders with different box shapes and sizes,background images and styling different links.

video10: About css3 introduction.

–> Learned about how tyo change sizer of box and shape,gradients and transparecy of colors using css3,creating shadows of texts,divinding coloumns,creating animations,buttons,edit different images in photoshop,orbit animations of earth and moon using css3.

video 11:About Advanced css introduction.

–> Learned about styling forms,inline elements and blocks,float and clear pages using css,positioning such as relative,absolute,fixed,code for google landing page,style sheets for google landing page,photo shop development,and publish in css validator.

video 12: About javascript introduction.

–>About syntax,statements, and case sensitive,of javascript.Its java script output,variables,js arrays,functions,code for calculator, and ifelse functions in java script.

video 13: About jquery introduction.

we understood about jquery introduction,download and install it,syntax of jquery,event methods using jquery and jquery selectors.

video 14: About intermediate jquery introduction

–>we learned about jquery chaining,code for hide and share content,animations,code for car race,modifyinmg css,jquery ui,code for draggong and drop,sorting code,accoprdation,date picker, and listing.

video 15: About Bootstrap introduction.

–>Introduction to bootstrap responsive design.

–>get started with bootstrap,examples,grid system in bootstrrap,craeting responsive forms,tables,buttons and images.also learned about bootstarp helper classes.

video-16: Introduction to web hosting

–> purshasing domains and hoisting,understanding cpanel,ftl and uploading website,and learned about websites.

video 17: Introduction to php

–>php syntax,variables and constants,click baits headlines,arrays in php,functions,different loops lkike while,for,foreach, and dowhile,arguments,get and post, if else statements.

video 18:introduction to database

–>learned to establish a connection between database and php.

–>learned how to select data from database from webpage,and insert data to web page,password hashing,sessions using php,login form using php,html and my sql.

–>creating address book using php and my sql.

video 19: Introduction to wordpress.

–> understood about wordpress.com and wordpress.org.

–>to install,login ,piugins and apply customize themes.dashboard i.e,jetpack,posts,media,appearance,users..etc.how to apply wordpress sites,Xtheme,and their usage.wordpress security,its open source,and back up deatails.publishing products.

video 20: Introduction to career options.

–> I have learned about cultivating career,success,freelance working,quiting job,writing resume,angular js,http,creating n editing data and custom filters and interfaces.

13 06 19

yalamanchili bhavana

SUMMARY-2

I’m y.bhavana. In this article i’m going to share “What i’ve learned from the course videos”.

From the Video 01:

Introduction Why This is The Only DesignDevelopment Course Youll Ever Need.

From these videos i’ve learnt photoshop using different tools .I also know about the skills needed for web developer to complete the projects.

VIDEO 02:

Introduction to web design .

From these videos I’ve learnt about:

The basic element principles of visual design are:

balance
rythmn
propotion
space
dominance

the hierarchy unity crap principles are:

C-CONTRAST
R-REPETION
A-ALIGNMENT
P-PROXIMITY

TYPOGRAPHY BASICS-

In this video I learned about What is Serif.

video-3: Introduction to photoshop.

From the video-3: I have learned about “The four phases of a Web Design Project Cost Estimates”.

video 4:-web design and Photoshop.

I lerarned about basic tools like wirw framing,mood board,rough,comp,mockup, and abouy users.

Different phases about web design:-

1.Discovery phase

2.creative phase

3.development phase

4.launch phase

–> learned about tools and strategies of user experience ux design.,Blog landing page,free photoshop downloads.

Video-5:Advanced Web Design Challenge

we learned about challenging works in designing.About:

–>creating sitemap,sketching wire frame.

–>phase design in photoshop.

–>getting feed back on design.

–>Flasties tool for designing and sharing concepts.

video 6: Introduction to html

–>I have learned about basic structure of html.

–>i have learned about heading and paragraph tags,its emphasis,hyperlinks,lists,inserting images,tables,entities.

–>also learned about creating web pages easily by using forms.

video 7:-Advanced html and html html5

I have learned different topics on:

–>Introduction to html.about its ID’s and classes.

–>Div and span tags.About web pages. Introduction to expert html5.

–>Coding a web page using html5,html inputs such as labels,range,,form-num…and coding through internet explorer.data attributes in html5.

video 8:-about css topics

video 9:about intermediate css

–> understood introduction about intermediate css,different colors in web page.And also learned about:

–> text formatting using different styles,borders with different box shapes and sizes,background images and styling different links.

video10: About css3 introduction.

video 11:About Advanced css introduction.

video 12: About javascript introduction.

–>About syntax,statements, and case sensitive,of javascript.Its java script output,variables,js arrays,functions,code for calculator, and ifelse functions in java script.

video 13: About jquery introduction.

we understood about jquery introduction,download and install it,syntax of jquery,event methods using jquery and jquery selectors.

video 14: About intermediate jquery introduction

video 15: About Bootstrap introduction.

–>Introduction to bootstrap responsive design.

–>get started with bootstrap,examples,grid system in bootstrrap,craeting responsive forms,tables,buttons and images.also learned about bootstarp helper classes.

video-16: Introduction to web hosting

–> purshasing domains and hoisting,understanding cpanel,ftl and uploading website,and learned about websites.

video 17: Introduction to php

–>php syntax,variables and constants,click baits headlines,arrays in php,functions,different loops lkike while,for,foreach, and dowhile,arguments,get and post, if else statements.

video 18:introduction to database

–>learned to establish a connection between database and php.

–>learned how to select data from database from webpage,and insert data to web page,password hashing,sessions using php,login form using php,html and my sql.

–>creating address book using php and my sql.

video 19: Introduction to wordpress.

–> understood about wordpress.com and wordpress.org.

–>to install,login ,plugins and apply customize themes.dashboard i.e,jet pack,posts,media,appearance,users..etc.how to apply wordpress sites,X theme,and their usage.wordpress security,its open source,and back up deatails.publishing products.

video 20: Introduction to career options.

–> I have learned about cultivating career,success,freelance working,quiting job,writing resume,angular js,http,creating n editing data and custom filters and interfaces.

Summary

Summary

Summary Article

FOLDER 01 : Introduction Why This is The Only Design Development Course You’ll Ever Need

VIDEO 01: INTRODUCTION

VIDEO 02: WHAT YOU GET IN THIS COURSE

VIDEO 03: HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS, GRAPHICS MORE

VIDEO 04: HOW MUCH SHOULD YOU CHARGE

VIDEO 05: PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE

FOLDER 02: INTRODUCTION TO VISUAL DESIGN

VIDEO 01:

VIDEO 02:

VIDEO 03: CRAP PRINCIPLES IN DESIGN

VIDEO 04: TYPOGRAPHY

VIDEO 05: SCIENCE OF COLOUR

VIDEO 06: DESIGNING WITH GRIDS

FOLDER 03: INTRODUCTION TO ADOBE PHOTOSHOP

VIDEO 01: Intro The 8020 Rule, Photoshop Basics, and More

VIDEO 02: Creating a New Photoshop Document

VIDEO 03:Photoshop Environment The Toolbar – Part 1

VIDEO 04:Photoshop Environment The Toolbar – Part 2

VIDEO 05:Photoshop Environment Palettes

VIDEO 06: Photoshop Environment The Menu

VIDEO 07:Photo Enhancement Manipulation

FOLDER 04: INTRODUCTION TO WEB DESIGN AND MORE PHOTOSHOP VIDEO 01: Section Intro Web Design Basics, Wireframing, Photoshop

VIDEO 02: Web Design Terminology The Jargon the Pros Use

VIDEO 03: The Four Phases of a Web Design Project Cost Estimates

VIDEO 04: What is User Experience UX Design

VIDEO 05: The Anatomy of a Website Design

VIDEO 06: The 960 Grid System Free Photoshop Downloads

FOLDER 06: INTRODUCTION TO HTML

VIDEO 01: Section Intro HTML Fundamentals, First Webpage, Course Files

VIDEO 02: The Basics of HTML Tags, Attributes, Elements

VIDEO 03: Basic File Folder Structure of a Website

VIDEO 04: Your Must Have Tool A Good Code Editor

VIDEO 05:Hello World Create Your Very First Web Page

FOLDER 07: INTERMEDIATE HTML

VIDEO 01: Section Intro HTML Tags, Code a Real Web Page

VIDEO 02: Basic Structure of an HTML Document

FOLDER 08: ADVANCED HTML HTML5

VIDEO 01: Section Intro Advanced HTML Techniques, HTML5

VIDEO 02: IDs Classes

VIDEO 03: Span Div Tags

VIDEO 04: Intro to HTML5 Tags Header, Footer, Nav, Section, Article, Aside Time

FOLDER 09: EXPERT HTML HTML5

VIDEO 01: Section Intro Expert HTML5 techniques

VIDEO 02: New HTML5 Inputs

HTML5 added several new input types. some of them are:

VIDEO 03: Making Internet Explorer Compatible with HTML5

VIDEO 04: HTML5 Data Attribute

FOLDER 10: INTRODUCTION TO CSS

VIDEO 01: Section Intro Essentials of CSS Download Course Files

VIDEO 02: What is CSS All the basics you need to know

VIDEO 03: Inheritance of Styles

VIDEO 04: Measurements The Box Model

VIDEO 05: Inline CSS

VIDEO 06: Internal CSS

VIDEO 07: External CSS

VIDEO 08: ID Class Selectors

VIDEO 09: Descendant Selectors

VIDEO 10: Grouping Selectors

VIDEO 11: Specificity

FOLDER 11: INTERMEDIATE CSS

FOLDER 12: ADVANCED CSS

VIDEO 01: Styling Web Forms

VIDEO 02: Block, Inline and Inline-Block Elements

VIDEO 03: Understanding Float Clear once and for all

VIDEO 04: Relative, Absolute Fixed Position

FOLDER 13: EXPERT CSS CSS3

VIDEO 01: Section Intro What is CSS3 Course Files Download

VIDEO 02: CSS3 Box Sizing Round Corners

VIDE0 03: CSS3 Colours GradientsCSS Linear Gradients. To create a linear gradient you must define at least twocolor stops. Color stops are the colors you want to render smooth transitions among.

VIDEO 04: CSS3 Shadows

VIDEO 05: CSS3 Columns The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns.

VIDEO 06: CSS3 Animations Transitions

FOLDER 15: Introduction to Javascript

VIDEO 01: Section Intro What is Javascript, The 8020 Rule Course Files Download JavaScript (JS) is a lightweight interpreted or just-in-time compiled programming language with first-class functions.

VIDEO 02: Internal External Javascript

VIDEO 03: Basic Syntax of Javascript and many other programming languages JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.

VIDEO 04: Javascript Output

FOLDER 04: INTRODUCTION TO WEB DESIGN AND MORE PHOTOSHOP
VIDEO 01: Section Intro Web Design Basics, Wireframing, Photoshop

VIDE0 03: CSS3 Colours Gradients
CSS Linear Gradients. To create a linear gradient you must define at least twocolor stops. Color stops are the colors you want to render smooth transitions among.

VIDEO 05: CSS3 Columns
The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. The column-width part will define the minimum width for each column, while the column-count part will define the maximum number of columns.

VIDEO 01: Section Intro What is Javascript, The 8020 Rule Course Files Download
JavaScript (JS) is a lightweight interpreted or just-in-time compiled programming language with first-class functions.

VIDEO 03: Basic Syntax of Javascript and many other programming languages
JavaScript can be implemented using JavaScript statements that are placed within the <script>… </script> HTML tags in a web page.

VIDE0 05: Responsive Forms
Responsive form elements span 100% by default; their width is designed to be constrained by the existing grid system. This makes them extremely flexible.

**INSERT INTO table_name (column1, column2, column3,…)VALUES (value1, value2, value3, …);**