An Internship Report on

The Complete Web Development Course

Submitted By
Yuvraj Padhy

Submitted as a partial fulfillment towards term II of

T.E. (Computer Engineering)

ARMY INSTITUTE OF TECHNOLOGY

Department of Computer Engineering

Savitribai Phule Pune University

2023-2024
 ARMY INSTITUTE OF TECHNOLOGY
Department of Computer Engineering

CERTIFICATE
This is to certify that Yuvraj Padhy (72285999G) of Army Institute
of Technology, Dighi, Pune has submitted Internship report on “The
Complete Web Development Course” as a partial fulfillment of
Term –II for award of Third year of Bachelor of Computer
Engineering, from Savitribai Phule Pune University, Pune, during the
Academic Year 2023-24.

Mr. K. A. Hule Dr. S. R. Dhore

Internship Coordinator H.O.D.
COURSE COMPLETION CERTIFICATE

i
 Acknowledgment

I take this opportunity to express gratitude to Prof. Kuldeep Hule, Internship

coordinator, Department of Computer Engineering, Army Institute of
Technology, Pune. I would like to express our profound thanks to our professors
of Computer Engineering, especially to Prof. (Dr.) S R Dhore, HOD (Computer
Engineering) for their valuable guidance and keen interest which motivated me
to put in my best.

Apr 12, 2024, Yuvraj Padhy

AIT PUNE 3362

ii
 Organization Details

Professional background: Dr. Angela Yu is a developer with a passion for

teaching. She is lead instructor at the London App Brewery, London's
leading Programming Bootcamp. She helped hundreds of thousands of students
learn to code and change their lives by becoming a developer. She has been
invited by companies such as Twitter, Facebook, and Google to teach their
employees.

Courses: Dr. Angela Yu has created 13+ top-rated e- courses on various new
technology topics such as Ethical Hacking, Python Programming course, Full
stack JavaScript course and Blockchain. They are both passionate about
bringing knowledge to the world and helping as many people as possible.

Students: More than 1.2 million students have subscribed to their courses.

Instructor Ratings: Joseph Delgadillo has an instructor rating of 4.3, and Nick
Germaine has an instructor rating of 4.4.

Reviews: They have received a total of 120,588 reviews.

iii
 Abstract

This report proviades an overview of the Full Stack Web Development course
on Udemy, which is taught by Dr. Angela Yu. The report covers various topics,
including HTML 5, CSS 3, Bootstrap 5, JavaScript ES6, DOM Manipulation,
jQuery, Git GitHub and Version Control, Node.js, Express.js, APIs and
Databases. The report highlights the key concepts and techniques learned during
the course and their potential applications in solving real-world problems. It
also provides insights into the practical experience gained through real-world
projects. The report highlights the key concepts and techniques learned during
the course and their potential applications in solving real-world problems. It is a
valuable resource for anyone interested in learning about Full Stack Web
Development and its practical applications. Over- all, the report is a valuable
resource for anyone interested in learning about Full Stack Web Development.

iv
 INDEX

Internship Certificate i
Acknowledgement ii
Organizational Details iii
Abstract iv

1 Introduction 1
2 Course Details
2.1 Description 2
2.2 Assessment 3
2.3 Course Completion Outcomes 3
3 HTML & CSS
3.1 HTML & CSS 4-6
4 JavaScript & DOM
4.1 JavaScript 7
4.2 DOM Model 8
5 jQuery & Bootstrap
5.1 jQuery 9
Bootstrap 10
5.2
6 Node.js & Express.js
6.1 Node.js 11
6.2 Express.js 12
7 Database & API
7.1 Database 13
7.2 API 13
8 Feature Website 14

9 Conclusion 15
10 Attendance Record 16
11 References 17
 Chapter 1

Introduction

1.1 About the course:

 The course is taught by the lead instructor at the App Brewery,

London's leading in-person programming bootcamp.
 The course has been updated to be 2024 ready and you'll be learning the
latest tools and technologies used at large companies such as Apple,
Google, and Netflix.
 This course doesn't cut any corners, there are beautiful, animated
