I’m D.padma . 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

• SMASHINGMAGAZINE.COM
• ILOVETYPOGRAPHY.COM
• THEDSGNBLOG.COM

          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:

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.

 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:

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.

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

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

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

9. EXPERT HTML HTML5:

1.Section Intro Expert HTML5 techniques:
 

   It’s about the introduction to Expert Html.

  2.New HTML5 Inputs:

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

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

3.Making Internet Explorer Compatible with HTML5:

    The following are the steps for making Internet Explorer compatible with

HTML 5:

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.

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,

I’m D.padma . 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

• SMASHINGMAGAZINE.COM
• ILOVETYPOGRAPHY.COM
• THEDSGNBLOG.COM

          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:

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.

 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:

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.

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

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

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

9. EXPERT HTML HTML5:

1.Section Intro Expert HTML5 techniques:
 

   It’s about the introduction to Expert Html.

  2.New HTML5 Inputs:

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

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

3.Making Internet Explorer Compatible with HTML5:

    The following are the steps for making Internet Explorer compatible with

HTML 5:

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.

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,

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

THANK YOU

Y.BHAVANA AND TEAM

we are very glad that we are part of this Hackathon program and will consider this as an important opportunity for the progress of our skills.we can surely say that we had a wonderful experience by taking part in this event and we learnt a lot things ,starting from building the team ,thinking out of box for an innovative and useful idea, giving it a shape in such a way that it could reach the people . the best idea we got in this process is “SHAYARI -Hidden thoughts…!” . our project is mainly based on people who writes poems and quotes but never exhibit their talent due to many reasons .so for those people our project is the best platform to showcase their hidden thoughts .Here comes our logo

OUR TEAM DETAILS

Ms.YAMINI NOONELA CEO

Ms.NIDA FATHIMA DESIGNER

Ms.NOONELA AKSHAYA RANI DEVELOPER

We designed our launching page also

THE API’S WE USED TO BUILD OUR PROJECT ARE

PoetryDB is an API for internet poets which is used for writing the poems and 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

THE ULTIMATE THING IS THAT WE HAD A GREAT EXPERIENCE AND GOT TO KNOW MANY THINGS …

THANK YOU

As a participant of this wonderful event which is a good opportunity to show our skills and knowledge.this is a great experience for fresh candidates like us.

 First of all as a participant of this event we should know what is hackathon, but i don’t know anything about hackathon , after this event i got to what is actual purpose of hackathon and how it will be helpful to students.

Hackathon  is a initiative to provide students a platform to solve some of pressing problems we face in our daily lives, and thus inculcate a culture of product innovation and a mindset of problem solving.

Game of hackathon wants the innovative ideas to improve our daily life. after lot thinking we got some innovative ideas we fix one of them and produce our idea infront of hackathon that is “CLEAN AIR-CLEAN LIFE” which is helpful finding the quality of air and send notifications about air condition of our area to the people .

The reason behind this idea is now a days air pollution increases daily because of the no of trees are decreases.Elders and youth can tolerate with the condition the air but a new born babies and children who under 7 years old they can’t tolerate with the condition of the air .we saw some death issues due to air pollution mostly a new born babies die due to this. Our main idea is to protect babies .if this idea works then we can decrease the baby deaths. every mother take precautions to protect their babies indoor , but they don’t know the condition of the air at outdoors , this idea is helpful to every mother to protect their baby.

OUR TEAM DETAILS:

• CEO: S REVATHI
• DEVELOPER: N PRASANNA
• DESIGNER: T JAYASATYASAI

Logo of our “CLEAN AIR -CLEAN LIFE”

WIRE FRAME

API’S USED FOR THIS IDEA:

OUR SOCIAL MEDIA:

• TWITTER: https://twitter.com/SRevath63076245?s=09

LANDING PAGE:

FINALLY I WANT TO SHARE MY EXPERIENCE WITH HACKATHON , IT IS AN WONDERFUL PLATFORM TO KNOW ABOUT WHAT IS GOING ON OUR SURROUNDINGS AND MAKE OUR SELF MORE CREATIVE.

COMMING TO THE INTERNSHIP “#VIZAGSTARTUP” IT TAUGHT ME SO MANY THINGS WHAT I REALLY DON’T KNOW TILL NOW.

Thank you,

S.REVATHI

As a participant of this wonderful event which is a good opportunity to show our skills and knowledge.this is a great experience for fresh candidates like us.

We created a website called RENT ME which is road transport rental website for foreign people and anyone one can use it for rent vehicles

Our website logo:

Our team details :

CEO :anusha oduru

Hacker:s.s.s.s.shivani

Marketing manager: N.swarnalatha

Our website wireframe:

Our website launch page:

https://twitter.com/RENTme10/status/1141292795744776192?s=19

Our website landing page:https://renme2019.wixsite.com/rentme

Our website design:https://shivanisusarla2028.wixsite.com/rentme

List of API’s :

Email validator

IP address tracker

Our social media accounts:

Twitter:https://twitter.com/RENTme10?s=08

Instagram:https://www.instagram.com/ren.me2019?r=nametag

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

Our social media accounts got a good response and we got 600 followers on Facebook and Twitter we tweet 14 retweets 73

Our group picture:

Thank you

