Training Report Format

Declaration
I hereby certify that the work which is being presented in the Training Report entitled, “Report Title” by
me, Aakash(1222351) in partial fulfillment of the requirements for the award of degree of Bachelor of
Technology in Computer Science & Engineering at JMIT Radaur (Affiliated to Kurukshetra University
Kurukshetra) is an authentic record of my own work carried out under the supervision of Er. Ikshita
Bansal.
(Aakash)
Acknowledgement
The writing of this training report has been assisted by the generous help of many people. I feel
that I was very fortunate to receive assistance from them. I wish to express my sincere appreciation
to them.
First and foremost, I am indebted to my principal supervisor, Mr. Vishal Kapoor of Next
Algorithms who has been very supportive at every stage of my preparations. I wish to express my
utmost gratitude to him/her for his/her invaluable advice and patience in reading, correcting and
commenting on the drafts of the report and, more importantly, for his/her generosity which I have
received throughout my training program.
I would like to acknowledge and extended my heartfelt gratitude to Dr. Gaurav Sharma, Head of
Department who provided me the golden opportunity to undergo and complete this training
program.
I wish to express my thanks to Er. Ikshita Bansal who also helped me in conducting this study
and encouraged me throughout this journey.
Finally, I am particularly indebted to my dearest parents/guardians as without their generous

assistance and love; this dissertation could never have been completed.
Aakash
1222351
Preface
Objectives of the Training:
This curriculum based summer training program is providing an understanding about the essential
skills and knowledge required for proficient web development, enabling them to design, build, and
maintain interactive and responsive websites. This training will cover key front-end and back-end
technologies, including HTML, CSS, JavaScript, and popular frameworks such as React. Participants
will gain hands-on experience in coding, debugging, and deploying web applications, fostering a
comprehensive understanding of modern web development practices and tools.
The end objectives of the training are to obtain an In-depth knowledge to:
 HTML (Hypertext Markup Language): Understand the structure and semantics of web pages, including
elements, attributes, and how to create well-structured content.
 CSS (Cascading Style Sheets): Learn how to style web pages using CSS, including selectors, properties, and
responsive design principles.
 JavaScript: Gain proficiency in JavaScript, the programming language of the web, for client-side interactions,
including DOM manipulation and event handling.
 Web Browsers: Understand how web browsers work, their rendering engines, and cross-browser compatibility
issues.
 Front-End Frameworks: Explore popular front-end frameworks like React, Angular, or Vue.js for building
dynamic and interactive web applications.
 Back-End Development: Learn about server-side programming languages like PHP and how to build server-
side logic.
 Databases: Understand database management systems (e.g., MySQL) and how to work with databases for web
applications.
 APIs (Application Programming Interfaces): Master the creation and consumption of APIs for integrating web
applications with external services and data sources.
 Version Control: Use version control systems like Git to manage and collaborate on web development
projects.
 Security: Develop a strong understanding of web security, including common vulnerabilities and how to secure
your web applications.
 Performance Optimization: Learn techniques to optimize the performance of web applications, such as
minimizing load times and reducing resource usage.
 Responsive Design: Ensure your web applications are accessible and functional on various devices and screen
sizes.
 Testing and Debugging: Develop skills in testing and debugging web applications to identify and fix issues.
 Web Accessibility: Learn how to make web content accessible to people with disabilities, following WCAG
guidelines.
 Web Standards: Keep up with web standards and best practices, such as HTML5, CSS3, and ECMAScript, and
follow the latest developments in web technologies.
 Continuous Learning: Web development is a continually evolving field, so make a commitment to ongoing
learning and staying updated with new tools and technologies.
 Portfolio and Projects: Build a portfolio of web development projects that showcase your skills and
experience. Practical application is a key part of learning.
Table of Contents
Certificate of Training (Photo Copy Only)............................................................................i