explanation videos and tens of real-world projects which you will get to
build.
 The curriculum was developed over a period of four years, with
comprehensive student testing and feedback.

1.2 Outcomes of the Program:

 Learn the latest technologies, including JavaScript and Node.

 After the course we will be able to build ANY website, we want.
 Build fully-fledged websites and web apps for your startup or business.
 Work as a freelance web developer.
 Master backend development with Node
 Learn professional developer best practices.

1
 Chapter 2

Course Details

1. Course Name: Complete Full Stack Web Development Course

2. Instructors: Dr. Angela Yu
3. Course Duration: [61 Hours]
4. Number of Lectures: 300
5. Number of Students Enrolled: Over 1M students
6. Average Course Rating: 4.8

2.1 Description of Course

The Complete Front-End Web Development Course, taught by Dr. Angela Yu,
is a comprehensive program that teaches the important skills needed for full
stack web development. Through easy-to-follow video lessons, practical
exercises, and real-life projects, students learn how to create interactive and
user-friendly websites. She is an experienced teacher who nuke learning fun and
easy for beginners. By the end of the course, students will have the knowledge
and abilities to start a career in front-end web development.

Course Content

 Front-End Web Development

2
  HTML 5
 CSS 3
 Bootstrap 5
 JavaScript ES6
 DOM Manipulation
 jQuery
 Git, GitHub, and Version Control
 Backend Web Development
 Node.js
 NPM
 Express.js
 REST
 APIs
 Databases

2.2 Assessment

The course includes quizzes and assignments to assess student learning and
provide opportunities for practice. Students can also complete a final project to
demonstrate their skills and earn a certificate of completion.

2.3 Course Completion Outcomes

1. Proficiency in HTML: Students will have a strong understanding of HTML,

including how to structure web pages using different tags.

3
2. Mastery of CSS: Students will be able to make your websites look attractive
by using CSS to add colors, styles, and layouts.
3. JavaScript Skills: Students will learn how to make their websites interactive
and dynamic using.
4. JavaScript.
5. Bootstrap Expertise: Students will become skilled in using Bootstrap, a
popular framework, to create responsive and mobile-friendly websites.
6. jQuery Knowledge: Students will learn how to use jQuery, a library, to
simplify JavaScript coding and add special effects to your websites.
7. Real-World Project Experience: Students will gain hands-on experience by
completing practical projects, applying what they have learned to build
functional websites.
8. Understanding Web Performance Optimization: Students will discover
techniques to make their websites load faster and perform better.
9. Ability to Work with APIs: Students will learn how to work with APIs and
use AJAX to fetch and display data from external sources.
10. Front-End Framework Awareness: Students will be introduced to front-end
frameworks and understand how they can help them in web development.
11. Course Completion Certificate: Students will receive a course completion
certificate upon successfully completing the requirements of the Complete
Front-End Web Development Course.

4
 Chapter 3

3.1 HTML & CSS

HTML (Hyper Text Markup Language):

1. Basic Structure: HTML documents are structured using elements, which

are defined by tags. Tags typically come in pairs, an opening tag and a
closing tag, surrounding the content. For example, <p> is an opening tag
for a paragraph, and </p> is the closing tag.

2. Semantic Meaning: HTML provides a way to give semantic meaning to

different parts of a webpage. This helps search engines understand the
content and improves accessibility for users with disabilities. For
example, <header>, <nav>, <main>, <footer> are semantic tags that
define different sections of a webpage.

3. Hyperlinks: HTML is used to create hyperlinks that allow users to

navigate between different web pages. The <a> tag is used to create a
link, with the href attribute specifying the URL of the destination.

4. Images and Multimedia: HTML allows you to embed images, videos,

and audio files into web pages using the <img>, <video>, and <audio>
tags, respectively.

5. Lists: HTML provides tags for creating ordered (<ol>) and unordered
(<ul>) lists, as well as definition lists (<dl>), which are lists of terms and
their definitions.

6. Tables: HTML allows you to create tables to display tabular data using
the <table>, <tr> (table row), <td> (table data), and <th> (table heading)
tags.

