Hello This is YALAMANCHILI BHAVANA, 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 “HAPPY TRAVEL“. 

DESCRIPTION OF THE COMPANY

NAME: HAPPY TRAVEL,Let’s Go

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

. Here at Happy Travel we want to help take the stress out of this and our website is designed to help you every step of the way. Heaps of highs, a few lows, but most importantly; a completely new chapter in your life, filled to the brim with breathtaking experiences and countless opportunities. We understand that from the minute you set off on your journey, there is a whirlwind of excitement and emotion. Often governments publish some sort of advisory for travel destinations for their own citizens. We collect these advisories and try to analyze the risk described. We then give each advisory a risk rating between zero and five. The number shown is the average score that we got over all advisories.

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 HAPPY TRAVEL.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.

Its very exciting to start anew beginnings. we are very new to hackthon experiences .all new things are showering on us in a creative way. we were given tasks.

build a idea out of rapid API’S. Set the wireframe for that comapany. launch a landing page.and the designer should tweet and post all the updates about the company.

OUR WORK:

comapany name: sports traveller…..

• 

• 

Game of hackathons is a wonderful platform for us to take initiate on our current ideas and to tackle with them . One such idea that arose was “FLYING COOK” .

Food tastes better when you have it with you’re friends and family,such food is provided at home by our chef’s. This website sends a cook to cook in your house with the available things in your kitchen. Not only that you need not worry or adjust your timings for our cook we will provide cook’s in your favourable time .

You can even join as a cook on this website and earn money in your free time.

“A wonderful opportunity for Dr Lankapalli Bullaya college of Engineering for Women students #we.. SIPA 2019 by Vizag startups……

Our very first day started with knowing waht is an AI. Now i know what an Api is and waht for it is uesd..

We went in search of API’s in rapidapi.com where we have a number of free and paid API’s .There we have selected two API’s namely websearch by contextualweb and memegenerator by ronreiter .These two are the free API’s using which we are going to genrate memes o the latest news such as movie releases,politics,issues and discoveries..

OUR application name is memehub.com

As for today we have created a wireframe and working on the landing page…..

our wirframe is…..

This Hackathon is a very amazing opportunity for us to tackle many real world issues. We had the opportunity to nurture our ideas.

Initially, we came up with an Idea for end-end to travel packages i.e., the customer provides the source and destination for their travel and we provide the whole package including taxis, hotels, flights, trains and etc. within his budget. We thought this was a great idea. However, this would take a lot of time and couldn’t be completed within the 32 hour Hackathon period.

Then we came up with another idea, DirectInvestor.com. Through our domain we provide the people with extraordinary ideas but no capital, a platform to represent their brand and get investors to invest in their ideas and products. This not only provides a broader reach for one’s idea but also eliminates the need of mediators and the money spent on them. Hence, the name DirectInvestor.com.

We designed our logo, completed the synopsis and worked on the wired frames. We are currently looking for the appropriate APIs to use.

Overall this is a fantastic experience for us and we received enormous help from everyone. Thank you everyone for this wonderful opportunity you’ve given to prove our skills.

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.

              VIDEO 01:

               FOLDER 02: INTRODUCTION TO VISUAL DESIGN

     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:

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.

 VIDEO 05:Photoshop Environment Palettes

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

General view of Adobe PhotoShop CS6:

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

Video:-Photoshop Environment The Menu

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

->

Different Parts of Adobe Photoshop Tools

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

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

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

 VIDEO 07:Photo Enhancement Manipulation

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

Introduction to webdesign

WEB DESIGN TERMINOLOGY

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

INTRODUCTION TO HTML