Declaration............................................................................................................................ii
Acknowledgement.................................................................................................................iii
Preface (Objective of the Training).......................................................................................iv
Table of Contents...................................................................................................................v
Profile of the Company & Training Division........................................................................vi
Scheduled Chart of Training Activities.................................................................................vii
List of Figures….................................................................................................................................viii
List of Tables…..................................................................................................................................ix
List of Abbreviations…......................................................................................................................x
Chapters:
Chapter 1: HTML (Hypertext Markup Language)
Chapter 2: CSS(Cascading Style Sheet)
Chapter 3: Bootstrap Framework
Chapter 4: Javascript
Chapter 5: PHP(Hypertext Preprocessor)
Chapter 6: SQL( Structured Query Language)
Chapter 7: Learning Outcomes & Conclusion
Chapter 8: Bibliography (No referencing to Wikipedia) in Proper Formatting
Chapter 9: Appendix (containing code/ algorithms along with the Results/ Screen Prints (If any) *
Company Profile
Nest Algorithm, Yamunanagar is a leading training institute in providing career- oriented education
to the students so as to equip them with requisite qualification and training. This will enable them
either to take up a gainful employment or start their own enterprise and become self-sufficient.
Nest Algorithm is totally alive to the needs and aspirations of the student community and keeps
itself abreast of the changes taking place on the industrial front of the country and excelling in their
field by providing industry oriented trainings in the area of Web Development through Visual
Studio Dot Net 2023 & Python, JavaScript etc.
The training division of Next Algorithm has well trained, competent, experienced and highly
dedicated faculty to impart theoretical as well as practical learning to its students, Regular
involvement of the expert outside faculty having in-line experience from reputed institutions and
organizations help in improving the quality and gives wider exposure to the students.
The Institute has good market rapport and sponsors their students for various live industrial
projects during and after the training to inculcate their skills and knowledge to the practical world.
The Institute is committed to provide quality vocational and technical education to its students, so
as to boost their morale and instill new confidence to prepare them to accept the challenges of life
and put their best foot forward in the march to success for betterment of their lot.
TRAINING SCHEDULE w.e.f. 15-07-2023
Time Duration Contents
WEEK-1 Introduction to HTML, HTML Document Structure , HTML Tags(headings, paragraphs,

lists etc) and Elements(Forms and input elements etc) ,HTML Attributes.
(15-07-2023 to 21-07-
2023)
WEEK-2 CSS, Properties(color, font, size),Box model (margin, padding, border) , Flexbox and
Grid container properties (grid-template-rows, grid-template-columns, grid-gap, etc.),
(22-07-2023 to 28-07- Layout and Positioning, Selectors, Combinators,
2023)
WEEK-3 Understanding the importance of responsive design, Media queries and viewport settings
(29-07-2023 to 04-08- ,Syntax and structure of media queries, Viewport units, characteristics (width, height,
2023) orientation, etc.)
Introduction to Bootstrap, Basic structure of a Bootstrap document., Understanding the

WEEK-4 responsive grid layout., components like navigation bars, buttons, forms, etc.,
Bootstrap's JavaScript plugins.
(05-08-2023 to 11-08-
2023)
WEEK-5 Introduction to JavaScript, Variables and data types, Operators and expressions,
(12-08-2023 to 18-08- Conditional statements (if, else, switch), Loops (for, while, do-while, for-
2023) Each),Selecting and modifying DOM elements, Creating and deleting DOM elements,
Understanding and handling events
WEEK-6 Introduction to PHP, Control structures (if, else, switch, loops), Processing forms in PHP
(19-08-2023 to 25-08- ,Basic SQL queries (SELECT, INSERT, UPDATE, DELETE), Establishing a
2023) connection, Executing SQL queries in PHP
WEEK-7 Basics of React components and JSX, Basics of React components and JSX,
(26-08-2023 to 01-09- Understanding JSX syntax, Passing data with props, Event handling in React
2023)
WEEK-8 Navigation and route parameters, useState, useEffect, and other hooks, Custom hooks
(02-09-2023 to 08-09- and their use
2023)
WEEK-9 Apply the learned concepts to a final project, Refine and improve the project
(09-09-2023 to 15-09-
2023)
Introduction to HTML:
HTML is a markup language that uses a system of tags and attributes to define the structure and
presentation of content within a web page. It consists of plain text documents with embedded code
that instructs web browsers on how to render the content.
Text that is not restricted to a sequential format and that includes links to other text is called
Hypertext. The links can connect online pages inside a single or different website.
Markup Language is a language that is interpreted by the browser and it defines the elements within
a document using “tags”. It is human-readable, which means that markup files use common words
rather than the complicated syntax of programming languages.
Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling,
and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and
each HTML tag contains different content.
HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this version was
announced in January 2008. There are two major organizations one is W3C (World Wide Web Consortium),
and another one is WHATWG( Web Hypertext Application Technology Working Group) which are
involved in the development of HTML 5 version, and still, it is under development.
HTML Document Structure:
<!DOCTYPE html>
The first thing in any HTML document is the preamble. For HTML, all you need is <!DOCTYPE
html>. This may look like an HTML element, but it isn't. It's a special kind of node called
"doctype". The doctype tells the browser to use standards mode. If omitted, browsers will use a
different rendering mode known as quirks mode. Including the doctype helps prevent quirks mode.
<html>
The <html> element is the root element for an HTML document. It is the parent of
the <head> and <body>, containing everything in the HTML document other than the doctype. If
omitted it will be implied, but it is important to include it, as this is the element on which the
language of the content of the document is declared.
<head>
This contains the information about the HTML document. For Example, the Title of the page,
version of HTML, Meta Data, etc.
<body>
This contains everything you want to display on the Web Page.A body tag is used to enclose all the data
which a web page has from texts to links. All the content that you see rendered in the browser is contained
within this element. Following tags and elements used in the body.
Basic Structure of HTML

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HTML Tags and Elements:
<a> It is termed as anchor tag and it creates a hyperlink or link.
<article> It defines the self-contained content.
<aside> It defines content aside from main content. Mainly represented as sidebar.
<audio> It is used to embed sound content in HTML document.
<b> It is used to make a text bold.
<body> It is used to define the body section of an HTML document.
<br> It is used to apply single line break.
<button> It is used to represent a clickable button
<canvas> It is used to provide a graphics space within a web document.
<div> It defines a division or section within HTML document.
<em> It is used to emphasis the content applied within this element.
<footer> HTML Tags List It defines the footer section of a webpage.
<form> It is used to define an HTML form.
<h1> It defines headings for an HTML document from <h1> to <h6>.
<head> It defines the head section of an HTML document.
<header> It defines the header of a section or webpage.
<hr> It is used to apply thematic break between paragraph-level elements.
<html> It represents root of an HTML document.
<i> It is used to represent a text in some different voice.
<img> It is used to insert an image within an HTML document.
<input> It defines an input field within an HTML form.
<li> It is used to represent items in list.
<link> It represents a relationship between current document and an external resource.
<marquee> It is used to insert the scrolling text or an image either horizontally or vertically.
<meta> It defines metadata of an HTML document.

<nav> It represents section of page to represent navigation links.
<ol> It defines an ordered list of items.
<option> It is used to define options or items in a drop-down list.
<p> It represents a paragraph in an HTML document.
<pre> It defines preformatted text in an HTML document.
<script> It is used to declare the JavaScript within HTML document.
<span> It is used for styling and grouping inline.
<strong> It is used to define important text.
<style> It is used to contain style information for an HTML document.
<table> It is used to present data in tabular form or to create a table within HTML document.
<tbody> It represents the body content of an HTML table and used along with <thead> and <tfoot>.
<td> It is used to define cells of an HTML table which contains table data
<template> It is used to contain the client side content which will not display at time of page load and may
render later using JavaScript.
<textarea> It is used to define multiple line input, such as comment, feedback, and review, etc.
<tfoot> It defines the footer content of an HTML table.
<th> It defines the head cell of an HTML table.
<thead> It defines the header of an HTML table. It is used along with <tbody> and <tfoot> tags.
<title> It defines the title or name of an HTML document.
<tr> It defines the row cells in an HTML table
<u> It is used to render enclosed text with an underline.
<ul> It defines unordered list of items.

HTML ATTRIBUTES
Attribute Name Elements Description
The URI of a program that processes the information submitted via

action <form>
the form.
<caption>, <col>, <colgroup>,

<hr>, <iframe>, <img>, <table>
align Specifies the horizontal alignment of the element.
, <tbody>, <td>, <tfoot>, <th>,
<thead>, <tr>
alt <area>, <img>, <input> Alternative text in case an image can't be displayed.
autocapitalize Global attribute Sets whether input is automatically capitalized when entered by user
<form>, <input>, <select>, Indicates whether controls in this form can by default have their
autocomplete
<textarea> values automatically completed by the browser.
autoplay <audio>, <video> The audio or video should play as soon as possible.
background <body>, <table>, <td>, <th> Specifies the URL of an image file.
<body>, <col>, <colgroup>,

bgcolor <marquee>, <table>, <tbody>, Background color of the element.
<tfoot>, <td>, <th>, <tr>
border <img>, <object>, <table> The border width.
checked <input> Indicates whether the element should be checked on page load.
class Global attribute Often used with CSS to style elements with common properties.
This attribute sets the text color using either a named color or a color
color <font>, <hr>
specified in the hexadecimal #RRGGBB format.
cols <textarea> Defines the number of columns in a textarea.
The colspan attribute defines the number of columns a cell should

colspan <td>, <th>
span.
A value associated with http-equiv or name depending on the

content <meta>
context.
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
Defines the text direction. Allowed values are ltr (Left-To-Right) or

dir Global attribute
rtl (Right-To-Left)
dirname <input>, <textarea>
disabled <button>, <fieldset>, <input>, Indicates whether the user can interact with the element.
<optgroup>, <option>, <select>,
<textarea>
download <a>, <area> Indicates that the hyperlink is to be used for downloading a resource.
enctype <form> Defines the content type of the form data when the method is POST.
for <label>, <output> Describes elements which belongs to this one.
<button>, <fieldset>, <input>,

<label>, <meter>, <object>, <ou
form Indicates the form that is the owner of the element.
tput>, <progress>, <select>, <te
xtarea>
If the button/input is a submit button (e.g. type="submit"), this

attribute sets the submission method to use during form submission
formmethod <button>, <input>
(GET, POST, etc.). If this attribute is specified, it overrides
the method attribute of the button's form owner.
If the button/input is a submit button (e.g. type="submit"), this

attribute specifies the browsing context (for example, tab, window,
formtarget <button>, <input> or inline frame) in which to display the response that is received after
submitting the form. If this attribute is specified, it overrides
the target attribute of the button's form owner.
headers <td>, <th> IDs of the <th> elements which applies to this element.
Specifies the height of elements listed here. For all other elements,
<canvas>, <embed>, <iframe>, use the CSS height property.
height <img>, <input>, <object>,
<video> Note: In some instances, such as <div>, this is a legacy attribute, in
which case the CSS height property should be used instead.
Prevents rendering of given element, while keeping child elements,

hidden Global attribute
e.g. script elements, active.
href <a>, <area>, <base>, <link> The URL of a linked resource.
hreflang <a>, <link> Specifies the language of the linked resource.
Often used with CSS to style a specific element. The value of this
id Global attribute
attribute must be unique.
Provides a hint as to the type of data that might be entered by the

user while editing the element or its contents. The attribute can be
inputmode <textarea>, contenteditable
used with form controls (such as the value of textarea elements), or
in elements in an editing host (e.g., using contenteditable attribute).
label <optgroup>, <option>, <track> Specifies a user-readable title of the element.
lang Global attribute Defines the language used in the element.

language Deprecate
<script> Defines the script language used in the element.
d
loading Experiment Indicates if the element should be loaded lazily (loading="lazy") or

<img>, <iframe>
al loaded immediately (loading="eager").
list <input> Identifies a list of pre-defined options to suggest to the user.
Indicates whether the media should start playing from the start when
loop <audio>, <marquee>, <video>
it's finished.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
minlength <input>, <textarea> Defines the minimum number of characters allowed in the element.
<a>, <area>, <link>, <source>, Specifies a hint of the media for which the linked resource was
media
<style> designed.
Defines which HTTP method to use when submitting the form. Can
method <form>
be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
Indicates whether multiple values can be entered in an input of the

multiple <input>, <select>
type email or file.
muted <audio>, <video> Indicates whether the audio will be initially silenced on page load.
<button>, <form>, <fieldset>,

<iframe>, <input>, <object>, Name of the element. For example used by the server to identify the
name
<output>, <select>, <textarea>, fields in form submits.
<map>, <meta>, <param>
Defines a regular expression which the element's value will be

pattern <input>
validated against.
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
Indicates whether the list should be displayed in a descending order

reversed <ol>
instead of an ascending order.
rows <textarea> Defines the number of rows in a text area.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
selected <option> Defines a value which will be selected on page load.
Defines the width of the element (in pixels). If the

size <input>, <select> element's type attribute is text or password then it's the number of
characters.
sizes <link>, <img>, <source>
span <col>, <colgroup>
spellcheck Global attribute Indicates whether spell checking is allowed for the element.
<audio>, <embed>, <iframe>,

src <img>, <input>, <script>, The URL of the embeddable content.
<source>, <track>, <video>
srcset <img>, <source> One or more responsive image candidates.
start <ol> Defines the first number if other than 1.
style Global attribute Defines CSS styles which will override styles previously set.
Specifies where to open the linked document (in the case of

target <a>, <area>, <base>, <form> an <a> element) or where to display the response received (in the
case of a <form> element)
title Global attribute Text to be displayed in a tooltip when hovering over the element.
Specify whether an element's attribute values and the values of

translate Global attribute its Text node children are to be translated when the page is localized,
or whether to leave them unchanged.
<button>, <input>, <embed>,

<object>, <ol>, <script>,
type Defines the type of the element.
<source>, <style>, <menu>,
<link>
<button>,<input>, <li>, Defines a default value which will be displayed in the element on
value
<option> page load.
For the elements listed here, this establishes the element's width.
<canvas>, <img>, <input>,
width Note: For all other instances, such as <div>, this is a legacy attribute,
<video>
in which case the CSS width property should be used instead.
wrap <textarea> Indicates whether the text should be wrapped.

REGISTRATION FORM
<table align="center" border="2">
<tr>
<th colspan=4>Registration</th>
</tr>
<tr>
<th colspan="4">
Username
</th>
<tr>
<td colspan="4"><input type="text" placeholder="Username" size="77"></td>
</tr>
</tr>
<tr>
<th colspan="4">Password</th>
<tr>
<td colspan="4"><input type="password" placeholder="Password" size="77"></td>
</tr>
<tr>
</tr>
<th colspan="4">Country</th>
<tr>
<td align="center" colspan="4"><select>
<option>Select any</option>
<option>India</option>
</select></td>
</tr>
<tr>
<th align="center" colspan="4">State</th>
</tr>
<tr>
<td align="center" colspan="4"><select>
<option>Haryana</option>
</select></td>
</tr>
<tr>
<th colspan="4">Gender</th>
</tr>
<tr>
<td align="center" colspan="1"><input type="radio" name="Gender">Male</td>
<td align="center" colspan="1"><input type="radio" name="Gender">Female</td>
</tr>
<tr>
<th colspan="4">Hobbies</th>
</tr>
<tr>
<td align="center" colspan="2"><input type="checkbox"> Reading
<input type="checkbox"> Gaming
<input type="checkbox"> Internet Surfing</td>
</tr>
<tr>
<th colspan="4">DOB</th>
</tr>
<tr>
<td align="center" colspan="4"><input type="date"></td>
</tr>
<tr>
<th colspan="4">Upload the Document here</th>
</tr>
<tr>
<td align="center" colspan="4"><input type="file"></td>
</tr>
<tr>
<th colspan="4">Address</th>
</tr>
<tr>
<td align="center" colspan="4"><textarea cols="70" rows="10"></textarea></td>
</tr>
<tr>
<td align="center" colspan="4"><input type="button" value="Submit"></td>
</tr>
</table>
OUTPUT
SIGN UP FORM
<table align="right" border="2" cellspacing="10" cellpading="10">
<tr>
<th align="left" colspan="3">
<font size="6"><b>Sign Up</b></font>
</th>
</tr>
<tr>
<td colspan="3">It's quick and easy</td>
</tr>
<tr>
<td colspan="3">
<hr />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="text" placeholder="First name" size="35" />
<input type="text" placeholder="Surname" size="35" />
</td>
</tr>
<tr>
<td colspan="3">
<input
type="text"
placeholder="Mobile number or email address"
size="76"
/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="password" placeholder="New Password" size="76" />
</td>
</tr>
<tr>
<td colspan="3">
<font size="2">Date of birth</font>
</td>
</tr>
<tr>
<td align="center">
<select size="">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
</select>
</td>
<td align="center">
<select size="">
<option>Jan</option>
<option>Feb</option>
<option>March</option>
<option>April</option>
</select>
</td>
<td align="center">
<select>
<option>1995</option>
</select>
</td>
</tr>
<tr>
<td colspan="3">
<font size="2">Gender</font>
</td>
</tr>
<td>Female <input type="radio" name="Gender" /></td>

<td>Male <input type="radio" name="Gender" /></td>
<td>Custom <input type="radio" name="Gender" /></td>
<tr>
<td colspan="3">
<p>
People use our service may have uploaded your contact information to <br />
Facebook. <a href="Learnmore">Learnmore</a><br /> By clicking Sign Up, you agree to

our <a href="Terms">Terms</a>,
<a href=" Privacy Policy"> Privacy Policy</a> and
<a href="Cookies Policy">Cookies Policy</a>.<br />
You may receive SMS notifications from us and can opt out at any time. </p>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="Sign Up" />
</td>
</tr>
</table>
OUTPUT
CASCADING STYLE SHEET(CSS)
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a
document written in HTML. CSS describes how elements should be rendered on screen, on paper,
in speech, or on other media.
CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations and other decorative
features. This module provides a gentle beginning to your path towards CSS mastery with the basics of
how it works, what the syntax looks like, and how you can start- using it to add styling to HTML.
CSS building blocks
This module carries on where CSS first steps left off — now you've gained familiarity with the language
and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks
at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds
and borders, debugging, and lots more.
The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the
essential theory, before moving on to more specific disciplines like text styling and CSS layout.
CSS styling text
With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text
— one of the most common things you'll do with CSS. Here we look at text styling fundamentals,
including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We
round off the module by looking at applying custom fonts to your page, and styling lists and links.
CSS layout
At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate
the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in
relation to the viewport, and to each other. We have covered the necessary prerequisites so we can now
dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS
grid, and positioning, and some of the legacy techniques you might still want to know about.
How to Link CSS to HTML

To link your CSS to your HTML, you have to use the link tag with some relevant attributes.
The link tag is a self-closing tag you should put at the head section of your HTML.
To link CSS to HTML with it, this is how you do it:
Place the link tag at the head section of your HTML as shown below:
Attributes of the Link Tag
The rel Attribute
rel is the relationship between the external file and the current file. For CSS, you use stylesheet. For
example, rel="stylesheet".
The type Attribute
type is the type of the document you are linking to the HTML. For CSS, it is text/css. For
example type="text/css".
The href Attribute
href stands for “hypertext reference”. You use it to specify the location of the CSS file and the file name. It
is a clickable link, so you can also hold CTRL and click it to view the CSS file.
For example, href="styles.css" if the CSS file is located in the same folder as the HTML file. Or
href="folder/styles.css" if the CSS file is located on another folder.
Linking CSS with HTML

Cascading Style Sheets (CSS) are used to define the visual style and layout of HTML documents. To apply
CSS styles to an HTML document, you need to link the CSS file to the HTML file. This is typically done
using the HTML `<link>` element or by embedding CSS directly within the HTML file using the `<style>`
element. Here's how CSS is linked to HTML:
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we
will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Using inline styles is not considered best practice, though, because it results in a lot of repetition – because
the styles cannot be reused elsewhere.
But there are times when inline styles are the best (or only) option, such as when styling HTML e-mail,
CMS content like WordPress, Drupal, and so on. You can also use them when styling dynamic content,
which is HTML-created or changed by JavaScript.
With the exception of the !important declaration, inline styles have a high specificity/highest priority,
which means they will override most other rules in internal and external stylesheets.
Assume we have two paragraph texts with inline styling set to red
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:
Example
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue"
background color:
Using internal CSS is considered a better practice than using inline CSS because it is easier to maintain and
results in less code. Internal CSS allows you to style groups of elements at once, rather than having to add
the same style attributes to elements over and over again.
Also, since internal CSS separates the CSS and HTML into different sections but keeps it in the same
document, internal CSS is ideal for simple, one-page websites. All your code is in one file, making it easy
to access.
But, if you have a multi-page site and would like to make changes across your site, you'll have to open up
each HTML file representing those pages and add or change the internal CSS in each head section. That’s
why it’s better to use external CSS in this case.
Example
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
With external CSS, you’ll link your web pages to an external .css file, which can be created by any
text editor in your device (e.g., Notepad++).
This CSS type is a more efficient method, especially for styling a large website. By editing
one .css file, you can change your entire site at once.
Example
External File:
The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content,
padding, borders and margins. The image below illustrates the box model:
Explanation of the different parts:
 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Example
Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you need to know how the box
model works.
Important: When you set the width and height properties of an element with CSS, you just set the width
and height of the content area. To calculate the total width and height of an element, you must also
include the padding and borders.
Example
This <div> element will have a total width of 350px and a total height of 80px:
Properties
Property Description
align-content Specifies the alignment of flexible container's items within the flex container.
align-items Specifies the default alignment for items within the flex container.
align-self Specifies the alignment for selected items within the flex container.
animation Specifies the keyframe-based animations.
animation-delay Specifies when the animation will start.
animation-direction Specifies whether the animation should play in reverse on alternate cycles or not.
animation-duration Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-iteration- Specifies the number of times an animation cycle should be played before stopping.
count
animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-timing- Specifies how a CSS animation should progress over the duration of each cycle.
function
backface-visibility Specifies whether or not the "back" side of a transformed element is visible when facing the user.
background Defines a variety of background properties within one declaration.
background-attachment Specify whether the background image is fixed in the viewport or scrolls.
background-clip Specifies the painting area of the background.
background-color Defines an element's background color.
background-image Defines an element's background image.
background-origin Specifies the positioning area of the background images.
background-position Defines the origin of a background image.
background-repeat Specify whether/how the background image is tiled.

background-size Specifies the size of the background images.
border Sets the width, style, and color for all four sides of an element's border.
border-bottom Sets the width, style, and color of the bottom border of an element.
border-bottom-color Sets the color of the bottom border of an element.
border-bottom-left- Defines the shape of the bottom-left border corner of an element.

radius
border-bottom-right- Defines the shape of the bottom-right border corner of an element.

radius
border-bottom-style Sets the style of the bottom border of an element.
border-bottom-width Sets the width of the bottom border of an element.
border-collapse Specifies whether table cell borders are connected or separated.
border-color Sets the color of the border on all the four sides of an element.
border-image Specifies how an image is to be used in place of the border styles.
border-image-outset Specifies the amount by which the border image area extends beyond the border box.
border-image-repeat Specifies whether the image-border should be repeated, rounded or stretched.
border-image-slice Specifies the inward offsets of the image-border.
border-image-source Specifies the location of the image to be used as a border.
border-image-width Specifies the width of the image-border.
border-left Sets the width, style, and color of the left border of an element.
border-left-color Sets the color of the left border of an element.
border-left-style Sets the style of the left border of an element.
border-left-width Sets the width of the left border of an element.

border-radius Defines the shape of the border corners of an element.
border-right Sets the width, style, and color of the right border of an element.
border-right-color Sets the color of the right border of an element.
border-right-style Sets the style of the right border of an element.
border-right-width Sets the width of the right border of an element.
border-spacing Sets the spacing between the borders of adjacent table cells.
border-style Sets the style of the border on all the four sides of an element.
border-top Sets the width, style, and color of the top border of an element.
border-top-color Sets the color of the top border of an element.
border-top-left- Defines the shape of the top-left border corner of an element.

radius
border-top-right- Defines the shape of the top-right border corner of an element.

radius
border-top-style Sets the style of the top border of an element.
border-top-width Sets the width of the top border of an element.
border-width Sets the width of the border on all the four sides of an element.
bottom Specify the location of the bottom edge of the positioned element.
box-shadow Applies one or more drop-shadows to the element's box.
box-sizing Alter the default CSS box model.
caption-side Specify the position of table's caption.
clear Specifies the placement of an element in relation to floating elements.
clip Defines the clipping region.

color Specify the color of the text of an element.
column-count Specifies the number of columns in a multi-column element.
column-fill Specifies how columns will be filled.
column-gap Specifies the gap between the columns in a multi-column element.
column-span Specifies how many columns an element spans across in a multi-column layout.
column-width Specifies the optimal width of the columns in a multi-column element.
columns A shorthand property for setting column-width and column-count properties.
content Inserts generated content.
counter-increment Increments one or more counter values.
counter-reset Creates or resets one or more counters.
cursor Specify the type of cursor.
direction Define the text direction/writing direction.
display Specifies how an element is displayed onscreen.
empty-cells Show or hide borders and backgrounds of empty table cells.
flex Specifies the components of a flexible length.
flex-basis Specifies the initial main size of the flex item.
flex-direction Specifies the direction of the flexible items.
flex-flow A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow Specifies how the flex item will grow relative to the other items inside the flex container.
flex-shrink Specifies how the flex item will shrink relative to the other items inside the flex container.
flex-wrap Specifies whether the flexible items should wrap or not.

float Specifies whether or not a box should float.
font Defines a variety of font properties within one declaration.
font-family Defines a list of fonts for element.
font-size Defines the font size for the text.
font-size-adjust Preserves the readability of text when font fallback occurs.
font-stretch Selects a normal, condensed, or expanded face from a font.
font-style Defines the font style for the text.
font-variant Specify the font variant.
font-weight Specify the font weight of the text.
height Specify the height of an element.
justify-content Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and
auto margins have been resolved.
left Specify the location of the left edge of the positioned element.
letter-spacing Sets the extra spacing between letters.
line-height Sets the height between lines of text.
list-style Defines the display style for a list and list elements.
list-style-image Specifies the image to be used as a list-item marker.
list-style-position Specifies the position of the list-item marker.
list-style-type Specifies the marker style for a list-item.
margin Sets the margin on all four sides of the element.

margin-bottom Sets the bottom margin of the element.
margin-left Sets the left margin of the element.
margin-right Sets the right margin of the element.
margin-top Sets the top margin of the element.
max-height Specify the maximum height of an element.
max-width Specify the maximum width of an element.
min-height Specify the minimum height of an element.
min-width Specify the minimum width of an element.
opacity Specifies the transparency of an element.
order Specifies the order in which a flex items are displayed and laid out within a flex container.
outline Sets the width, style, and color for all four sides of an element's outline.
outline-color Sets the color of the outline.
outline-offset Set the space between an outline and the border edge of an element.
outline-style Sets a style for an outline.
outline-width Sets the width of the outline.
overflow Specifies the treatment of content that overflows the element's box.
overflow-x Specifies the treatment of content that overflows the element's box horizontally.
overflow-y Specifies the treatment of content that overflows the element's box vertically.
padding Sets the padding on all four sides of the element.
padding-bottom Sets the padding to the bottom side of an element.
padding-left Sets the padding to the left side of an element.

padding-right Sets the padding to the right side of an element.
padding-top Sets the padding to the top side of an element.
perspective Defines the perspective from which all child elements of the object are viewed.
perspective-origin Defines the origin (the vanishing point for the 3D space) for the perspective property.
position Specifies how an element is positioned.
resize Specifies whether or not an element is resizable by the user.
right Specify the location of the right edge of the positioned element.
tab-size Specifies the length of the tab character.
table-layout Specifies a table layout algorithm.
text-align Sets the horizontal alignment of inline content.
text-align-last Specifies how the last line of a block or a line right before a forced line break is aligned when text-
align is justify.
text-decoration Specifies the decoration added to text.
text-indent Indent the first line of text.
text-justify Specifies the justification method to use when the text-align property is set to justify.
text-overflow Specifies how the text content will be displayed, when it overflows the block containers.
text-shadow Applies one or more shadows to the text content of an element.
text-transform Transforms the case of the text.
top Specify the location of the top edge of the positioned element.
transform Applies a 2D or 3D transformation to an element.

transform-origin Defines the origin of transformation for an element.
transform-style Specifies how nested elements are rendered in 3D space.
transition Defines the transition between two states of an element.
transition-delay Specifies when the transition effect will start.
transition-duration Specifies the number of seconds or milliseconds a transition effect should take to complete.
transition-property Specifies the names of the CSS properties to which a transition effect should be applied.
transition-timing- Specifies the speed curve of the transition effect.

function
width Specify the width of an element.
word-break Specifies how to break lines within words.
word-spacing Sets the spacing between words.
word-wrap Specifies whether to break words when the content overflows the boundaries of its container.
z-index Specifies a layering or stacking order for positioned elements.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector

The element selector selects HTML elements based on the element name.
Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example
The CSS rule below will be applied to the HTML element with id="para1":
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class="center" will be red and center-aligned:
Example
In this example only <p> elements with class="center" will be red and center-aligned:
Example
In this example the <p> element will be styled according to class="center" and to class="large":
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
CSS Combinators
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a
combinator.
There are four different combinators in CSS:

 Descendant selector (space)
 Child selector (>)
 Adjacent sibling selector (+)
 General sibling selector (~)
Descendant Selector
This selector is used to select all the child elements of the specified tag. The tags can be the direct child
of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors
such that selected elements have an ancestor the same as the first selector element.
The following example selects all <p> elements inside <div> elements:
Example
Child Selector (>)
This selector is used to select the element that is the immediate child of the specified tag. This
combinator is stricter than the descendant selector because it selects only the second selector if it has the
first selector element as its parent.
The following example selects all <p> elements that are children of a <div> element:
Example
Adjacent Sibling Selector (+)
The Adjacent sibling selector is used to select the element that is adjacent or the element that is next to
the specified selector tag. This combinator selects only one tag that is just next to the specified tag.
The following example selects the first <p> element that are placed immediately after <div>
elements:
Example
General Sibling Selector (~)
The general sibling selector is used to select the element that follows the first selector element and also
shares the same parent as the first selector element. This can be used to select a group of elements that
share the same parent element.
The following example selects all <p> elements that are next siblings of <div> elements:
Example
CSS PSEUDO-ELEMENT
A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
 Style the first letter, or line, of an element

 Insert content before, or after, the content of an element
Syntax
The syntax of pseudo-elements:
The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.
The following example formats the first line of the text in all <p> elements:
Example
The following properties apply to the ::first-line pseudo-element:
 font properties
 color properties
 background properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
The following example formats the first letter of the text in all <p> elements:
Example
The following properties apply to the ::first-letter pseudo- element:
 font properties
 color properties
 background properties
 margin properties
 padding properties
 border properties
 text-decoration
 vertical-align (only if "float" is "none")
 text-transform
 line-height
 float
 clear
Pseudo-elements and HTML Classes
Pseudo-elements can be combined with HTML classes:
Example
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the
first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:
Example
CSS - The ::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
The following example inserts an image before the content of each <h1> element:
Example
CSS - The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after the content of each <h1> element:
Example
CSS - The ::marker Pseudo-element
The ::marker pseudo-element selects the markers of list items.
The following example styles the markers of list items:

Example
CSS - The ::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
The following example makes the selected text red on a yellow background:
Example
CCS PSEUDO-CLASS
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
 Style an element when a user mouses over it

 Style visited and unvisited links differently
 Style an element when it gets focus
Syntax
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
Pseudo-classes and HTML Classes

Pseudo-classes can be combined with HTML classes:
When you hover over the link in the example, it will change color:
Example
Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
Example
Simple Tooltip Hover

Hover over a <div> element to show a <p> element (like a tooltip):
Hover over me to show the <p> element.
Example
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:
Example
Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:
Example
Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of
another element:
Example
INSTAGRAM SIGNUP PAGE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account</title>
<style>
.first {
background-color: white;
border: 1px solid black;
width: 600px;
height: 620px;
text-align: center;
font-family: sans-serif;
margin: auto;
}
.second {
height: 150px;
width: 600px;
}
.text {
height: 50px;
font-size: large;
font-weight: bold;
color: grey;
}
.For {
height: 50px;
width: 600px;
}
.forth {
height: 30px;
width: 400px;
margin: auto;
background-color: #24a0ed;
color: white;
font-size: large;
border: none;
font-weight: bold;
border-radius: 6px 6px;
}
.logo {
height: 18px;
}
.hr {
width: 400px;
margin: auto;
display: flex;
height: 35px;
}
.fg {
width: 45%;
}
.OR {
width: 10%;
font-weight: bold;
color: grey;
}
.third {
height: 35px;
width: 400px;
margin: auto;
}
.password {
height: 25px;
border-radius: 6px 6px;
border-width: 1px;
}
.access {
width: 600px;
height: 70px;
text-align: center;
margin: auto;
color: gray;
}
.log {
text-decoration: none;
color: rgb(17, 17, 173);
}
.dont {
width: 600px;
height: 10px;
margin: auto;
}
.access1 {
background-color: white;
border: 1px solid black;
width: 600px;
height: 50px;
margin: auto;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="first">
<div class="second"><img src="instagram.png" height="195px" width="400px"></div>
<div class="text">Sign Up to see photos and vidoes <br>from your friends.
</div>
<div class="For">
<button type="button" class="forth"><img class="logo" src="fb1.jpg" alt="" height="20px"> Log
in with Facebook</button>
</div>
<div class="hr">
<div class="fg">
<hr>
</div>
<div class="OR">OR</div>
<div class="fg">
<hr>
</div>
</div>
<div class=" third">

<input class="password" type="text" placeholder="Mobile number or email address" size="55">
</div>
<input class="password" type="text" placeholder="Full Name" size="55">
</div>
<input class="password" type="text" placeholder="Username" size="55">
</div>
<input class="password" type="password" placeholder="Password" size="55">
</div>
<div class="access">
People who use our service may have uploaded<br> your contact information to Instagram.
<a class="log" href="#" target="_blank">Learn<br>more</a>
</div>
<div class="access">
By signing up, you agree to our
<a class="log" href="#" target="_blank">Terms, Privacy<br> Policy</a> and
<a class="log" href="#" target="_blank"> Cookies Policy</a>.
</div>
<div class="For">
<button type="button" class="forth">Sign Up</button>
</div>
</div>
<div class="dont">
</div>
<div class="access1">
Have an account?
<a class="log" href="009instaLogin.html" target="_blank">Log in</a>
</div>
</body>
</html>
OUTPUT
Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, mobile first front-end web
development. It contains CSS and JavaScript-based design templates for typography, forms, buttons,
navigation, and other components. Bootstrap is one of the simplest to implement and use in the market. Its
implementation is as simple as importing a CSS and using the classes available. Bootstrap’s
responsiveness makes it all much simpler. It can intelligently sense the device’s resolution and screen
width and adjust the content accordingly. Bootstrap is supported by the huge open source community
present on GitHub. Any bugs or issues are resolved in no time for the releases.
CSS
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
JS
Many of our components require the use of JavaScript to function. Specifically, they require our own
JavaScript plugins and Popper. Place one of the following <script>s near the end of your pages, right before
the closing </body> tag, to enable them.
Include every Bootstrap JavaScript plugin and dependency with one of our two bundles.
Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. For more
information about what’s included in Bootstrap, please see our contents section.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-

MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
Separate
If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or
popovers), and then our JavaScript plugins.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-

IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-

cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
Create Your First Web Page With Bootstrap 5

1. Add the HTML5 doctype
Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the
correct title and character set:
2. Bootstrap 5 is mobile-first
Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core
framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:
The width=device-width part sets the width of the page to follow the screen-width of the device (which
will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap 5 also requires a containing element to wrap site contents.
There are two container classes to choose from:
1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning the entire width of the viewport
STARTER TEMPLATE
Put it all together and your pages should look like this:
<!doctype html><html lang="en">

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCO
mLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/
tWtIaxVXM" crossorigin="anonymous"></script>


</body></html>
ICODER’S WEBSITE
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">


integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASj
C" crossorigin="anonymous">
<style>
.color_grey:hover {
color: white !important;
}
.color_grey {
color: #FFFFFF8C !important;
font-size: 16px !important;
/* padding: 11px !important; */
transition: 1500ms;
}
.cards {
width: 650px !important;
height: 250px !important;
}
.pointer {
cursor: pointer;
}
</style>
<title>iCoder heaven for programmers</title>
</head>
<body>
<div class="container-fluid" style="padding: 0px !important; padding-right: 0px !important;">
<div class="row ">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-dark" style="padding-left: 12px ; padding-
right: 12px;">
<div class="container-fluid p-0">
<a class="navbar-brand text-white bg-dark" style="font-size: 20px !important; margin-
right: 16px !important;" href="#">iCoder</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white bg-dark" style="font-size: 16px !important;"
aria-current="page" href="index.html" target="_blank">Home</a>
</li>
<a class="nav-link color_grey" href="about.html" target="_blank">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle color_grey" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Topics
</a>
<ul class="dropdown-menu color_grey" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<a class="nav-link color_grey" href="contact.html" tabindex="-1" aria-
disabled="true" target="_blank">Contact us</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button type="button" class="btn btn-outline-light me-2"
type="submit">Search</button>
<button type="button" class="btn btn-danger me-1"
type="submit">log in</button>
<button type="button" class="btn btn-danger me-2"
type="submit">sign up</button>
</form>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
aria-label="Slide 2"></button>
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h2 class="mb-2">Welcome to iCoder
</h2>
<p class="fs-6">Technology News,Development and Trends</p>
<button class="btn btn-danger ">Technology</button>
<button class="btn btn-primary ">Web development</button>
<button class="btn btn-success ">Tech fun</button>
</div>
</div>
<div class="carousel-item">
<h2 class="mb-2">The best coding Blog
</h2>
</div>
</div>
<div class="carousel-item">
<h2 class="mb-2">Award winning blog
</h2>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="col-md-5 me-3">
<div class="card mb-3" style="width: 540px;">
<div class="row g-0 cards pointer">
<div class="card-body m-lg-2">
<h6 class="card-title mb-2 mt-1 text-primary fw-bold">World</h6>
<h3 class="mb-0 mt-1">Global conference</h3>
<p class="mb-1 text-muted">Nov 12</p>
<p class="card-text mb-5">This is a wider card with supporting text below as a natural
lead-in to additional content.</p>
<a href="#">Continue reading</a>
</div>
</div>
<img src="IMG/thum1.jpg" class="rounded-end" style="height: 250px; width: 200px;"
alt="...">
</div>
</div>
</div>
</div>
<div class="col-md-5 me-3">
<h6 class="card-title mb-2 mt-1 text-success fw-bold">Design</h6>
<h3 class="mb-0 mt-1">Learn Designing</h3>
</div>
</div>
alt="...">
</div>
</div>
</div>
</div>
<div class="col-md-5 me-3 mt-2">
<h6 class="card-title mb-2 mt-1 text-success fw-bold">Python</h6>
<h3 class="mb-0 mt-1">Learn Python</h3>
</div>
</div>
alt="...">
</div>
</div>
</div>
</div>
<div class="col-md-5 me-3 mt-2">
<h6 class="card-title mb-2 mt-1 text-success fw-bold">FrontEnd</h6>
<h3 class="mb-0 mt-1">Bootstrap Template</h3>
</div>
</div>
alt="...">
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<p>© 2020-2021 Company,Inc. ·
<a href="">Privacy</a> ·
<a href="">Terms</a>
<a class="float-end" href="#">Back to top</a>
</p>
</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/
tWtIaxVXM" crossorigin="anonymous"></script>


</body>
</html>
OUTPUT
JAVASCRIPT
JavaScript is a scripting or programming language that allows you to implement complex features on web
pages — every time a web page does more than just sit there and display static information for you to look
at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video
jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of
standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other
parts of the Learning Area.
JavaScript is a crucial programming language in web development, playing a pivotal role in creating
dynamic and interactive websites. It's an integral part of the modern web development stack, alongside
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). JavaScript empowers developers
to build feature-rich web applications, enhance user experience, and make web pages more responsive.
JavaScript primarily operates on the client-side, meaning it runs within the user's web browser. This allows
for real-time interactions and updates without needing to reload the entire web page. It is essential for
creating dynamic, responsive user interfaces.
JavaScript enables the manipulation of the Document Object Model (DOM), which represents the structure
and content of a web page. Developers can use JavaScript to modify, add, or remove elements on a
webpage dynamically. This makes it possible to create responsive user interfaces that change in real-time
based on user interactions.
How to Link JavaScript File in HTML ?
JavaScript can be added to HTML file in two ways:

Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the <script>
tag. The <script> tag can either be placed inside the <head> or the <body> tag according to the
requirement.
External JS: We can write JavaScript code in another files having an extension.js and then link this
file inside the <head> tag of the HTML file in which we want to add this code.
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head
<body>

<script>
console.log("HELLOWORLD");
</script>
</body>
</html>
JavaScript Fundamentals
Variables and Data Types
JavaScript supports various data types, including numbers, strings, booleans, objects, arrays, and more.
Variables are declared using var, let, or const. Understanding the differences between these variable
declaration keywords is essential.
Variable scope in JavaScript plays a critical role in how data is stored and accessed. Variables declared
with var are function-scoped, while those declared with let and const are block-scoped. This distinction
impacts variable accessibility and behavior within functions and blocks of code.
Examples
var name = "John"; // Function-scoped variable
let age = 30; // Block-scoped variable
const PI = 3.14159; // Block-scoped constant
Operators
Operators in JavaScript are essential for performing a wide range of operations, from basic arithmetic to
complex comparisons. Arithmetic operators (+, -, *, /) are used for mathematical calculations, while
comparison operators (<, >, ==, ===, !=, !==) allow for comparing values.
Logical operators like &&, ||, and ! are fundamental for creating complex conditional statements. They
help control the flow of the program and make decisions based on multiple conditions.
Examples
let a = 5;
let b = 10;
let result = a + b; // Addition
let isEqual = a === b; // Strict equality
let isTrue = true;
let isFalse = false;
let logicalAnd = isTrue && isFalse; // Logical AND
Control Flow
Control flow structures, such as if statements, for and while loops, and switch statements, are key
components of JavaScript that allow developers to control program execution. if statements enable
conditional branching, and loops (e.g., for loops) are used to repeat tasks iteratively.Understanding the
concept of truthy and falsy values is crucial for working with conditional statements. JavaScript evaluates
certain values as either true or false in a boolean context. This feature can be leveraged to create concise
and elegant code.
Examples
// Control flow exampleslet condition = true;if (condition) {
console.log("This code executes when the condition is true.");
} else {
console.log("This code executes when the condition is false.");
for (let i = 0; i < 5; i++) {
console.log(`Iteration ${i}`);
Functions
Functions are the building blocks of JavaScript. They are first-class objects, meaning they can be assigned
to variables, passed as arguments to other functions, and returned from functions. This flexibility is a
fundamental concept in JavaScript and allows for the creation of higher-order functions.Function scope
and closures are advanced topics that play a significant role in JavaScript development. Closures are
functions that have access to variables from their containing functions, even after those outer functions
have finished executing. This powerful concept is often used to create private data and encapsulation in
JavaScript applications.
Examples
// Function syntaxfunction greet(name) {
return `Hello, ${name}!`;
const message = greet("Alice");console.log(message);
// Closure examplefunction outerFunction() {
const outerVariable = "I'm from the outer function";
function innerFunction() {
console.log(outerVariable);}
return innerFunction;}
const closure = outerFunction();closure(); // Accesses the outerVariable from the outer function
JavaScript Objects
Objects in JavaScript are collections of key-value pairs. They are fundamental for organizing and storing
data. Object literals, constructors, and classes (ES6) are used to create objects.
JavaScript object is a non-primitive data-type that allows you to store multiple collections of data
Examples
// Object literal syntaxconst person = {
name: "John",
age: 30,
isStudent: false,
};
// Object constructor syntaxfunction Car(make, model) {
this.make = make;
this.model = model;
const myCar = new Car("Toyota", "Camry");
Built-in Objects
JavaScript includes a wide range of built-in objects, such as Array, Date, Math, and RegExp, which
provide pre-defined functionality and methods for common tasks.
Examples
// Array exampleconst numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((total, num) => total + num,
0);
// Date exampleconst today = new Date();const day = today.getDate();
// Math exampleconst randomValue = Math.random();
// RegExp exampleconst pattern = /javascript/i;const isMatch = pattern.test("JavaScript is fun!");
Document Object Model

