SUMMARY ARTICLE ON BASE COURSE

I’m N.PRASANNA . I’m pursuing my B.tech in Dr.Lankapalli Bullayya College Of Engineering(women) in CSE department . I started learning web development course from 24.05.2019. This article is about the things i’ve learned from the web development course videos.

INTRODUCTION ALL YOU NEED TO KNOW :

1.INTRODUCTION:

In this we have WEB DESIGN AND DEVELOPMENT THE ULTIMATE ALL-IN-ONE COURSE

It is useful to learn about web designing and we can grow as a good web designer by learning from this videos.This videos helps in learning essentials in visual designing techniques,designing of web sites in Photoshop,coding in HTML and CSS web site,dynamic PHP and MYSQL applications.It helps to find jobs with good salary and how to start a successful freelance carer.

2.WHAT YOU GET IN THIS COURSE MAJOR COURSE DISCOUNTS EBOOK:

Here we have about 60 lectures which contains following content i.e.

Visual designing techniques
Photoshop
HTML and CSS, CSS-3
Boot strap
Web hosting
PHP and MYSQL
Java script
Jquery
Word press and word press web development

3.HOW TO GET A FREE TRIAL OF ADOBE PHOTOSHOP FREE ICONS,GRAPHICS MORE:

We can use this following web sites to do dummy Photoshop instead of original web sites as they also have free trial and this is useful in personal and commercial purposes.

GIMP: WEB ADDRESS: gimp.org .Not as feature rich.Does the trick.

PIXLR: WEB ADDRESS: pixlr.com . Similar to the Photoshop.

30 DAY PHOTOSHOP TRIAL: adobe.com/Photoshop.

Any web designer like to have free resources instead of paid sources.One of the free resource is CREATIVE MARKET and web address for this source is bradhussey.ca/creativemarket . It contains free and premium graphics, designs, themes, Photography, icons, fonts and much more.

4.PRICE CALCULATOR DISCOVER YOUR HOURLY RATE HOW MUCH YOU SHOULD CHARGE:

I learned from this video i.e. we should charge money for our service from the clients based on the following questions.

What the project?
Who’s the client?
How much does it cost you?
Is the project interesting?
After the project?

The charge must based on the service that we provided to the clients.Based on the answers to the above questions ,we have to charge correct amount from the client.We can calculate by using the web address i.e. bradhussey.ca/pricecalculator .

5. INTRO WRAP UP WHAT YOU HAVE LEARNED WHATS NEXT:

This is about what we have learned in previous videos and next video is about visual designing .

INTRODUCTION TO VISUAL DESIGN:

1.SECTION INTRO WHAT YOU ARE GOING TO LEARN:

This is an introduction video which gives information about videos present in next to this video about visual designing.

2.THE BASIC ELEMENTS AND PRINCIPLES OF VISUAL DESIGN:

SIX ELEMENTS OF VISUAL DESIGN

Although visual design on the web can be incredibly complex,all web designs boil down to six basic elements:

Lines
Shapes
Colour Palette
Texture
Typography
Form

LINES: This helps to define shapes,divide sections,create separation and to have typical length,width &direction.

SHAPES: It composed of self contained areas which includes the lines, values, colour, texture. In this all objects are composed of shapes.

COLOUR PALETTE: It helps to differentiate with the shapes and items and to add depth & emphasis.It is used to organize information, to evoke emotion and feeling.

TEXTURE: It gives the illusion of how a surface feels and doesn’t have to be a real texture, like dirt, or paper. It is used to either attract or divert attention.

TYPOGRAPHY: It is used to change the fonts, size, colour, spacing, alignment.

FORM: It helps to create illusion of objects and to add depth & texture to create 3D objects. It is used to accentuate a message, or provide visual appeal.

SEVEN PRINCIPLES OF VISUAL DESIGN

While there are no official “industry standard” rules for visual design-as the beauty of a design purely depends on the audience-there are a set of widely accepted guidelines,or “principles”,when it comes to visual communications. The basic principles boil down to the following:

Balance
Rhythm
Proportion
Space
Dominance
Hierarchy
Unity

BALANCE: Arrangement & distribution of objects to create meaning i.e. symmetric and asymmetric.

RHYTHM: It creates movement ,repetition of elements and can establish pattern and texture.

PROPORTION: It is also known as “scale”. It demonstrates how each item relates in size.

SPACE: It is also known as “white space” . It is used to reduce noise, clutter, and increase reliability.

DOMINANCE: It is used as a focal point and it can achieved through size, colour, shape, etc. It is used to communicate the primary message.