5
 7. Forms: HTML provides form elements such as <form>, <input>,
<textarea>, <select>, and <button> for creating interactive forms that
allow users to submit data to a server.

8. Metadata: HTML allows you to include metadata about the document,

such as the character encoding (<meta charset="UTF-8">), viewport
settings (<meta name="viewport" content="width=device-width,
initial-scale=1.0">), and keywords (<meta name="keywords"
content="HTML, CSS, JavaScript">).

9. Comments: HTML allows you to add comments to your code using the
<!-- --> syntax. Comments are not displayed on the webpage but can be
useful for documenting your code.

10.Versioning: HTML is constantly evolving, with new features and

improvements being added in each version. The latest version of HTML
is HTML5, which introduced new elements and APIs for building
modern web applications.

CSS (Cascading Style Sheets):

1. Styling Language: CSS is a styling language used to control the look

and feel of a website. It defines how HTML elements should be displayed
on the screen, including layout, colours, fonts, and more.

2. Separation of Concerns: CSS allows for the separation of content

(HTML) and presentation (CSS), making it easier to maintain and update
the design of a website without changing the content.

3. Selectors: Selectors are used in CSS to target HTML elements based on

their type, class, ID, attributes, or relationship with other elements. This
allows for precise styling of specific elements or groups of elements.

6
4. Properties and Values: CSS properties define the visual properties of an
element, such as colour, font-size, margin, padding, etc. Each property is
assigned a value that specifies how the property should be applied.

5. Cascading: The "C" in CSS stands for cascading, which refers to the way
styles are applied to elements. Styles can be inherited from parent
elements, overridden by more specific selectors, or defined in a stylesheet
with higher precedence.

6. Box Model: The box model in CSS describes how elements are rendered
on the page as rectangular boxes. It consists of content, padding, border,
and margin, which can all be styled individually to control the element's
appearance and layout.

7. Responsive Design: CSS allows for the creation of responsive designs

that adapt to different screen sizes and devices. Media queries can be
used to apply different styles based on the device's characteristics, such as
width, height, and orientation.

8. Flexbox and Grid: CSS provides powerful layout tools like Flexbox and
Grid, which allow for more complex and responsive layouts. Flexbox is
designed for one-dimensional layouts (rows or columns), while Grid is
for two-dimensional layouts.

9. Browser Compatibility: CSS is supported by all modern web browsers

and is a standard part of web development. .

10.CSS Preprocessors: CSS preprocessors like Sass and Less extend the
functionality of CSS by adding features like variables, nesting, mixins,
and functions. These tools help improve the efficiency and
maintainability of CSS code.

7
 Chapter 4

4.1 JavaScript

JavaScript is a high-level, dynamic, and interpreted programming language

primarily used for enhancing interactivity on websites. Here's a brief overview
of its key features and uses:

1. Client-Side Scripting: JavaScript is mainly used for client-side scripting,

meaning it runs on the user's web browser, enabling interactive elements
like forms, animations, and dynamic content updates without needing to
reload the entire webpage.

2. Dynamic and Lightweight: JavaScript is a lightweight language that can

be easily added to HTML pages. It allows developers to change and
manipulate content, respond to user actions, and update the display in
real-time.

3. Object-Oriented: JavaScript supports object-oriented programming

(OOP) principles, allowing developers to create reusable and modular
code using objects and classes.

4. Event-Driven: JavaScript is event-driven, meaning it can respond to user

actions (like clicks, mouse movements, and keyboard inputs) and execute
code in response to these events.

5. Versatile: Apart from web development, JavaScript is used in a variety

of environments, including server-side programming (Node.js), mobile
app development (React Native, Ionic), and desktop app development
(Electron).

8
 6. Libraries and Frameworks: JavaScript has a rich ecosystem of libraries
and frameworks (such as React, Angular, and Vue.js) that simplify and
accelerate web development by providing pre-built components and tools.

4.2 DOM Model

The DOM (Document Object Model) is a programming interface for web

documents. It represents the structure of a document as a tree of objects,
where each object corresponds to a part of the document, such as elements,
attributes, and text. Here's a brief explanation of the DOM model:

