Scribd
Upload
124 views

Full Stack Note

1. This document provides an overview of the skills needed for a full stack developer role, including front end technologies like HTML, CSS, JavaScript, and backend technologies like Node.js, PHP, and Ruby on Rails. It also lists important databases and other technologies. 2. The document then continues with a more in-depth overview of HTML, including common tags, attributes, and different types of elements. It provides examples of how to create links, images, lists, tables, forms, and other basic HTML structures. 3. Formatting and styling techniques are also covered, along with how to structure a basic HTML page or form.

Uploaded by

malathy
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
124 views

Full Stack Note

1. This document provides an overview of the skills needed for a full stack developer role, including front end technologies like HTML, CSS, JavaScript, and backend technologies like Node.js, PHP, and Ruby on Rails. It also lists important databases and other technologies. 2. The document then continues with a more in-depth overview of HTML, including common tags, attributes, and different types of elements. It provides examples of how to create links, images, lists, tables, forms, and other basic HTML structures. 3. Formatting and styling techniques are also covered, along with how to structure a basic HTML page or form.

Uploaded by

malathy
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 14

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>aprasanth22@gmail.com</td>
<td>8838908013</td>
</tr>

<tr>
<td>Varun</td>
<td>aprasanth22@gmail.com</td>
<td>8838908013</td>
</tr>

<tr>
<td>Gopika</td>
<td>aprasanth22@gmail.com</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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy