DEV Community: Jonathan Peters

Building a simple TCP port scanner in C

Jonathan Peters — Fri, 03 Oct 2025 10:46:49 +0000

Building A Simple TCP Port Scanner in C

Overview

This project demonstrates how to build a basic TCP port scanner in C. Port scanning is a technique used to determine which ports on a target host are open. This knowledge is essential for network administration and security.

Features

Scans ports 1–1024 (well-known ports) on the target (default: localhost)
Reports open ports to the console
Easy to extend for remote targets and custom port ranges

How It Works

Uses TCP sockets to attempt connections to each port.
If a connection succeeds, the port is open.
Each port is scanned sequentially.

Getting Started

Prerequisites

GCC or any C compiler
Unix-like OS (Linux, macOS)

Build

gcc -o port_scanner port_scanner.c

Run

./port_scanner

Code Explanation

#include <stdio.h>
#include <sys/socket.h>
#include <netinet/in.h>
#include <arpa/inet.h>
#include <unistd.h>

int main() {
    int sockfd;
    struct sockaddr_in serv_addr;

    serv_addr.sin_family = AF_INET;
    serv_addr.sin_addr.s_addr = inet_addr("127.0.0.1"); // Scan localhost

    for (int port = 1; port <= 1024; port++) {
        sockfd = socket(AF_INET, SOCK_STREAM, 0);
        if (sockfd < 0) {
            perror("Socket creation failed");
            continue;
        }
        serv_addr.sin_port = htons(port);

        if (connect(sockfd, (struct sockaddr *)&serv_addr, sizeof(serv_addr)) == 0) {
            printf("Port %d is open\n", port);
        }
        close(sockfd);
    }
    return 0;
}

Set up the target address for scanning (127.0.0.1).
Iterate over the desired port range.
Create a new socket for each port.
Attempt to connect to each port.
Print open ports.
Close the socket to avoid resource leaks.

Tips and Tricks

Use multithreading for faster scanning.
Set timeouts to avoid hanging on closed ports.
Accept IP/port range as input for flexibility.

Extensions

Scan remote hosts by changing the IP address.
Scan custom port ranges.
Output results to a file.

Resources

Learning Path

Learn C and systems programming basics.
Study networking fundamentals.
Explore advanced topics like multithreading and asynchronous I/O.

Happy Scanning!

A responsive footer menu with social media icons

Jonathan Peters — Sat, 03 May 2025 21:36:04 +0000

Lets start with the HTML Code:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Footer Menu</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
</head>
<body>
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-social">
                <a href="https://wa.me/your-number" target="_blank" class="footer-social-icon">
                    <img src="whatsapp-icon.png" alt="WhatsApp">
                </a>
                <a href="https://www.facebook.com/your-profile" target="_blank" class="footer-social-icon">
                    <img src="facebook-icon.png" alt="Facebook">
                </a>
                <a href="https://www.linkedin.com/in/your-profile" target="_blank" class="footer-social-icon">
                    <img src="linkedin-icon.png" alt="LinkedIn">
                </a>
            </div>
            <div class="footer-links">
                <a href="#" class="footer-link">Terms & Conditions</a>
                <a href="#" class="footer-link">Privacy Policy</a>
                <a href="#" class="footer-link">Contact Us</a>
                <a href="#" class="footer-link">About Us</a>
            </div>
        </div>
    </footer>
</body>
</html>

Next up, time to add some CSS Styling
CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
}

.footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-social {
    margin-bottom: 20px;
}

.footer-social-icon {
    margin: 0 10px;
}