The first thing to overcome to start anything new is to question everything you don’t know one such thing that made me and my team question was “HACKATHON”. Hackathon was not only about a two day task that involved coding and designing but,was a nut cracker of how the web pages and blogs work and how they are created. The idea of creating a blog was a biggest task,thinking out the box is not always everyone’s cup of tea,accepting and agreeing on one idea for the whole team and to work on it could only be possible if it was a weird and totally a needed idea. One such idea that was also shared by my brother was “FLYING COOK”. The name is catchy but the idea was totally about having home food with you’re loved ones at home made by the chef’s sent through the app in the needed times of the users.

The first task was about creating portfolio’s,graphical resume and logo for the blog.The tasks were getting tougher as we started finishing one by one. Our team efforts were the only reason we could finish it on time and in the best way possible. My coder anantha and my designer christina were the best team i could ever work with, they were not only patient while doing the task but also were so thoughtful in everything I told them. They were my biggest assets.

The blog was about opting a chef near you in your available time to come and cook at your home. The idea was about providing home food for everyone who crave for it due to various reasons like living far from home etc. This was not only about booking a chef that could cook i your home but it also was about all those men and women out there who wanted to show their cooking skills. They can also get into the blog from user to chef. It was not only about making money but was also a part and a platform to follow their passion. I would thank my whole team who were there with me in each and every level of creating this blog and Thank you for giving us such a wonderful opportunity to make our ideas work.

– M.Himalekha (3rd year CSE B.Tech)

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

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:

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

                         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:

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.

    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.

           FOLDER 15: Introduction to Javascript

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

            VIDEO 02: Internal External Javascript

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

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

          VIDEO 04: Javascript Output

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

         VIDEO 05: Javascript Variables

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

          VIDEO 06: Javascript Arrays

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

        VIDEO 07: Javascript Functions

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

Example:

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

        VIDEO 08: Javascript If Else Statements

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

              FOLDER 16: Introduction to jQuery

        VIDEO 01: Section Intro What is jQuery Course Files

    It’s about the introduction to jQuery

      VIDEO 02: Download Install jQuery

  I’ve learnt how to download and install jQuery

     VIDEO 03:The Simple Syntax of jQuery

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

 jQuery basic syntax:

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

      VIDEO 04: jQuery Selectors

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

      VIDEO 05: jQuery Event Methods

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

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

               FOLDER 17: Intermediate jQuery

       VIDEO 01: Section Intro jQuery Deep Dive
      

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

      VIDEO 02: jQuery Chaining

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

         VIDEO 03: Hiding, Showing Fading Content with jQuery

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

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

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

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

     VIDEO 04: The jQuery Animate Method

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

     VIDEO 05: Modifying CSS with jQuery

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

Syntax:

$(selector).css(property,value)

               FOLDER 18: jQuery UI Advanced jQuery

     VIDEO 01: Section Intro What is jQuery UI Course Files

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

 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 −

• $(selector, context).accordion (options) Method
• $(selector, context).accordion (“action”, params) Method

     VIDEO 06: jQuery UI Datepicker

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

          FOLDER 19: Responsive Design Development using Bootstrap

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

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

          VIDEO 02: Getting Started with Bootstrap

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

         VIDEO 03: Quickly Prototype with the Free Examples

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

         VIDEO 04: Understanding the Bootstrap Grid System

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

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

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

          VIDEO 07: Helper Classes Responsive Utilities

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

        VIDEO 08: Using Glyphicons Font Icons

        Bootstrap includes 260 glyphs from the Glyphicon Halflings set. 

           VIDEO 09: Bootstrap Navbar

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

     VIDEO 10: Bootstrap Modal Window

     Then include the two data-* attributes:

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

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

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

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

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

     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

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.

                           FOLDER 22: INTRODUCTION TO PHP

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

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

     VIDEO 02: BASIC PHP SYNTAX

         I’ve learnt about PHP syntax

        VIDEO 03: PHP VARIABLES AND CONSTANTS

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

VIDEO 04: PHP ARRAYS ASSOCIATIVE MULTI – DIMENSIONAL

        I’ve learnt about the arrays in Php.

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

     There are basically three types of arrays in PHP:

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

                   FOLDER 23: INTERMEDIATE PHP

     VIDEO 01: SECTION INTRO LETS DIVE DEEPER INTO PHP

   I’ve learnt about the introduction to php.

    VIDEO 02: IF, ELSE and ELSE IF Statements

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

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

   Syntax:

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

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

       I’ve learnt about the php loops.

       syntax for for loop:

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

       Syntax for foreach loop:

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

            VIDEO 04: PHP Functions Arguments

          I’ve learnt about PHP functions and arguments

      syntax:

function functionName() {
    code to be executed;
}

VIDEO 05: _GET and _POST

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

     FOLDER 24: INTRODUCTION TO MySQL DATABASES

        VIDEO 01: INTRO WHAT IS MySQL COURSE FILES

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

       VIDEO 02: CREATING YOUR FIRST MySQL DATABASE phpMyAdmin

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

       VIDEO 03: Establishing a MySQL Connection with PHP

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

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

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

        syntax of MySQL query:

SELECT column1, column2, …….FROM table_name;

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

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

        Syntax of MySQL query:

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

           VIDEO 06: Password Hashing for securely storing passwords

                  I’ve learnt about storing of passwords.

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

       VIDEO 07:Using PHP Sessions to Store Global Variable

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

      Example:

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

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

     FOLDER 26: WordPress Websites

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

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

           Steps to Provide WordPress Security:

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.