B.

Tech 2024 –S1/S2

SEMESTER S2

IT WORKSHOP
(Common to Group A&B)

Course Code GXESL208 CIE Marks 50

Teaching Hours/Week(L: T:P: R) 0:0:2:0 ESE Marks 50

Credits 1 Exam Hours 2 Hrs. 30 Min.

Prerequisites (if any) None Course Type Lab

Course Objectives:
1. To provide a basic understanding about computer hardware, software, and computer
network.

2. To familiarize the learner with the web development process using HTML, CSS, and Javascript.
Details of Experiments
Expt. Experiment
No
(Minimum 10 Experiments)

Practice Computer Hardware – Familiarization CPU Box, Motherboard, CPU & Chip-set,
1 Interface cards, Card slots, Hard disk, Cables, SMPS, NIC, Various ports, etc. Computer
Peripherals - I/O Devices. Storage devices, Interface cards – Buses – Firmware

2 Familiarization of Boot process

3 Familiarizing installation of Linux and Windows operating systems

Familiarizing basic Unix/Linux commands - ls, mkdir, cp, mv, grep, rmdir, chmod, useradd,
4
passwd, history, dmesg, cpuinfo, uname, du, time, write, fdisk

Familiarizing networking hardware - RJ45, UTP, fibre, switch, NIC, router, Wireless Access
5
Point (WAP), modem

Familiarizing basic networking commands - ifconfig, ping, traceroute, nslookup, ssh, scp,
6
telnet, ftp

7 View network traffic using Wireshark/Packet tracer

CSE,GECI 117
 B.Tech 2024 –S1/S2

8 Familiarizing the steps how to configure and establishing a network connecting

9 Shell programming in Linux(bash)

10 Create a web page and deploy on a local web server.

11 Use Javascript to validate forms.

Create an image slider using HTML, CSS, and JavaScript. Allow users to navigate between
12
images using previous and next buttons.

13 Familiarisation of LaTeX - Basic only

14 Familiarisation of Development Environments - Visual studio code, Sublime Text, Atom

15 Introducing Repositories - Git / Bitbucket

Course Assessment Method

(CIE: 50 Marks, ESE: 50 Marks)

Continuous Internal Evaluation Marks (CIE):

Preparation/Pre-Lab Work, experiments, Viva and
Internal
Attendance Timely completion of Lab Reports / Record. Total
Exam
(Continuous Assessment)

5 25 20 50

End Semester Examination Marks (ESE):

Procedure/ Result with

Conduct of experiment/ valid inference/ Viva
Preparatory Execution of work/ Record Total
work/Design/ troubleshooting/ Programming Quality of voce
Algorithm Output

10 15 10 10 5 50

Mandatory requirements for ESE:

 Submission of Record: Students shall be allowed for the end semester examination
onlyupon submitting the duly certified record.

CSE,GECI 118
 B.Tech 2024 –S1/S2

Course Outcomes (COs)

At the end of the course the student will be able to:
Bloom’s
Course Outcome Knowledge
Level (KL)

Experiment with the fundamental hardware components of a computer and how

CO1 K3
to interface them with software systems.
Make use of the command line of Linux operating system and shell
CO2 K3
programming.
CO3 Experiment with the data network communication scenarios using Wireshark. K3

Develop basic websites using HTML, CSS & JavaScript and manage the
CO4 K3
versions.
K1- Remember, K2- Understand, K3- Apply, K4- Analyse, K5- Evaluate, K6- Create

CO-PO Mapping Table

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12

CO1 3 3 3 3 3

CO2 3 3 3 3 3 3

CO3 3 3 3 3 3 3

CO4 3 3 3 3 3 3
1: Slight (Low),2: Moderate (Medium),3: Substantial (High), : No Correlation

CSE,GECI 119
 B.Tech 2024 –S1/S2

Text Books
Name of the Edition
Sl. No Title of the Book Name of the
Publisher and Year
Author/s
G. Michael Schneider,
1 Invitation to Computer Science Cengage 2/e, 2020
Judith Gersting
LINUX for Developers: Jumpstart Your
William Rothwell
2 Linux Programming Skills Pearson 1/e, 2018

HTML, CSS, and JavaScript -All in Julie C. Meloni

Pearson
3 One, Sams Teach Yourself Jennifer Kyrnin 1/e, 2018

Reference Books
Name of the Edition
Sl. No Title of the Book Name of the
Publisher and Year
Author/s
The Architecture of Computer Hardware, Systems
Software, & Networking: An Information
1 Irv Englander Wiley 5/e, 2014
Technology Approach
Mastering Git : Attain expertlevel proficiency
Jakub Narębski Packt 1/e, 2016
with Git forenhanced productivity and efficient
2
collaboration
Web Design with HTML, CSS, JavaScript, and
3 Jon Duckett Wiley 1/e, 2014
Jquery.

CSE,GECI120
Contents
1. Getting started with Basis of Computer Hardware 2

2. Familiarization of Boot Process 8

3. Familiarizing installation of Linux and Windows operating systems 9

4. Familiarizing Basic Unix/Linux Commands 11

5. Familiarizing Computer Network Components 18

6. Familiarizing Basic Networking Commands 22

7. View network tra!c using Wireshark/Packet tracer 25

8. Familiarizing the steps how to configure and establishing a network connecting 28

9. Shell programming in Linux (bash) 31

10.Form Validation using JavaScript 34

I
11.Image Slider using HTML, CSS and JavaScript 38

EC
12.Familiarisation of LaTeX 42

13.Familiarisation of Development Environments 47

14.Introducing Repositories - Git / Bitbucket 53

G
E,
CS

1
 1. Getting started with Basis of Computer Hardware
Aim
To understand the basic components of computer hardware, their functions, and how they
interact to form a complete computer system.

Description

The important computer hardwares of an operating system are:

1. CPU Box
CPU box familiarization is about understanding the key components inside a com-
puter, such as the motherboard, processor, RAM, storage drives (HDD/SSD), PSU,
GPU, and cooling systems, along with their functions and interconnections. It cov-
ers identifying input/output ports like USB, HDMI, and Ethernet, understanding the
role of power management, learning safe assembly/disassembly practices, and proper
handling of sensitive components like the CPU and RAM. Additionally, it includes
recognizing the importance of cooling and airflow, managing cables e!ectively, and

I
troubleshooting basic hardware issues, providing a strong foundation for understand-

EC
ing computer hardware and its practical applications.
G
E,
CS

Figure 1: CPU

2. Motherboard
The motherboard is the main circuit board of a computer that acts as a central hub,
connecting all components and allowing them to communicate. It hosts critical hard-
ware such as the CPU, RAM, storage devices, and GPU, and includes ports for pe-
ripherals and expansion cards. Key features of a motherboard include:
• CPU Socket: Slot for installing the processor.
• RAM Slots (DIMM): Slots for memory modules.
• Chipset: Manages data flow between the CPU, memory, and peripherals.