The Document Object Model (DOM) is a crucial concept in JavaScript and web development. It represents
the structure and content of an HTML document as a tree-like structure, where each element in the
document is a node in the tree. Developers can use JavaScript to interact with and manipulate the DOM,
allowing them to dynamically change the content, structure, and appearance of a web page. Here's an
explanation of the DOM and some example JavaScript code to demonstrate its usage.
In a web page, the DOM represents the HTML elements as objects that can be accessed, modified, or
manipulated using JavaScript. These objects are organized in a tree-like structure, where the HTML
document itself is the root node. You can access and modify elements, attributes, and content within this
structure, enabling dynamic interactions and updates without requiring a page refresh.
 Accessing elements by their IDs using document.getElementById.
 Adding event listeners to the "Change Text" and "Change Style" buttons to respond to user clicks.
 Modifying the content of the header and paragraph elements using the textContent and innerHTML
properties.
 Changing the style of the header element by modifying its style properties.
 When you open this HTML page in a web browser and click the buttons, you'll see the DOM being
dynamically manipulated, demonstrating the power and flexibility of JavaScript for web development.
EVENTS AND EVENT HANDLING

Event handling is a fundamental concept in JavaScript that allows you to respond to user interactions and
other events in a web page. Events are actions or occurrences that can be detected and used to trigger
JavaScript functions, making web pages interactive. In JavaScript, you can handle events by adding event
listeners to HTML elements to specify which functions should be executed when a particular event occurs.
Events in web development can be diverse, including user interactions like clicks, mouse movements, and
keyboard input, as well as document-related events like page loading and form submissions. Event
handling allows you to respond to these events by defining the behavior you want to occur when a specific
event takes place.
Examples
In this example, we will create a simple HTML page with a button element. We'll use JavaScript to add an
event listener to the button element, which will respond to a "click" event by changing the text of a
paragraph.
In this code:
 We have an HTML document with a button and a paragraph element.
 JavaScript is used to get references to these elements using their IDs.
 An event listener is added to the button element using the addEventListener method.
 The event listener specifies that when the "click" event occurs on the button, a function will be executed.