1. Tree Structure: The DOM represents an HTML or XML document as a tree

structure, where each node in the tree corresponds to an object representing a
part of the document, such as an element, attribute, or text node. The root of
the tree is the document object, which represents the entire document.

2. Nodes: Nodes are the objects in the DOM tree. There are different types of
nodes, including element nodes, attribute nodes, text nodes, and others, each
representing a different part of the document.

3. Elements: Element nodes represent HTML elements, such as <div>, <p>,

<a>, etc. They can have child nodes (other elements, text nodes, etc.) and
can have attributes (like class, id, etc.).

4. Attributes: Attribute nodes represent attributes of an element, such as class,

id, src, etc. They are accessed through the element node they belong to.

5. Traversal and Manipulation: Developers can use the DOM API to traverse
the DOM tree, access nodes, and manipulate them. This allows for dynamic
updates to the document, such as adding, removing, or modifying elements
and attributes.

9
6. Event Handling: The DOM provides event handling functionality, allowing
developers to respond to user interactions (like clicks, mouse movements,
etc.) or other events (like page load, etc.) by attaching event listeners to
nodes.

10
 Chapter 5

5.1 jQuery

1. Introduction: jQuery is a fast, small, and feature-rich JavaScript library.

It makes things like HTML document traversal and manipulation, event
handling, and animation much simpler with an easy-to-use API that
works across a multitude of browsers.

2. DOM Manipulation: jQuery simplifies DOM manipulation by providing

a concise and easy-to-use syntax for selecting and manipulating DOM
elements. For example, $('p').hide(); will hide all <p> elements on a page.

3. Event Handling: jQuery simplifies event handling in JavaScript. You

can easily attach event handlers to elements and manage events. For
example, $('button').click(function() { alert('Button clicked!'); }); attaches
a click event handler to all <button> elements.

4. AJAX Support: jQuery provides powerful AJAX (Asynchronous

JavaScript and XML) capabilities, making it easier to load data from the
server without refreshing the entire page. This is done using methods like
$.ajax() or shorthand methods like $.get() and $.post().

5. Animations: jQuery simplifies the process of creating animations on a

web page. You can animate CSS properties, show/hide elements, and
create custom animations easily. For example, $('#element').fadeOut();
will fade out an element with the ID 'element'.

6. Cross-browser Compatibility: jQuery takes care of many cross-browser

compatibility issues, allowing you to write code that works reliably
across different browsers without having to worry about the specific
quirks of each browser.

11
 7. Extensibility: jQuery is extensible, meaning you can add new features
and functionality through plugins. There are thousands of jQuery plugins
available that can add various effects, widgets, and capabilities to your
web pages.

5.1 Bootstrap

1. Responsive Grid System: Bootstrap provides a responsive grid system

that allows you to create layouts that automatically adjust to different
screen sizes, from desktops to tablets to smartphones. This grid system is
based on a 12-column layout, making it easy to create complex,
responsive designs.

2. Pre-styled Components: Bootstrap comes with a wide range of pre-

styled components, such as buttons, forms, navigation bars, and
typography styles. These components are designed to look good out of
the box and can be easily customized to fit your design needs.

3. JavaScript Plugins: Bootstrap includes several JavaScript plugins that

add interactivity and functionality to your website, such as carousels,
modals, dropdowns, and tooltips. These plugins are easy to use and can
be added to your site with just a few lines of code.

4. Customizable: While Bootstrap provides a lot of pre-styled components

and functionality, it is also highly customizable. You can use Bootstrap's
SASS variables and mixins to easily customize the look and feel of your
site, ensuring that it matches your brand's style guide.

5. Browser Compatibility: Bootstrap is designed to work well across

different browsers, including Chrome, Firefox, Safari, and Edge. It also
provides built-in support for Internet Explorer 11, ensuring that your site
looks good on older browsers as well.

12
6. Documentation and Community: Bootstrap has extensive
documentation that explains how to use its components and features. It
also has a large community of developers who contribute to its
development and provide support through forums and online
communities.

7. Open Source: Bootstrap is an open-source project, which means that it is