2
 • Expansion Slots (PCIe): For GPUs, sound cards, or other add-ons.
• Storage Interfaces: SATA or M.2 ports for connecting HDDs and SSDs.
• I/O Ports: USB, HDMI, Ethernet, and audio ports for external devices.
• Power Connectors: Connect to the PSU for powering the board and attached
components.

I
Figure 2: Motherboard

3. CPU & Chipset

EC
The CPU is the brain of the computer, responsible for executing instructions and
performing computations. It fits into the CPU socket on the motherboard, which
varies by processor type and brand (e.g., Intel or AMD). Common components of a
G
CPU include:
• Cores: Independent processing units for multitasking.
• Threads: Virtual cores for handling multiple tasks simultaneously.
E,

• Cache: High-speed memory within the CPU for quick data access.
CS

Figure 3: Chipset

Chipset:
• The chipset is a set of integrated circuits on the motherboard that manages com-
munication between the CPU, memory, storage devices, and peripherals.

3
 • It acts as the motherboard’s tra”c controller, ensuring e”cient data flow between
components.
Modern chipsets are divided into:
– Northbridge: (Integrated into the CPU in newer systems) Handles high-speed
communication between the CPU, RAM, and GPU.
– Southbridge: Manages slower peripherals like USB, SATA, and audio.
• The chipset determines key motherboard features, such as:
– Supported CPU models and RAM types.
– Number of expansion slots and USB ports.
– Overclocking capabilities.
– Both the CPU and chipset are critical for overall system performance and
compatibility with other hardware.
4. Interface Cards
• Add-on cards installed in expansion slots to enhance or add functionalities.
• Examples: Graphics Cards (GPU), Sound Cards, Network Interface Cards (NIC),

I
TV Tuner Cards.

EC
• Interface: PCIe (Peripheral Component Interconnect Express) slots for modern
cards.
G
E,
CS

Figure 4: Sound Card

5. Card Slots
• Slots on the motherboard for attaching interface cards.
• PCIe Slots: High-speed slots for GPUs and other modern interface cards.
• PCI Slots: Older standard for expansion cards.
• M.2 Slots: Used for high-speed SSDs and wireless adapters.

4
 I
Figure 5: Slots on Motherboard

EC
G
E,
CS

Figure 6: HDD Figure 7: SSD

6. Hard Disk
• Primary storage device for data and operating systems.
• Types: HDD (Hard Disk Drive): Mechanical drive o!ering large capacity at lower
speeds.
• SSD (Solid State Drive): Faster, more reliable, and energy-e”cient, with no moving
parts.
• Connected via SATA (Serial ATA) or NVMe (Non-Volatile Memory Express) in-
terfaces.

5
7. Cables
• Essential for connecting components and peripherals.
• Power Cables: From the SMPS to components like the motherboard, GPU, and
storage.
• Data Cables: SATA cables for storage drives, ribbon cables for legacy devices.
• Interface Cables: HDMI, VGA, USB, and Ethernet for connecting peripherals and
external devices.
8. SMPS (Switched Mode Power Supply)
• Converts AC power from the outlet into DC power for the computer.
• Supplies power to the motherboard, CPU, GPU, storage devices, and peripherals.
• Includes connectors such as 24-pin ATX (motherboard) and 6/8-pin PCIe (GPU).

I
EC
G
E,
CS

Figure 8: SMPS

9. NIC (Network Interface Card)

• Enables wired or wireless networking by connecting the computer to a network.
• Ethernet NIC: Wired connection via an RJ45 port.
• Wi-Fi Adapter: Wireless connection via PCIe or USB.
• NICs can be integrated into the motherboard or added as dedicated cards for
advanced features.

6
 Figure 9: NIC Card

10. Various Ports

• Located on the motherboard and case for connecting peripherals.
• USB Ports: Universal interface for devices like keyboards, mice, and storage.
• Audio Ports: For headphones, microphones, and speakers.

I
• Video Ports: HDMI, DisplayPort, VGA, or DVI for monitors.
• Ethernet Port: For network cables.
• Power Port: For SMPS connection.
EC
G
E,
CS

Figure 10: Ports on Motherboard

Result

Gained knowledge about essential computer hardware components such as the CPU,
RAM, motherboard, storage devices, input/output devices, and power supply, and under-
stood their roles in the functioning of a computer system.

7
 2. Familiarization of Boot Process
Aim
To understand the boot process of a computer, including the sequence of steps that occur
from powering on the system to loading the operating system.

Description
The boot process is the sequence of events that occurs when a computer is powered on and
prepares the system for use. The Process are:
1. Power-On Self-Test (POST):
• When the computer is turned on, the BIOS/UEFI firmware on the motherboard
initiates a self-diagnostic test called POST.
• It checks the basic hardware components, such as the CPU, RAM, and storage
devices, to ensure they are functioning correctly.
• If errors are found, the system displays error messages or beep codes.
2. Initialization of Firmware:

I
• The BIOS/UEFI firmware initializes hardware and configures the system for boot-

EC
ing.
• It locates the boot device (e.g., HDD, SSD, USB drive) specified in the boot order
settings.
3. Boot Loader Activation:
G
• The BIOS/UEFI hands over control to the boot loader located on the boot device.
• Common boot loaders include GRUB (Linux) or Windows Boot Manager.
E,

4. Loading the Operating System (OS):

• The boot loader loads the kernel of the operating system into memory.
• The kernel initializes essential system components and manages resources like
CS

CPU, memory, and input/output devices.

5. User Interface Launch:
• Once the kernel has initialized, the OS starts system services, drivers, and the
graphical user interface (GUI).
• The login screen or desktop environment is displayed, completing the boot process.

Result
Gained knowledge of the computer boot process, including stages such as POST (Power-On
Self-Test), BIOS/UEFI initialization, bootloader execution, and OS loading, and understood
how these steps work together to start a functional system.

8
 3. Familiarizing installation of Linux and Windows operating
systems
Aim
To successfully install Windows and Linux on a personal computer using installation media
(USB or DVD).

Description

Installing Windows
1. Create Bootable Media: Use tools like Rufus or Media Creation Tool to create a
bootable USB or DVD with the Windows ISO file.
2. Boot from Installation Media: Restart the system and enter the BIOS/UEFI
settings (usually by pressing F2, F12, Del, or Esc during boot) and Set the boot
order to prioritize the USB/DVD.
3. Windows Installation Steps

I
• Select your language, time format, and keyboard layout. Click ”Next.”

EC
• Click ”Install Now.”
• Enter the product key or select ”I don’t have a product key.”
• Choose the installation type:
(a) Upgrade: To keep existing files.
G
(b) Custom: For a fresh installation.
• Create/modify partitions as needed.
• Select the partition to install Windows and click ”Next.”
E,

• Wait for the installation to complete and follow the on-screen instructions for initial
setup.
Installing Linux (Eg. Ubuntu)
CS