Inside the function, we update the text content of the paragraph element to indicate that the button was
clicked.When you open this HTML page in a web browser and click the button, the event handler responds
to the "click" event by changing the text in the paragraph, demonstrating how event handling works in
JavaScript. You can adapt this concept to respond to various events and create interactive web
applications.
Asynchronous programming
Asynchronous programming is a fundamental concept in JavaScript that allows you to perform non-
blocking operations, such as making network requests, reading files, or executing time-consuming tasks,
without freezing the user interface. Asynchronous code in JavaScript is typically achieved using callbacks,
promises, and async/await.JavaScript is single-threaded, meaning it executes one operation at a time.
Asynchronous programming enables JavaScript to perform tasks in the background while continuing to
execute other code. This is essential for tasks that may take some time to complete, such as fetching data
from a remote server, without making the entire application unresponsive.
Examples
 We have an HTML document with a button element and a paragraph element.
 JavaScript defines an asynchronous fetchData function, which simulates a data fetch by using
setTimeout. This function takes a callback function as an argument, which will be executed when the
data is ready.
 When the "Fetch Data" button is clicked, the page displays "Loading..." in the paragraph.
 The click event listener calls the asynchronous fetchData function and provides a callback function that
will be executed when the data is fetched.
 Inside the callback function, we update the paragraph element with the fetched data.