free to use and can be modified and distributed by anyone. This makes it
a popular choice for developers looking to quickly build responsive and
attractive websites.

13
 Chapter 6

6.1 Node.js

1. JavaScript Runtime: Node.js is a JavaScript runtime built on Chrome's

V8 JavaScript engine. It allows you to run JavaScript code outside of a
web browser, making it possible to build server-side applications using
JavaScript.

2. Asynchronous and Event-Driven: One of the key features of Node.js is

its asynchronous, event-driven architecture. This means that Node.js can
handle many connections simultaneously without blocking the execution
of your code, making it ideal for building highly scalable applications.

3. Single-Threaded, Non-Blocking I/O Model: Node.js uses a single-

threaded model with event looping for handling I/O operations
asynchronously. This architecture allows Node.js to handle a large
number of concurrent connections efficiently.

4. Modules and npm: Node.js has a built-in module system that allows you
to organize your code into reusable modules. Additionally, Node.js comes
with npm (Node Package Manager), which is the largest ecosystem of
open source libraries and tools for JavaScript development.

5. Cross-Platform: Node.js is cross-platform, which means you can run

your Node.js applications on Windows, macOS, and Linux without any
changes to your code.

6. Scalability: Because of its asynchronous and non-blocking nature,

Node.js is highly scalable and can handle a large number of concurrent
connections with minimal overhead.

14
 7. Use Cases: Node.js is commonly used for building web applications,
APIs, real-time chat applications, microservices, and more. Its
lightweight and efficient nature make it a popular choice for building
high-performance applications.

6.2 Express.js

Web Application Framework: Express.js is a minimal and flexible Node.js

web application framework that provides a robust set of features for web and
mobile applications. It is designed for building single-page, multi-page, and
hybrid web applications.

Middleware: Express.js simplifies the process of handling HTTP requests

and responses by providing a middleware framework. Middleware functions
are functions that have access to the request object (req), the response object
(res), and the next middleware function in the application’s request-response
cycle.

Routing: Express.js provides a simple and effective way to define routes for
handling different HTTP requests like GET, POST, PUT, DELETE, etc.
Routes are defined using methods such as app.get(), app.post(), app.put(),
app.delete(), etc.

Template Engines: Express.js allows you to use various template engines

like Pug, EJS, Handlebars, etc., to generate dynamic HTML content. These
template engines help in rendering views with data from the server.

Static File Serving: Express.js allows you to serve static files such as
images, CSS, JavaScript, etc., using its express.static middleware. This
makes it easy to serve static content like images, CSS files, and client-side
JavaScript files.

15
Error Handling: Express.js provides a robust error handling mechanism.
You can define error-handling middleware functions that take four
arguments (err, req, res, next) to handle errors that occur during the
execution of the application.

RESTful API Development: Express.js is commonly used for building

RESTful APIs. It provides features like middleware, routing, and request
handling that are essential for building APIs that follow the REST
architectural style.

16
 Chapter 7
7.1 API

1. Definition: API stands for Application Programming Interface. It defines

the methods and data formats that applications can use to communicate
with each other.

2. Functionality: APIs can provide various functionalities, such as

accessing data, services, or features of another application, system, or
service.

3. Usage: Developers use APIs to integrate different software components,

allowing them to work together and share data or functionality.

4. Web APIs: Web APIs are APIs that are accessed over the HTTP
protocol. They are commonly used to enable communication between
web-based applications.

5. Examples: Examples of APIs include the Google Maps API, which

allows developers to integrate maps into their applications, and the
Twitter API, which allows access to Twitter's data and functionalities.

7.2 MongoDB Database

1. NoSQL Database: MongoDB is a popular NoSQL database, meaning it

does not use the traditional tabular relational database structure.

2. Document-Oriented: MongoDB stores data in flexible, JSON-like

documents.

17
3. Scalable: MongoDB is designed to be horizontally scalable, allowing
you to easily scale your database by adding more servers to handle
increased load.

4. High Performance: MongoDB is known for its high performance,

especially for read and write operations.

5. Ad Hoc Queries: MongoDB supports ad hoc queries, allowing you to

