Web Development 101

It’s helpful to know some basics of coding and networks to understand the fundamentals of the web. In front-end development, there are core principles that apply regardless of the framework you’re using. Understanding them will give you a solid grasp of a website’s structure.

To begin, I’ll list some essential concepts. It is highly recommended to put an eye on these to improve your understanding. Trust me, once you get the idea of how the internet works, everything will start to make more sense.

ISP (Internet Service Provider)
DNS (Domain Name System)
Domain
Hosting
IP Address
HTTP
HTTPS
SSL
Web Server

While the list above covers the theory of how the internet delivers a website, let’s move on to the practice of how a web page is actually made and what its main components are.

index.html

index.html is a universal standard. When a web server is not given a specific file to retrieve, it will look for and serve index.html by default. Nowadays, it’s common practice to accompany the HTML file with two additional files: one for styles (.css) and one for functionality (.js). These are then referenced from within the HTML code. However, in some cases, this code can be embedded directly in the HTML file.

Here is an example of each approach:

Common Practice (External Files)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Page</title>
    <link rel="stylesheet" href="styles.css">  <!-- Reference to external CSS file -->

</head>
<body>
    New Code
</body>
<script src="script.js"></script> <!-- Reference to external JavaScript file -->
</html>

Embedded code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My New Page</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
        margin: 0;
        padding: 20px;
    }
    </style>

</head>
<body>
    <h1>Welcome to My New Page</h1>
    <script>
        console.log("This is a new script");
    </script>
</body>
</html>

The difference is that the first example links to and loads external files, while the second has the CSS and JavaScript code included directly within the HTML document itself.

style.css

Either you opted for a referenced file or an embedded code, if you want to improve the visual aspect of your web page it’s necessary to add some styling, that’s when our style.css file or <style></style> comes to action.

This file will be responsible of the visual aspects (…and in some cases of the interaction) of your web page or web app, by changing the visual attributes of your web, as could be the fonts, backgrounds, boxes, etc.

An important aspect of this is that if you want to make it properly you also will need to take into account the ids and classes of you html file, because that will help you saving lot of time. Ids. and Class attributes in HTML and CSS play a very important role, by avoiding self repeating and keeping organized the code. Id attributes can be called only once and in css as referred with the symbol # and class attributes are referred with a “.” at the beggining of its definition.

Here’s a small example (For improving the readability and understanding we will work with the “external files” scenario):

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

    <div id="about-container">
        <a href="https://imaluis.com"><img src="/image.jpg" alt="Your Name" class="profile-picture"></a>

        <h1>LF</h1>
        <h2>Web Developer | Tech Enthusiast</h2>

        <p class="bio">
            Hello! 👋 I'm a passionate developer with a love for creating clean, efficient, and user-friendly web applications. Feel free to connect with me through my social links below.
        </p>

        <div class="social-links">
            <a href="https://www.linkedin.com/in/soyluisdev/" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
            <a href="https://github.com/soyluisdev" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
            <a href="https://x.com/soyluisdev" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
            <a href="mailto: hello@imaluis.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a>
        </div>
    </div>

</body>
</html>

styles.css

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #040409;
    color: #333;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#about-container {
    max-width: 500px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 40px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.profile-picture {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover; 
    border: 4px solid #f0f2f5;
    margin-bottom: 20px;
}

h1 {
    font-size: 2em;
    margin: 0;
    color: #1c1e21;
}

h2 {
    font-size: 1.1em;
    color: #65676b;
    font-weight: 500;
    margin: 5px 0 15px;
}

.bio {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
}

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 15px; 
}

.social-links a {
    text-decoration: none;
    color: #333;
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: #007bff; 
    transform: scale(1.1); 
}

As you can see, one of the advantages of referrencing is that you can import multiple .css files. In this case we included the Font-Awesome Library (https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.cs) to show some icons.

Here you can see a preview of how the code looks.

script.js

Last but not least, a key element for adding functionality to a webpage is JavaScript (or a .js file). Most of the time, it’s responsible for the page’s interactions. In this case, since we’ve already created an “about me” card, we can add functionality to it. For example, we could add a button that makes the card switch between a dark and light mode when clicked.

How does javascript works?

Since JavaScript is designed for the web, every browser is built to load all the elements retrieved from a server. One of these elements is the JavaScript file (e.g., script.js) or the script tags included directly in the index.html file. This code interacts with the page through the DOM (Document Object Model) to add or modify different attributes, as shown in the following example:

script.js

const themeToggle = document.getElementById('theme-toggle');
const themeIcon = themeToggle.querySelector('i');
const body = document.body;

themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    if (body.classList.contains('dark-mode')) {
        themeIcon.classList.remove('fa-moon');
        themeIcon.classList.add('fa-sun');
    } else {
        themeIcon.classList.remove('fa-sun');
        themeIcon.classList.add('fa-moon');
    }
});

styles.css


:root {
    --bg-color: #f0f2f5;
    --card-color: #ffffff;
    --text-color: #333;
    --heading-color: #1c1e21;
    --subtle-text-color: #65676b;
    --border-color: #e0e0e0;
    --accent-color: #007bff;
}

body.dark-mode {
    --bg-color: #18191a;
    --card-color: #242526;
    --text-color: #e4e6eb;
    --heading-color: #e4e6eb;
    --subtle-text-color: #b0b3b8;
    --border-color: #3a3b3c;
    --accent-color: #4dabf7;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

.about-container {
    position: relative;
    max-width: 500px;
    background-color: var(--card-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 40px;
    border: 1px solid var(--border-color);
    transition: background-color 0.3s, border-color 0.3s;
}

#theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--subtle-text-color);
    transition: color 0.3s, transform 0.3s;
}

#theme-toggle:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.profile-picture {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-color);
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

h1 {
    font-size: 2em;
    margin: 0;
    color: var(--heading-color);
    transition: color 0.3s;
}

h2 {
    font-size: 1.1em;
    color: var(--subtle-text-color);
    font-weight: 500;
    margin: 5px 0 15px;
    transition: color 0.3s;
}

.bio {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 25px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-links a {
    text-decoration: none;
    color: var(--subtle-text-color);
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

In this case, the code works by using two methods: querySelector and getElementById. It attaches an event listener to the “theme-toggle” button, which uses an arrow function to toggle the “dark-mode” class on and off.

Perfect, now that we have the html, css and js, we have covered all the basics of web development and at the same time we created a nice business card for web.

Hover Icons

Cursor Mouse