When you click the "Fetch Data" button, you'll notice that the page does not freeze while waiting for the
asynchronous operation to complete. After a 2-second delay (simulated), the data is fetched, and the
paragraph is updated with the fetched data, demonstrating asynchronous behavior in JavaScript.
CALLBACKS
Callbacks are a fundamental concept in JavaScript, enabling asynchronous operations and providing a way
to specify what should happen after a particular task has been completed. A callback is a function that is
passed as an argument to another function and is executed when that function has finished its work. This
allows you to work with asynchronous tasks like network requests, file I/O, or timers effectively.Callbacks
are a way to manage asynchronous operations by providing a function that will be executed when the
operation is completed. This is crucial when working with tasks that take an unknown amount of time to
finish, such as reading data from a file or fetching data from a remote server.
Callbacks are a way to manage asynchronous operations by providing a function that will be executed
when the operation is completed. This is crucial when working with tasks that take an unknown amount of
time to finish, such as reading data from a file or fetching data from a remote server.
Callbacks allow for non-blocking programming, which means that the program does not stop and wait
for an operation to complete before continuing to execute. This is important for improving the
performance and responsiveness of applications.
 The provided JavaScript code defines a function fetchData(callback) that simulates an asynchronous
operation with a 2-second delay using setTimeout. It takes a callback function as an argument.
 When the asynchronous operation is complete (after 2 seconds), the callback function is invoked with the