1. Create Bootable Media: Use tools like Balena Etcher to create a bootable USB
with the Linux ISO file.
2. Boot from Installation Media:
• Restart the system and enter the BIOS/UEFI settings.
• Set the boot order to prioritize the USB/DVD.
3. Linux Installation Steps
(a) Select ”Install Ubuntu” from the boot menu.
(b) Choose your preferred language and keyboard layout.
(c) Select the installation type:
• Normal Installation: Includes additional software.
• Minimal Installation: Only essential tools.
(d) Choose the partitioning method:
• Erase Disk and Install: For fresh installations.
• Something Else: For custom partitioning.

9
 (e) Create partitions (e.g., root /, swap, and home /home).
(f) Click ”Install Now” and confirm changes.
(g) Set up user accounts and passwords.
Reference
• Windows : https://www.wikihow.com/Install-Windows-10
• Ubuntu : https://ubuntu.com/tutorials/install-ubuntu-desktop5-installation-setup
Result
The installation of both Windows and Linux was successfully completed and fully opera-
tional on the computer, ready for use.

I
EC
G
E,
CS

10
 4. Familiarizing Basic Unix/Linux Commands
Aim
To learn and practice basic Linux commands to understand file management, process con-
trol, and system navigation in a Linux environment.

Description
Unix/Linux commands are essential for navigating and managing a system e”ciently. Here’s
an overview of some fundamental commands with their purpose:
1. ls (List Directory Contents):
• Displays files and directories in the current directory.
• Example: ls -l (detailed view with permissions, size, and date). [h!]

I
EC
G
Figure 11: ls syntax
E,
CS

Figure 12: ls syntax

11
2. mkdir (Make Directory):
• Creates a new directory.
• Example: mkdir new folder.

Figure 13: Caption

3. cp (Copy Files/Directories):
• Copies files or directories.

I
• Example: cp file.txt backup/ (copies file.txt to the backup folder).

EC
G
E,

Figure 14: Caption

CS

4. mv (Move/Rename Files):
• Moves or renames files and directories.
• Example: mv file.txt new name.txt (renames file.txt to new name.txt).

Figure 15: Caption

5. grep (Search for Patterns in Text):

• Searches for specific text in files or outputs.
• Example: grep ”keyword” file.txt.

12
 Figure 16: Caption

6. rmdir (Remove Directory):

• Deletes an empty directory.
• Example: rmdir old folder.

I
EC
G
Figure 17: Caption
E,

7. chmod (Change File Permissions):

• Modifies file permissions.
CS

• Example: chmod 755 script.sh (gives read/write/execute permissions to the owner

and read/execute permissions to others).

Figure 18: Caption

13
8. useradd (Add New User):
• Creates a new user account.
• Example: sudo useradd -m newuser (creates a user with a home directory).

I
Figure 19: Caption

9. passwd (Change Password):

• Sets or changes a user’s password.
• Example: passwd username.
EC
G
E,
CS

Figure 20: Caption

10. history (Command History):

• Displays a list of previously executed commands.
• Example: history — grep mkdir (searches for all mkdir commands in history).

Figure 21: Caption

14
11. dmesg (System Boot and Kernel Messages):
• Displays messages generated by the kernel during boot or runtime.
• Example: dmesg — grep error (searches for errors in the kernel logs).

Figure 22: Caption

I
12. cpuinfo (CPU Information):

EC
• Displays detailed information about the CPU.
• Example: cat /proc/cpuinfo.
G
E,
CS

Figure 23: Caption

13. uname (System Information):

• Displays system information like kernel name, version, and architecture.
• Example: uname -a (displays all system information).

15
 Figure 24: Caption

14. du (Disk Usage):

• Shows the disk usage of files and directories.
• Example: du -h (displays human-readable file sizes).

I
EC
Figure 25: Caption
G
15. time (Measure Execution Time):
• Measures the execution time of a command.
• Example: time ls.
E,
CS

Figure 26: Caption

16. write (Send a Message to a User):

• Sends a message to another logged-in user.
• Example: write username (type the message and press Ctrl+D to send).

16
 Figure 27: Caption

17. fdisk (Disk Partitioning Tool):

I
• Used to manage disk partitions.

EC
• Example: sudo fdisk -l (lists all disk partitions).
G
E,
CS

Figure 28: Caption

Result
Successfully executed and understood essential Linux commands such as ls, cd, pwd, mkdir,
rm, cp, mv, and ps, gaining hands-on experience in managing files, directories, and processes
in a Linux system.

17
 5. Familiarizing Computer Network Components
Aim
To familiarize with various networking hardware components such as RJ45 connectors,
UTP cables, fiber optic cables, switches, NICs, routers, Wireless Access Points (WAP),
and modems, and understand their roles in establishing and maintaining network connec-
tivity.

Description

1. RJ45 Connector
• What it is: A standardized interface for connecting Ethernet cables to devices.
• Use: Primarily used to terminate UTP cables and connect them to devices like
switches, routers, or computers. Appearance: An 8-pin modular connector.

I
EC
G
E,

Figure 29: RJ45

2. UTP Cable (Unshielded Twisted Pair)

CS

• What it is: A type of cable with pairs of wires twisted together to reduce electro-
magnetic interference.
• Use: Commonly used in Ethernet networks for connecting devices.
• Categories: CAT5e, CAT6, and CAT7 are popular types, with CAT6 and above
supporting higher speeds.

Figure 30: UTP Cable

3. Fibre (Optical Fiber Cable)

18
 • What it is: A high-speed data transmission cable using light signals instead of
electrical signals.
• Use: Ideal for long-distance, high-bandwidth requirements like backbone connec-
tions in large networks.
• Types: Single-mode (long-distance) and Multi-mode (short-distance).

I
EC
G
Figure 31: Fiber Optical Cable

4. Switch
E,

• What it is: A device that connects multiple devices in a network and uses MAC
addresses to forward data to the correct destination.
• Use: Facilitates communication between devices within the same local area network
CS

(LAN).
• Types: Managed and unmanaged switches.

Figure 32: Switch

5. NIC (Network Interface Card)

• What it is: A hardware component (internal or external) that connects a computer
to a network.
• Use: Provides the physical interface for wired (Ethernet) or wireless (Wi-Fi) con-
nectivity.

19
 I
Figure 33: Wireless NIC Card

6. Router
EC
• Common Feature: Most modern NICs support high-speed data transfer.

• What it is: A device that connects multiple networks and directs data packets
G
between them.
• Use: Facilitates Internet access by connecting your local network to your ISP.
• Key Feature: Often includes a built-in firewall and additional security features.
E,
CS

Figure 34: Wifi Router

7. Wireless Access Point (WAP)

• What it is: A device that allows wireless devices to connect to a wired network
using Wi-Fi.

20
 • Use: Extends the range of a network or adds Wi-Fi capability.
• Di!erence from Router: A WAP alone doesn’t manage IP addresses; it requires a
router for full functionality.

I
Figure 35: Wireless Access Point