.footer-social-icon img {
    width: 30px;
    height: 30px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: white;
    margin: 5px 15px;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

@media (min-width: 600px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer-social {
        margin-bottom: 0;
    }

    .footer-links {
        justify-content: flex-end;
    }
}

Last but not least, lets add some JavaScript:
JavaScript:

// JavaScript code if needed for future enhancements
document.addEventListener('DOMContentLoaded', function() {
    // Placeholder for any future JavaScript functionality
    console.log("Footer loaded");
});

Code Explanation:

1. HTML:
We create a footer element with a class of footer.
Inside the footer, there's a footer-container which contains two main sections: footer-social and footer-links.
footer-social contains anchor tags (<a>) with links to WhatsApp, Facebook, and LinkedIn. Each anchor tag wraps an image representing the social media icon.
footer-links contains anchor tags pointing to different pages such as Terms & Conditions, Privacy Policy, Contact Us, and About Us.

2. CSS:
Basic styles are applied to all elements to ensure consistent box-sizing and remove default margins and paddings.
The body is set to use flexbox to ensure the footer is positioned at the bottom of the viewport.
The footer section has a dark background color and white text, with padding for spacing.
The footer-container uses flexbox to align its children elements in a column on small screens and a row on larger screens.
Social media icons are styled to have a specific size, and links are styled for better visibility and interactivity.

3. JavaScript:
A basic JavaScript snippet is included to handle any future enhancements. Currently, it only logs a message when the footer is loaded.

Tips & Tricks:

Responsive Design: Use media queries to adjust the layout for different screen sizes. Here, we switch from column to row layout on screens wider than 600px.
Flexbox: Utilizes flexbox for easy alignment and spacing of elements.
External Links: Ensure social media links open in a new tab using target="_blank".
Accessibility: Provide descriptive alt attributes for images to improve accessibility.

What is an API? & How can i start building API's using JavaScript???

Jonathan Peters — Sat, 03 May 2025 21:00:07 +0000

What is an API?

An API (Application Programming Interface) is a set of rules and protocols that allows two applications to communicate with each other. Think of it as a bridge that enables software systems to exchange data and functionality.

For example:

When you use a weather app on your phone, it fetches live weather data from a remote server using an API.
APIs allow developers to access features or data from external systems without needing to know how those systems are implemented.

Types of APIs

REST API (Representational State Transfer): Based on HTTP methods (GET, POST, PUT, DELETE).
GraphQL API: Allows fetching specific data using queries.
SOAP API (Simple Object Access Protocol): Uses XML for communication. ** Getting Started with Building APIs using JavaScript** To build APIs with JavaScript, you can use Node.js. Here's a step-by-step guide:

1. Install Node.js
Download and install Node.js from https://nodejs.org.
Verify installation:
bash:
node -v npm -v

2. Set Up a New Project
Create a new folder for your project:
bash:
mkdir my-api cd my-api

3. Initialize the project:
bash:
npm init -y

This will generate a package.json file

4. Install Express.js
Express.js is a popular framework for building APIs with Node.js.
bash:
npm install express

5. Create a Basic API
Here's a simple example to create a REST API:
JavaScript:

// Import the Express.js library
const express = require('express');

// Initialize the Express app
const app = express();

// Middleware to parse JSON data
app.use(express.json());

// Define a simple GET endpoint
app.get('/', (req, res) => {
  res.send('Welcome to my API!');
});

// Define a GET endpoint for retrieving data
app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ];
  res.json(users);
});

// Define a POST endpoint for creating data
app.post('/api/users', (req, res) => {
  const newUser = req.body; // Get data from the request body
  newUser.id = Date.now(); // Generate a unique ID
  res.status(201).json(newUser); // Respond with the created user
});

// Start the server
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

6. Run the API
Save the file as index.js and run:
bash:
node index.js

Access the API endpoints in your browser or using tools like Postman or cURL:
GET / → http://localhost:3000/
GET /api/users → http://localhost:3000/api/users

Step-by-Step Explanation of the Code

Import Express.js:** const express = require('express'); imports the Express.js module. 2. Initialize the App: const app = express(); initializes the application. 3. Middleware: app.use(express.json()); allows us to parse JSON data in API requests. 4. Define Endpoints: app.get() handles GET requests. app.post() handles POST requests. 5. Start the Server: app.listen(PORT, callback) starts the server and listens for incoming requests.

Tips & Tricks

-Use Postman or Insomnia to test your API endpoints.
-Use nodemon to automatically restart your server during development:
bash:
npm install -g nodemon nodemon index.js

Further Study

-Learn about HTTP Methods (GET, POST, PUT, DELETE).
-Explore middleware in Express.js (e.g., authentication, logging).
-Learn about CORS (Cross-Origin Resource Sharing) if you’re making API calls from a frontend.
-Learn to handle and validate request data using libraries like Joi or express-validator.