argument "Data received".
 The code then calls fetchData and provides a callback function that logs the received data to the console.
Callbacks allow for non-blocking programming, which means that the program does not stop and wait
for an operation to complete before continuing to execute. This is important for improving the
performance and responsiveness of applications.
STRUCTURED QUERY LANGUAGE((SQL)
SQL is a domain-specific language used in programming and designed for managing data held in a
relational database management system, or for stream processing in a relational data stream management
system. A database server is a computer program that provides database services to other programs or
computers, as defined by the client-server model.
INTRODUCTION TO DBMS
A system application for creating and managing your databases , access and can modify your Data . DBMS
works in an efficient and secured manner.
DBMS Types :
1) Flat file database

2) Relational database : 1)hierarchical database
2)RDBMS
3) No SQL : 1)Key value 2)column oriented 3)document oriented 4)Graph DB
CREATING DATABASE
In technical terms; database is a set of multiple tables. Tables may be connected
to each other by the concept of foreign keys.
INTRODUCTION TO SQL
Structured Query Language :
1) It is used to communicate with the database.
2) My SQL is an open source dbms.
3) My SQLi is an advanced version of My SQL.
MYSQL DATABASES :
DATA DEFINITION LANGUAGE(DDL)

Commands in SQL
Create command is used to create databases and tables.
For ex : CREATE database temp_db;
$ always write database names in your query
Data contains actual values corresponding to each column of the table .
PRIMARY KEY:
Primary key is a number uniquely associated with each row or record.
For ex: CREATE TABLE temp_db_products(id INT NOT NULL , name
VARCHAR(30), category
INT(30), PRIMARY KEY(id));
ALTER AND DROP
We can alter the structure of the existing table.
Four keywords used with alter command are :
1)add 2)drop
3)change 4)modify
Ex: To add a column to an existing table.
ALTER table database-name.table-name ADD column-new data-type (length constraints)
To add a column from an existing table.
ALTER table database-name.table-name DROP column-name.
DROP COMMAND :
Syntax :
DROP database-name.table-name
DROP database temp_db;