perform complex queries on your data using a query language similar to
SQL.

6. Indexes: MongoDB supports indexes, which can improve the

performance of queries by allowing the database to quickly locate the
documents that match a query.

18
 Chapter 8 Features of Website

Basic Features:

1. Home: It provides an overview of the hotel's amenities includes a brief

description of the hotel's unique features and services.

2. Booking: The booking section allows guests to check availability, view

room options, and make reservations.

3. Cabins: This section provides detailed information about the cabins

available at the Wild Oasis hotel. It includes descriptions of each cabin
type, along with photos and floor plans.

4. Users: The user’s section is a backend feature that allows hotel staff to
manage guest bookings, update room availability, and access guest
information.

5. Settings: It includes options to update the website's theme, add new

pages or sections, manage user permissions, and configure booking
settings (e.g., pricing, availability).

19
20
Conclusion: -

The Complete Full-Stack Web Development Course on Udemy, taught by

Angelina YU, offers a comprehensive and beginner-friendly learning
experience for individuals interested in web development. The course covers
essential topics such as HTML, CSS, JavaScript, Bootstrap, jQuery, Node.js and
Express.js, providing students with the necessary skills to create interactive and
visually appealing websites. The instructors, with their expertise and
experience, guide students through practical exercises and projects, ensuring a
hands-on learning approach. With a large number of enrolled students and
positive ratings, this course has proven to be a valuable resource for those
seeking to kickstart their careers in front-end web development.

21
 Attendance

Attendance record: -

Table 1: Attendance Record

Date Topic Covered Attendance

Feb 01 Front-End Development Present

Feb 03 Intermediate HTML Present

Feb 05 Advanced CSS Present

Feb 10 Bootstrap Present

Feb 17 Advanced JavaScript Present

Feb 24 jQuery Present

March 05 Backend Development Present

March 10 Node.js Present

March 14 Express.js Present

March 18 API and Database Present

March 21 Project Present

22
 References
1. https://www.udemy.com/user/academind
2. https://developer.mozilla.org
3. https://www.w3schools.com
4. https://www.devographics.com
5. https://roadmap.sh/
6. https://www.freecodecamp.org

23
 7. 310255: Internship**
Logbook
Third Year Computer Engineering
Year 2023-2024
Internship reg no

Name of Student Yuvraj Padhy

Mobile No. 9827916907
e- Mail ID [email protected]
Internship title Full Stack Web Development
Area of Internship HTML, CSS, Javascript,Node.js
Type of Internship
Web Development
Training/ Project/ Research
Company Name Udemy
External Guide/Coordinator

Internship Coordinator Prof. Kuldeep Hule

ARMY INSTITUTE OF TECHNOLOGY

Department of Computer Engineering

SAVITRIBAI PHULE PUNE UNIVERSITY

2023-2024

24
 ARMY INSTITUTE OF TECHNOLOGY
Computer Engineering Department

Internship Status
Review Phase- 1

Week Status of work Name of Sign of Name of Sign of

done Internal Internal External External

Week HTML, CSS Mr. Kuldeep A.

1 basics Hule
Introduction
to Bootstrap

Week Responsive design Mr. Kuldeep A.

2 with CSS Hule
JavaScript basics

Week JavaScript DOM Mr. Kuldeep A.

3 manipulation Hule
Advanced CSS
techniques

Week Introduction to
Mr. Kuldeep A.
4 Node.js
Hule
Setting up a
basic server

25
 ARMY INSTITUTE OF TECHNOLOGY

Computer Engineering Department

Internship Status

Review Phase- 2

Week Status of work Name of Sign of Name of Sign of

done Internal Internal External External

Week Introduction to
Mr. Kuldeep
5 MongoDB
A. Hule
Using MongoDB
with Node.js

Week Integrating front-

Mr. Kuldeep
6 end with back-end
A. Hule
Building a basic
full-stack
application

Week Authentication
Mr. Kuldeep
7 and security
A. Hule
RESTful APIs

Week Building a full- Mr. Kuldeep

8 stack project A. Hule
Deployment and
project
presentation

26