8. Modem

EC
• What it is: A device that modulates and demodulates signals for Internet access.
• Use: Connects your home or o”ce to your Internet Service Provider (ISP) via
G
DSL, cable, or fiber.
• Key Feature: Often combined with a router in a single device for convenience.
Result
E,

Familiarized with various networking hardware components such as RJ45, UTP, fiber optic
cables, switches, NICs, routers, WAPs, and modems, and understood their roles in net-
work communication. Successfully established wired and wireless connections using these
components to simulate a functional network setup.
CS

21
 6. Familiarizing Basic Networking Commands
Aim
To learn and practice basic networking commands in Linux/Windows to analyze, trou-
bleshoot, and manage network connections.

Description
Networking commands are essential for diagnosing, configuring, and troubleshooting net-
work connections in Unix/Linux environments. Below is an overview of some fundamental
networking commands:
1. ifconfig (Interface Configuration):
• Displays or configures network interfaces on a system.
• Example: ifconfig (shows current network interface settings, IP address, and net-
work statistics).
• To configure a network interface: sudo ifconfig eth0 192.168.1.10 netmask 255.255.255.0
up (sets IP and netmask).

I
EC
G
E,
CS

2. ping (Send ICMP Echo Request):

• Tests the network connection between your machine and another system (by send-
ing ICMP packets).
• Example: ping 8.8.8.8 (pings Google’s DNS server to test network connectivity).
• Example: ping google.com (pings a domain name).

22
3. traceroute (Trace Network Route):
• Traces the path packets take from your machine to a destination, showing each
hop along the way.

I
• Example: traceroute google.com (traces the route to Google’s servers).

EC
G
4. nslookup (Name Server Lookup):
E,

• Queries DNS servers to obtain domain name or IP address information.

• Example: nslookup google.com (resolves the IP address of google.com).
CS

• Example: nslookup 8.8.8.8 (finds the domain name for a given IP).

5. ssh (Secure Shell):

• Allows secure remote login and command execution on another system over a
network.
• Example: ssh [email protected] (remotely logs into a machine using SSH).
• Example: ssh -p 2222 [email protected] (connects using a custom port).

23
 6. scp (Secure Copy):
• Used to securely copy files between a local and remote system or between two
remote systems.
• Example: scp file.txt [email protected]:/path/to/destination/ (copies file.txt
to a remote system).
• Example: scp [email protected]:/path/to/file.txt ./ (copies a file from a
remote system to local).
7. telnet (Telnet Client):
• Connects to a remote system over the Telnet protocol (not encrypted, typically
used for legacy systems).
• Example: telnet 192.168.1.100 23 (connects to a remote machine on port 23).

I
• Note: Telnet is not recommended for secure connections; SSH is preferred.
8. ftp (File Transfer Protocol):
EC
• Transfers files between systems over a network using the FTP protocol.
• Example: ftp ftp.example.com (connects to an FTP server).
G
• Example: get file.txt (downloads a file from the FTP server).
• Example: put file.txt (uploads a file to the FTP server).
Result
E,

Successfully executed and understood networking commands such as ping, ipconfig/ifconfig,

traceroute, netstat, and nslookup, gaining hands-on experience in monitoring, diagnosing,
and managing network connectivity.
CS

24
 7. View network tra!c using Wireshark/Packet tracer
Aim
To understand how to capture, analyze, and interpret network tra”c using tools like Wire-
shark and Packet Tracer for network monitoring and troubleshooting.

Description

Cisco Packet Tracer

Cisco Packet Tracer is a network simulation tool developed by Cisco Systems. It is pri-
marily designed for learning and practicing network concepts, especially for students and
professionals pursuing networking certifications such as Cisco Certified Network Associate
(CCNA).

Key Features of Cisco Packet Tracer

1. Simulation of Network Devices: Allows users to simulate and configure various

network devices such as routers, switches, firewalls, and wireless access points.

I
2. Hands-On Practice: O!ers a virtual environment to practice network setup, config-

EC
uration, and troubleshooting without requiring expensive hardware.
3. Interactive Learning: Supports interactive activities and scenarios to help users
understand networking concepts like IP addressing, routing, switching, and more.
G
4. Real-Time Network Behavior: Simulates real-time data flow between devices to
demonstrate how networks operate.
5. Cross-Platform Availability: Works on Windows, macOS, Linux.
E,

Benefits of Cisco Packet Tracer

CS

(a) Free for Students: Provided for free through Cisco Networking Academy.
(b) Risk-Free Experimentation: Allows users to test configurations without a!ect-
ing real-world systems.
(c) Visual Learning: Provides a graphical interface to visualize network designs and
operations.
(d) Scalable: Supports small to large-scale network simulations.

25
Exploring the GUI of the Cisco Packet Tracer

Once you open the Cisco Packet Tracer following GUI screen appear.

I
EC
Figure 36: Interface of Cisco
G
E,
CS

Figure 37: Interface Overview

This initial interface contains ten components:

1. Menu Bar: This bar provides the File, Edit, Options, View, Tools, Extensions, Win-
dow, and Help menus. You will find basic commands such as Open, Save, Save as Pkz,
Print, and Setting and Preferences in these menus.
2. Main tool Bar: This bar provides shortcut icons to the most commonly used menu
commands

26
 3. Common Tool Bar: This bar provides access to these commonly used workspace
tools: Select, Inspect, Delete, Resize Shape, Place Notes, Drawing Palette, Add Simple
PUD, and Add Complex PDU.
4. Logical/Physical Workspace and Navigation Bar: You can switch or toggle
between Physical Workspace and Logical Workspace with the tabs on this bar. In
Logical Workspace, this bar allows you to go back to a previous level in the cluster,
create a New Cluster, Move object, and set a Tiled background and viewpoint, etc.
In a physical Workspace, this bar allows you to navigate through physical locations,
create a new city, create a new building, create a new closet, move an object, apply a
Grid to the background, etc.
5. Workspace: This area is where you will create your network, watch simulations, and
view many kinds of information and statistics.
6. Realtime/Simulation Bar: You can toggle between Realtime Mode and Simulation
Mode with the tabs on this bar. This bar also provides buttons to Power Cycle Devices
and Fast Forward Time as well as the Play control buttons and the event list toggle
button in Simulation Mode.

I
7. Network Component Box: This box is where you choose devices and connections

Specific Selection Box.

EC
to put into the workspace. It contains the Device-Type Selection Box and the Device-

8. Device-Type Selection Box: This box contains the type of devices and connections
available in the packet tracer. This box will change depending on which type of device
G
you select.
9. Device-Specific Selection Box: This box is where you choose specifically which
device you want to add to your network and which connection to make.
E,

10. User Created Packet Window: This window manages the packets you add to the
network during simulation scenarios.
CS

Result
Successfully captured and analyzed network tra”c using Wireshark/Packet Tracer, gaining
insights into network protocols, packet structures, and identifying potential issues.