FOREIGN KEY AND TRUNCATE
Mapping between two tables is done using foreign key.
A foreign key is a key used to link two tables together. This is sometimes also
called a referencing key .
A Foreign Key is a column or a combination of columns whose values match a
Primary Key in a different table.
To view relation views add storage to innodb operations.
Relation views provide functionality to link columns of one table to columns of
another table.
TRUNCATE :
Truncate command deletes all the records inside the table.
Used when we only want to keep the structure of the table and delete the data.
PhpMyadmin allows users to execute truncate commands without using the SQL
command.
Data Definition Language(DDL)
1) Primary key
2) Alter command
3) Drop command
4) Foreign key
5) Truncate
DATA MANIPULATION LANGUAGE(DML)
A collection of those commands that help to INSERT, DELETE, MODIFY or pull
out data from the database.
INSERT :
This command is used to insert data into the tables.

For ex : INSERT INTO database-name (name, category) values(‘ ‘,’ ‘)
UPDATE :
This command is used to update the existing data in tables.
For ex : UPDATE database-name SET first_name =’ ‘ WHERE users.id= 1 ;
DELETE :
This command is used to delete an entire row from a table.

To delete a row ; make sure it does not have a primary key or foreign key
For ex : DELETE FROM users WHERE id=’ ‘ ;
SELECT :
Select command is used to pull out the existing data from tables.
SELECT * FROM ‘ ‘
Use * to Display all the columns.
WORKING AREA
PHP(HYPERTEXT PREPROCESSOR)
PHP is a server side scripting language which is used to perform operations on databases. In
building dynamic pages and websites functionality. PHP code is usually processed on a web
server by a PHP interpreter implemented as a module, a daemon or as a Common Gateway
Interface (CGI) executable. On a web server, the result of the interpreted and executed PHP code
which may be any type of data, such as generated HTML or binary image data – would form the
whole or part of a HTTP response.
PHP STRUCTURE :
<!DOCTYPE html>
<html>
<head>
<title><?php echo” “?> </title>
</head>
<body>
<?php
Echo” “?>
</body>
</html>
VARIABLES , DATA TYPES AND OPERATORS
$variable_name
<body>
<?php
$var1=18;
44 $var2=12;
Echo gettype($var1);
?>
</body>
<?php
$var1=18;
$var2=12;
$sum= $var1 + $var2 ;
Echo $sum; ?>
CONCATENATION :
Concatenation is an addition of combining two strings to make it one string.
<?php
$var1=”Hello”;
$var2=”Internshala”;
Echo $var1.$var2;
?>
FUNCTIONS , ARRAYS AND STRINGS
FUNCTIONS:
A function is an independent code that performs a particular task.
<?php
Function sum ($parameter1 , $parameter2)
{ $addition = $parameter1 + $parameter2;
return addition ;
?>
<body>
$var=1;
45 $var=2;
$sum=sum($var1, $var2);
Echo “ Sum of two variables is “. $sum.” “;
?>
If passed with function call, it will have that value and if not passed , it will have that value and if
not passed it will use the default value.
ARRAYS:
An array is a special variable, which can hold more than one value at a time. Stores integers,
strings and other arrays etc.
<body>
<?php
$numbers = array(18,12)
$sum= $numbers[0] + $numbers[1];
echo”Sum of two variables is “.sum. “ “;
Echo “Length of the array is “. sizeof ($numbers)”;
Array can be 1D, 2D and 3D.
STRINGS :
A string is a set of characters that can contain spaces and numbers.
<?php
$variable1=18;
echo”The value of variable1 is “$variable1”
To calculate string length ;
<?php
$string1= “ “;
$length_of_string . strlen($string1);
Echo $length_of_string
Double quotes inside single quotes will be considered as strings. Single quotes
inside Quotes will be considered as strings.
LOOPS
A loop consists of two parts, a body of a loop and a control statement. The control
statement is a combination of some conditions that direct the body of the loop to
execute until the specified condition becomes false. The purpose of the loop is to
repeat the same code a number of times.
THREE TYPES OF LOOPS:

 While Loop
The while loop is also an entry control loop like for loops i.e., it first checks the condition at the start of
the loop and if its true then it enters the loop and executes the block of statements, and goes on
executing it as long as the condition holds true.
Example
<?php
$x = 1;
while($x <= 5) {
echo "The number is: $x <br>";
$x++;
}?>
 Do-While Loop
This is an exit control loop which means that it first enters the loop, executes the statements, and then
checks the condition. Therefore, a statement is executed at least once on using the do…while loop. After
executing once, the program is executed as long as the condition holds true.
Example
<?php
$x = 1;
do {
$x++;
} while ($x <= 5);?>
 For Loop
This type of loops is used when the user knows in advance, how many times the block needs to execute.
That is, the number of iterations is known beforehand. These type of loops are also known as entry-
controlled loops. There are three main parameters to the code, namely the initialization, the test
condition and the counter.
Example
<?php
for ($x = 0; $x <= 10; $x++) {
}?>
 For Each Loop

This loop is used to iterate over arrays. For every counter of loop, an array element is assigned and the
next counter is shifted to the next element.
Example
foreach ($colors as $value) {
echo "$value <br>";}?>
SWAP TWO NUMBERS

<?php
if(isset($_POST['submit']))
{
echo "<b>Number before Swapping</b><br>";
$num1=$_POST['num1'];
$num2=$_POST['num2'];
echo "Number one is $num1 <br />";
echo "Number two is $num2 <br />";
$temp=$num1;
$num1=$num2;
$num2=$temp;
echo "<b>Number after Swapping</b> <br />";
echo "Number one is $num1<br />";
echo "Number two is $num2<br />";
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Swap Two Numbers</title>
</head>
<body>
<table>
<form name="swap" method="post">
<tr>
<td>Number 1 :</td>
<td><input type="text" name="num1" required></td>
</tr>
<tr>
<td>Number 2 :</td>
<td><input type="text" name="num2" required></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="swap" name="submit" /></td>
</tr>
</form>
</table>
</body>
</html>
OUTPUT
REACT JS
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you
compose complex UIs from small and isolated pieces of code called ―components‖. We‘ll get to the funny
XML-like tags soon. We use components to tell React what we want to see on the screen. When our data
changes, React will efficiently update and re- render our components.
The render method returns a description of what you want to see on the screen. React takes the description
and displays the result. In particular, render returns a React element, which is a lightweight description of
what to render. Most React developers use a special syntax called ―JSX‖ which makes these structures
easier to write. The <div /> syntax is transformed at build time to React.createElement('div'). The example
above is equivalent to:
Passing Data Through Props

To get our feet wet, let‘s try passing some data from our Board component to our Square component.
We strongly recommend typing code by hand as you‘re working through the tutorial and not using
copy/paste. This will help you develop muscle memory and a stronger understanding. In Board‘s
renderSquare method, change the code to pass a prop called value to the Square:
class Board extends React.Component {

renderSquare(i) {
return <Square value={i} />; }
}
Change Square‘s render method to show that value by replacing
{/* TODO
*/} with {this.props.value}:
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value} </button>
);
}
}
Function Components
We‘ll now change the Square to be a function component.
In React, function components are a simpler way to write components that only contain a render method
and don‘t have their own state. Instead of defining a class which extends React.Component, we can write a
function that takes props as input and returns what should be rendered. Function components are less
tedious to write than classes, and many components can be expressed this way.
Replace the Square class with this function:
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
We have changed this.props to props both times it appears.
React State
The state is an updatable structure that is used to contain data or information about the
component. The state in a component can change over time. The change in state over time can
happen as a response to user action or system event. A component with the state is known as
stateful components. It is the heart of the react component which determines the behavior of the
component and how it will render. They are also responsible for making a component dynamic
and interactive.
A state must be kept as simple as possible. It can be set by using the setState() method and
calling setState() method triggers UI updates. A state represents the component's local state or
information. It can only be accessed or modified inside the component or by the component
directly. To set an initial state before any interaction occurs, we need to use
the getInitialState()
React Component Life-Cycle