HIERARCHY: It is used to differentiate primary and secondary focus. It can achieved through size, colour, & placement.

UNITY: This is about the big picture of a design and how all elements are related or unrelated,grouping of similar elements.

3.THE DESIGN CRAP PRINCIPLES:

The CRAP principles are:

REPETITION:-Consistency in elements and style throughout your design creates a cohesive feel,and can help guide the user throughout our website.

ALIGNMENT:-It creates clear relationship between elements ,nothing should feel out of place ,unless its intentional.

PROXIMITY:-It creates a clear relationship between elements ,grouped elements are related ,separate elements are not related.

4.TYPOGRAPHY BASICS:

Typography means it gives a voice to written content,it increases readability,gives content form and can shape a message ,gives flow to the message.

5.THE SCIENCE OF COLOUR OF COLOR:

It can convey a mood ,or a feeling. The words frilly and freaky conjure different feelings and colour palettes. colors are used for the designers to emphasise an object or message .They also use color to de-emphasize objects

COLOUR WHEEL:-We ca see which colours sit near each other.This has allowed us to establish an official vocabulary for colour schemes.Different cultures perceive the meaning of colour differently.

ANALOGOUS:-analogous means it is next to each other on the colour wheel ,it is similar to similar temperature ,Minimal contrast ,Dissonant.

COMPLEMENTARY:-It is opposites on the wheel,opposites temperature and it creates a different mood than an analogous scheme.

There are some pure unmixed colour:-

PRIMARY COLORS:-Red,blue,yellow
SECONDARY COLORS:-Orange,Purple-ad greenMade of 2 Primary colours mixed together.
TERTIARY COLOUR:-Red-Orange,Red-Violet,Blue-Violet,Blue-green,Yellow-Green,Yellow-Green,Yellow-Orange made of 1 primary and 1 secondary mixed together.

HUE:-One of the main properties of colour .Where a colour sits on the spectrum, or colour wheel.

SATURATION:- How colorful a photo is,or is not.

BRIGHTNESS:-How much light is added to,or remove from, a photo.

GENERAL GUIDELINES FOR CREATING A COLOUR PALETTE:-

Know the purpose and message.
Review the colour basics.
choose a dominant colour.
choose an accent colour.
Experiment with different shades and hues.
keep it simple ,limit colours.
Record your colour palette for reference.

6.DESIGNING WITH GRIDS:

Way back in the mid 1800s ,a dude named William Morris and his buddy ,Philip Webb, designed a house where the rooms were organised according to purpose -in a grid-like fashion.This led people to rethink how books were laid out , and incorporated a grid.

FAST FORWARD:-Today,grids are very commonly used in web design.Grids on the internet help organise large amount of information in easy-to-navigate, digestible information.

APPROACHES:-

Single Column
Multi Column
Modular
Hierarchical

USES OF GRIDS:- It keeps content organised,creates an order by distinguishing different types of information ,Enhances navigation and usability,saves design time ,because you have limitations to work within.

8.SECTION AUTO WRAP UP FURTHER LEARNING WHAT NEXT:

In this video we use some web Sites to create designs.some of them are

INTRODUCTION TO HTML

1. Section Intro HTML Fundamentals, First Web page, Course Files:

It is about the introduction to html. HTML is nothing but hyper text mark up language

2.The Basics of HTML Tags, Attributes, Elements:

Structure Of html:

<html>

<head>

</head>

<body>

</body>

</html>

I’ve learnt about elements such as tags, attributes , Elements.

3.Basic File Folder Structure of a Website:

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

4. Your Must Have Tool A Good Code Editor:

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

5.Hello World Create Your Very First Web Page:

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello!!!</h1>

</body>

</ht

INTERMEDIATE HTML

1.Section Intro HTML Tags, Code a Real Web Page:

It’s about the introduction to html.

2. Basic Structure of an HTML Document:

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

ADVANCED HTML HTML5

1. Section Intro Advanced HTML Techniques, HTML5:

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.

Image result for html5 input types images

3.Making Internet Explorer Compatible with HTML5:

The following are the steps for making Internet Explorer compatible with

HTML 5:

Click Start.
On the search bar, type Internet Options, and click on Internet Options from the results.
Click on the Advanced tab.
Under Multimedia, check Enable alternative codecs in HTML5 media elements.
Restart your computer.

4.HTML ATTRIBUTES:

The data-* attributes is used to store custom data private to the page or application.

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

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

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

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

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

Thanking you sir,

yours faithfully,

In.Terns

In.terns Assemble

Author: N.Prasanna

SUMMARY ARTICLE ON BASE COURSE

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

Summary

Things I have learnt from common video folder: