Frontend

Download as pdf or txt
Download as pdf or txt
You are on page 1of 8

Front-End Web Development

HTML, CSS, Bootstrap, JavaScript & ReactJS +SEO


COURSE & CONTENT

Online Internship Program


3 – 4 Months

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
Why should I learn Website Development?
There are several reasons why learning website development can be valuable. Here are a few:
1. In-demand skill: In today's digital age, having the ability to create and maintain websites is a
highly sought-after skill. Many businesses, organizations, and individuals need websites, which
means there is a high demand for skilled web developers.
2. Career opportunities: Learning website development can lead to various career opportunities,
including web developer, front-end developer, back-end developer, full-stack developer, and
more. These roles can be highly rewarding and lucrative.
3. Creative outlet: Website development can be a highly creative field, allowing you to express
your ideas and create visually appealing and engaging websites.
4. Entrepreneurial ventures: Having knowledge of website development can be advantageous if
you're considering starting your own business or building your own website. You'll be able to
create and maintain your website without having to rely on external help.
5. Improved problem-solving skills: Developing a website requires a lot of problem-solving and
critical thinking. It can help you develop these skills, which can be beneficial in other areas of
your life.

Overall, learning website development can be a valuable investment in your future, providing you with a
highly desirable skillset that can lead to exciting career opportunities and personal projects.

Why should I learn JavaScript & ReactJS?


Learning Javascript and ReactJS can be beneficial for a number of reasons, such as:

1. High demand in the job market: Both Javascript and ReactJS are in high demand in the job
market, with many companies looking for developers with these skills. This means that learning
these skills can lead to a wider range of job opportunities and potentially higher salaries.
2. Versatility: Javascript is a versatile programming language that can be used in many different
contexts, from front-end web development to back-end server-side programming. ReactJS, on
the other hand, is a popular and powerful front-end framework that can be used to build
complex, interactive user interfaces for web and mobile applications.
3. Large and active community: Both Javascript and ReactJS have large and active communities of
developers who share knowledge, resources, and best practices. This means that there are
many online resources and support networks available to help you learn and improve your skills.
4. Modern web development: Javascript and ReactJS are both key technologies used in modern
web development, so learning them can help you stay up-to-date with the latest trends and
techniques in the industry
5. Fun and challenging: Learning Javascript and ReactJS can be challenging, but also fun and
rewarding. With these skills, you can build your own projects, experiment with new ideas, and
create dynamic, interactive web applications.

Overall, learning Javascript and ReactJS can be a valuable investment in your career as a developer and a
rewarding experience as a learner.

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
What are career prospects if I join this course?
Learning Javascript & ReactJS can open up many career prospects in the tech industry, as it is a widely
used programming language for web development, mobile development, and even desktop application
development.

Here are some potential career paths and job titles you could pursue with a strong foundation in above
technologies:
1. Front-end Web Developer: Front-end web developers use HTML, CSS, and Javascript to build
user interfaces for websites and web applications.
2. Full-stack Web Developer: Full-stack web developers work on both the front-end and back-end
of web applications, using technologies such as Javascript, Node.js, and databases like
MongoDB.
3. Mobile App Developer: Mobile app developers use Javascript-based frameworks such as React
Native to build cross-platform mobile applications.
4. Game Developer: Game developers can use Javascript and game engines such as Phaser or
Three.js to build browser-based games.
5. UI/UX Designer: User interface (UI) and user experience (UX) designers use Javascript to create
interactive prototypes and animations.
6. Software Engineer: Javascript can also be used in server-side programming with technologies
such as Node.js, making it possible to build web servers and APIs.

Overall, learning Javascript can open up many career opportunities in a variety of fields and industries,
and it's a versatile language that can be used in many different contexts.

What is Website Development market size?


The website development market size is difficult to determine precisely, as it encompasses a wide range
of services and products, including website design, development, hosting, and maintenance, among
others. However, we can look at some industry reports and projections to get a general idea of the
market size and potential.

According to a report by ResearchAndMarkets, the global web development services market size was
valued at $272.2 billion in 2020 and is projected to reach $528.3 billion by 2028, growing at a CAGR of
8.6% from 2021 to 2028. The report notes that the growing demand for mobile-responsive websites,
increased adoption of cloud-based platforms, and rising digitalization are some of the key drivers of
market growth.

Another report by Statista projects that the global website builder software market will reach $13.6
billion by 2025, up from $7.91 billion in 2020, with a CAGR of 11.4% from 2021 to 2025. The report notes
that the rise of e-commerce and online presence for small businesses and individuals is driving the
demand for easy-to-use website builder software.

These projections indicate that the website development market is growing and presents significant
opportunities for individuals and businesses working in the industry.

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
Website Development & Indian job market
The job market for website development in India is growing rapidly, and there is a high demand for
skilled web developers. With the government's push towards a digital economy, the rise of e-commerce,
and the increasing use of technology in businesses, the demand for web developers is expected to
continue to increase.

According to a report by Naukri.com, the average salary for web developers in India ranges from INR 3.5
Lakh per annum for entry-level developers to INR 14 Lakh per annum for experienced developers. The
report also notes that web development is one of the most in-demand skills in the Indian job market,
with over 12000 job postings on their platform in 2021.

There are also many startups and small businesses in India that require website development services,
creating additional opportunities for web developers. Moreover, with the increasing trend towards
remote work, web developers in India can work for companies located anywhere in the world, providing
access to a global job market.

Overall, the website development job market in India presents a promising career path, with
opportunities for growth and advancement. Skilled web developers can find employment in a range of
industries, from IT and e-commerce to marketing and advertising, among others.

Internship Process in a nutshell

