Me and my team mates really felt very happy and glad to get oppurtunity as intern in Harmony Infotech for the web development course.

We learned the things from the common folder from which i learned the lot of new things which is useful for web development and also learned to design efficiently our website by using some ultimate free tools .

Feeling proud to get a chance to participate in this internship.

From 15th may to 21st may,2019.I covered 2 folders along with 6 videos in common folder.And also learned how to implement them.

 Learned ABOUT:finding a web developer job with no experience.

The world has changed as to now, a lot developers exists who are self taught. A lot of web developers having the requisite skills . And the only reason why they are enjoying these perks is the sheer outcome of their hardwork and the dedication to self learn the requisite skills that are in demand in the IT industry .

front end developers:HTML/css/Js/JQuery

backend programmers: one stack(Lamp,Mean)

Server side programmers: PHP.python,node.js,rails,java

*created GITHUB account

*created logo for my website.

 Learned ABOUT: Tips on learning how to code.

*we shouldn’t remember the code,we need to understand it.

*Grasp concept

*Make simple changes.

 Learned ABOUT: Must known web development tech.

• Developing an app or a website typically comes down to knowing 3 main languages: JavaScript, CSS, and HTML. …
• Google Chrome – Currently, the most popular browser brought to you by Google.
• Firefox – Open-source browser supported by the Mozilla Foundation.
• Internet Explorer – Microsoft’s browser.

 Learned ABOUT: set linux/ubuntu for we development

video 5:Chrome extensions for web developers

known about many useful extensions for web developers like

*java script and css code beautifier.

*chrispederick.com for web developers

*gistbox clipper

*PHP console

*color zilla

 Learned ABOUT: Emmet for faster HTML and CSS

Emmet is the extending development of ZenCoding, which is written purely with JavaScript. While in this demonstration I’m going to use Sublime Text, Emmet is also available for many code editors including TextMate, Coda, Eclipse, Notepad++, and Adobe DreamWeaver.

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

Automation hacks for lightning round.

A technique of operating or ciontrolling process that functions automatically without continuous i/p from operator.

Automation can be easily done with zapier.if we link zapier account with insta and twitter then the post which we posted in insta can be be tweeted directly.here is my insta account which i linked to zapier.And i triggered twitter account which performs the action,

• I also made a gif from a video.my link for gif: https://media.giphy.com/media/hTxVhkP6rzMpM1Ov7I/giphy.gif

BASE COURSE:

 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.

          LEARNT ABOUT:

    In this course also 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…

     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)

    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?

    INTRODUCTION TO VISUAL DESIGN

    LEARNED ABOUT:

   It’s about the introduction to visual design.

 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

      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

 TYPOGRAPHY

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

       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
• and also learned more initiave uses of webtechnologies
• we are able to run web servers like xampp

MY EXPERIENCE IN GAME OF HACKATHON

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

Our tasks for hackathon include the following

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

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.ME AS VIRTUAL CEO FOR MY PROJECT

2.developer

3.designer.

“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 what is an API. Now i know what an Api is and what 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 3 API’s . .

OUR project name is translaunce.com

As for 1st day we have created a wireframe and working on the landing page….

..Attended pre-null meetup for hackers using python.

Created some website like diskprices.com using html

our project is about…

   

   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.

thank you for spending time by reading this…

I’m N. Hari Priyanka . 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,

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)