19 06 19

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

Image result for colour picker images
            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:

  1. Open Elements and select an editing mode. …
  2. Choose File→New→Blank File in any workspace or press Ctrl+N (cmd+N). …
  3. Select the attributes for the new file. …
  4. 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 <spantag is used for grouping and applying styles to inline elements. The difference between the <spantag and the <divtag is that the <spantag is used with inline elements whilst the <divtag 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:

  1. Click Start.
  2. On the search bar, type Internet Options, and click on Internet Options from the results.
  3. Click on the Advanced tab.
  4. Under Multimedia, check Enable alternative codecs in HTML5 media elements.
  5. 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

Descendant Selector Example

     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. …
  • InlineBlock.

       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

positionabsolute;

An element with positionabsolute; 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.

Image result for cs33 columns pics

        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.

Image result for bootstrap model pics

     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.

Image result for bootstrap scrollspy

      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 .

Image result for togglable tabs

      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

  1. Establish an Internet connection as you normally do.
  2. Click Start, and then click Run. …
  3. A command prompt will appear in a new window.
  4. Type ftp <insert your FTP host address here> …
  5. Press Enter.
Image result for ftp live pics

                           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

Image result for php syntax pics

        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.

Image result for php variables pics
Image result for php constantants pics

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;
}

Image result for function syntax pics

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.

Image result for phpmyadmin pics

       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:

  1. Change the ‘admin’ login. …
  2. Use strong passwords everywhere. …
  3. Use the latest version of WordPress. …
  4. Mind your plugins. …
  5. Delete any plugins or themes you’re not using. …
  6. Use .htaccess files to protect the ‘wp-admin’ and other directories. …
  7. 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:

  1. Build a Portfolio Site Full of Relevant Work. …
  2. Do Freelance Projects. …
  3. Put Your Code on Github. …
  4. Contribute to an Open Source Project. …
  5. Participate in a Hackathon. …
  6. Meet Techies Online and IRL. …
  7. Follow Industry News. …
  8. 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.

28 05 19

I, SALAPU NEELIMA started this internship on 15th may and done with the common folder on 22 may. after starting this course i have learnt a lot of things and implemented some of them.this article is about the things that i learnt from the common folder.

01.How to find a web developer job with no experience:

I learnt about the three types of web developers, those are:

  • front-end developer/web designer:HTML,css,front-end js.
  • serve -side programmer:Php,python,node.js,rails and java.
  • full stack developer:front and back end developer.

I also learnt how to create-an effective resume,networking the website and online resources.

02.Tips on learning how to code :

*instead of remembering all the code ,understand and grasp the things is an efficient way of learning the code.

*code every day and learn something every day.

03.Must known web development tech:

*brief explanation about the web designing-basic front end,basic front end developers etc.

04.Setup linux ubuntu for web development:

05.Chrome extensions for web developer and web designer:

known about many useful extensions for web developers like

*java script and css code beautifier.

*chrispederick.com for web developers

*gistbox clipper

*PHP console

*color zilla

06.Emmet for faster HTML and CSS workflow:

There are lot of syntaxes in which it is easy for us to code faster in HTML and CSS.

It is a toolkit for web development.

It  contains different syntax which are easily capable to work with the codes

Automatic hacks for entrepreneur lightning :     From this i learnt some hacks for how to grow audience using social media I.e grow and engage and there is a brief explanation about the zapier . also i learnt about the 3 hacks for finding customers 

  • find questions on twitter or reddit
  • setup customer referrals. After that there is brief explanation about 4 personal hacks for increase personal productivity   
  • master your inbox with streak 
  •   get a text for emails from  or your boss   

Ultimate free tools and resources for entrepreneur :

from this i learnt about the different tools that can be useful for the different purposes . the 1st lecture is about the 4 tools which is available for business name generation and is used for branding .

the four tools are:

  1.www. Shopify. Com/tools/business-name-generator This is one of the e-commerce website and we can easily built our own business name

 2.www.bustaname.com This is another tool for generating business name and we can also make our own domain from this. 

3.www.biznamewiz.com/business-names.

 4.www.nameboy.com

6 free tools to create animated gifs: if we used animated gifs in our website then our website will be more engaged and will be more attractive,

GIF creation using giphy

Funny Cat GIF - Find & Share on GIPHY

7 free tools to record your screen like pro:Recording screen is really useful in our daily lives and the screen recording softwares are higher cost so this lecture is really helpful to everyone  .

 8 alternative tools for photoshop : As  we all know photoshop is a must to have tools for any internet marketer, but it’s costly and not every one can afford that.

Free PSD Text Effects Photoshop Online

 3 tools that can be available for creating web graphics : web graphics is the most current trend In the business deals .the three tools are: 

1.www.canva.com

2.www.fotor.com

3.www.fotojet.com

 4 resources to make a passive income as a freelance graphic design  finding a good client is the only thing that you need for your business and I learnt about all the 4 resources and the features that resources has.

I also learnt about the available source for finding pictures, videos, illustrations etc.    from this we can learnt about where should we find a royal stock photos for your business.you can use them for your personal and for commercial use also. -we can find various photos, videos and illustrations etc that is under the cco license

I found this image in unsplash.com

Later i learnt about the 8 tools for freelancer copy writer soucres, 8  tools to find unlimited royality free music for personal and commercial project’s .at the final i have learnt about 12 websites for word press jobs and there is a brief explanation about it .This is about the common folder.  

Thank you