SANDEEP-1.pptx hai kya aap ko bhi hai kya

A summer internship is a short-term work experience program that provides students and recent graduates with an opportunity to gain practical knowledge, develop professional skills, and build industry connections in a real-world work environment. These internships, typically lasting anywhere from a few weeks to three months, are designed to offer hands-on experience, enabling participants to apply theoretical knowledge gained from academic studies to actual workplace situations. Companies, organizations, and government agencies offer internships across various fields, including finance, marketing, engineering, technology, healthcare, media, law, and more, catering to different interests and career aspirations. Interns may work on diverse tasks such as research, data analysis, project management, client interaction, administrative duties, content creation, software development, or fieldwork, depending on the industry and role. One of the primary objectives of a summer internship is to bridge the gap between academic learning and professional work, allowing students to explore potential career paths, refine their skills, and enhance their resumes with practical experience that makes them more competitive in the job market. Additionally, many internships provide networking opportunities, enabling interns to build professional relationships, seek mentorship from industry experts, and even secure full-time job offers upon successful completion of their programs. Some internships are paid, offering stipends or hourly wages, while others are unpaid but may provide academic credit or valuable industry exposure. The application process for summer internships usually begins several months in advance and may involve submitting a resume, cover letter, and sometimes undergoing interviews, aptitude tests, or technical assessments. Companies often look for candidates who demonstrate enthusiasm, adaptability, problem-solving abilities, and strong communication skills. Interns are expected to exhibit professionalism, work ethic, and a willingness to learn, as their performance during the internship can significantly impact future employment opportunities. Remote internships have also gained popularity, allowing students to work from anywhere while collaborating with teams virtually, which has expanded access to global opportunities. Many universities and colleges encourage students to participate in internships as part of their academic curriculum, offering structured internship programs in collaboration with businesses and industry partners. These internships not only help students gain experience but also allow organizations to evaluate and train potential future employees, creating a mutually beneficial relationship. Moreover, summer internships can be stepping stones to long-term career growth, as they provide exposure to industry practices, corporate culture, and hands-on training in relevant skills. Interns often work under the supervision of experienced p

1. SUMMER INTERNSHIP Department Computer Science and Engineering S. N. PATEL INSTITUTE OF TECHNOLOGY AND RESEARCH CENTRE UMRAKH, BARDOLI Guided by Prof. Hemangini J. Patel Internal Guide Presented by Mahto Sandeep KapilDev (210490131069) at SSM Learning Excellence Center, Surat

2. Outline Company profile introduction LEARNING CONCPET HTML STRUCTURE CSS BASICS JS CONCEPTS STUDENT REGISTRATION FORM REACT INSTALLATION TODO LIST REACT APP Conclusion References

3. COMPANY PROFILE The SSM Learning Excellence Centre is a professional education hub that not only assists in learning but also helps in training and earning. Founded by SSM Infotech, an automation company since 2001, they have work with diverse industries and are major distributors of AVEVA. The SSM Learning Excellence Center offers a variety of learning paths/curriculum that makes it easy for technical aspirants to hone their talents and is dedicated to facilitating the operation, troubleshooting, development, and integration of plant, software / automation systems around the world

4. Introduction The summer internship program at SSM Learning Excellence Center, conducted from June 29, 2024, to July 12, 2024, provided a comprehensive training in frontend development, available in both online and offline formats. The program covered HTML and CSS basics, detailed JavaScript, including data types and loops, and advanced to React JS, including its installation and NPM usage. The internship concluded with a practical mini frontend project using React JS. This particular internship was completed online, demonstrating the program's flexibility and accessibility. ---

5. Learning concept HTML ( HyperText Markup Language): HTML is the standard markup language used to create and structure web pages and web applications. HTML is essential for creating the skeleton of web pages, defining how information is displayed and organized in browsers. CSS (Cascading Style Sheets): CSS is used to style the presentation of HTML elements on web pages. It allows developers to control the layout, colors, fonts, and other visual aspects of multiple web pages all at once. CSS works by specifying rules for how HTML elements should appear, ensuring a consistent and visually appealing design across different devices and screen sizes. JavaScript: JavaScript is a versatile programming language used to create interactive effects within web browsers. It enables dynamic content updates, interactive forms, animations, and more on web pages. JavaScript is essential for enhancing user experience by making web pages responsive and interactive without requiring page reloads. React JS: React JS is a JavaScript library developed by Facebook for building user interfaces, particularly single-page applications. It allows developers to create reusable UI components that manage their state independently, making the application more efficient and easier to maintain. React uses a declarative approach to define how the UI should look, automatically updating the DOM when data changes, which improves performance and simplifies the development of complex applications.

6. html structure <!DOCTYPE html>: Defines document type as HTML . <html>: Root element, encompasses entire document. <head>: Meta information, not shown on webpage (often includes <title> for page title). <body>: Contains visible webpage content (text, images, etc.) where you use various HTML tags. Tags: Keywords in < > brackets, define elements (often come in opening/closing pairs). Attributes: Optional info within opening tag, provide details about the element (e.g., src for image source).