The Basics of HTML  Tags ,Attributes,Elements->HTML means Hyper Text Markup Language .It is a language used to create document on the web .HTML is meant for meaning and structure of a web pages content->HTML contains tags that organize and structure text include images create forms and tables, and link to other documents or web pages all across the interest.SYNTAX:-The basics syntax of HTML is made up to tags ,attributes and elements.TAGS:-HTML tags usually come in pairs ,like so:<body> </body>TAGS:-The First Tag is called the opening tag and the second tag is called the closing tag.<article>content here</article>ATTRIBUTES:-Attribute values is should be enclosed within quotation marks You may come across something like :<article attribute=value></article>But this quotation marks is more common,cleaner ,and best practice.ELEMENTS:-An element is a tag and the content it wraps around,for example.HTML PARENT/CHILD STRUCTUREIt is also called parent /child relationships ,where the containing element is referred to as the parent of the element contained within it.EXPLANATION OF THE EXAMPLE:-The body is the parent of the headings (h1,h2)and paragraph tags(p),and the second paragraph is the parent of the em and strong elements.The body is the ancestors of these latter elements rather than their parent.The heading and paragraphs are siblings and the em and strong elements within one paragraph tags are siblings.<p>content</p>.Basic File Folder Structure Of a WebsiteIt is important to keep the contents of your websites organized.Folders should have simple one word names.Multi-Word names can be faked by using the underscore “-‘character like so:-product_imagescourse_files->In the root folder of your site (“root” is the common name for the top-level directory of website )you will place an HTML document called index.html->index.html is the homepage -the first page visitors see when they arrive at our site.->the index.html filename is set in stone because unix-based HTTP servers are configured to look for a document named index.html when no additional filename is specified in the address bar.->The name of any file or folder you create as part of your website structure will eventually become part of a URL.->URL have some restrictions as far as the characters taht can be used within them ,so it is important to be aware of them.->It is widely accepted among most professionals web developers to use only lower case alphanumeric characters and the underscore when naming files and folders.4.Your Must Have Tool A good Code EditorSublime Text 3 – An Amazing Text Editor.

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

   Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

           VIDEO 03: Basic File Folder Structure of a Website

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

           VIDEO 04: Your Must Have Tool A Good Code Editor

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

          VIDEO 05:Hello World Create Your Very First Web Page

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</html>

FOLDER 07: INTERMEDIATE HTML

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

           It’s about the introduction to html.

       VIDEO 02: Basic Structure of an HTML Document

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

Section Intro Advanced HTML Techniques, HTML5

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.

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

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

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

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

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

Some more information about Intermediate HTML

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

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

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

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

6.LISTS:

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

7.IMAGES:

• <img> :Defines an image.

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

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

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

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

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

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

CHAR	NUMBER	ENTITY	DESCRIPTION
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS

CharNumberEntityDescription©©©COPYRIGHT SIGN®®®REGISTERED SIGN

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

Expert HTML 5

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

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

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

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

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

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

NUMBER:

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

You can also set restrictions on what numbers are accepted.

RANGE:

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

DATE:

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

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

MONTH:

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

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

WEEK:

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

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

TIME:

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

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

DATE TIME-LOCAL:

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

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

COLOR:

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

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

Introduction to CSS

ntroduction to css”1.SECTION INTRO ESSENTIAL OF CSS DOWNLOAD COURSE FILES:This is an introduction to css which explains it’s characters.2.WHAT IS CSS ALL THE BASICS YOU NEED TO KNOW:CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.  

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

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

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

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

Explanation of the different parts:

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

5.INLINE CLASSES:

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

6.INTERNAL CSS:

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

There are three ways of inserting a style sheet:  

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

Internal Style Sheet:

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

Multiple Style Sheets:

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.7.EXTERNAL CSS:The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

8.ID CLASS SELECTORS:

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

HTML HTML5

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

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

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

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

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

->Download And Install Jquery

How to download jquery

