0% found this document useful (0 votes)

80 views29 pages

Frontend Software Engineer: Mid-Sem Submission Presentation On

The document summarizes Bhumi Rana's internship experience at TechStaunch Software Solutions Pvt. Ltd. It includes: 1) Details about the company and Bhumi's industry mentor. 2) An outline of the topics covered during the internship, including HTML, CSS, JavaScript, React, TypeScript, and Tailwind CSS. 3) Descriptions of projects completed, including a chess game built with HTML, CSS and JavaScript, and a portfolio site built with React and TypeScript.

Uploaded by

D06 Snehal Prajapati

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

80 views29 pages

Frontend Software Engineer: Mid-Sem Submission Presentation On

Uploaded by

D06 Snehal Prajapati

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 29

SARVAJANIK COLLEGE OF ENGINEERING AND TECHNOLOGY

COMPUTER ENGINEERING DEPARTMENT

B. E.-IV, CO, SEM-VIII, SHIFT - 2

(TERM : EVEN - 2022-23)

Mid-Sem submission Presentation

on
Frontend Software Engineer

Subject Name : Internship (3180701)

Prepared and Presented by

Bhumi Rana (Enrollment No : 200420107514)
1

Guided by
Snehal Gandhi

04/13/2023
COMPANY DETAILS
 Name : TechStaunch Software Solutions Pvt. Ltd.
 Address : 302 - 304 Soham Arcade B/H Madhav Atria, Gauravpath Road,
Green City Road, 395009, Adajan, Pal Gam, Surat, Gujarat 395009
 Web-site : https://techstaunch.com/

 Industry mentor’s Details :

 Name : Nidhi Patel
 Contact number : 6352994955
 E-mail : [email protected]

2
PRESENTATION OUTLINE
 Topic-1 :- Work Technology
 Topic-2 :- HTML + CSS

 Topic-3 :- JavaScript

 Topic-4 :- Chess Game (JavaScript + HTML + CSS)

 Topic-5 :- React.Js

 Topic-6 :- Typescript

 Topic-7 :- Tailwind CSS

 Topic-8 :- Portfolio (React.Js + Typescript)

3
WORK TECHNOLOGY
 HTML
 CSS

 JavaScript

 React.Js

 Typescript

 Tailwind CSS

4
HTML
 HTML is creating and structuring content on the web using markup language.
This includes understanding the basic syntax and structure of HTML,
learning how to use HTML tags to create different types of content such as
headings, paragraphs, lists, tables, forms, images, videos, and more, and
understanding how to create well-structured and accessible web pages using
semantic HTML. Additionally, HTML5 is the latest version of HTML, and
learning about its new features and capabilities is also an important part of
mastering HTML. Overall, the main topic of HTML is understanding how to
create effective and engaging web content using markup language.

5
CSS
 CSS works by defining rules that apply styles to specific HTML elements or
groups of elements. These rules consist of a selector, which targets the
element or elements to which the styles should be applied, and one or more
declarations, which specify the actual styles to be applied.
 CSS can be used to control a wide range of visual aspects of a web page,
including font size and style, color, layout, spacing, borders, and more. CSS
also supports advanced features such as animations, transitions, and
responsive design, which allow developers to create more interactive and
engaging web experiences.

6
JAVASCRIPT

7
WHAT IS JAVASCRIPT ?
 JavaScript is a high-level, interpreted programming language that is
primarily used to add interactivity and dynamic behavior to web pages. It is a
client-side scripting language, meaning it is executed within a web browser
and can interact with the Document Object Model (DOM) of an HTML page
to dynamically modify the content and appearance of a web page in response
to user actions.

 JavaScript is a powerful and versatile programming language that is essential

for modern web development. Its ability to add interactivity and dynamic
behavior to web pages makes it a critical tool for creating engaging and
responsive web applications.
8
WHY JAVASCRIPT ?
 Client-side scripting
 Widely supported

 Rich ecosystem

 Easy to learn

 Fast development

 Versatile

9
SUMMARY OF INTERNSHIP - WORK DONE SO FAR

 Create Chess Game Using HTML, CSS, JavaScript

 In This Project Cover Points :-
 Setting up the initial board state
 Validating moves
 Updating the board state
 Checking for win or draw conditions
 Implementing player turns
 Displaying the board

10
Initial State

11
White Turn Black Turn

12
REACT.JS

13
WHAT IS REACT.JS ?
 React works by breaking down the user interface into small, reusable
components, each with its own logic and state. These components can then
be combined to create complex user interfaces, making React an ideal tool
for building large and complex web applications.
 One of the key features of React is its ability to efficiently update and render
components in response to changes in the application's state. React uses a
virtual DOM (Document Object Model) to compare the current state of the
user interface with the desired state and update only the components that
need to be changed, rather than re-rendering the entire interface.

14
WHY REACT.JS ?
 Component-Based Architecture
 High Performance

 Large and Active Community

 Cross-Platform Compatibility

 Better Developer Experience

 SEO-Friendly

 Easy Testing

15
TYPESCRIPT

16
WHAT IS TYPESCRIPT ?
 Typescript is an open-source programming language that is a superset of
JavaScript. It was developed and is maintained by Microsoft. Typescript adds
additional features and functionality to JavaScript that make it easier to write
and maintain large-scale applications.
 One of the main features of Typescript is its ability to add type annotations to
variables, functions, and other constructs in the code. This means that
developers can specify the type of data that a variable can hold or the type of
arguments that a function can accept. Typescript then uses these annotations
to provide static type checking, which helps catch errors and bugs before the
code is even run.

17
WHY TYPESCRIPT ?
 Static Type Checking
 Improved Code Maintainability

 Better Developer Experience

 Familiarity with JavaScript

 Better Collaboration

 Increased Code Quality

 Improved Documentation

18
TAILWIND CSS

19
WHAT IS TAILWIND CSS ?
 Tailwind CSS is a utility-first CSS framework that allows you to rapidly
build custom user interfaces by providing pre-defined classes that can be
applied directly in your HTML code. It is designed to help developers write
CSS more efficiently by abstracting away low-level CSS tasks and providing
a higher-level language that can be used to build layouts and components
quickly.
 Tailwind CSS is highly customizable, allowing you to configure the colors,
spacing, fonts, and other properties used in your project. It also includes a
built-in responsive design system that makes it easy to create layouts that
work well on different screen sizes.

20
WHY TYPESCRIPT ?
 Rapid Development
 Customizability

 Responsive Design

 Low Maintenance

 Easy to Learn

 Integration with Other Tools

21
SUMMARY OF INTERNSHIP - WORK DONE SO FAR

 Create Portfolio Using React.js and Typescript

 In This Project Cover Points :-
 Define the project structure
 Define the components
 Define the types
 Pass the data to the components
 Build the layout
 Run the website

22
Portfolio

23
Portfolio

24
Portfolio

25
Responsive

26
REFERENCES
 https://www.w3schools.com/js/
 https://legacy.reactjs.org/

 https://www.typescriptlang.org/

 https://tailwindcss.com/

27
THANK YOU!
28
QUERIES..?
29