raj web development report_241023_102314.pdf

SUMMER INTERNSHIP REPORT ON (WEB DEVELOPMENT) SUBMITTED TO PARTIAL FULFILLMENT FOR AWARD OF DEGREE OF BACHELOR OF TECHNOLOGY IN COMPUTER SCIENCE AND...

SUMMER INTERNSHIP REPORT ON (WEB DEVELOPMENT) SUBMITTED TO PARTIAL FULFILLMENT FOR AWARD OF DEGREE OF BACHELOR OF TECHNOLOGY IN COMPUTER SCIENCE AND ENGINEERING SUBMITED BY: RAJ TRIPATHI CSJMA22001390034 B TECH 3rd YEAR SUBMITTED TO: DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING UNIVERSITY INSTITUTE OF ENGINEERING AND TECHNOLOGY KANPUR I II III  Declaration I hereby that this submission is my own work and that, to the best of my knowledge and belief, it contains no material previously published of written by another person nor material which to a substantial extent has been accepted for the award of another degree or diploma of the university or other institute of higher learning, except where due acknowledgment has been made in the text. Signature: RAJ TRIPATHI Name: RAJ TRIPATHI Roll No: CSJMA22001390034 Date: 23-10-2024 IV  Acknowledgement I would like to express my sincere gratitude to everyone at CodSoft for providing me with the opportunity to my web development internship. This experience has been invaluable in broadening my skills and knowledge in the field of web development. I am deeply thankful to Shesh Mani Tiwari, my internship supervisor, for the guidance and support provided throughout the duration of my internship. He offered valuable insights, constructive feedback, and mentorship, which greatly contributed to my professional growth. I would also like to extend my appreciation to the entire team at CodSoft for creating a conducive learning environment. Their collective expertise and willingness to share knowledge played a significant role in enhancing my understanding of web development practices and technologies. Furthermore, I am grateful for the trust and confidence placed in me by the organization, allowing me to work on meaningful projects that have contributed to my skillset and portfolio. Finally, I would like to thank all my colleagues for their camaraderie and collaborative spirit, which made my internship experience both enjoyable and productive. I am thankful to CodSoft for providing me with this opportunity and look forward to applying the skills and knowledge gained in my future endeavors. RAJ TRIPATHI 1 1 INTRODUCTION WEB DEVELOPMENT Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of tasks to which Web development commonly refers, may include Web engineering, Web design, Web content development, client liaison, client-side/server- side scripting, Web server and network security configuration, and e-commerce development. Among Web professionals, "Web development" usually refers to the main non-design aspects of building Web sites: writing markup and coding. Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills. For larger organizations and businesses, Web development teams can consist of hundreds of people (Web developers) and follow standard methods like Agile methodologies while developing Web sites. Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a graphic designer or information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of Web developer specialization: front- end developer, back-end developer, and full-stack developer. Front-end developers are responsible for behavior and visuals that run in the user browser, while back-end developers deal with the servers. Since the commercialization of the Web, the industry has boomed and has become one of the most used technologies Outline of web design and web development The following outline is provided as an overview of and topical guide to web design and web development, two very related fields: Web design – field that encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardized code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of thedesign process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating markup then they are also expected tobe up to date with web accessibility guidelines. Web development – work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple 2  single static page of plain text to complex web-based internet applications (web apps), electronic businesses, and social network services. A more comprehensive list of tasks to which web development commonly refers, may include web engineering, web design, web content development, client liaison, client-side/server- side scripting, web server and network security configuration, and e- commerce development. Among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development may use content management systems (CMS) to make content changes easier and available with basic technical skills. For larger organizations and businesses, web development teams can consist of hundreds of people (web developers) and follow standard methods like Agile methodologies while developing websites. Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a graphic designer or information systems technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of web developer specialization: front-end developer, back-end developer, and full-stack developer. Front-end developers are responsible for behaviour and visuals that run in the user browser, back-end developers deal with the servers and full- stack developers are responsible for both. Currently, the demand for React and Node.JS developers are very high all over the world. FRONT-END WEB DEVELOPMENT Front-end web development is the development of the graphical user interface of a website, throughthe use of HTML, CSS, and JavaScript, so that users can view and interact with that website Front-end web development is the process of creating the user interface of a website or web application. This includes everything that the user sees and interacts with, such as the layout, design, and functionality of the website. Front-end developers use a variety of programming languages and technologies to build websites, including HTML, CSS, and JavaScript. HTML (HyperText Markup Language) is used to define the structure of a web page. It is used to create elements such as headings, paragraphs, images, and links. CSS (Cascading Style Sheets) is used to style the HTML elements on a web page. This includes things like the font, color, size, and position of the elements. JavaScript is a programming language 3 SKILL What do web developers do? In short, they build and maintain websites Web developers often work for clients who are trying to get their product or service onto the web. The work is typically very project focused and involves collaborating with a team that helps to coordinate the client’s needs into the end product. The client could be a tech company, an organization, or a government. The work could involve front-end, back-end, or full-stack web development. Web development could be a good profession for you if you like solving logical problems, building useful things, and experimenting with new technologies. Web developers are in high demand, generally have a good work/life balance, and command comfortable salaries. Google your specific location to get abetter sense of your local web development job opportunities. For more details, Wikipedia describes the breadth of the web development profession in their entry on web design. 4 TYPE OF WEB DEVELOPER Now that you know about the different types of web developers, let’s cover what we mentioned earlier about the different types of clients and employers you may work with. Large tech companies, such as Google, Meta, and Amazon, have very stringent hiring requirements. If you successfully meet these expectations, they offer excellent pay, benefits, and opportunities. Startups are a bit like the wild west. For a junior developer, it can feel like a trial by fire because of the pace of development. Startups often offer slightly lower salaries and require longer hours, but they may also offer equity in the company and highly unique environments. As a freelancer, you could command a strong hourly wage and the freedom to schedule and design your own products. However, you would be responsible for getting your own work (which means less coding time), managing billing from clients (which can be difficult), and being solely responsible. Strong people skills are necessary for this path. There are three main types of web developers: front-end developers, back-end developers, and full-stack developers. Front-end developers are responsible for the user interface (UI) of a website or web application. This includes everything that the user sees and interacts with, such as the layout, design, and functionality of the website. Front-end developers use a variety of programming languages and technologies to build websites, including HTML, CSS, and JavaScript. Back-end developers are responsible for the server-side of a website or web application. This includes things like the database, the application logic, and the security of the website. Back-end developers use a variety of programming languages and technologies to build the server-side of websites, such as Python, Java, and PHP. 5 1. HTML (HyperText Markup Language) Overview Definition: HTML is the standard markup language for creating web pages. Purpose: It structures the content on the web, allowing browsers to display text, images, links, and other elements. Key Features e.g., , , ). Attributes: Elements can have attributes that provide additional Elements and Tags: HTML consists of various elements defined by tags (information (e.g., ). Document Structure: A basic HTML document has a defined structure: 6  What Is an HTML Tag? HTML tags are the keywords on a web page that define how your web browser must format and display your web page. Almost all tags contain two parts, an opening, and a closing tag. For example, is the opening tag and is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. There are a total of 100 HTML tags. We will divide them into categories and discuss the important ones in this article. Basic HTML Tags: Head Tag The head tag contains all the elements describing the document. Title Tag The title tag specifies the HTML page title, which is shown in the browser’s title bar. Body Tag The body tag is where you insert your web page’s content. Paragraph Tag A paragraph tag is used to define a paragraph on a web page. Heading Tag The HTML heading tag is used to define the heading of the HTML document. The tag defines the most important tag, and defines the least. 7 STATIC VS DYNAMIC WEBSITE What is Website? Website is the collection of web pages, different multimedia content such as text, images, and videoswhich can be accessed by the URL which you can see in the address bar of the browser. For example: https://www.geeksforgeeks.org How to access Websites? When we type a certain URL in a browser search bar, the browser requests the page from the Web server and the Web server returns the required web page and its content to the browser. Now, it differs how the server returns the information required in the case of static and dynamic websites. Types of Website: Static Website Dynamic Website Static Website: In Static Websites, Web pages are returned by the server which are prebuilt source code files built using simple languages such as HTML, CSS, or JavaScript. There is no processing of content on the server (according to the user) in Static Websites. Web pages are returned by the server with no change therefore, static Websites are fast. There is no interaction with databases. Also, they are less costly as the host does not need to support server-side processing with different languages 14  Note: Static does not mean that it will not respond to user actions, These Websites are called static because these cannot be manipulated on the server or interact with databases (which is the case in Dynamic Websites). Dynamic Website: In Dynamic Websites, Web pages are returned by the server which are processed during runtime means they are not prebuilt web pages but they are built during runtime according to the user’s demand with the help of server-side scripting languages such as PHP, Node.js, ASP.NET and many more supported by the server. So, they are slower than static websites but updates and interaction with databases are possible. Dynamic Websites are used over Static Websites as updates can be done very easily as compared to static websites (Where altering in every page is required) but in Dynamic Websites, it is possible to do a common change once and it will reflect in all the web pages. 15  DIFFERENCE BETWEEN STATIC AND DYNAMIC WEBSITES: Static Website Dynamic Website Content of Web pages can not be Content of Web pages can be changeat runtime. changed. No interaction with database possible. Interaction with database is possible It is faster to load as compared to It is slower than static website. dynamic website. Cheaper Development costs. More Development costs. No feature of Content Management. Feature of Content Management System. HTML, CSS, Javascript is used for Server side languages such as developing the website. PHP,Node.js are used. Same content is delivered everytime Content may change everytime the thepage is loaded. page is loaded. CSS :- What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External style sheets are stored in CSS files Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS Solved a Big Problem:- 16 HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like: This is a heading This is a paragraph. When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page. CSS Saves a Lot of Work : The style definitions are normally saved in external.css files. With an external style sheet file, you can change the look of an entire website by changing just one file! CSS Syntax : H1{ Backgroun-color: red; Font-weight: 500; } The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Some CSS Property : Color : 1. Specify the color of the text of an element. 2. Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. 17 Background : Defines a variety of background properties within one declaration. 1. Background-color 2. Background-image 3. Background-position 4. Background-attachment Border-Property: The CSS border properties allow you to specify the style, width, and color of an element's border. Margin : The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). Padding : The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). Height/Width: The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element. Text : CSS has a lot of properties for formatting text. Font : CSS font property use to set the font of text , Choosing the right font for your website is important. 2.1.3 JAVASCRIPT :- JavaScript Can Change HTML Content One of many JavaScript HTML methods is getElementById(). The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript": Basic Thing know about Javascript Before use : 18  1. In Html javascript code is inserted between tag. 2. JavaScript in or You can place any number of scripts in an HTML document. Scripts can be placed in the , or in the section of an HTML page, or in both. 2. Another method use javascript in html make external file of javascript example: first.js ECMAScript 2009, also known as ES5, was the first major revision to JavaScript. ECMAScript 2015 is also known as ES6 and ECMAScript 6. Javascript variable declare using let , const , var keyword. JAVASCRIPT-DOM:- With the object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements in the page JavaScript can change all the HTML attributes in the page JavaScript can change all the CSS styles in the page 19  JavaScript can remove existing HTML elements and attributes JavaScript can add new HTML elements and attributes JavaScript can react to all existing HTML events in the page JavaScript can create new HTML events in the page The HTML DOM Tree of Objects: The DOM Programming Interface The HTML DOM can be accessed with JavaScript (and with other programming languages). In the DOM, all HTML elements are defined as objects. The programming interface is the properties and methods of each object. A property is a value that you can get or set (like changing the content of an HTML element). A method is an action you can do (like add or deleting an HTML element). 20  Finding HTML Elements: document.getElementById(id) Find an element by element id document.getElementsByTagName(nam Find elements by tag name e) document.getElementsByClassName(na Find elements by class me) name Tasks given during my internship : Task-1 :Survey form. Task-2: Temperature Converter Codes:- Landing Page:- 21 Project1: 22 23 Project2: 24 25 26 27 28 29