27
 8. Familiarizing the steps how to configure and establishing a
network connecting
Aim
To familiarize with the steps involved in configuring and establishing a network connection,
including setting up devices, configuring IP addresses, and verifying connectivity.

Description

Configure Each Device

I
EC
G
Figure 38: Network
E,

1. Configure the Modem

(a) Connect to ISP: Use the provided credentials to configure the modem to establish
the internet connection.
CS

(b) Bridge Mode (Optional): If you’re using an external router, set the modem to
bridge mode to avoid double NAT.
2. Configure the Router
(a) Connect the Modem to the Router: Use an Ethernet cable to connect the
modem’s LAN port to the router’s WAN port.
(b) Access the Router’s Web Interface:
• Connect a PC to the router (via Ethernet or Wi-Fi).
• Open a browser and enter the router’s IP address (usually 192.168.0.1 or
192.168.1.1).
• Login with admin credentials.
(c) Set Up Internet Connection:
• Use Dynamic Host Configuration Protocol (DHCP) if the ISP assigns an IP
automatically.
• Use static IP or PPPoE if required by the ISP.
(d) Configure LAN Settings:
• Set the router’s LAN IP range (e.g., 192.168.1.1/24).

28
 I
Figure 39: Caption

(e) Secure the Network:

EC
• Enable DHCP to automatically assign IPs to connected devices.

• Change default admin username/password.

G
• Set up a firewall.
• Enable WPA3/WPA2 encryption for Wi-Fi.
3. Configure the Switch
E,

(a) Connect the Switch to the Router: Use an Ethernet cable to connect one of
the router’s LAN ports to the switch.
(b) Configure VLANs (Optional): If your switch is managed, create VLANs to
CS

segment the network for better performance and security.

(c) Connect End Devices: Plug devices (PCs, printers, etc.) into the switch’s
Ethernet ports.
4. Configure the Wireless Access Point
(a) Connect WAP to the Router or Switch: Use an Ethernet cable to connect
to the LAN port.
(b) Access the WAP’s Web Interface:
• Connect to the WAP using its default Wi-Fi or Ethernet.
• Open a browser and enter the WAP’s IP address (check documentation).
(c) Set Up Wi-Fi:
• Configure the SSID (Wi-Fi name) and password.
• Set the security mode (WPA3/WPA2 preferred).
• Enable dual-band (2.4 GHz and 5 GHz) if supported.
(d) Place the WAP Strategically:
• Ensure optimal coverage by placing the WAP in a central location, free from
physical obstructions.

29
 Figure 40: WAP

5. Configure the PCs

I
(a) Set Network Settings:

EC
• Use DHCP (default) to get IPs from the router automatically.
• Configure static IPs if required.
G
E,
CS

Figure 41: Configuration on Windows

(b) Test Connectivity:

• Ping the router’s IP address to verify LAN connectivity.
• Ping a public IP or website (e.g., 8.8.8.8) to check internet access.
Result
Successfully configured and established a network connection, ensuring proper communica-
tion between devices and verifying connectivity using basic network troubleshooting tools.

30
 9. Shell programming in Linux (bash)
Aim
To understand and implement basic shell programming in Linux using Bash, including cre-
ating and executing scripts to automate tasks.

Description
Shell programming in Linux refers to writing scripts using a shell (command-line interpreter)
to automate tasks. A shell script is a file containing a series of commands that the shell
executes in sequence.
The most commonly used shell in Linux is Bash (Bourne Again Shell), but there are others
like Zsh, Ksh, and Fish. Shell scripts are used to automate repetitive tasks, manage system
configurations, and simplify complex operations.

Advantages of Shell Programming

1. Automation: Simplifies repetitive tasks (e.g., backups, file management).
2. E”ciency: Executes complex tasks quickly with fewer commands.
3. Portability: Can run across di!erent Linux distributions with minimal modifications.

I
EC
Basic Structure of a Shell Script
1. Shebang Line: Indicates the script interpreter (#!/bin/bash).
2. Commands: Series of Linux commands and logic.
G
E,
CS

Execution:
1. Save the script as filename.sh.
2. Make it executable: chmod +x filename.sh.
3. Run: ./filename.sh.

31
 Program 1: A Simple Greeting Script
This script greets the user with their name.

Program 2: Adding Two Numbers

I
This is simple Bash script to add two numbers.

EC
G
E,
CS

Practice Questions

1. Store the output of the command “hostname” in a variable. Display “This script is
running on .” where “ ” is the output of the “hostname” command.
2. Write a shell script that displays “man”,”bear”,”pig”,”dog”,”cat”,and “sheep” on the
screen with each appearing on a separate line.

32
 3. Write a shell script that consists of a function that displays the number of files in the
present working directory. Name this function “file count” and call it in your script. If
you use variable in your function, remember to make it a local variable.
4. Write a shell script to convert string lower to upper and upper to lower.
5. Implement ”while loop” using shell scripting.
6. Implement ”for loop” using shell scripting.
Result
Successfully created and executed shell scripts in Linux to automate tasks such as arithmetic
operations, file handling, and displaying system information, demonstrating the fundamen-
tals of Bash scripting.

I
EC
G
E,
CS

33
 10. Form Validation using JavaScript
Aim
To use Javascript to validate forms.

Description

Program Code

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<link rel="stylesheet" href="styles.css">
</head>

CI
<body>
<div class="form-container">
<form id="registrationForm" onsubmit="return validateForm()">
<h2>Registration Form</h2>
GE
<!-- Name Field -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<small class="error" id="nameError"></small>
E,

<!-- Email Field -->

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<small class="error" id="emailError"></small>
CS

<!-- Password Field -->

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your
<small class="error" id="passwordError"></small>

<!-- Submit Button -->

<button type="submit">Register</button>
</form>
</div>

<script src="script.js"></script>
</body>
</html>

style.css
body {
font-family: Arial, sans-serif;

34
 margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
}

.form-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 300px;
}

form h2 {

CI
text-align: center;
margin-bottom: 20px;
} GE
label {
font-weight: bold;
display: block;
margin: 10px 0 5px;
}
E,