T A
Training on P
Website Assessment Project Work
Development Phase for
Certification
(HTML, CSS, Bootstrap, CQs & Assignments
JavaScript, ReactJS, SEO)

Internship process in a nutshell

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
Prerequisites of this program
Participants from CSE/IT/MCA/BCA/BSc IT/ECE background are eligible to join this program, even if any
person who is planning to sit in placement drive(s) or planning to switch in Data Science domain then
this program will be very much helpful.

Infrastructural Requirements
We expect participant(s) to have
1. A laptop with Microsoft Windows configuration with minimum 8GB RAM.
2. Laptop Charger/ Adapter for charging purpose.
3. Internet Connectivity.
4. Smartphone (4G/5G)

Post Training Deliverables


Every participant will get all under mentioned deliverables
1. 50 hours training by specialized trainer.
2. Offer Letter
3. Certificate of Internship with Project Mentioning
4. Study Material / Classroom Material
5. Guidance for Entrepreneurship in chosen field or employment support.
6. Chance to assist our trainer in our workshop(s) at IISc, IITs, NITs etc.

Course & Content


All of the sessions will be practical oriented, kindly look on the syllabus which we are going to cover
during training days.

HTML, CSS, Bootstrap & SEO Module


Session 1
Internet & Websites Session External Style Sheets
What is Internet? Construct & Analyze rule sets
What is WWW? Valid syntax for the CSS rule set; selectors
What is Webpage? including class, id, elements and pseudo-class
What is a Website?
Types of Website Session 4
Structure Documents using HTML
Session 2 Table Tags
Understand HTML Fundamentals h1-h6
HTML P
Metatags br
Keywords div
Head, Body, Footer span
Closing tags & Commonly used symbols. li
Semantic Tags
Session 3 Header
Understand CSS Fundamentals Footer
Analyze the impact of using Summary etc.
Inline Styles
Internal Style Sheets

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
Session 5 Session 9
Structure Documents using HTML -2 Domain & Hosting Session
Markup that implements navigation Domain & Domain Names
Target WHOIS Lookup
Bookmark Domain & Anti Domain Registration
Image Link Hosting of website
Hyperlink
Folder Hierarchies Session 10
Form Elements Webpage/Website Uploading
Form Attributes: action; method; submission Domain Hosting
methods cPanel & some of its important sections.
input types & restrictions Error Page Configuration
buttons Visiting webpages live & watch through Google
Analytics
Session 6
Present Multimedia using HTML Session 11
img & picture elements & their attributes. Search Engine Optimization(SEO)
Videos & simple iframe implementation. sitemap
Examples & Codes implementing multimedia meta keywords & description
favicon
Session 7
Style Web Pages using CSS Session 12
Position Content Social Media Optimizaion (SMO)
Positioning, including float, relative, absolute, Online Reputation Management
max-width Social Plugins & Widgets
Overflow height, width & align etc.

Format Text
Font-family, color, font-style, font-size, link colors
Text formatting & decoration.
Background & Borders
Border-color & style
Border width & colors

Session 8
Introduction to Bootstrap
Syntax of Bootstrap
Introduction to Container & Container Fluids
Connectivity of Bootstrap

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
JavaScript Module
Session 1 Session 7
Introduction Arrays
Implementation Create Arrays Method - II
HTML Tags in Javascript Multidimensional Arrays
Comments Modify & Delete Array
Variables Array Sort & Reverse
Variables ( Let & Const ) Array Pop & Push
Array Shift & Unshift
Session 2 Array Concat & Join
Data Types Array Slice & Splice
Arithmetic Operators
Assignment Operators Session 8
JS with Google Chrome Console isArray
Comparison Operators Array index
Array Includes
Session 3 Array Some & Every
If Statement Array find & findIndex
Logical Operators Array Filter
If Else Statement Array Methods
If Else If Statement
Conditional Ternary Operator Session 9
Switch Case JS for Each Loop
Objects
Session 4 Objects - II
Alert Box Array of Objects
Confirm Box Const Variable with Array & Objects
Prompt Box For in Loop
Map Method
Session 5
Functions Session 10
Functions with Parameters String Methods
Functions with Return Value Number Methods
Global & Local Variable Math Methods
Events Date Methods

Session 6 Session 11
While Loop DOM Introduction
Do While Loop DOM Targeting Methods
For Loop DOM Get & Set Value Methods
Break & Continue Statement DOM querySelectors
Even & Odd with Loops DOM CSS Styling Methods
Nested Loop
JavaScript Nested Loop - II

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130
Session 12 Session 13
addEventListener Method JS Forms
classList Methods Form Events
parent Method Form Events - II
Children Methods
firstChild & lastChild Method Session 14
nextSibling & prevSibling Method JS Effects
create & TextNode Interval
appendChild & insertBefore Timeout
insert
replaceChild & removeChild
cloneNode
Contains
isEqualNode

ReactJS Module
Session 1 Session 3
Home Forms
Setup Router
Getting Started Memo
ES6 CSS Styling
Render HTML
JSX Session 4
Components Hooks
What is a Hook?
Session 2 useState Hook
Class useEffect Hook
Props useContext
Events useRef
Conditional useReducer
Lists useCallback
useMemo

Final Project & Discussion

Note
Eisystems Services reserves complete right to alter/modify above mentioned course by deleting or adding sessions in it at the time of delivery
of training and attendee will not be having any issue in it as this modification/alteration can be done without any prior notification to
attendee/student.

EISYSTEMS TECHNOLOGIES
FF-110, Express Greens Plaza, Sector 1
Vaishali, Delhi NCR – Uttar Pradesh
India – 201010
W: www.eisystems.in | E: [email protected] | P: (+91) 981-160-4130

You might also like