FULL STACK DEVELOPER
1)FRONT END-HTML,HTML5,CSS3,TWITTER
Bootstrap, javascript ,query
2.)backend—> node.js, meteor.js, angular,
php, ruby on rails
3.)databases—>
mysql,postgresql,mongoDB,couchDB
4.)Other essential technologies
Memcached
Redis
Markdown
sass
5.version control& debug
GIT-version control
Grunt-js concatenation
Gulp
Chrome developer tools
Php debugging tools
HTML
HTML tags are keywords surrounded by
angle brackets
eg
<!DOCTYPE html> //which version we are
using and we are just commenting it only I.e
document type definition
<html>
<head>
<title>untitled</title>
</head>
<body>
<p> this is my first page </p>
</body>
<html>
1.1)closing tags
Some tags close themselves
Line-break tag.—-> <br>
Image tag—> <img>
Note
But if our doctype is xhtml we have to close
line break tag like this
<br/>
1.2) common tags
Html <html> </html>
Head <head> </head>
body. <body> </body>
Paragraph <p> </p>
Headings <h1></h1> to <h6></h6>
//h1biggest& h6 smallest
Image <img> //does not have a
closing tag
Orderd list <ol> </ol>
Unordered list <ul> </ul>
list item. <li> </li>
Link <a> </a>
Table <Table> </Table>
Form <Form> </Form>
Input <Input> </ Input>
button <button> </button>
Horizontal rule <hr> </hr> //line
across page or element
Division <div>
</div> //separate markup and we can add
classes and id
Line break. <br>
Strong <Strong> </Strong >
1.3)attributes
*Tags can also have attributes which
includes extra bit of information abt that
tag/element
*attributes appear in the tag inside of
quotation marks
Syntax
<tag attribute=“value”> </tag>
e.g.
<a href=“http://www.google.com”>click</a>
<h1 id=“my heading”><h1>
Note;
Value of attribute must enclosed inside
double quotes or single quotes but we always
prefer double quotes
1.4)block level elements
Always start on new line
Takes up full available width
<div>
<h1> - <h6>
<p>
<form>
Note:
By default paragraph has a padding of 10
pixels
1.5)inline elements
Does not start on new line
Takes only width necessary
<span>
<a>
<img>
2.projectct basic elements
—>Links
<a href=“http://www.google.com”>google</a>
To open link in new tab
<a href=“http://www.google.com”
target=“_blank”>google</a>
<a title=“google website”
href=“http://www.google.com”
target=“_blank”>google</a>
Note
target=“_blank”// to open the link in new tab
title attribute just shows the title specified if
we hover the cursor over there
——>image tags
<img
src=”http://lorempixel.com/400/200”> //400pix
elwide &200px tall
Note
Image tag does not have a closing tag <img>
If used inxhtml nly we have to use
<img/>
——>lists & tables
1.)Orderd list-0l
<ol>
<li>item1</li>
<li> item1 </li>
<li> item1 </li>
</ol>
2.)Unordered list- ul
<ul>
<li>item1</li>
<li> item1 </li>
<li> item1 </li>
</ul>
3.)description list-dl dt dd
<dl>
<dt> coffe </dt>
<dd> black hot drink </dd>
</dl>
//cofee
Black hot drink
4.)table creation
<table>
<thead>
<tr lign=“left” bgcolor=“red”>
<th width=“400”>name</th>
<th> width=“300” email</th>
<th> width= “200” phone</th>
</tr>
</thead>
<tbody>
<tr >
<td> width=“455”prasanth</td>
<td>[email protected]</td>
<td>8838908013</td>
</tr>
<tr>
<td>Varun</td>
<td>[email protected]</td>
<td>8838908013</td>
</tr>
<tr>
<td>Gopika</td>
<td>[email protected]</td>
<td>8838908013</td>
</tr>
</tbody>
</table>
Note:
<table>
<thead>
<tr>
<td> name</td>
</tr>
</thead>
<tbody>
<tr>
<td> name</td>
</tr>
</tbody>
4.)forms& input
<body>
<h1> registration form</h1>
<form>
<label>name</label><br>
<input type=“text”
name=“name”>
<br><br>
<label>email</label><br>
<input type=“email”
name=“email”>
<br><br>
<label>password</label><br>
<input type=“password”
name=“password”>
<br><br>
<label>location</label><br>
<select name=“location”>
<option
value=“chennai”>chennai</option
>
<option
value=“mumbai”>mumbai
</option>
</select>
<br><br>
Note
Use selected next to value
<option value=“chennai ” selected
to preselect
——->Radiobutton
<label>gender</label><br>
<input type=“radio”
name=“gender”
value=“male”>male
<input type=“radio”
name=“gender” value=“female”>
<br><br>
Note
Use checked next to
value=“female” checked to
preselect
——>checkbox
<label>interests</label><br>
<input type=“checkbox”
name=“interests”
value=“music”>music
<input type=“checkbox”
name=“interests”
value=“sports”>sports
<input type=“checkbox”
name=“interests”
value=“movies”>movies
<br><br>
—>submit button
<input type=“sumit”
value=“sumit”>
</form>
</body>
</html>
—>form action
<form action=“post”
action=“index.php” >
Note:
post- is used for submission to
the server
get -is used for receiving From
theserver
—>fieldset:
<form action=“post”
action=“index.php” >
<fieldset>
<legend>account</legend>
<label>name</label><br>
<input type=“text”
name=“name”>
<br><br>
<label>email</label><br>
<input type=“email”
name=“email”>
<br><br>
<label>password</label><br>
<input type=“password”
name=“password”>
<br><br>
<fieldset>
note: field set is used to create a
section