input {
width: 100%;
padding: 10px;
CS

margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

35
.error {
color: red;
font-size: 0.9em;
margin-top: -8px;
margin-bottom: 10px;
}

script.js
function validateForm() {
// Clear previous errors
clearErrors();

// Get form values

const name = document.getElementById("name").value.trim();
const email = document.getElementById("email").value.trim();
const password = document.getElementById("password").value.trim();

CI
let isValid = true;

// Validate Name
if (name === "") {
GE
showError("nameError", "Name is required.");
isValid = false;
} else if (name.length < 3) {
showError("nameError", "Name must be at least 3 characters long.");
isValid = false;
}
E,

// Validate Email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
CS

if (email === "") {

showError("emailError", "Email is required.");
isValid = false;
} else if (!emailRegex.test(email)) {
showError("emailError", "Enter a valid email address.");
isValid = false;
}

// Validate Password
if (password === "") {
showError("passwordError", "Password is required.");
isValid = false;
} else if (password.length < 6) {
showError("passwordError", "Password must be at least 6 characters long.");
isValid = false;
}

// Return validation status

return isValid;
}

36
// Helper function to show error messages
function showError(elementId, message) {
const errorElement = document.getElementById(elementId);
errorElement.innerText = message;
}

// Helper function to clear all error messages

function clearErrors() {
const errorElements = document.querySelectorAll(".error");
errorElements.forEach((element) => (element.innerText = ""));
}

Output

I
EC
G
E,
CS

Result
Successfully implemented form validation using JavaScript to ensure that user inputs, such
as name, email, and password, meet specified criteria before submission, enhancing data
accuracy and user experience.

37
 11. Image Slider using HTML, CSS and JavaScript
Aim
Create an image slider using HTML, CSS, and JavaScript. Allow users to navigate between
images using previous and next buttons.

Description

Program Code

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Slider</title>
<link rel="stylesheet" href="styles.css">

CI
</head>
<body>
<div class="slider-container">
<div class="slider">
GE
<img src="bash_1.png" alt="Image 1" class="slide">
<img src="bash_2.png" alt="Image 2" class="slide">
<img src="bash_3.png" alt="Image 3" class="slide">
</div>
<button class="prev" onclick="prevSlide()">&#10094;</button>
<button class="next" onclick="nextSlide()">&#10095;</button>
E,

</div>
<script src="script.js"></script>
</body>
</html>
CS

style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}