7. Html Form  HTML Forms: Understanding the importance and usage of HTML forms in web development. Creating form elements such as <form>, <input>, < textarea >, <select>, and <button>.  Form Attributes: Exploring various form attributes (e.g., action, method, autocomplete, novalidate ). Practical examples of how to use form attributes to control form behavior .  Input Types: Learning about different input types (text, password, email, number, date, etc.). Implementing input types to collect various kinds of user data.  Input Attributes: Utilizing input attributes (e.g., placeholder, required, maxlength , pattern) to enhance form usability and validation. Examples and exercises to apply these attributes effectively.

8. Css basics Selector: This part specifies which HTML element(s) the style rule applies to. It can target elements by tag name (e.g., p for paragraphs), class (e.g., .highlight), or ID (e.g., #unique-element). Property: This defines the specific aspect you want to style (e.g., font-size, color, background-color). Value: This assigns the desired style for the property (e.g., 20px for font size, blue for color).

9. Css (Continue..) Box Model and Layout: Understanding the CSS Box Model (content, padding, border, margin) and its impact on element layout. Practical exercises to manipulate box model properties for layout design. Typography and Fonts: Styling text using CSS properties (font-family, font-size, font-weight, line-height). Exploring web fonts and integrating custom fonts into web projects. Responsive Design Techniques: Introduction to responsive web design principles using CSS (@media queries, fluid layouts). Implementing responsive design strategies to create adaptable web interfaces. CSS Flexbox and Grid: Learning CSS Flexbox for flexible layout design (display: flex, flex-direction, justify-content, align-items). Exploring CSS Grid for grid-based layout (display: grid, grid lines, grid columns, grid rows).

10. Js concepts Statements: Instructions that tell JavaScript what to do (e.g., variable assignments, function calls). End with a semicolon ( ; ) or on a new line Comments: Explanatory notes for human readers, ignored by JavaScript (use // for single line or /* ... */ for multi-line comments). Variables: Named containers to store data (numbers, strings, booleans , etc.), declared with let , const , or var followed by the variable name and an optional assignment. Data Types: Different types of data variables can hold (numbers, strings, booleans , objects, arrays, etc.). Operators: Symbols used to perform operations on data (arithmetic operators like + , - , comparison operators like == , != , logical operators like && , || ). Expressions: Combinations of variables, operators, and values that evaluate to a single value. Control Flow (loops): Statements that control the execution order of your code (e.g., if statements, loops like for and while ). Functions: Reusable blocks of code that perform specific tasks, defined with the function keyword, a name, parameters, and a function body containing statements.

11. Mini project ( html,css,js ) student registration form This project focuses on creating a student registration form, a fundamental building block for many web applications. The form will utilize html to define the structure and layout. Users will interact with various input fields like text boxes for name and email, a password field, and potentially dropdown menus or radio buttons for language selection and gender, respectively. Css will come into play to style the form, making it visually appealing and user-friendly. You can control the layout, fonts, colors, and spacing to create a clear and organized experience for users filling out the form. While not mandatory, javascript can be integrated to add interactivity and validation. Imagine features like checking if required fields are filled or ensuring password strength before submission. This enhances the user experience and ensures data integrity by preventing incomplete or invalid submissions. Overall, this project provides a practical understanding of how html, css , and potentially javascript work together to create a functional and interactive student registration form .

12. Output after submitting the form Filling the information before submitting the form

13. React installation Shortened Flow: React Project Installation with npm start: Install Node.js (includes npm ) from https://nodejs.org/en. Open terminal and run: npx create-react-app my-app Navigate to project directory: cd my-app Start development server : npm start This opens your React app in the browser (usually http://localhost:3000).

14. Project based on react A todo list This project delves into the core concepts of react by creating a simple to-do list application. React will handle the user interface and interactivity. You'll define components for displaying tasks, adding new ones, and marking them complete. Html structures the content within these components, while css styles the appearance of the list and its elements. As you add or complete tasks, react dynamically updates the UI, showcasing the power of state management in react applications. This project provides a hands-on introduction to react's core functionalities, including components, state, and rendering, making it a great starting point for your react development journey .

15. Output of todolist on React App

16. conclusion My 15-day summer internship at SSM learning excellence centre ( june 29 - july 12, 2024) under darshana khaniya's guidance equipped me with the tools to navigate the world of react development. I honed my HTML, CSS, and javascript skills, then dove deep into react's core concepts like components, state, and user interface management. By successfully completing a mini-project, I solidified my ability to build dynamic and interactive web experiences using react. This internship ignited my passion for react and provided a solid foundation for future exploration. I am deeply appreciative of the support and mentorship provided by darshana khaniya and the entire team at ssm learning excellence centre . The structured curriculum and hands-on approach ensured a thorough understanding of the subject matter. This experience has not only enhanced my technical skills but also boosted my confidence in tackling real-world projects. The collaborative environment and the emphasis on practical application were invaluable, allowing me to learn from industry experts and apply theoretical knowledge in a tangible way. I am committed to continuing my learning journey in react development and am excited about the opportunities this experience has opened up for me. The skills and insights gained during this internship will undoubtedly be a cornerstone in my professional development .

17. REFERENCES https://www.ssmlec.com/ https://www.w3schools.com/react/default.asp https://react.dev/

18. THANK YOU