Hackathon

Hackathon started with completing our tasks like:

1.resume

2.portfolio

3. creating twitter account etc…

These tasks are about start the program

Then we start searching for API ‘s to use in our website

In our website we these API’s:

1.google api

2.crimedata api

3.email validation

These API’s are we used in our unique idea about rentme.com. which is about renting vehicles by near places.

Our logo design is

Description: a platform for bikes and road transport rentals

Then we created wireframe for our website

And by using zapper.com we handling our social media accounts

https://www.facebook.com/rentme.rentme.5

RENT me.
Platform for bike,bicycles,trucks,van,car and bus rentals..#GOHT #VizagStartups #HackaThon pic.twitter.com/T3LM26vOjx
— RENT me (@RENTme10) June 18, 2019

Screenshot_20190618_210455 Download

19 06 19

Summary Article On Base Course

I’m S.Neelima pursuing B.tech in Dr.Lankapalli Bullayya College Of Engineering(women) at 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.

Image result for PHOTOSHOP ENVIRONMENT TOOLBAR

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

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

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.

Image result for animation transition pics

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.

Image result for syntax of java script pics

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

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

Image result for bootstrap navbar images

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.

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

Image result for mysql connection with php pics

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.

Image result for wordpress dashboard pics

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`

THANK YOU.

19 06 19

SUMMARY ARTICLE ON BASE COURSE

I’m N.PRASANNA . I’m 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.

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.

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.

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.

Image result for html5 input types images

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.

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.

Thanking you sir,

yours faithfully,

19 06 19

Hackathon experience

Iam P.Sai Lakshmi participated in hackthon conducted by vizag startups.Iam very glad that iam part of this hackthon.This is a great oppurtunity for improving my skills.

Our tasks for today include the following

Portfolio
graphical resume
Completion of watching videos
Defining a problem API
Establishing a company
Create a logo for the company

The logo This is the logo we have created for our website. We have edited the logo by using BrandCrowd.com

Description of the company
NAME: FLY TO METRO
” Fly to metro” is a website which is used to search and find the stations near to our locations .Using this we can find the available trains .We can also calculate the distance from our location to station

19 06 19

SUMMARY ARTICLE OF BASE COURSE

I’m T.JAYA SATYA SAI . I’m 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.

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`

19 06 19

Summary article on common folder

things that i have learnt from the common folder:

I am pavithra tippana 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

19 06 19

Article on Course Folder

I’m Potnuru Sukanya. 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

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

IDEO 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

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.

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

19 06 19

HACKATHON SUMMARY

I’m very glad that I’m part of this hackathon program and will consider this as an important opportunity for the progress of my skills..

Our tasks for today include the following

portfolio
graphical resume
completion of watching videos
defining a problem API
establishing a company
create a logo for the company
prepare a wireframe

THE LOGO WE DESIGNED FOR OUR PROJECT

THE NAME OF OUR PROJECT IS

SHAYARI

HIDDEN THOUGHTS…!

“Why should poets care?” The answer is blowing in the data winds. Internet technology is making words endlessly manipulable, and traditional poets and writers are getting left behind. I want to change this, by giving us all a leg up into a more empowered future.

IMG4Me is a free service to convert your text into image. You can use this service to prevent crawlers and robots from copying your email address, articles, or website contents. Meanwhile, you can handle encoding errors as well if your text is in non-English characters.

19 06 19

HACKATHON TWEET

Hello This is SANAPALA REVATHI, Now I am going to share my HACKATHON experience part-1 held in our college.

At first we were asked whether everyone had completed all the tasks, Next every team has been given a virtual 300$ and each of us divided as

1.CEO

2coder

3.designer

This is the logo that we have created for our work which also indicates the name of the company “ CLEAN AIR-CLEAN LIFE“.

DESCRIPTION OF THE COMPANY

NAME: CLEAN AIR -CLEAN LIFE

We travel not to escape life, but for life not to escape us.”

The results released in a recent study by World Health Organisation (WHO) titled Air Pollution and Child Health: Prescribing Clean Air, has shocked many. Dubbing air pollution as one of the leading killers of children worldwide, the study throws light on how children are more susceptible to air pollution during their fetal development and in their earliest years. And that’s because children breathe faster than adults. “Their lungs, organs and brains are still maturing. They breathe faster than adults, taking in more air and, with it, more pollutants. Newborns and infants, meanwhile, spend most of their time indoors, where they are more susceptible to HAP (household air pollution),” mentions the study.

CLEAN AIR-CLEAN LIFE CAN HELP TO FIND THE AIR QUALITY OF THE OUTDOORS , WHICH CAN MAINLY HELP TO PROTECT BABIES AND CHILDREN

How pollution can affect a baby

A sample wire frame design of our company is designed which is not yet finalized but just a rough copy of the main dimensions and links that are available in CLEAN AIR-CLEAN LIFE.Let’s Go

The work for day 1 is being updated via twitter and other sites with the help of our teammates namely CEO,DESIGNER and CODER.

THANK YOU.

19 06 19

Article on Hackathon experience

I along with my teammates had participated in “Game of hackathons”which was s a wonderful platform conducted by Vizag startups for us to take initiate on our current ideas and to tackle with them . One such idea that arose was ChangeMakers

yesterday ,we were asked to just get all our tasks done before we kick start our project and after a while we have mentors helping us around with our queries on different topic

At first we were asked whether everyone had completed all the tasks, Next every team has been given a virtual $300 and each of us divided as

1.CEO

2coder

3.designer

We created a logo and wire frame of our Website. we need to complete landing page.

Hackathon

Hackathon

Summary Article On Base Course

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 I’ve learnt on what basis you should charge for your project such as

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 DownloadJavaScript (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

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, …);**