1. Next, fire up a Node Command Prompt and then change to your project folder.
2. In the prompt, enter this command: npm install jquery.
3. Node will fetch and install jQuery—it displays a confirmation message when the installation is complete:
4. You can then reference jQuery by using the link
5. How to Install jQuery Plugins
6. Locate and download a jQuery plugin from the plugins page the jQuery website.
7. 1. Open the downloaded plugin’s archive file and extract the “.js” file inside it. Some plugins may contain multiple JS files.
   2. Open your Web page’s HTML file in a text editor.
   3. Locate the line that begins with “
   4. Add additional
   Simple Syntax for jquery
8. Query Syntax. The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). $(“.test”).hide() – hides all elements with class=”test”.
   
   JQUERY SELECTORS
    A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.JQUERY EVENT METHODS
   The jQuery selector finds particular DOM element(s) and wraps them with jQueryobject. For example, document.getElementById() in the JavaScript will return DOM object whereas $(‘#id’) will return jQuery object. … jQuery provides various methodsfor different tasks e.g. manipulate DOM, events, ajax etc. 

MYSQL DATABASES

MySQL is an Oracle-backed open source relational database management system (RDBMS) based on Structured Query Language (SQL). MySQL runs on virtually all platforms, including Linux, UNIX and Windows. … MySQL is an important component of an open source enterprise stack called LAMP. -> MySQL is an open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language.
->MySQL itself is open source and can be used as a standalone product in acommercial environment. If you’re running mySQL on a web server, you are free to do so for any purpose, commercial or not. If you run a website that uses mySQL, you won’t need to release any of your code.->An Example for the Beginners (But NOT for the dummies) A MySQL database servercontains many databases (or schemas). Each database consists of one or more tables. A table is made up of columns (or fields) and rows (records).->The best-known RDBMS using SQL to create and query databases are IBM DB2,Oracle, Microsoft Access and MySQL. Examples of SQL-based databases citizens use every day include banking systems, computerized medical records, and online shopping to name just a few.

Responsive Development using Bootstrap

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

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

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

WEB HOSTING

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

Angular JS Expert

Here we build the listing app.The first app for learning any technology isangular app.So what we need is the Text Editor,Local Web Server.Here we see XAMPP,XAMPP means It is the most popular PHP development environment .XAMPP is a completely free,easy to install Apache distribution containing Mysql,PHP and perl. The XAMPP open source package has been set up to be incredibly easy to  install and to use.There is again Bootstrap,Source Code,Sass.BOOTSTRAP:-Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. It also gives you support for JavaScript plugins. Source code:- Source code is the list of human-readable instructions that a programmer writes—often in a word processing program—when he is developing a program. The source code is run through a compiler to turn it into machine code, also called object code, that a computer can understand and execute.This is all about this video.

What are Plugin?

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

->How to start a wordpress blpog in 5 minutes

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

Introduction to PHP

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

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

Thank you Sir,

s.revathi

Day 1: I am G.Hemalatha participated in Hackathon conducted by vizagstartup companies .it was great working experience today and this program started by doing some tasks initially like

Creating twitter account

Creating LinkedIn account

• 

After done with the initial tasks there is an interaction session with mentors Helping us to making some ideas of doing a project . We decided and came to idea about doing project on “Tv show remainder” using some free api on rapidapi.

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

Our logo is

This is the about the 1st day of hackathon

Thank you for this opportunity.

It had been a wonderful working experience today .Our team has done exceptionally well looking forward for a splendid outcome!!

firstly,thankyou VIzay Startups for giving this opportunity we are now well equpied with the working enviorme

Today ,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

and then we had been given a task to select the min of 2-3 API’s and get an idea .and the ideas must involve the coding techniques used by the APIs and this helped us to create a web application

After the break,we are asked to group up and take our roles such as a CEO,DEVELOPER AND DESIGNER and come up with the logo and the idea of the project

and we came out with the web page for restaurants near you

and the web application is BON APPETITE

and we have desinged our logo

and then we are given the task of creating the wireframe of our landing page

and we need to complete the landing page

that’s all about the Day 1 of our hackaton

thanks for the opportunity!!

regards

harshithabarri (team 15)

arunaanala,sumanasreechinthala,gayatri.p