.slider-container {
position: relative;
width: 80%;
max-width: 600px;
overflow: hidden;

38
 border: 2px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.slider {
display: flex;
transition: transform 0.5s ease-in-out;
}

.slide {
width: 100%;
height: auto;
display: block;
}

button {
position: absolute;

CI
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
GE
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 10;
E,

font-size: 18px;
outline: none;
}
CS

button:hover {
background-color: rgba(0, 0, 0, 0.7);
}

.prev {
left: 10px;
}
.next {
right: 10px;
}

script.js
let currentSlide = 0;

function showSlide(index) {
const slides = document.querySelectorAll(".slide");
const slider = document.querySelector(".slider");
const totalSlides = slides.length;

39
 // Wrap around logic for navigation
if (index >= totalSlides) {
currentSlide = 0;
} else if (index < 0) {
currentSlide = totalSlides - 1;
} else {
currentSlide = index;
}

// Update the transform property to slide images

const offset = -currentSlide * 100;
slider.style.transform = ‘translateX(${offset}%)‘;
}

function nextSlide() {
showSlide(currentSlide + 1);
}

I
EC
function prevSlide() {
showSlide(currentSlide - 1);
}

// Initialize the first slide

G
showSlide(currentSlide);
E,

Output
CS

Result
Successfully created an interactive image slider using HTML, CSS, and JavaScript, allowing

40
users to navigate between images using ”Previous” and ”Next” buttons, ensuring smooth

I
transitions and a responsive design.

EC
G
E,
CS

41
 12. Familiarisation of LaTeX
Aim
To familiarize with the basics of LaTeX, including document structure, text formatting, and
compiling a simple document.

Description
LaTeX (pronounced Lay-tech or Lah-tech) is a typesetting system commonly used for scien-
tific, technical, and mathematical documents. It produces high-quality, professional-looking
documents, especially useful for academic papers, theses, reports, and research articles.
LaTeX is not a word processor like Microsoft Word. Instead, it uses plain text and markup
commands to format and typeset documents.

Why Use LaTeX?

LaTeX is ideal because:

1. High-quality typesetting: Especially for mathematical symbols and complex docu-
ments.

CI
2. Automatic numbering: Handles figures, tables, references, and numbering automat-
ically.
3. Customization: You can tweak almost every part of the document’s design.
GE
4. Cross-platform: Works on Windows, macOS, and Linux.
LaTeX uses markup commands in plain text to describe how a document should look. These
commands tell LaTeX how to format the text, equations, tables, figures, and other elements.
E,

1. Document Structure

These commands set up the structure of any LaTeX document:

CS

\documentclass{article}: Defines the type of document (article, book, report, etc.).

\begin{document}: Marks the start of the main document content.
\end{document}: Marks the end of the document.
\title{Your Title}: Sets the document’s title.
\author{Your Name}: Specifies the author.
\date{}: Adds the date (e.g., \date{\today} for today’s date).
\maketitle: Generates the title page with title, author, and date.

Structure:

\documentclass{article} % Select the document type

\usepackage[utf8]{inputenc} % Package for UTF-8 support

\begin{document} % Start the document content

\title{My First LaTeX Document}

\author{Your Name}
\date{\today}

42
 \maketitle % Generates the title page

Hello, world! This is my first document in LaTeX.

\section{Introduction}
This is a basic introduction section.

\end{document} % End the document content

2. Sections and Subsections

Commands to divide your document into sections:

\section{}: Creates a top-level section.

\subsection{}: Creates a subsection.
\subsubsection{}: Creates a sub-subsection.
\paragraph{}: Creates a small paragraph-like heading.

CI
3. Text Formatting

These commands are used for common text formatting:

GE
\textbf{}: Makes text bold.
\textit{}: Makes text italic.
\underline{}: Underlines text.
\texttt{}: Displays text in monospace font (typewriter-like).
\emph{}: Emphasizes text (typically italicized).
E,

4. Mathematical Expressions
CS

LaTeX excels at handling math with these basic commands:

$...$: Inline math mode. Example: $x^2 + y^2$.

\[...\]: Displayed math mode.
\frac{a}{b}: Creates fractions. Example: \frac{1}{2}.
\sum: Summation symbol.
\int: Integral symbol.
\sqrt{}: Square root. Example: \sqrt{4}.

5. Lists

Commands for creating lists:

Unordered List (Bulleted)

\begin{itemize}
\item Item 1
\item Item 2
\item Item 3

43
 \end{itemize}

Ordered List (Numbered)

\begin{enumerate}
\item Item 1
\item Item 2
\item Item 3
\end{enumerate}

6. Including Images

To include images with the graphicx package:

Add the package:

\usepackage{graphicx}

CI
Insert an image:

\begin{figure}[h]
\centering
GE
\includegraphics[width=0.5\textwidth]{image.png}
\caption{My image.}
\label{fig:myimage}
\end{figure}
E,

7. Tables

Commands to create tables:

CS

\begin{tabular}{|c|c|c|}
\hline
A1 & B1 & C1 \\
\hline
A2 & B2 & C2 \\
\hline
\end{tabular}

8. Citations

For managing references, use \cite and define references:

Define the bibliography
Add to a .bib file:
bibtex

@article{example,
author = {John Doe},

44
 title = {Example Article},
journal = {Sample Journal},
year = {2020}
}

Use in document:

\bibliographystyle{plain}
\bibliography{yourfile}

And cite:

\cite{example}

9. Tables of Contents

Insert a table of contents with:

CI
\tableofcontents

10. Page Layout

GE
Use the geometry package to change margins:

\usepackage[margin=1in]{geometry}

11. Creating Hyperlinks

E,

Add hyperlinks using the hyperref package:

CS

\usepackage{hyperref}
Then use:
\href{https://www.example.com}{Click here to visit example.com}

12. Environments

LaTeX uses environments for specific tasks:

itemize: Unordered lists.

enumerate: Ordered lists.
figure: Insert images and figures.
table: Insert tables.
align: For aligning mathematical equations.

13. Page Breaks

You can force a new page using:

\newpage: Ends the current page.

\pagebreak: Suggests a page break.

45
14. Custom Commands

You can create custom shortcuts with \newcommand.

Example:
\newcommand{\myname}{John Doe}
Usage:
Hello, my name is \myname.

15. Comments

Comments in LaTeX are denoted with %. LaTeX ignores these during compilation.

% This is a comment
This text will appear in the document.

I
LaTeX Tools

EC
Here are a few tools that are helpful for LaTeX users:
• Overleaf : An online LaTeX editor. No installation is required. Overleaf website
• TeX Live: A LaTeX distribution that includes all LaTeX tools and packages.
• MikTeX: Another LaTeX distribution, mostly used for Windows users.
G
• Editors: TeXworks, TeXShop, or LyX as o#ine LaTeX editors.
E,

Common LaTeX Packages

Packages add additional features. Some common ones:
• graphicx: For including images.
CS

• amsmath: For advanced math formatting.

• geometry: For customizing margins.
• hyperref : Adds hyperlinks.
• biblatex: For advanced bibliography management.
Result
Successfully created and compiled a basic LaTeX document, demonstrating understanding
of its structure and basic commands.

46
 13. Familiarisation of Development Environments
Aim
To familiarize with popular development environments such as Visual Studio Code, Sublime
Text, and Atom, focusing on their features, interface, and basic usage for programming and
text editing.

Description
A development environment is the workspace where programmers create, test, and refine
their code. Think of it as a virtual toolbox for building software. It provides a structured
setup like:
• Write Code: Use editors to create scripts and programs.
• Run Code: Execute the programs to see the output or identify errors.
• Debug Code: Find and fix issues in your code.

I
Some of popular IDE’s are :

1. Visual Studio Code (VS Code)

EC
Visual Studio Code (VS Code) is a free, open-source, and highly versatile code editor
developed by Microsoft. It is widely recognized as one of the best tools for beginners
stepping into the world of programming, o!ering a combination of simplicity and pow-
G
erful features. Let’s delve deeper into why VS Code is an excellent choice and explore
its features and benefits in detail.
E,

Why Choose Visual Studio Code?

VS Code stands out among other editors due to its lightweight design, ease of use, and
extensive functionality. It supports multiple programming languages right out of the
box, making it a one-stop solution for learners exploring various coding paths like web
CS

development, data science, and app development.

Key Features
(a) IntelliSense: Smarter Coding Made Easy - IntelliSense is a standout feature
of VS Code that o!ers intelligent code suggestions, autocomplete, and syntax high-
lighting. This makes coding more e”cient by reducing the likelihood of errors and
helping beginners understand the structure and syntax of programming languages.
(b) Built-in Terminal - The integrated terminal allows you to run commands, test
scripts, or execute programs directly within the editor. This eliminates the need
to switch between applications, streamlining your workflow and saving time.
(c) Extensions Marketplace - The Extensions Marketplace in VS Code is a treasure
trove of tools that can enhance your coding experience. With just a few clicks, you
can add support for specific programming languages (like Python, JavaScript, or
C++), frameworks (like React or Angular), or utilities (like linters and debuggers).
Beginners can explore extensions like Prettier (for code formatting) and Live Server
(for real-time web development).
(d) Version Control with Git Integration - Git integration is built directly into
VS Code, enabling you to track changes, commit updates, and collaborate with

47
 others through platforms like GitHub. For beginners, this provides an excellent
opportunity to learn version control—a critical skill for developers.
(e) Debugging Made Simple - VS Code includes debugging tools that help you
identify and fix errors in your code. For beginners, this feature provides a clear
and interactive way to understand program behavior, making debugging less in-
timidating.
(f) Cross-Platform Support - Whether you’re using Windows, macOS, or Linux,
VS Code is available for all major operating systems, ensuring accessibility and
consistency across devices.
(g) Customization and Themes - VS Code allows you to personalize the editor to
your liking. You can choose from a variety of themes, fonts, and layout configura-
tions, creating a coding environment that suits your style and comfort.
(h) Learning Resources and Community Support - The popularity of VS Code
means there are countless tutorials, forums, and documentation available online.
As a beginner, you’ll never feel stuck since the community is always ready to help.

I
EC
G
E,
CS

Figure 42: VS Code

2. Sublime Text
Sublime Text is a sleek, lightweight, and highly e”cient text editor, widely regarded as
a go-to tool for beginners stepping into programming. Known for its speed, simplicity,
and ease of use, Sublime Text provides a distraction-free environment that is perfect
for writing and managing code.

Key Features of Sublime Text

(a) ”Goto Anything” for Quick Navigation - Sublime Text’s ”Goto Anything”
feature allows you to jump to files, lines, or specific symbols within a project
instantly. By simply typing part of a file name or function, you can access what
you need without wasting time, making navigation e!ortless.
(b) Multiple Selections and Editing- One of the standout features of Sublime Text
is its Multiple Selections capability. This allows you to select and edit multiple

48
 lines or instances of text at once, saving time and making repetitive tasks like
renaming variables incredibly simple.
(c) Command Palette for Easy Function Access- The Command Palette is a
versatile tool that provides quick access to various commands and functions with-
out navigating menus. Whether you need to change settings, sort lines, or install
a plugin, it’s all just a keystroke away.
(d) Distraction-Free Mode- Sublime Text’s Distraction-Free Mode removes all UI
elements, leaving only the code on the screen. This clean and focused interface
is ideal for beginners who want to concentrate on coding without unnecessary
distractions.
(e) Split Editing - With Split Editing, you can open and view multiple files or sections
of a single file side by side. This is especially helpful when working on related code
files or referencing documentation while writing code.
(f) Extensibility with Packages - While Sublime Text is lightweight and minimalist
by default, you can enhance its functionality using packages and plugins. The
Package Control system lets you browse and install extensions, such as linters,
debuggers, and language-specific tools.

I
(g) Cross-Platform Support - Sublime Text is available on Windows, macOS, and

EC
Linux, providing a consistent experience across operating systems. This makes it
a flexible choice for beginners who might work on di!erent platforms.
(h) Syntax Highlighting and Code Snippets - Sublime Text supports syntax high-
lighting for a wide range of programming languages, making code more readable.
G
It also comes with built-in code snippets that help beginners write boilerplate code
faster.
Advantages of Sublime Text for Beginners
E,

• Sublime Text is incredibly fast, even with large files. It launches almost instantly
and runs smoothly on most systems, making it ideal for beginners with older or
less powerful computers.
CS

• Unlike more complex editors or IDEs, Sublime Text o!ers a minimalist design
that is easy to learn and navigate, making it perfect for those just starting their
programming journey.
• Beginners can customize Sublime Text to suit their preferences, from color schemes
and themes to keyboard shortcuts. This level of customization ensures a comfort-
able coding environment.
• While editors like Visual Studio Code or Atom might feel overwhelming with their
extensive features, Sublime Text’s simplicity ensures that beginners are not bogged
down by unnecessary options.
• Sublime Text does not require an internet connection for most of its functionality,
allowing beginners to practice coding anywhere.

Drawbacks
• Limited Built-In Features: Sublime Text lacks integrated tools like Git support,
debugging, or live server options found in editors like VS Code. These can be
added via packages, but may require additional setup.
• Paid License: While Sublime Text is free to use indefinitely with occasional prompts
to purchase, a one-time license fee is required for unrestricted usage.

49
 Figure 43: Sublime Text

• Smaller Ecosystem: Sublime Text has fewer plugins and community resources

I
compared to editors like VS Code or Atom.

3. Atom
EC
Atom is a free and open-source text editor developed by GitHub, widely regarded for
its simplicity, collaborative features, and robust customization options. Designed with
beginners in mind, Atom is an excellent tool for those stepping into programming and
G
looking for a supportive environment to grow their skills.

Key Features of Atom

E,

(a) Teletype: Real-Time Collaboration - Atom’s standout feature, Teletype, en-

ables real-time collaboration by allowing multiple users to work on the same code-
base simultaneously. This is particularly beneficial for group learning, coding
CS

projects, and mentorship sessions, making Atom a social and engaging platform
for beginners.
(b) Seamless GitHub Integration - Since Atom is developed by GitHub, it in-
tegrates e!ortlessly with Git and GitHub. This lets beginners practice version
control—an essential skill in software development—without needing to leave the
editor. You can stage, commit, and push changes directly, simplifying the learning
curve for managing code repositories.
(c) Customizability - Atom is highly customizable, allowing users to tweak nearly
every aspect of the editor to suit their preferences. Beginners can explore a wide
range of themes, plugins, and configurations to create a workspace tailored to their
needs. Whether you want a dark theme for late-night coding or an extension for
language-specific support, Atom has you covered.
(d) Package Ecosystem - Atom has a vast library of community-developed pack-
ages that enhance its functionality. Beginners can install packages to add linters,
formatters, debuggers, or support for additional programming languages. Popu-
lar packages like platformio-ide-terminal, emmet, and atom-beautify help simplify
coding tasks and improve productivity.
(e) Cross-Platform Compatibility - Atom runs smoothly on Windows, macOS, and
Linux, ensuring that beginners can use it regardless of their operating system. Its

50
 consistent interface across platforms ensures a seamless experience when switching
devices.
(f) Multi-Language Support - Atom supports multiple programming languages out
of the box, making it a versatile choice for beginners exploring di!erent areas of
coding, from web development to scripting and more.
(g) Simple Learning Curve - Atom’s interface is clean and beginner-friendly, making
it easy to navigate even for those with little to no prior coding experience. The
editor includes intuitive features like a file tree view, fuzzy file finder, and syntax
highlighting.
Advantages of Atom Compared to Other Editors
• Atom’s real-time collaboration features set it apart from many other text editors,
making it ideal for team projects and group learning.
• While editors like Sublime Text o!er customization, Atom excels with its open-
source nature and extensive library of free packages, giving beginners endless pos-
sibilities to modify their coding environment.
• Unlike Visual Studio Code, where Git integration is robust but may seem advanced

I
for some beginners, Atom’s GitHub-centric design simplifies version control for
first-time users.

EC
• Unlike some editors or IDEs that come with paid versions, Atom is entirely free
and open-source, ensuring accessibility for everyone.
• Being developed by GitHub and having an active community, Atom provides a
G
wealth of tutorials, forums, and documentation to support beginners in their learn-
ing journey.
Drawbacks to Consider
E,

While Atom o!ers many advantages, there are a few aspects to keep in mind:
• Performance: Atom can be slower compared to lightweight editors like Sublime
Text or faster options like Visual Studio Code, especially when working on large
CS

projects.
• No Built-In Debugger: Unlike IDEs or even VS Code, Atom does not come
with a built-in debugger. Beginners may need to rely on external tools or packages
for debugging.

51
 I
Figure 44: Atom

Result

EC
Gained hands-on experience with Visual Studio Code, Sublime Text, and Atom, under-
standing their features, interface, and how to use them e!ectively for development tasks.
G
E,
CS

52
 14. Introducing Repositories - Git / Bitbucket
Aim
To understand the concept of repositories and familiarize with version control systems like
Git and Bitbucket, including basic operations such as creating, cloning, committing, and
pushing changes.

Description

A repository (repo) is a storage space where your project’s files, along with their revision
history, are saved. Repositories allow you to:
1. Version Control: Track changes to your code over time.
2. Collaboration: Work with others on the same project without overwriting each other’s
work.
3. Branching: Experiment with new features without a!ecting the main project.
4. Backup: Safeguard your work by syncing it to remote repositories like GitHub or

I
Bitbucket.
Repositories
1. Git: The Version Control System
EC
Git is an open-source version control system that helps track code changes and fa-
cilitates collaboration. It works both locally (on your computer) and remotely (on
G
platforms like GitHub, GitLab, or Bitbucket).

Basic Git Commands:

E,

(a) Initialize a Repository

CS

(b) Add Files to Stage for Commit

(c) Commit Changes

53
 (d) Push to a Remote Repository

(e) Clone an Existing Repository

2. Bitbucket: A Remote Repository Hosting Service

Bitbucket is a web-based hosting service for repositories, developed by Atlassian. It
supports Git (and Mercurial) repositories and is widely used for collaborative develop-
ment.

I
EC
Why Use Bitbucket?
• Private Repositories: Free private repositories for small teams.
• Integration with Atlassian Tools: Works seamlessly with Jira, Trello, and Conflu-
ence.
G
• Pull Requests: Facilitate code reviews and collaboration before merging changes.
• Pipelines: Automate testing and deployment with built-in CI/CD features.
Getting Started with Bitbucket:
E,

(a) Create an Account: Sign up at Bitbucket.org.

(b) Create a Repository:
CS

• Navigate to your dashboard and click ”Create Repository.”

• Choose repository type (Git), visibility (private/public), and provide a name.
(c) Clone the Repository Locally:

(d) Collaborate with Team Members:

• Add team members to your repository.
• Use pull requests to review and merge code changes.
Result
Successfully learned how to create and manage repositories using Git and Bitbucket, perform
basic version control operations, and collaborate on projects e!ectively.

54