In ReactJS, every component creation process involves various lifecycle methods. These
lifecycle methods are termed as component's lifecycle. These lifecycle methods are not very
complicated and called at various points during a component's life. The lifecycle of the
component is divided into four phases. They are:
1. Initial Phase
2. Mounting Phase
3. Updating Phase
4. Unmounting Phase
Each phase contains some lifecycle methods that are specific to the particular phase. Let us
discuss each of these phases one by one.
1.Initial Phase
It is the birth phase of the lifecycle of a ReactJS component. Here, the component starts its
journey on a way to the DOM. In this phase, a component contains the default Props and initial
State. These default properties are done in the constructor of a component. The initial phase only
occurs once and consists of the following methods.
 getDefaultProps()
It is used to specify the default value of this.props. It is invoked before the creation of the component or
any props from the parent is passed into it.
 getInitialState()
It is used to specify the default value of this.state. It is invoked before the creation of the
component.
2. Mounting Phase
In this phase, the instance of a component is created and inserted into the DOM. It consists of the
following methods
 componentWillMount()
This is invoked immediately before a component gets rendered into the DOM. In the
case, when you call setState() inside this method, the component will not re-render.
 componentDidMount()
This is invoked immediately after a component gets rendered and placed on the DOM.
Now, you can do any DOM querying operations.
render()
This method is defined in each and every component. It is responsible for returning a
single root HTML node element. If you don't want to render anything, you can return
a null or false value
.
3.Updating Phase
It is the next phase of the life cycle of a react component. Here, we get new Props and
change State. This phase also allows to handle user interaction and provide communication with
the components hierarchy. The main aim of this phase is to ensure that the component is
displaying the latest version of itself. Unlike the Birth or Death phase, this phase repeats again
and again. This phase consists of the following methods.
 componentWillRecieveProps()
It is invoked when a component receives new props. If you want to update the state in
response to prop changes, you should compare this.props and nextProps to perform state
transition by using this.setState() method.
 shouldComponentUpdate()
It is invoked when a component decides any changes/updation to the DOM. It allows you
to control the component's behavior of updating itself. If this method returns true, the
component will update. Otherwise, the component will skip the updating.
componentWillUpdate()
It is invoked just before the component updating occurs. Here, you can't change the
component state by invoking this.setState() method. It will not be called,
if shouldComponentUpdate() returns false.
 render()
It is invoked to examine this.props and this.state and return one of the following types:
React elements, Arrays and fragments, Booleans or null, String and Number. If
shouldComponentUpdate() returns false, the code inside render() will be invoked again to
ensure that the component displays itself properly.
 componentDidUpdate()
It is invoked immediately after the component updating occurs. In this method, you canput any code inside
this which you want to execute once the updating occurs. This method is not invoked for the initial render.
4.Unmounting Phase
It is the final phase of the react component lifecycle. It is called when a component instance
is destroyed and unmounted from the DOM. This phase contains only one method and is given
below.
 componentWillUnmount()
This method is invoked immediately before a component is destroyed and unmounted
permanently. It performs any necessary cleanup related task such as invalidating timers,
event listener, canceling network requests, or cleaning up DOM elements. If a component
instance is unmounted, you cannot mount it again.
Setting Up Your Development Environment:

Setting up the development environment for React.js involves installing the necessary tools and
configuring them to work seamlessly. Here's a step-by-step guide on how to set up your development
environment
Install Node.js and npm:
Step 1: Create a new React.js project with Vite:
Launch VSCode and open the integrated terminal (View → Terminal or Ctrl+backtick).
In the terminal, navigate to the directory where you want to create your new React.js project.
Run the following command to generate a new project using Vite:
npx create-vite@latest my-react-app --template react
Step 2: Opening the project in VSCode:
Once the project is created, navigate to the project folder in the VSCode terminal.
cd my-react-app
Step 3: Installing dependencies:
In the VSCode terminal, ensure that you are in the project directory.
Install the project dependencies by running the following command:
npm install
Step 4: Starting the development server:
In the VSCode terminal, ensure that you are in the project directory.
Start the development server by running the following command:
npm run dev
Step 5: Previewing the React app:
After starting the development server, open your web browser and navigate to http://localhost:3000
You should see the default React.js app rendered in the browser.
Begin modifying the React components and see the changes being hot-reloaded in the browser.
These commands should display the installed Node.js and npm versions.
OUTPUT
Conclusion
After this six-week training at Next Algorithm, I gained a comprehensive introduction to web
development, equipping me with the skills to create my own website pages using various methods such as
Visual Studio, Bootstrap, and Wampserver (PhpMyadmin). This course spans nine weeks, providing a
solid foundation for individuals to feel comfortable in the field and empowering them to consider pursuing
a career in web development.
Throughout the training, I delved into different languages and styling techniques. The course covered
essential languages like HTML, CSS, JavaScript, SQL, and PHP. These languages were presented in a
user-friendly manner, making it easy for participants to grasp the fundamental concepts. The hands-on
approach allowed me to focus more on the practical aspects of web development, fostering a deeper
understanding of the subject matter.
What sets this course apart is its emphasis on versatility. Participants not only learn how to develop
dynamic and interactive web applications but also have the flexibility to explore web design. The course
recognizes that individuals may find comfort and interest in the visual and creative aspects of web
development, encouraging them to specialize in web design if they choose.
By the end of the training, I not only acquired the technical skills needed for web development but also
developed a broader perspective on the possibilities within the field.

Training Report Format

Uploaded by

Copyright:

Available Formats

You might also like

Training Report Format

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Training Report Format

Uploaded by

Copyright:

Available Formats

Declaration

Finally, I am particularly indebted to my dearest parents/guardians as without their generous

Certificate of Training (Photo Copy Only)............................................................................i

Chapter 1: HTML (Hypertext Markup Language)

Chapter 2: CSS(Cascading Style Sheet)

Chapter 3: Bootstrap Framework

Chapter 5: PHP(Hypertext Preprocessor)

Chapter 6: SQL( Structured Query Language)

Chapter 7: Learning Outcomes & Conclusion

Chapter 8: Bibliography (No referencing to Wikipedia) in Proper Formatting

Time Duration Contents

WEEK-1 Introduction to HTML, HTML Document Structure , HTML Tags(headings, paragraphs,

Introduction to Bootstrap, Basic structure of a Bootstrap document., Understanding the

Basic Structure of HTML

<a> It is termed as anchor tag and it creates a hyperlink or link.

<article> It defines the self-contained content.

<audio> It is used to embed sound content in HTML document.

<b> It is used to make a text bold.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

<canvas> It is used to provide a graphics space within a web document.

<div> It defines a division or section within HTML document.

<em> It is used to emphasis the content applied within this element.

<footer> HTML Tags List It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<h1> It defines headings for an HTML document from <h1> to <h6>.

<head> It defines the head section of an HTML document.

<header> It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level elements.

<html> It represents root of an HTML document.

<i> It is used to represent a text in some different voice.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an external resource.

<meta> It defines metadata of an HTML document.

<ol> It defines an ordered list of items.

<option> It is used to define options or items in a drop-down list.

<p> It represents a paragraph in an HTML document.

<pre> It defines preformatted text in an HTML document.

<script> It is used to declare the JavaScript within HTML document.

<span> It is used for styling and grouping inline.

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table

<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

The URI of a program that processes the information submitted via

<caption>, <col>, <colgroup>,

<body>, <col>, <colgroup>,

border <img>, <object>, <table> The border width.

cols <textarea> Defines the number of columns in a textarea.

The colspan attribute defines the number of columns a cell should