summary-2

Iam Suripalli Harika from It Startup Internship I viewing course folder videos From this course I have learnt about many good tools which are very helpful and I also gained some basic knowledge about web designing.

In this article I am going to share “What I have learned from the course videos”

From the video-1:Introduction to Why This is The Only Design Development Course You’ll Ever Need

From these videos I learnt about the photoshop using different tools.
next I participated in photoshop quiz and secured 100%marks

video-2: Introduction to web design

From these videos I learned about

The Basic Element Principles Of Visual Design are
- balance
- Rhythm
- Proportion
- Space
- Dominance
- Hierarchy
- Unity
CRAP Principles
whereC-CONTRAST
R-REPETION
A-ALIGNMENT
P-PROXIMITY
Typography BasicsIn this video I learned about What is Serif?

Designing with grids

Olden Days: The grid before “graphic design”

video-3: Introduction to photoshop.

From the video-3: I have learned about “The four phases of a Web Design Project Cost Estimates”. Some tools used in UX DESIGN like OmniGraffe(Mac only), Visio(PC only) etc..

Video-5: Advanced Web Design Challenge

video-6: Introduction to HTML

I have learned about “The Basics Elements of HTML” and this is my sample program in html.

video7-Introduction to css:

CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.

Styles don’t smell or taste anything like HTML, they have a format of ‘property: value’ and most properties can be applied to most HTML tags.

There are some important properties of css like

This is the sample css backgruond program.

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

video8-Intermediate css:

Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic!
Grouping and Nesting: Properties assigned to multiple selectors or selectors within selectors.
Pseudo Classes: Defining various states of a link selector.
Shorthand Properties: Various properties, such as borders and margins that amalgamate other properties into one.
Background Images: Guess.
Specificity: How a browser will deal with conflicting CSS rules.
Display: Specifying the characteristics of a box.
Pseudo Elements: Styling first letters, first lines and placing content before and after elements.
Page Layout: Floating and positioning boxes.
video9-About css3 introduction.

–> Learned about how tyo change sizer of box and shape,gradients and transparecy of colors using css3,creating shadows of texts,divinding coloumns,creating animations,buttons,edit different images in photoshop,orbit animations of earth and moon using css3.

video10-Advanced css:

Rounded Corners: Corners. That are rounded.
Shadows: Adding “pop” to boxes and text.
Universal, Child, and Adjacent Selectors: More precise aim with clever selectors.
Advanced Colors: Alpha transparency and HSL.
At-Rules: Importing style sheets, styles for different media types, specifying the character set of a stylesheet and embedded fonts.
Attribute Selectors: Targeting boxes by their elements’ HTML attributes.
CSS Transitions: Creating smooth animations.
Backgrounds: Multiples, Size, and Origin
Transformations: Molding the size and shape of a box and its contents.
Gradients: Linear and radial gradients without image files.
Media Queries: Optimizing pages for different devices and screen sizes.
video11-Introduction to javascript:
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular browser of that time.

A sample javascript program:

You should place all your JavaScript code within ) if you are keeping your JavaScript code within the HTML document itself. This helps your browser distinguish your JavaScript code from the rest of the code. As there are other client-side scripting languages (Example: VBScript), it is highly recommended that you specify the scripting language you use.

<!DOCTYPE HTML> 
<html> 
<body> 
<p>Before the script...</p> <script>
    alert( 'Hello, world!' ); 
</script> 
<p>...After the script.</p> 
</body> 
</html>

video12-Introduction to jquery:

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

jquery sample program:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

The jQuery library contains the following features: HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities Tip: In addition, jQuery has plugins for almost any task out there. Many of the biggest companies on the Web use jQuery, such as: Google Microsoft IBM Netflix The jQuery library is a single JavaScript file, and you reference it with the HTML

video13- About intermediate jquery introduction

–>we learned about jquery chaining,code for hide and share content,animations,code for car race,modifyinmg css,jquery ui,code for draggong and drop,sorting code,accoprdation,date picker, and listing.

video14-Characteristics of PHP:

PHP is a server side scripting language. It is used to develop Static websites or Dynamic websites or Web applications. PHP stands for Hypertext Pre-processor. PHP scripts can only be interpreted on a server that has PHP installed.

video15-Introduction ti mysql:
MySQL is an open-source relational database management system (RDBMS).
 MySQL is developed, distributed, and supported by Oracle Corporation. 
The data in a MySQL database are stored in tables which consists of columns and 
rows. 
MySQL is a database system that runs on a server.

video16-BOOTSTRAP:

Bootstrap is most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on web.

Download the latest version i.e., BOOTSTRAP-3.3.5. In the basic version, we have css, fonts and JS. In CSS, we get bootstrap-theme.css , bootstrap-theme.css.map, bootstrap-theme.min.css , bootstrap.css , bootstrap.css.maP, bootstrap.min.css.

In fonts, we get glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg , glyphicons-halflings-regular.ttg , glyphicons-halflings-regular.woff , glyphicons-halflings-regular.woff2.

In JS, we get bootstrap.jS, bootstrap.min.js, npm.js(autogenerated)

create a new file in bootstrap and name it as index.html. Take a basic template and copy the HTML to begin working with a minimal bootstrap document.Go to copy to clipboard and copy and paste it in index.html and run it.

video17-WORDPRESS:

Capital W and capital P is a free open source.
HOW TO START A WORDPRESS BLOG IN 5-MINUTES:https://my.justhost.com/cgi-bin/cplogin.
There are home,web hosting,why us, guarantees, contact us,help center, login in justhost.
For hosting login, we should type domain or username and password and then we should submit.
After login, there will be cpanel. Cpanel is nothing but control panel. Now scroll down then there will be website builders. In website builders, go to install WordPress and install it.

VIDEO18-: 1:DASHBOARD:
Go to jetpack, go to posts and then go to add new and then go to all dates.go to add new post and click something like “my first blog post” and click some topic. Here we also have bold, italic for letters.There is also base color scheme. We can keep it as pink, blue etc . Now save it and publish.

In USERS we have all users, Add new and Your profile. And also in users we have username, name, e-mail, role and posts. The role can be subscriber, contributor, author, editor or administrator.

Tools contains available tools , Import, Export.

Settings contains general ,Writing , Reading, Discussions and Media.

USING FREE AND PREMIUM PLUGINS:here the plugins contains installed plugins, add new and editor.

video19-INSTALLING AND SET-UP ANGULAR JS:

In this, what we need are Text editor, local web server, angular js, bootstrap, UI bootstrap. Go to www.sublimetext.com and go to download link of your suitable operating system.

we also need a web server. Goto mamp:myapache-mysql-php and download it.

download angular js. There are bootstrap, angular-ui-bootstrap.

GO to “finder” window. In that you go to applications. then go to MAMP directory and then click htdocs and create a folder ng-cribs. Save this as index.html. we also need a javascriptr file as app.js

Copy the bootstrap links and paste it in index.html. Now go to google and type localhost/ng-cribs/

now we will get a message as Hello ng-cribs! (what we had typed in index.html). Now go to view page source. Then we will get angular js and bootstrap links in good way.

CONTROLLERS AND VIEWS:

MVL means MODEL-VIEW-CONTROLLER.

MODEL: Database communication

VIEW: content displayed on screen

CONTROLLER: Ties the model and view together.

video20-Introduction to career options:.

–> I have learned about cultivating career,success,freelance working,quiting job,writing resume,angular js,http,creating n editing data and custom filters and interfaces.

In.Terns

In.terns Assemble

Author: SURIPALLI HARIKA

summary-2

Olden Days: The grid before “graphic design”

A sample javascript program: